{"maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"keywords":["material components","material design","density","adaptive layout"],"dist-tags":{"nightly":"12.0.0-nightly.778a0e8a.0","latest":"14.0.0","canary":"15.0.0-canary.423edc3dc.0"},"description":"Density utilities for Material Components for the web","readme":"","repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"license":"MIT","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"versions":{"4.0.0-canary.0":{"name":"@material/density","version":"4.0.0-canary.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@4.0.0-canary.0","maintainers":[{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1fb9e7d6d3684dccb0c712091f5044dfb78e47c5","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-4.0.0-canary.0.tgz","fileCount":6,"integrity":"sha512-NNMNJGO7xTqrb5nEakfrksPN/7sxlyao1k2ruhfrFL0kpzhTJtP5iKjkKf1eh5xx7Ub1VECgZ8XQVkVWgkrsYg==","signatures":[{"sig":"MEUCIA6MCt4dyTDkFOjLH42J8iFCMmCnVEYmmDt+YtxaWElXAiEAlA5vzpg8aGkFURcjhlULC2o79oji5BbYnME98WexkRs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12955,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdcJEMCRA9TVsSAnZWagAArzcQAIgRbz8CaDY9MB9wjSTu\nM9p29Up3iRPYiGHePk/O/Y4LOKOJNXzgqZqXhK2xEGqy0Xcb7e/Zn1d70EmG\n/IJzx2HaqKbV3o7MCpTqyB2zxbcEb1jDmjdSNqcAjid1X1gOm7xMdaZZrzPn\nOSAXGX0mNpjCKXAzjpF7OJ5Gf1uH+T4BwF5WRYEtZq5zXIehwEkA7507FRvN\n34f+AK0+pT2xOIkbatIT+kIl8KjknlXjSwCI/hiJLxrFYdl3NhAhUJT36j9e\n/hXvwyTQ5/vf4nBT6tbit4JogsxrIqyDhwzIYeHqpYHM7uuDt8QziOqo5gFC\nQlOVt8R5LWnZrrhhO4cMK4pZxMpVyqFxYX/ly1+7yIonkk342EXkL2Ht6ZqN\nUdwJKVafvUj4M6s8sQ6rrFgslzOK5ez2ZKbKRG9E17fCypZb26+OFrZK1GGK\n3L1wA9w5j2jyH7jkBo1f2gNL0pjYEDSneUtdgQLiGTkUIJz0Y1I1jMn1MMv0\nCvnQnEDs+rcEpA7K0hHW4SKjX9rOTbsykN3BolymfdN75UNhTmD6aoHnygd2\n1IfrZzpvaA09pv+JEK0sUelUPELVUxouGUvHPphAub41BSBf6EjTkhGRgwJg\nwoTieCNn4kwkBNGZHLK87caY34Jcc4PZoVwZdBnVCe4cyzwB6eBiVE0yNhzZ\nbqTQ\r\n=aDf+\r\n-----END PGP SIGNATURE-----\r\n"},"gitHead":"a9e69493144f4246efe28a958126afc2fedebd60","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"8.16.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/density_4.0.0-canary.0_1567658251486_0.8438814293275192","host":"s3://npm-registry-packages"}},"4.0.0-canary.1":{"name":"@material/density","version":"4.0.0-canary.1","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@4.0.0-canary.1","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"97369254bc0a1735bc8a10bae57cffac3c65bf05","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-4.0.0-canary.1.tgz","fileCount":6,"integrity":"sha512-5X1g6T/uc72SSumBCrZeYEXyYnxJmCyQW5WbgOU8TGvmwSpKx4G3opkJ+t/StapsUKPvXMxzQsSKg6XIP3a/wA==","signatures":[{"sig":"MEUCIQCpJjg4d2E3EmgydMwkb45y7zKCw9SEXzhiqKehT54ueQIgbHOx0WEc/X9WiTWpS0Ambcq0f8UgPaA38LMVhMFXokM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":14683,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJddrQGCRA9TVsSAnZWagAAp2QP/1OwnF3fEgoJDwuLyHuc\nTlrrfz/jVWuKr2lNlWyS1Uu1zbsgB7FdhupcZOImHocAn61Oxi6eiuAovtb0\nX4ns5aW/Uvc39yzno/QANJxokyX9E6sIwauDBypQkId7YmN+CT+xn+XEUAf6\nJWlUiO6o0bXlKqVItb+0zKcNd/D7hOA4nqF01SEPTShV8Z7HT2gCYjZWNdBV\nocXvc7OOF9uBeDB5zuhi/HMu9bKNrGBEFPGwJQxjhsS2A0320DvG0+kmnZ6i\nP9wqfU4XJDymmQjg1CXKvwpyY8XUr3USaV+0pmvEW0IWuWQGpMLfhaQBqDw5\ngjsokXnZHHbgPMAcXQ8ATgNXjHptOHbWhaDlzReBRuoodjkvgt637gGUEH3q\n0qvP/GiYPIEEVMH7pXF6uWRLtg9alKVqsTx3/wiB27JXtea/kTEEMp6Gj4Sl\njvSY9tfUiXQuPKVzvNCxM+SDivCkty6qrzCMeNbbpkWx2JOCnyog4FnpEwhC\nEzXfY/Jv2EiM4V9F9PXUsOIV/05k3VrLO9mew68hAbm6P78BuEd3YVaFbhH8\nHdpA7pCWZ566fdGj5rjFmLKKYDPN2A24WZj3nzWiK9mNDLcRKbXo+xmWVF/f\nKWf7qAER13he7CndMbGHXZGz+R+71GRUDZKWfpdvrAECM/E3Exwt0HZ+x67w\n3Auh\r\n=J+4u\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components.\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n## Basic Usage\n\n### Styles\n\nThis package is used as utility for other components' density mixins. Mixin provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\n## Style Customization\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"edc72a4d7d6a61d61620fd05a80e2491e518bccf","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"8.16.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_4.0.0-canary.1_1568060421769_0.14168120187811328","host":"s3://npm-registry-packages"}},"4.0.0-canary.79d881baf.0":{"name":"@material/density","version":"4.0.0-canary.79d881baf.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@4.0.0-canary.79d881baf.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c258e7e3f683b78da7be8b51341126cf2be5c0dd","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-4.0.0-canary.79d881baf.0.tgz","fileCount":6,"integrity":"sha512-TPBsMdYqcGtTJJVsIFWVB8mRUtpfvu2dZvX+wHpfLn4FfmO4xq/3KHcqTPWx0tBUNskD5sF3wy8E6uq0jS+zyA==","signatures":[{"sig":"MEUCIBAgzzXbd7rosR3gAU04CegjAakzujuh43PUbYvGzGKwAiEAl4DhzosP7eXNiWFA2A6p/hKEEIW1ReODHcdZ06bmw3w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":19083,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdev0aCRA9TVsSAnZWagAAyX4P/0/szBHStKR2LHYeL6XY\nxZ0N7hSW8V8T3RinQ/UYJ0pCRCo6SosO/yPUAWOCHbjeFkxPG6r8H0o6Y4cV\npS910bCLfxOfKXeYyTIAA+DVA0RFBiWvb5tF0lVJ2XUaNY+blZK//7UYbDKf\nSEjNnvsG5IKl4NQ41AZdbtWud30uk/w1HXBjJCBb3Bu1BNnp7o9jATTmRjVX\n90HHfIwEfQsEcwEFr0Py8rM1ZuOFH0+QqeAhqRLOEKZH0fCSRzbmCkAfZqUq\nAdLzaM90s4PKhHA1y+HG8H5tw47NvptEZk2HOkmtwRhDcyGbawtgKb5ZJuP2\nW4AZUO3AwjD0nJDyz4dE7T6DLty1nVI5Z7zdYxRq5Va/1Bi2vpFPqmW9sGhY\ndRh+q85OkMb4qNJmzpvwkLuC4zNo0pT9s0/ohGF9xr0ADeTChd8tYpW1AjZn\n0K2ArioilZZWN4bS/N5CfGsvdmwK9r331kgdsCRap0PNM7B4oE9m4B/PZA4/\nr8JuiYEehVKYTN9c0gcUG+XqQbuNbuXEh/tFQcfgEaBE3+lfrmshRVTc/gZL\nB+vHlFMVo0JpVzOUkQFq4p2blbxtOUkudh4KgsW/lwZ/peggrrqsCufMl1ZE\nlc9dVDTIziDJBNUlsRgmjLO5Gq/wSht/jFXgItDnrVxnUo8rvo/HlOFcjsO2\n8wke\r\n=8KME\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components.\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n## Basic Usage\n\n### Styles\n\nThis package is used as utility for other components' density mixins. Mixin provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\n## Style Customization\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"756806a2389389441b5b3c130de02948130d96b9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v12.10.0+x64 (darwin)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"12.10.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_4.0.0-canary.79d881baf.0_1568341273799_0.09219146985574933","host":"s3://npm-registry-packages"}},"4.0.0-canary.e851d4f40.0":{"name":"@material/density","version":"4.0.0-canary.e851d4f40.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@4.0.0-canary.e851d4f40.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e4b336bbba21bb7d77fd88f37628f67667a411ce","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-4.0.0-canary.e851d4f40.0.tgz","fileCount":6,"integrity":"sha512-v2nHSv1G9c57yUEZ3UmAvt00DHshA6gmM1gb023D0gxtirC4dQiwOEnwmdEJsuLNPwo9zlcLUezgisZikLzr/Q==","signatures":[{"sig":"MEQCIDwSe3TiXhmx4JoH9LLpiNdS9K4DXkWQYok7uDwJhksKAiB5ipEzNvwAA3gnfdrxXZTeDcZqDk645/gKflsSCBurEQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24715,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdexXeCRA9TVsSAnZWagAAP9AQAIfDMO2xVrfksmDiyed/\n7+jvvz4jE7MKY0B6hr1+5SwGb9/QwqRjqZ9atwHYjKOTxnNUy0LaKBlK7940\niCC1qLFWf0oeLSlJcarGhlDDtsi6plM6SrdaMa5UO1QwrniKQBp4BD/FsmCZ\nIwwzK0V2nZBVj9abKr0Se1O+xB6KSX9SmJ3voo3b7J9IR0BI7Ppvb2HTMoWX\nMeHl8zSnsXvYPWE9Izd0Ff0VqmPmL9xrqBoBdPg+vSGVpNoro+jwqJ2xoHA/\nY3Jgk+4M+vlJ5FEBW3i038A7UyRZ5tqqo8N3JEhXbfduc0gWhZjIH2MfwIsy\nsXyrjkTQNQl1EeVvPYF0UDphG5Zj5vDN3RAksSWsP1D7X5btUmbvQvINN5Gn\ns8Mm+68GcIi+ft+xvFbBqscE2X3RX6lkX5ehVMgoNlvphAD9tzSrGzfluP1+\nesqoi79p/Q7et2L63eHMVhTU5iKgb+xsNRZVeyjXAYf1787ES/BPjbw0JAK2\noAmoWRbh9gevMc9KIx5aFGu8mzUrAk20BmMa9dJpAwKvvXqEpWhFd6uoFiiB\n4H2I36CgujmSBxz59uYVzJQ1dfp98dyoQUQJ6QwnmmMowSQRTPnona9dxse3\ngxTg8mcxSXRWaCuq4bHzoVVRH+TzNiek7ShaS/X+dmiRBaaTKaXcProakfG5\ntNDc\r\n=Zcpe\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components.\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n## Basic Usage\n\n### Styles\n\nThis package is used as utility for other components' density mixins. Mixin provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\n## Style Customization\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"353401bd143fdc2b4a85abf330176228e21dfe13","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v12.10.0+x64 (darwin)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"12.10.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_4.0.0-canary.e851d4f40.0_1568347614079_0.4361669054437065","host":"s3://npm-registry-packages"}},"4.0.0-canary.905884690.0":{"name":"@material/density","version":"4.0.0-canary.905884690.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@4.0.0-canary.905884690.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aed4d3d650dc11c613081835c9c4e1dd7dfb9969","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-4.0.0-canary.905884690.0.tgz","fileCount":6,"integrity":"sha512-XvI6F/Ks1/UowGgRfLVkMC21UPf8IGrru1+O25PLfpQe42x0Ww6ipJ9vU6mtviiiASIyVbGv411WbatgfE2lSw==","signatures":[{"sig":"MEUCIGV+agnjo5mFvNoqSRPR5pdtaxdbcQxRIGKIZq5Oho38AiEA5j2XLQGRcwK/sxVERj4ML9FRfNYPHyyow3MAzo9RROM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":25419,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdgB8jCRA9TVsSAnZWagAAuvAP/3ZrrRnF6AeZaW4u+oxO\n3/fgfdzZRxVnZjIpdrVb6xAJzS08uB6J7JYfYHBdHRrZ9NcRy417UYD4enJY\noKbk//xJU5elBuLenwc/iLbf1ipYfrtTbsawtbL9KOR1yNtjD8pIkGHrzlT/\nUmaP/bT8EuSblSiXm4LSr7JUv4eC9ChBEy/9U1v1bdzaIa6+dMLOtW8awCLO\nZrn87/qT0JNJorQRfwidmCSAI1qG+HB0uTSNxMvaf/120uC/zepF5Ieq+pMk\nC/0HMrZbArFQ386jpzvzCbLuT1B4M4oX1L/nrrekOBJJc1NVebwbEyMObv5R\nh7iVKSxcPd7uk2GeF8ndZcy3xFxilF4VTmMlJx80PfULMwBGuE7CtAOrN13z\nUpyg1Bmu6KeFz49jphzy4vnYpj8OC9xD5PK9//2DOLs91yl2Rjb4GI/VIcVQ\nl4eTQ3ZWjqyoRZr0O5+7wqWledQh94Lkj/ITSSDr7lldaHFk+wK1kZucMp4x\ns6JJmGrCoJhcTQLabcP5fWvHLKe/2H3eRVzyBHBALZ8qcFmLK73++Jpv2iD7\n0lfG1lZd6R2dvRrBWYu4byYCL4J9Qqjd3En+Og+qbjIgmAe09zQzkg/JkWha\nAeZB0fZvIR2x1VitRtbuy+ytkzLxQ05SvbVwYCkpLbOIY11TkX/JiFNUpdfz\nl3eO\r\n=KDwg\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components.\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n## Basic Usage\n\n### Styles\n\nThis package is used as utility for other components' density mixins. Mixin provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\n## Style Customization\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"df7fbf65943b1227b1bf145a2774abe7710b1e30","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.16.3","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_4.0.0-canary.905884690.0_1568677667017_0.9914377479129115","host":"s3://npm-registry-packages"}},"4.0.0-canary.199534d61.0":{"name":"@material/density","version":"4.0.0-canary.199534d61.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@4.0.0-canary.199534d61.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c61ec162dd4cbf21933496e0077382ebeb8c3e22","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-4.0.0-canary.199534d61.0.tgz","fileCount":6,"integrity":"sha512-7EOx0Wplem+zcG1V1UW+wqagtlqYNla7XvEFrRMaPCWLZICiV6lMpT8FWPFf8qGTnyhF74QOJIbcJHrIqp9kqg==","signatures":[{"sig":"MEUCIAcJmWQtiJWEKL9VSi7EboxLtsVwZxlR/yExkfP/UzKDAiEAvFD52+VI/da4a9ii8nvG+FDsPd4BFMwJfAw+IDGeYmY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":26565,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdjluVCRA9TVsSAnZWagAAAWYP/21pIS7IPIpVbVnirCSv\ng6ud3tBXwEvrB1HqJAf4YlmisaTEKuB2j6otYaRvLf6ghaDruzAbGrLTC/ww\nWFxW7VspyFvDBzMELx0skyekYET+JET9YzME34oq6RyCdLwBUDem9FRvxg30\n4nq+2CVw/yBhsd4dp0yfewzJA6XtgL5hY/yS+GSZO+0gPKseOsYhsgSaxpkl\nzukiLY7GrfmPPC6o/n3wFBPtd2VeSDnxZkO/QDwr/IQwU+yj2brFa4tapoit\nmxyUxF23xi7sl3t4szaObk9+gOdFAwZ2ij2QHBoeWbXM9+eBQ4tdJzOmUvFV\nuASvLga5SndGx/F3+u/p6HTK/zahzUlbKxTGwCef3MkwpfD9OQuXYTow9qe6\nYhSWbQKoh0sp6WgE7HU/MSpQe0qa5FYozj4BaIVzkQIUrmXjI6btUzv64KyW\n5nr8XMTVU7V75z5H0A/HWn1EKTY+emRwWYF7iiSxcm1DyK2Q2diR+S7yVoiU\nsWijwnmUy4vbvs7IBNpU4YV2+q39TGpJqLfv1R1nArbYr8IHWfS5ll8BFA1y\ndHJXy31C1huJacFFJ3SfaVOEVuCvX8crraNHTr7etzcKEghZXjCD1YTa/DGz\n4DsJguWhYY4ih4wRkAbwJ9vdKXtdJhVmYm2f9YiwBtRJ7iCX5J0kh8f6mUBo\nuDJl\r\n=8+HS\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components.\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n## Basic Usage\n\n### Styles\n\nThis package is used as utility for other components' density mixins. Mixin provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\n## Style Customization\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"c35810420b70c99e38a1438e1fd44e4bb84e21be","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.16.3","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_4.0.0-canary.199534d61.0_1569610645186_0.530615696007888","host":"s3://npm-registry-packages"}},"4.0.0-canary.22d7ad2fb.0":{"name":"@material/density","version":"4.0.0-canary.22d7ad2fb.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@4.0.0-canary.22d7ad2fb.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"83d29efaf100ac47490aedbb50def50c11a7f0b9","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-4.0.0-canary.22d7ad2fb.0.tgz","fileCount":6,"integrity":"sha512-p9Z7zHf6x6gf2z5ZxXftvJdRHYMH5XCxcxcMkdc8sB4fd+JVWl3Fu567Y8uDR3uAX72NGrEU4VKGCsq2sGSQ7g==","signatures":[{"sig":"MEQCIDPHkhfklHGZkApNKSubgxIUc9Za3GSeZEuGReSKu+UCAiAfY3F+RkYKpHo35bBkgUdYr1A7KIxW5PVhBfQcZpuA5A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":27717,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdphZ1CRA9TVsSAnZWagAAmGEP/2CrDykOCZUagnu28ppi\nBbMnAUdgSL3y/C9juWct0lgSIzsU3o/Iqqo2zmXZGRjiGBFAYuYLfyJ1WzW6\n+uHK0F55nC9dQYCWMDH974pG+st8q4BjD0DvRxhhXOVIZl7oe3WGAlwJZw0G\nYxz7cZrL+gfTpe4nkLycRMMa+FUXyS5LUQSi8l2z7MzY19oKAi2Yvjns/70v\nkNgXkFOarc3ZGPlhOzqdRu5BTJngjpoafxezNSJYvnl9pwyrrKC1EgDep50D\nlGYHpG8B09JiIJpRQgdbmcK2sXMdJcija1A3NXleKYYKXrN49n85VBRUYLdy\nuWvTYWmzOb1bkxq5VfUIljmsbeVP2gjboeGs7o9K6YYMqEoh8x8VPvyENfr8\nw5/lXoIosQUn0ushxrH4IBFYN3T/WF+HYxrSdruqBWIDaQsFXMIPXnKqeYAy\nOnBlUs1Mwa3W+ogtpAMdvFHgU1v+BGZS1raaaNAOdyA2hSdrK6TgixqL8Npp\n/VBFTvOtv/BvGEGbeC6VyfYouhyt9cTPbSDa4now7O0/CAmAiUoZp+yhxa5E\nyN8M4hzgwQLzmkoFPFADrT6URXa+W6TlNr1LYeT5rIDo44lZXHaEfeKxeLUs\nEaABDXVfAOFQ/nHsX8QJLMOZYtrgqGW1Bay3lyZBNmAFcDCkrvqB027Lqqpq\nSlSY\r\n=bwb5\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components.\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n## Basic Usage\n\n### Styles\n\nThis package is used as utility for other components' density mixins. Mixin provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\n## Style Customization\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"bdc05bd56f8cbc11face1f0f2787fdb17f450fe3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.16.3","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_4.0.0-canary.22d7ad2fb.0_1571165813110_0.24407857602711536","host":"s3://npm-registry-packages"}},"4.0.0-canary.735147131.0":{"name":"@material/density","version":"4.0.0-canary.735147131.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@4.0.0-canary.735147131.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c79e46927e9e9cc19911f780ff9f55e1411d5d7b","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-4.0.0-canary.735147131.0.tgz","fileCount":6,"integrity":"sha512-+Mi8x6ivA8P4DMgKC79hmOfx0xxDzizWDGpInJgQ7UBJB7tlpDE40x7tglBT6oBjYFF348od/4ECZFlpfQWteQ==","signatures":[{"sig":"MEYCIQCbN9l2wRR7NJQS6W6+1cKb+035NMXZiRM8k2GKQvdJewIhAJ9sRoTXkeS8Br2/M71ZWd1yKBSQYC6a6/B6zkFFKV2v","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":30021,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdpnEACRA9TVsSAnZWagAAXqsP/iFI4GcL3dQfhjZbPqlX\nJso+lA7o2Zne2ugjak1S12+iXPn2K8DVSOb/WQwJhdiO8Nqqvz4OBEm2qC9t\nDf7KxO88nZXx/PD3/gCpxz/W6lU8HqEj5c2J+j1qEFHfQNS96qK53Rh+Qs8O\nyuF0tqwho0d8vz5HVvDQE4RIVnUuPMhegkaFVR1sED6N+Xg6mDawl94HsRoi\nFVCUk3uzntLU8/6JC7Lf2OixmWy0w6r/l6wseM+Jsx/b16FR7Mg2cOioBDY/\nBMwBd8zBEZkl6O1mTSvFZ3eigWWMKoMxGjaIL0rXLkMUKizWv+lH9guXxOT/\nYf4WC+5EUvVwI3a7jtH94kzfm7iMUX+GaJfY6AfqBcdkQXClqZW7jyoyGuQR\nUKXfZxGRePXsu/TueDQf/tR2VJI8FTmuNmUCPqdPAzfTDaqweHiiXShCYs4L\nMlV1BtHMONoiSmnSikNYY4U1IqQ/wOxtJ3CZdX1sjV2UcIFs+uDWj47nsNZX\n1NKnZB9a4IBu1HgguFLqM7REOOT5mSgJL3WEz1hH7Bmq7UzT9ZP3AaK/zD4h\nBI2xzS6OXB0dIgEepzNw+LFK2bPeJ+sRyDqQfuUr4vOLeTkxG1C4CKBwwDGp\ngI24Pfw3d9goFKzrI08WcbCN8i4MtvZTd+NY9vtxleLACDsMiifc5cb84W1C\n/Q5w\r\n=wsaQ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components.\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n## Basic Usage\n\n### Styles\n\nThis package is used as utility for other components' density mixins. Mixin provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\n## Style Customization\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"d7bebbe119e39bd973d398066f5601862aface5d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.16.3","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_4.0.0-canary.735147131.0_1571188991826_0.8146116904703511","host":"s3://npm-registry-packages"}},"4.0.0-canary.062ade5c0.0":{"name":"@material/density","version":"4.0.0-canary.062ade5c0.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@4.0.0-canary.062ade5c0.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e5839aa675d294ec60a9bfbfb71d5e5d9b88be10","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-4.0.0-canary.062ade5c0.0.tgz","fileCount":6,"integrity":"sha512-Qs3745tpAP9Nsc60dh+JoOEpeNEwYqR0Ly8zk+0k2y+6pTJWDuGrRhE6z5Man14TvEH5KKMMCUMvwh96sgVgtw==","signatures":[{"sig":"MEQCIHvskW43mSdujjKGZ3zqCfsiZvzn8yeP+Gbnw6+Gd+X4AiAV/3zEaL2Eoo0maFUGI3Z5/ejAvXJvg+KMSA2grVXctw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":31173,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdp71aCRA9TVsSAnZWagAAwKgP/jCIIJhf9LYh9WXYFYpb\nyx6wyRqjROvUoPV6Q2NGzHztsTcVFQ6pGrMfruUB0Siro7pdp1WbbW/KKIdZ\ncQOZIyIVrTAOoE2RxeA7sx7CYV5VdI5vjkm7EQub0yuk//38aWmFUKNvUj25\naqPpsS1V1HrMtuZN3YJ7cZphruzJnILJXYkKEKPnAupy/oyq+n0gVOLp3dOS\noV6fY5fP4J7XfoBplJFho+TR8garxKizxbmnaJrE4kUtY8LWeQgIy4G3LERE\nvefAKIkQhIytAWg3epRef2h2JqACzUXFvoGr4dSL9WRbHUxIqay65suktiuV\n2DgIUpMkVbou7mbPXSNGZc91BcA3HJ6nnfG773+YfscyH1Aj1EN9QlZcCgHT\nvODwzWxLX/QUHdHoLyLWOo0HcOTsIpn8G39qFeYe6cMs/zjNgKbG68g5NrOc\nQ0JTxYf/vLbjmZ36EEHZ0S/P96CfIJjIMXJ/vOblfaznzP25couMbCUvXw61\n4VMHlGBvfWqNExH70m1a+Pbi22VAtdtVAxnLDJIxJJqr4n+UvJhn+t6JPcPO\n6Cl7lmUrAjvWYYBwQa+Auu1onlucOH2gHz/zyQlJkT1L5DU/h3j1H5d+UvoN\nK+vll4PSqySVK/K6Z9NLUDWoH8xtStHqwW1zc2QA+vSEQpu/sz9dRSKGlY2Z\nxu4/\r\n=1WhD\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components.\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n## Basic Usage\n\n### Styles\n\nThis package is used as utility for other components' density mixins. Mixin provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\n## Style Customization\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"e2025b4ba4d9837dcc1063934417df1eefaf29ec","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.16.3","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_4.0.0-canary.062ade5c0.0_1571274074174_0.7326756174297246","host":"s3://npm-registry-packages"}},"4.0.0-canary.774ad4f8.0":{"name":"@material/density","version":"4.0.0-canary.774ad4f8.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@4.0.0-canary.774ad4f8.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"694e2b1434bb46fa283f35d860e8540b50d60b21","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-4.0.0-canary.774ad4f8.0.tgz","fileCount":6,"integrity":"sha512-RTUK6ziBLwHDvh5U81O/YvL4vO11jgvXcD9Xm7mFCcVoiFsQwImEBpFsePv4spVObvCZzZVCqc36Il+ASzEddw==","signatures":[{"sig":"MEUCIBNbyss23i8woeQ/eHw+WT9dGkwGsNN84ZGuxLVggAl7AiEAvxsTEHn4I2m8oKlJ6tIkTsXpGf0359hDWgbIk1hRqZs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":8731,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdp+grCRA9TVsSAnZWagAA1UkP/2HV+rgChO7YXvMZ/5tV\nE6CkrATw9PDmmMYCrM7vnIlz45jnmAtKxUYhrNRGTlXhLLjjlGZLRJQAisKi\nwjZwt1g/SB5fK5BBI7S5DIQgpcpwwnKBz3f0VkjZhKq6a89YT0mic04Sqf1X\n2XFEJxhbCipg0/MzaPzIou6Bbr1R58Vu8R1mkrLagC3QMUFvoh9uLkUXdr/i\npAV/n5+kZBmkFfVh33dxReS2sxk0IBayaEbDyJXTddBkcm40I91odadHW0EG\nQEmNxGFCxePGU6v0nDWuBMdh1zn3loStMCm20iV8Mt/QNL/6VcFC9Lk9BbQK\n9BvrJbkzwbbmxC3/z2T2Chu4YOaeaGevHoEUqmZ7SfZHQ0mTUTQdH540li4u\nQY7HRSDNBf/YJ3eM/5DngaxvBLbBZsf5fHj1nAqu7a8MB/JITltnX6wROGLw\nmR7atUs1wka/uifdWMArKjGVqJ8IpVbuPMk61s9d9EKtwdUN19RT03hXU+8Z\n2rKuwEtLIndTNEIXXnHk5k0M/q7MW/FUvMWtCgei+UinD3q51guEx6SLgbOr\n9Q066D36RJdZTDZ1v3cy7mbZK8EoMBs+HDtKKXwMRNSi0mBMupBs9v6ehS73\nEfJHr3WNFQDYb6xBV5PucgbPDjAQfBqjd0n8iIAW++6yFujvice1c2bPfQHj\no5OP\r\n=JKHT\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components.\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n## Basic Usage\n\n### Styles\n\nThis package is used as utility for other components' density mixins. Mixin provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\n## Style Customization\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"66607256fd6f9e4fe92319b094d8476583109bac","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.16.3","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_4.0.0-canary.774ad4f8.0_1571285035049_0.369163067118484","host":"s3://npm-registry-packages"}},"4.0.0-canary.5916d18c.0":{"name":"@material/density","version":"4.0.0-canary.5916d18c.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@4.0.0-canary.5916d18c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b5690d1d905c16cdc5c73863b6082ae93482485d","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-4.0.0-canary.5916d18c.0.tgz","fileCount":6,"integrity":"sha512-jABol8vWTDjkYQQ7hrKJpDZ7qr/tBz2Br3/eBWWjVDF3Kv2RLwXtulEgGev+uyKFy3hch7mkgLEDLhW/5JtZPw==","signatures":[{"sig":"MEQCIHIqacQjD4u3kqerFQieJqqs9PRC2wCF7dRu79TXSL/QAiBm7rJHQgYEy431Hw08JVly6hMs8pypHV4FGA87bYtvkw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":8917,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdqhunCRA9TVsSAnZWagAAekgP/RNv0IzmGkrEGSduO7d+\nGV1l6ijCCNxG0Pj5V7+fJWaFS75iPnVp/icG9YftOkVgim4vc+USzHzgual2\ndpOnZiKy4DJWN+ZmDp/3ZdzBbQD3/z5er9iqnuQ7azmW5Y2OKQaQz2r/806+\nYF1DDENGAILyVsZxJnRpsGEm0CEM5sEwSqoHtjj3bduNbL5StqUeAF4WD/VF\nSRLg2IkUmViQqK0OGDSKQ+YgK8HQUL7jF58LIU9GKw/NFByl+MFpS1yE/Jh6\nq7GrYd0St8rt+2o6sshC84NJOpFHAZ6MHwUm5YJm4+5wwej1/zK6a0oEEFWY\nQ0NWFTOPPwQ3twnti8Uh1qwh0J9XfpVn6O0/R44KuV8reWsMjsY1DJ2SWSOl\nYyRd8cKVHWz46vuC40QuDgJ0d+7NgT/TgCPfAkr/Z0mpoMIqTLRmiL9z/EpP\n/DqmSmy6zkUdJcv+O0nTvu3rAl19aBSNCuFBZu8RGYOw1+fddFXn2KbYho4+\nafsaNCAZis8sNQGyiDrEOEgPxAl0H2FKkZqJvrmcJOOcGm8JNd4wNDDlSlx5\npkHL74wcYXlbfqX5b7KBJDpzIozamgbEn13/Mk4jugFNea40D4VgYj8VH2vO\nRULjwL8nf0dlTlrHJuVkBjgqC/qMLdT6qgy0sefCFWgferA7bhNyNv7ETgZc\nt8/N\r\n=nQST\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components.\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n## Basic Usage\n\n### Styles\n\nThis package is used as utility for other components' density mixins. Mixin provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\n## Style Customization\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"e3338b891c5ab3207ef8340a75490415e30e313a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.16.3","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_4.0.0-canary.5916d18c.0_1571429287041_0.8411275346458518","host":"s3://npm-registry-packages"}},"4.0.0-canary.d4141c95.0":{"name":"@material/density","version":"4.0.0-canary.d4141c95.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@4.0.0-canary.d4141c95.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7ab8b4f76105311c33205b16c7977e07d0b960cd","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-4.0.0-canary.d4141c95.0.tgz","fileCount":6,"integrity":"sha512-YdwPCnLGuN+xFN+0nFDw9XnojBRuayT+aFSB2zu9s+yu2LPXpKoGRobInPLgDu3tjFLz6xuQougDW4oNe7Y5Wg==","signatures":[{"sig":"MEYCIQCquo0c+kzdpWFp1lQR5xNAxgyR3XdYFT0kP8nys8nbMgIhAORf8qTlWfIZ/syFejfGjC2JB1ExuVXhEABJl4BNjKBN","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":8916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdsQBtCRA9TVsSAnZWagAANtMP/RyQ87o0njW4ogXzcZ8W\n+hI0SdSdK+vC0BVy1au0+SpfLbzeGzyBWaNh73qs3ik3p/vt16+7NioZl9hH\n9cy4Erxz4W0eE4hsBp9IG81J78pw9gx+X/enmOaMCLhcYuA3it8rZN5pZcX4\nXek7AcN7IdG2Dp9vCtXDXdT98/AhQarYbbY3YAlzpjAkKIpyvbFiMw7G8Y7w\npW2sKboxtzkWYQ7JxnvA7tiZQaf/+36IVnYm+bkGnpiG74bJg4XoxBosQl6y\nXQR7q/a1hQXZ35y3G/XlbU7oDtfLBmtlwSrrRZT314MjzZ8AOdk7ykgj8FQx\n0zSWP3opehfPyBipc7l5zOoctVJxaP5XPwRwTKIGQU8EFAVlQ1fP34na/+ml\nFX8ZPdp8OEzfZRfW+l+/CxUNtf4xNjgEINAai+VkCOUxTBl7seo4wEEsebKd\nB6Uun0FgGnGs0TsZh9X60q54/YOsdFUp3mWIR8Y12Wh7T0tKDZE+mfiAZsIs\nOZxG8UVnuUU0L9cmgV8Go0NDJ/PlOQZxdy/8DSExy/88BwJbYWapACAnuSi1\nqxR2tugQeCV6ANHyRFf+KCQ7Ph3+INZVaXLHg97OI8gtKvkW/NEjq6aYfP1I\nZs4oYOCqw8I1KAkchabAcuQupb9WlppLPaiBW87dxAMSxpffIQZ+4s2qQETj\nwXsi\r\n=Wv7J\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components.\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n## Basic Usage\n\n### Styles\n\nThis package is used as utility for other components' density mixins. Mixin provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\n## Style Customization\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"10ba5eadec617b7fd2711c838dbbff788d6f209b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.17.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_4.0.0-canary.d4141c95.0_1571881069531_0.618711843218221","host":"s3://npm-registry-packages"}},"4.0.0-canary.2b878b3e.0":{"name":"@material/density","version":"4.0.0-canary.2b878b3e.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@4.0.0-canary.2b878b3e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7b53c42119b0d421542822d73647fe1b7f56f7ce","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-4.0.0-canary.2b878b3e.0.tgz","fileCount":6,"integrity":"sha512-uq7opvXzgacyQBy/VD7LABHLAaulDqza2oEVgCC4bretiGCaWQOohcGTP7OsRfvQVzlvFctnjYCKGyaODrHhUA==","signatures":[{"sig":"MEQCIF0vtE0FySHRl9/mEGRpnEdRdSi8VTPOz9UQSUSO2eiVAiBqgf4CIePSfGs8WNcfPYB6hPt5C3vN8620mXeoW6a5rg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":9026,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdslmICRA9TVsSAnZWagAAxkMP/0HHDVdL+nl/sWbn4WfZ\nhAbW0t0qtE5aLrw0sYJyTeIhPrXYBq+hIyvC2ZL3zvTgZQT07A0Am2K3w1dw\nVhz8AC6DaHyFgRMfTu/vk4fr+/XxnLNrhchBzSDBI806SkwELsbaD85zF9fY\nGzHf9uuh0wLsQ1jSETYvLmEqN9XJBJU22XUm8g7fnOVRjBTUOGygZp88G0Jt\nx2DS+/mfyYEo25OVKu3CAYX4c8PG4B59Iz0c3rCxru/cHataQ8zHK9JIBnGd\nGNkAG5723aZ2U5ZG2CvE8wcRGwf/Mgs+/gIg/vGMt+yIN1exDCRPzrbJVc3O\nMtHYJGu1WdIjtQyoNbVMDnODaU+zbU9t0e80hZtGNsUszgKI7ejrPUMAbWCD\naQUxgie3I/MFr2vTCSR9ZVrHoaCvdebNuNPXVr70gqe0PrO6oQE4c/b4CX4e\nKz6ak2C5+Ess71w3OSmEX88hPqB1d0Zda5g0Y0TFaaJ90BaHHHNpaFDWbsvT\nZ7Yj23GFpEV45045WxsE7SVxuJ4sh//+qoxgsftlzidsUfp8J///mFACf+W4\n94w01URkEyashkMGI/fIvRTiY/bWQeBx3isQJGSsgoxSZsHmqEztnt8jcmfC\n8JmboJCxDXY8BCpzhBI/F8pcqqLIpP7X/aY113oZfeCASolgdhpXjPQkljpT\nF7AR\r\n=JlR2\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components.\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n## Basic Usage\n\n### Styles\n\nThis package is used as utility for other components' density mixins. Mixin provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\n## Style Customization\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"29ace6a085b0e37c6546b4613abba6356aa82430","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.17.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_4.0.0-canary.2b878b3e.0_1571969415695_0.42008102342631415","host":"s3://npm-registry-packages"}},"4.0.0-canary.b06c0efe.0":{"name":"@material/density","version":"4.0.0-canary.b06c0efe.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@4.0.0-canary.b06c0efe.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e8b7d17c3e77f1e6f90778d7512b7e1264d5f5a5","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-4.0.0-canary.b06c0efe.0.tgz","fileCount":6,"integrity":"sha512-wjeswhQ4CKzT05wnv0Cd/AJaCyV6w/8xWhSVpdVkM5+lJVSJUWJ+MK+6nygxN4jseLOoaD9y0nucFjZ3GCoQfA==","signatures":[{"sig":"MEQCIFPmBlM04rhVysei17Dj7JMkphuf98HW/8ZzpMvEq+aoAiAfJ3F284ciisyUjbWjnH6GLCUuSRHbuH+bb3z/s5eyJg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":8731,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJds6K0CRA9TVsSAnZWagAA414P/1KHV0lwUyIaAT8H0jyk\n1meG5tpHADhwTIfUbQrySBz9TvoyO/72QX9jvRkI/c07+ZeqYag6GdTTfROi\n6fGrTYvSMfNK5jGc9A84JqtQxlJaL7DiqXO5jd3axlBHO6Ro9+53zD2tnEjC\neNVzC+z4khb6c+ZAieZoQnd5ofOxOtk57SXvPKMw3Lxyn6yONMjzMS+62pVu\nAsVamKm4+lPEcxdk8wdRPi4FbN1Sq0iQyLf8n3PHo1TqGdZuHtO2xasXwCuu\nnNlro2/sG/FEXxj31t76Wrdp5TTkFSS9gQNPFUnyJh/IoPBC5PaDUkfXZ3n1\n3x3xdpwPUIm24d45desqgdz/1e6uCYJcf19mcn9EZ1W3gfKansIqXPPLGG+g\nZ2ofvvDGaFO/q/LZqYBYKyXForfwc6/i1P4AkNXx1omkpOzig1JHRbFnyTmZ\nAIV+eHm+EzLQ9yee5SOMm2RDH4TFeAaLGqfVGB9ZEGBuIdypDI+csgria43g\ns+v1Z1dM8MBtdruNGdkeVB9/fm6eYiEZqihzZiD5Yt+rBJO3pXPgOfZizP5K\nt9dW8Q6Of0zp04QEVwY/+Y6ceVTKsQQbf0hJHBRI3Z2+o1P1yfy7XhS46y2f\nGEE5KkKFQ3N0aLGdqlFWUzaXnA8o0GqJovENtvxW71eKSL/LpTjPPcx2pgJD\nBbxP\r\n=iIB3\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components.\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n## Basic Usage\n\n### Styles\n\nThis package is used as utility for other components' density mixins. Mixin provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\n## Style Customization\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"023500a209a10669d135ecd0a8f00995f84b135b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.17.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_4.0.0-canary.b06c0efe.0_1572053684458_0.9857665889858935","host":"s3://npm-registry-packages"}},"4.0.0-canary.01628efa.0":{"name":"@material/density","version":"4.0.0-canary.01628efa.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@4.0.0-canary.01628efa.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1178285215b8d7f26fca7b4ce9b5f410e2c6d852","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-4.0.0-canary.01628efa.0.tgz","fileCount":6,"integrity":"sha512-SY37144Fnqvsla/+lL6w0SqIsXplnDDU8nDrqkw+QaHf//xQ7hT+9JlMpTvesuZ49qaYcOYtWyjF8khtBQrcOQ==","signatures":[{"sig":"MEYCIQCX4a4eHJ8CukjbBmiY0bYPdNt4tCwM9aboDjO6nALvqgIhAPZfgtGDEL+U6OS704pOwkqtk2KFYB/xJTXcpLA1GBe9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":9023,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdt4GaCRA9TVsSAnZWagAAhO8P/3eacaNvEkLMgTdg1zwf\npTD9H0w3l66wcdNMH4fg9/qPwb4Xcw2/Y7Y+WbqrlqEI1zIPhG1F5FhALMqk\nxf7HKnxlMN4n1wCnhRaLi2hHmyiK/x5AQEBewwoPqJoZVP2QXBmL8cKsnXOe\nS7on7aDCvHrd8+QWDj9rakiR2rkM1JYDRjF6lgtrpamR6LgsaWn6roVg0F1W\nckteRogDF7jXDkYbe9YdENVlo1CqYHNqf0ko0sArvpyssUOalK13TLK7Lnmw\n0d1Wod7w6XrauTKjXhukUaf/r9W1CFmTECkvAf7Z5hCaVEou+uA5opSTeVNq\nPs9MmWnSyN+t6E805DzyvgN7+T0gLJ/JeONmsR687lmmTNnA3HpPzz7ZgfQg\n1nqV2yLUOSWIunvP4qNqhomihrwkqZ8ZqAJA0Nl+iXGYLIHoKOsW2fG5/qZS\njtZOnQq9QKhnA4BP+pWPtjbQzfpAvQ8LcsHzxqkDlTz0BEqcsLsSJHz8ER4h\nf9JNWQUpi4QOxQg/AndnPhIe5YU9w3H8MylZBITFXkhCx6RfUj7eJ/z7i1rt\nyAVo6SY4iOmvfkupy5CnW44TRlCodXcS38u4EG5gezhdg1bOwabcpRRGB+LL\nADR5TbhO0FFio9oF7QvqLhaA0QLUNecE/ATTVvDX1Kh3z2pHT88PjnXSd/vP\nGw9K\r\n=pRRM\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components.\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n## Basic Usage\n\n### Styles\n\nThis package is used as utility for other components' density mixins. Mixin provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\n## Style Customization\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"d736a6d7c49f31b52dc64101effcb7cb18ca6cc1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.17.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_4.0.0-canary.01628efa.0_1572307354298_0.6336105220924921","host":"s3://npm-registry-packages"}},"4.0.0-canary.b5c6d66b.0":{"name":"@material/density","version":"4.0.0-canary.b5c6d66b.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@4.0.0-canary.b5c6d66b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"375383df8767e7b9a12a0949548b9e449ac70c4a","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-4.0.0-canary.b5c6d66b.0.tgz","fileCount":6,"integrity":"sha512-72K04npB5V9T/AmVc8o9bSZo3VBbZJYqhOMnTWDfMBYf3mpcyEPg2TpT6tA7ycTm+pXcIubVGLufT+hUJleO9Q==","signatures":[{"sig":"MEYCIQCz2AM0D4js2ZZZa8gDQ3MyGEzSZT3GbtJ7DhU0gJDs1QIhAODkqctGg1qgl1ppcsStTXNTTCbORkmfI0sPw17QRd+j","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":8910,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJduH08CRA9TVsSAnZWagAAPUAQAKCXOr894IbKD71Co6fx\nZKTF+gJEQW9xwKUmQ/guIv2Z39gGXwtOnuB/12pGMg3cdYaDD4QUgrf5ibA1\n8aX0W20JM7eeT4P8h5dG/XymafCloKq3RhSmR5Nw9F8JTsGkTDZr4CzqrkHM\no+1leOQYQEGJDnofd6NwDLFUR3fFZMiBLMA7kW65+YjpS8dFr94/wVDqrpzt\n8kg1muG1CoMW1GmxMIi1ngYeNXRpsD5ZpZuCFN1FtjC/RQ8JeQzDyOvuOliX\na5zRvlPQxXvZg9DQQI4zd4OaFLJZmJqANoNskosnPgspo0/kshQVrdT+5Bun\n56jS4KcEJ/uyoLtspIaFJ1ZM0/EpumMkCF/YzfI69UEcEC8uddG5pPCcSzbm\nPFW7HMJQ1fwaCgozYVO3KMu8tv4j12/oawgL4FyZ6q8RNQrr7pDwVyvG3XhW\nG64Sz8jzcPhrLEChencX0Dt3z9sOzd5dwuxw7nhWXOWWtia6HhilrhZhkVMK\nW5HfGlZKxL8fqZMItV7Rh18wX7w0/nc9Wh9Ecu6ojRDFBMHZPxXb5YbO5Tk5\n3vrdd8qqVFHz80tqy0IfOWKUAJfI8HM5xV5FMiV8UM0ubcy4l2LkkCd1hcpM\ngtdCSCwqG3gjzpR2Ky3OqRlQ6pUMijwf2TSuUy7s6NOJI61RWIj63BKODrJl\nRa4o\r\n=ymNH\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components.\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n## Basic Usage\n\n### Styles\n\nThis package is used as utility for other components' density mixins. Mixin provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\n## Style Customization\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"a29efb24799035b1ee49295daebf1ae46a92b529","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.17.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_4.0.0-canary.b5c6d66b.0_1572371772443_0.6420795279651159","host":"s3://npm-registry-packages"}},"4.0.0-canary.cdf858ea.0":{"name":"@material/density","version":"4.0.0-canary.cdf858ea.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@4.0.0-canary.cdf858ea.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fd13507980909a827c2e6784f3e9104a6317334c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-4.0.0-canary.cdf858ea.0.tgz","fileCount":6,"integrity":"sha512-R8lOC2YdCahqzYXewIDokPVQksCnG+uB05ZyqD7uPDDF93BvKsg/mC3Ucbsc6G+jbh3+zzs94rrjkwjgpWaeSQ==","signatures":[{"sig":"MEUCIBLRn7rtinPmzz9abb9XnlZVvMmAlrmMty4slzPMDjrlAiEA9XLulEM6iCbU+9ofZOwItBto6D08b4AfSY0YDRMOfdo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":8731,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvHJACRA9TVsSAnZWagAAiBcP/jvv5zPtTK4zwNteFucZ\n3ft6dK0kb6Z12rxkauwxz/4CbBH2TI7HPKzquwJmM2EECRJ2TUG0CgQ3jW0S\noP6TQvFptRDZbmUO663rRfS7vWEOpy5/PDHdhZ2EPaHn7FH+4PfK5Zg/rzNZ\nVOSva6UofMs6xoK1p42V/O4irlzRCYFXuGU5VDTqU8Hrxm5WeB4/sTBQsAn3\nERkSk/NfeoL+JiHQLbvOcI07xV5w+z2UeDd/YHOWbSogZu8CcNNYfPVgkYjn\njSFBKUwxN6v8FH96mPIZQxQw6hqHBbWJGSurD86o1VIsltQqjIoP30C9q5fI\nLp8cnJ4ZLOFcezkeR8FfBsd5PXZn6RWmZ2XNZAr5KBNqyEaTSHh3DTb+DzmB\nJKATxhDqX7JsLI5aJ9N3bLqd6EczZuMzgT4p3zqx0EXkjy3kMyiGbKxQT8bj\n10DsVhoQ3Yt27qJfvXe47J03iYAdiFfZtTLKWRp47E55F2CnRBsFONMAjfph\nqNJit2Z3dcuuu2rGkVLECsw7OIetCtXX4iBQ/4fz+Ns8HUNuy9qaf1ASjlne\nb9XG+gslhBhnabhNot78GJKOCkZrLzspk0I4ZyS7ell3MHHWE9Cw+tzwChb3\n1c0pEnSmgHpeIvgM8YfBxUpIDSyYDkfDs32GbfC4AitjeZ28rJ9L64EfefOG\nI90a\r\n=hUvD\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components.\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n## Basic Usage\n\n### Styles\n\nThis package is used as utility for other components' density mixins. Mixin provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\n## Style Customization\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"436b9be1155a7b7c0fd4aefe795809bcebe8dfda","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.17.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_4.0.0-canary.cdf858ea.0_1572631103710_0.7123188011229153","host":"s3://npm-registry-packages"}},"4.0.0-canary.719b57e1.0":{"name":"@material/density","version":"4.0.0-canary.719b57e1.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@4.0.0-canary.719b57e1.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b6b189f2d21507f526b20ab96c3a709ca867d8b3","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-4.0.0-canary.719b57e1.0.tgz","fileCount":6,"integrity":"sha512-9MDbJVOXALbk94Wpcr6i6exQe0VK5THOB+iF2Ba11FY8eY+Pqum4dKyrs6wKJLrZyLITORC6ZS0o5RiX3YXuDA==","signatures":[{"sig":"MEUCIQCAQZipZIuH8Oa/+xkwxEb0qhnOzrx/T6b37rvhR+n0LQIgTRh2D2wgSkbsIFv4qhE6rls1RLtds9j1D+hSrJ+6/I8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":8926,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvI8BCRA9TVsSAnZWagAATTYP/0n90XUcpUvK4J7HUMJz\ntx/AvjfYn2CwYffU0q1/ztQ3zquq3VxAXHrseSWRFgqJlU38t7i5D7pKIail\nwESsGcPLCTP8yhSPnbjxpbMMVFy8cVUjRoi4U5ophR4IZFfofwtEcdbkJ81P\nOhR19JKsLkVsSue2yX3UogZ97llDZ5pxnb57DCn8nBZEeTkRxIIPOoZxKlRs\n+4XjJwo9VgRKDBYMU6dNefA3iSK2I4FhV5uGXEoSMQRohMIIfOKnxZDGvA99\nlrV6mto4MP6GTeRahDDd6FXau3z1jTe2w2R9b68JQDRTDzR4sY6AgebDxGY+\nYIK4pS6XpgxEguceLwwuC01EMSb0RgD5HBcLgpSwU/CP2Sm4v1ww0vVT8k4b\ndQfgZ3dB8jru1wh5mD00uTaAVfWRz/y6E7RSfLxsRZUrJbIahyE5xSHhoMOT\nCC1+6pPGHK9g5pAl7GT/mVSmYc9jAs34XDel0jwi9CtV/BJ5+3/7Kh+Sl4Qc\nxhkDCsZybVKaneHZoQQ7a3jMZUm1drNCCeL94BeKiXWSh1MEXpSFwBhhwAOz\nM2q3iY0YfdEDQ+WXXF6RR5txAD94c2jyG7k0x2HHJdJksU6oWEd3CYpBLjYp\nEVqKieDkxCCnvFb3MZyHF1wUp4oxmFuns1ayFYY86xOKpz5yVidky/x/8YcX\nnghC\r\n=ggpm\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components.\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n## Basic Usage\n\n### Styles\n\nThis package is used as utility for other components' density mixins. Mixin provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\n## Style Customization\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"4184aa06e4862418697a150eaf45a13500e1c4ff","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.17.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_4.0.0-canary.719b57e1.0_1572638465505_0.015722147623149718","host":"s3://npm-registry-packages"}},"4.0.0-canary.97cbbdc2.0":{"name":"@material/density","version":"4.0.0-canary.97cbbdc2.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@4.0.0-canary.97cbbdc2.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a648866e5440a6a6e2b3c44f910bdcf328a0b98b","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-4.0.0-canary.97cbbdc2.0.tgz","fileCount":6,"integrity":"sha512-a5xKKLtgHQGce5p2tzl++aLF8UfnePDtmh6sxWGHzyX679ZMMf3YGoYPnRupFADyfrTFM2czXMSb/I2Rjnms6g==","signatures":[{"sig":"MEUCIHkxeqzePTvjzPAUX8WVGCE9EfWmJnfvndfoJZvmgO1zAiEA0wRnnBFxLWXUoYezrHwr5tO7VvHr6ou1URNrbcCdLIc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":10581,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvJV3CRA9TVsSAnZWagAAzIkP/0di+yanmWzD3LuWiDSs\np5mqMlYM5TxX8GOx+Cq+Mm9M0YtIuTKvsXoI23yEWnu1c0O2cw7YeJi7D7vJ\nedbLMQEP+g0noftjsSpxwtQB2RL8pziuCNG5O1/8jKFap36yQU+VuXDBW0zJ\n4qjj86LTLUvVjV+fLCVP8MGP1h41/C2dWy/agrNt0KZyPSpzNPK1V2V/26V0\nIYQGqdi7ZfCsm+9g5QGUKLDYcUaOxcR6NWIQC2hN5Vm0F4bdcGxIB/QZzAEB\ns/9NCEpA8CLwB4Pg8kg81sRMY+6uFMf486MIzTuCmhaDdMReAb0nslO6gdkf\nsKoeLHJYnd0HeqU/b1QqQSet410+kvfBuopgJt+YXLTx242s8ez11Q5cL536\nbwH2iIR+F/sEBnMoum2Iq9hv4CC6KdfKVfcSfIjh9E3xXwMqo2LWDUzckOmV\nw5AgAf0rlhRuhHuJSoIQ4Kuf44Dy86Zn2y5SevLsWQB4Sz6SBtRflbcuCiDB\ngqPEyFnckaAo40c9TYncKrqmDTKLy/IPvCRXl+OD3Gj7UZjQdxBRl8EkGyaU\nHjVVhnTSNivRn8YczXzu3NmIG42xwYuBYYmh24/9ZxcVT3RgaZV39PqN31+m\nq+It8wdM/lkRql1Zm9O2Yjs6TGtL1/qqodSv41Nv0rTnHfC4FkvwKJWrOL65\nPss2\r\n=/gB+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, Use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"49d37bbcdfa0f5872581945f58c03e62abb97090","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.17.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_4.0.0-canary.97cbbdc2.0_1572640119230_0.8998491952199286","host":"s3://npm-registry-packages"}},"4.0.0-canary.8e36b3b7.0":{"name":"@material/density","version":"4.0.0-canary.8e36b3b7.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@4.0.0-canary.8e36b3b7.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b71458fb2c1bbeac2672c4035f93b57eadd7a2be","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-4.0.0-canary.8e36b3b7.0.tgz","fileCount":6,"integrity":"sha512-rJoQMTkF4Sfb4n4t33UJq81DzJw38qbW5NhkAU+Zpt77mlVvo20IJ44XA5l2ha/msu9leKhjE3MnKv7PQv80Og==","signatures":[{"sig":"MEUCIQDgyA7lu1lI/4bjudTiyGCbrPgrzzH5fvMt9F5FSEu5RQIgbbrvpo5rgOtPKat3rkcWahMtt44bdsjhT8C1WqGAzOw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":10373,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvJz1CRA9TVsSAnZWagAAT7wQAIRWEo+UJMFPDheP63ng\ngGn2y2zcQC4NSxj9QG/KYaK9/+BPwIwJKwQ8xyaZLY5DgsNJl3ENGq+U6euE\nxjbQJ/fkM6SbjIgWE9kn0Ods+aywp3orFURLDzEuhxb1u37LVX0+cQSiyOi/\nCRJIxirrPJTV88DprS14m5tpF/CcgsAdOA6r6QDNHRi8zI2UuK82eNC/a0u2\ny2AhJWIGOcFGxaq2p/IG7pBvkG8SVg34jCTWn44QjakHY+kgkIOY86nYEQ06\nW+p3WHSrlnYPMGOMcV85YfOQHPfVVwDFja3A+K0RBqaNgCaEsa+TZHpsWjur\nH56gnu9XGhkzWZmGx1JVL7Gb8rDWOx9QP1D5y0HHxulxRwj389TJzmY5smIT\nUOYU9LRbSot+oJQ/RWYN1845F43zs2DzWmqE/0B8OGM5Zw1zcF/boa3H+rEx\nRFQsZa5O+UvnhLcvsGzorEHjwPqworn7AfGVyV5A/tVWe95Tg79+fDiF8hhK\nPLoNJT3evGcgYfYOq+T6cWYq4VznOB0ujzzZIcK1hn3b/3EJ10YR2WCOBod6\npIIVWWVNatnWKW2eqNadtnpynDmH9tsviZHCbfFLa3entpPXernlWiVnzVNf\nEOUr98LH4eALsvDTOhEefsnrg1eNg0O5Eiv2o09Ga2cSWqGFYPsKebBsuMGb\nkkVF\r\n=8Tvu\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, Use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"62f51968b94685823af7942f779c63658f2b0350","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.17.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_4.0.0-canary.8e36b3b7.0_1572642036810_0.572174043188399","host":"s3://npm-registry-packages"}},"4.0.0-canary.62d3a09b.0":{"name":"@material/density","version":"4.0.0-canary.62d3a09b.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@4.0.0-canary.62d3a09b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e13c0cda22ce258e61f0c1ba99fb196bad83d139","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-4.0.0-canary.62d3a09b.0.tgz","fileCount":6,"integrity":"sha512-cQbYrktuckfVQLBQ5bLN/wxnSX+iWhT/1khRndnRy9c+b65qd1fSHWMxlq2tvBxthcox0g6ieiK99pgMOl42Ew==","signatures":[{"sig":"MEUCIQCLmF0j5OR88foyc/8nC2NSwO27+rKiDV1wQRpj5Ta4qgIgHPg06iqrExUdYjtrg/YKPea4S7JHKzb4g/Ct0LanWac=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":10373,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvJ83CRA9TVsSAnZWagAAz/AP/0cAjCxndId9xW6h0xtL\nsBsV9elqY4vDgf9LWW4aaeQrKJyj0NgrCl3ZH23Mug7e2mmreoT5O//bRTAX\nqQ+/zIIOmBsMq+btCnuevZdykiUtdq8ZTv5Dltj0uwfZ8mWrcCrtODyOjuBY\nObHzDhPmIvfmlIUdTOGbyruoGC0w5CkHOeA4Y4MW+DhxDhLYUIaRC/QfHy1z\nWhRXj7vNW7iCaSMX0y/p5WxB8Q/w6AJpRl5NeWYEPOBnOakziyAPV3mlCJsT\ncrkAYZ0eWwn4uqTgqDhdfZJAjGwTXfZMaeFhO3bWVuBWJlJeIwzrBNfzHj8e\neDwuWNkaDEHhqzcz4J/uJKU04uVMwHt3BY97lT6XBPv8m34vWb68+dXfSpiS\nPhmDg0AGdKhEP1zSjS8dAx3mjQs2EagYRKHr6ph5OeRq/4zl58FYuXrMxTqo\nG0ivqNQKEjdKd4IUVGcF9GfXAgKZ6quzCFBPCX98/K/xm4mHC7PdOYj5LP+s\n6S8vtWakePMgoHHf00wZGUww+R27pC35RPxwr+rTDwxpob55pL4zlZ/xmIGp\nk6lwJVY9fnHxE1x5k0V9CmYCq9I2D8ZMSUPZrnVYbFocNH6m6nfzJBz0Ed39\n9K5EEpq9n7P/kXDtbn3w3TEiWMAcHtrKWbiLPtP8rSSPK4diZE6CVsh0yJ/X\nq8CU\r\n=fkk9\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, Use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"e00a9686a58b0fd5ec957d4008b6674dafd4dad2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.17.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_4.0.0-canary.62d3a09b.0_1572642615122_0.04362430683355001","host":"s3://npm-registry-packages"}},"4.0.0":{"name":"@material/density","version":"4.0.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@4.0.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5bc4bba6c1232f6e075c88295357e6ebdee4353f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-4.0.0.tgz","fileCount":6,"integrity":"sha512-PuOCPCXlWjimTq+OuCS8biAb1JE9aXCZwT1dRG9REAIAK7bN8KeeTzkeJp6jTj+ggZjWphwKF0lKeX6Gv+e/lw==","signatures":[{"sig":"MEQCIHoONJp1cUYS/Xp4SicgIx/07U5IQzdLBXTQMUMdiki8AiAiyykZhUoXEwIUuCFUVUwrDZXD54z/3vPljyZ1a4aGxg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":35716,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvcbNCRA9TVsSAnZWagAAT/QP/itKtYBiRiycvMKxH7Wu\n97vBecU4RTeETT+giIHdpH5iAKPM2tsWejdKSuY+UPfqShOXrnhTCBbWOolT\nAG5+C1Q2blY6Tu4UpuNHZ+Di+2hwRA7xQ1kQwmWFYdstVIt721JFI8sXhsXU\ncqdPkBsvyZv7xLHdtpu/t4QXZ5AtJIZ2heWLJ6u4/YkZ4R+z+6I5IAN3kjqX\ncdZ5Qvoup2dqtN52WTSEDYfxZO7T8M4wm/HjRGHVML46bEy1iYaPnJ/cPZmt\nvdXasbvSlKT1iane/IK8LX8k/RnMejzIT1ilauzcoRhorVFMLtqnpZzBq+YE\nk/734CKTbYk5sepU5Nw3lT+yfz7B2Up79+J4GR2Yw+nZkDQxI+SnGsH/Wk2j\n//usGlg0cRSTC+mhJgG3LrD3KYDUfm6YSA/RvlWt5z5phdAfHV0lree7LF/n\nkDnQcP+zUhxsdfeYrtkNGYvJYr1pjrIbwD7BVhPxHlTHCY4t16eugWZ0LxCo\npMxUxpTaRERNnfXuOmd6pN6tPP9AiT+s2+Lq5xpWLH+RebrvQ8Zcug791dV0\nhsC0zvxTA+VdZM5g0N1lg3k+jBuThKd5JqGTXXL4P1YFoUk3GsWQN60aBAH+\nQALlGBfLdNQ102VC94LVJkVWpUbEEj3QdGVW+KCgUrx426MxGd8ptyBkWYAO\naTcS\r\n=1d5p\r\n-----END PGP SIGNATURE-----\r\n"},"gitHead":"8fcbb009cd3b5cc004b302613dd55ab4b5d6ef72","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.16.3","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/density_4.0.0_1572718284640_0.383049150182065","host":"s3://npm-registry-packages"}},"5.0.0-canary.b5eb51e94.0":{"name":"@material/density","version":"5.0.0-canary.b5eb51e94.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.b5eb51e94.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d2009ca52651b716e77e522a933597d1829d1b7b","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.b5eb51e94.0.tgz","fileCount":6,"integrity":"sha512-jmYWtimw8b+Fc6B+veKp+UY6MC+MargfNZZiHTEDf9G6spHE5/sBmSHwDJDtyPCmZOdz065UaFMc8gW3mQdchw==","signatures":[{"sig":"MEQCIHeecpcRbDtCsjI8EMJxMqP9zmt6dcnU3sfhnjDsaNpfAiAfgMm4yHZsgTPyOR/1MlW1kk9kKnv8DKrya4waiLtxjw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12290,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxGNmCRA9TVsSAnZWagAA6MYP/A5HGOEQjSaeI92MrCET\nkXsEQT0Kp9I5gJKA6cKaRzSg1OA7whNFEenIS1TFdaog7Bvd5zpZUf9KGXB+\neX8bh8/o+jC80pB4jZDpQ27HK/CESNikH+2RMQHLhfIzyGC0Zjm4LWEwblET\ne58sL1t+3ygXbuc+ws0w18NAX0wQBloa52UnJcCpbWQJw9Fx6efU5C6tcmeQ\nTs8tpk4/W2Ak2pAxRB0LqDwmwbkhgDOczUgj4CyC/2gqioLEt6bgwxR/lFS9\n8jymfUMgGaSbvz8a7UpNw0I18nViForlXuAk1v8XSx0YlOwgTOy9vCEd2Z1g\nNXsiqdwIlmTZNlRMNWsON+B37bXWau+YE1CPM5pJoLnXErLDr5dLYklcxh9c\nYpDhawe67vuyiQuTVh0yU9Qdwy2QebCDWkIN0AfXUDvclb9bAgBB4xhQ2lvw\nzSYeRCwEcm040E9bmGc1lLGsrWKKllsZw5/zajt7lJcRMl5VxS0VVw58DGdw\n2aGazOjevscM/hFgJttTcm9ExGMJS9O5nsmY0KeJWbV8F05JmbVoQV9T5Sbl\nyePh6Gyqj3dkQocR3KZnSzDBw3ejBvIfwguzXflDyZ9MUlLOHyYUWnTH3YSn\nC+jq5+cIM/fcY6GO2XqsepGanmjsm6ElXTb/gQnkC3uLrkbedOMBmHuj8vp4\n0wMs\r\n=dF9g\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"7e8d43f563cf6b162c2aed47d2a006564994e4d2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.17.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.b5eb51e94.0_1573151589610_0.9126638012703396","host":"s3://npm-registry-packages"}},"5.0.0-canary.58500806e.0":{"name":"@material/density","version":"5.0.0-canary.58500806e.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.58500806e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d82d297472c7df70bce7f766d7063c0898747e8c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.58500806e.0.tgz","fileCount":6,"integrity":"sha512-cvonO2lhDcTbAyXEdNK9dj6Z5nTR8dHFOFpwkddSuIwxfXI7oM6onsBhW5oVlAvLTObuWrdxbnbq2ol4mKw8Aw==","signatures":[{"sig":"MEQCIE4eNMrE6AnMrL88HUwwguoghgjQoDAX2E/5kGUeYg++AiBgNCle12xV9/k/w+5WRLPIykxQXNjwFct3oCtzJKHIGA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12290,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxYsvCRA9TVsSAnZWagAA/KoQAIhPqsahgjPUZrj3iz2n\nRRwieQc6kbS3xdhX3rnlIyBcj2me+GWkrX5TB0PmXVQPYwT8KpsfbcMLy9kM\nv5uVkE2OzhjHlRSnQEwM2aNpvLuS+Su3guoKLBCdWeesBytYQOFTEcRGrqAi\nR9gW3jTQZhghDDowtbR1sGiVTSLrSkht7HvnuhBy7UiyLUZO8V4RPkRQ71r1\nlogEjSTbs8+6wwPwTEEPHaqbQV7QWZqo6QPpvdL7xjnYRwubEj5GRe/OXl+a\nrwIMLzXNofTIYouC4JevDX2AVjFnRR265E+IdvOttOF/hd6x2bhNcMLjy+AP\nBGbnhR8sdFjSBjK34sRtQODH33n8+4fqikjQZWR56vfE/rckoPXY8z29RbT1\n/sN97YsKjX37ctSy0BPIvP1lqTjkAiHFU+xsWr0r/seRKTLLnEkHPNBkOjgB\n/xnk9oL4oaNY/Cw5yRAe+B9XQcE/mIpTYgAS24MNVfeCkr0QoUlz+Nchgre8\nA/RD9Al12NnqFm+bhyZ+aGzN98j/AlIAt898IHMaKggVNXIp6jrUUNeYCZZ7\niPqSj3ZyShz7BP9SdUHtjCa6qW2Yg3HB57VqS3xKtHmf25BYksetShvM7tTZ\nrydn1TryS8K5j0YWsQ4wWI61UT30KGYmQrLoMTTxf8/QHIwW9We8owI7ndaI\nw484\r\n=BLMg\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"b155f26dba1f11e3c9d7d0fe036cca6da8b37a3c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.17.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.58500806e.0_1573227310786_0.4440767327634534","host":"s3://npm-registry-packages"}},"5.0.0-canary.66299b646.0":{"name":"@material/density","version":"5.0.0-canary.66299b646.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.66299b646.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b7f907f79fad90c71b584ad5eb63760a28ccb3d3","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.66299b646.0.tgz","fileCount":6,"integrity":"sha512-MfSW85sNKXkhw9Zk6ZgtuGUn0hAP0cuZdu315VAu4QdmPsvmXBWeHypeyyvuj+9CgKcvGhSMrSwq0re+5e08xw==","signatures":[{"sig":"MEQCIFuK5e4DUaM2hSH0F9S0PK2LhmvszrZCLb26TfhLlMhIAiBR8+t+QefyGln7NUZrE5J0BFCvo9oXCM+0AXnLlRsVwg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12290,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxdENCRA9TVsSAnZWagAAyPMP/RC0Wfb4j9/O6wp5gNvt\nIkAG9V+aYXohqb9O7a3y4FKo84Grm1T5jUc+lzii3rFE+REkScp2RwqOTnFV\nsbphcYSsRTB2TAJCSXNr8HsfENqUQnozTlxAcsu75qSD7HoOg5gaFSwUwACp\n1d3zqRW36YXcan1W1qN6yhZSRTk8+XS5ZpiSxW+2w4QcbgQ5EG+Nd+/7/2os\nkqSg7DUeX4b1dfULYEB4nfgB/4rdg3URxXghTAX4+kZt4kPlgIGE+g3zcnVI\ncGemrDhUROMK72Bhw1p/N+pui/HqQPep4lB3bDY66P27iwhjux4PiIZX7JRg\nYt9GEijJeVWIGMUCcae46t2psqweKHbeUCiKAcA3PJnvi5wsYoLbXRu3T8pF\nMn7AcR4fTFd0/myOwSD5Sc7v9F7kecEL8gUFfZDdMLH7L7DWAwrCaqi5BRfI\nSVSzfGkK7R7ADEJFmbzhsW1sp5hO/ENH/sFB1+ITlk7D9BPNd1d4p20kdVq2\nSNLXPwSbLKD+sE5/qi+t31p+aw4ymvWMTug2A6/jUfK3gxdGkfaxXygKPrfT\nTzHAdqVsWUFglzIeoS8Ypq6x399h2sLmfjMEo+7UpsypqG0AFnCGNB9xu2RP\nC6duFLE/8gELV8IviQjrMj/y6fhuY/sUoJk+WGnj3NNOyDocHvAuyDYjsQ1o\nDW5R\r\n=zmWT\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"4bcc7c183ed18cfdcbaf564e317231824ea91b6b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.17.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.66299b646.0_1573245196906_0.17665703491398776","host":"s3://npm-registry-packages"}},"5.0.0-canary.821871e04.0":{"name":"@material/density","version":"5.0.0-canary.821871e04.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.821871e04.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a65b7135c67fb3a714846387eb6b0139ab15712c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.821871e04.0.tgz","fileCount":6,"integrity":"sha512-EMRkd6zFm6E9PbZw5LcEXM+GI8YFCw3rRi40JrLIBpE8ZnaOiQXEt5O0iWhnH/oEcrqmB3paRlp/Nlfjj4+0Mg==","signatures":[{"sig":"MEUCICftKIubIjqok0rAMd8WHNUHyeXk8nYxI+MMgOJVhcYXAiEAkr2NrtPdjw2RCIZZXyhBic4Fffo3cBvil4c5+t14NZ0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12290,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxd3SCRA9TVsSAnZWagAAGhMQAIVHv2ihsByp6+taDU0B\n7tJdxVbHjdd7pYTpK8oYq96eUUk1cLDX1CqSZG+Yp9iIYd6jQtlXdUKTBohe\nxy281jopx2+3mIdKVY1m72kKRcdsV7nVSkUTchuoWHulGb4gJovl6TJ3cK3t\ncH3W333uCKSGioyGnrk3+hss4TSTV2CZPvURar/mwU6kq+tmTLWbeHnJFsJT\nA5luUtPP8eONbKsWFUVySelf7Ky0UPYd8vEHKMvEUpNKnO+cBCeppMsX/zlV\ngB9m8cl3se1e8SZPLSaKVdevoVKlqsZgwPAdPPveKD/2YswVnQ0mlNjwKZU8\naHBs0NspgZstgjg3gZ+lsEOWDTsIiIaqnfQgyvWjhSEuEmayPSzcprG75IcM\ni5RoxFGzYM5GITTEJtcKcox2EKobix5LWbEVTdl5liWyHZ4PCFGhgPdKAdpT\nhqnhvgs7ZyLZvsL3GXPAkTsSgoECkiZ5Ih0enYyAnx9on1aiYnXyWs9jMiTR\nZaRAHdSfHT9lxLh6cuKi49FdecYQj90KXRy2zpHd2EVJIeZQL2YCXzeuWmWa\n6aeozMpeZ1v3R49hcwLQVqfp8VvQylAypukSWt8ftLRLA+6N2govZXKMYDSS\nwM1tyvmOOFm6H9fsgvDssRnfGyXr/PAbzEiYYfYdnseDi/WA/fKQHmwoX41z\nJ1ZB\r\n=fMUh\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"20a91d4645dd0fd2db7a61459d752f390e050899","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.17.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.821871e04.0_1573248466214_0.5392910614159254","host":"s3://npm-registry-packages"}},"5.0.0-canary.491fddc31.0":{"name":"@material/density","version":"5.0.0-canary.491fddc31.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.491fddc31.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"018e871df6e72e5eecbd2f3df42c8ee9274e1480","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.491fddc31.0.tgz","fileCount":6,"integrity":"sha512-nzbGp+yB+pOOvBfrYfYJ7XAQqfIsMBiAWsYXd+NMhueyCd0WjROFgwvPW3/kIcERV+PtrFQi/E3TFbylPFuyPg==","signatures":[{"sig":"MEUCIQD0/J48+XAqbonulMyFVlubOQl9u8veW3L4BPuDblPfsAIgFcns69HLWFx9uT9XEPo8JMc/xNDhz1PyIwKvhhwm8Mc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12290,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxeb2CRA9TVsSAnZWagAAN7QQAI8T25KwcQnAN+UDCNlk\nZTBQcvbfHxQq5vsNFl3Sym9LOV0p+AcFgOc+2HmcdJxfga8VCCIdf53oADB/\nLhka9ctLJu8jekA7k5uL6kvJJzj/jqGQYJk2x174dIuBHcwjTOPynvihNj+s\nPYma58UIXe7QUISmYNlAVWrIfAyHPHC3AFgLFDeuMymqi9C9VV7vwfxmGIj5\n1FYDWgZcKGSDTEf6JgTG8h7pm0aMQ/OtVsojpTWCMa4aKEi4yM59co3RC+Yl\nMa0znrJ7jS7kmoavTOT5vl2RxWdkpVWXWDeyzIV7vhFoRKqTwm4x6fgo1qUp\n/jNp2P8JU9PUK2BstSjELMIjHRTR+YgfYuNe1YIi6LtdBwVLdGCiizf8qkAu\nSZukA5YOpG3ANtEhj9V7lEytRFJ5yxCTXs+N4Po5tmbbiK5ljF474X0g2e5l\npnOfJlgn6BRRIKdLLQ596xiG1tZ30YW0GJcL1ZVXYY1vRuH9bslDSzzlPL4n\ncFzG+rq9cJLrMd53QQSf8T5y3EZV5Tc0fV4yqww1vwqNEMCPp5OShQo/4PHJ\noXMK46ra0gDnxb662JgSd2RjYY+WjQR/e/8Q0WgLqyo/sl6Ga+WlBphyiZ1x\n1zjS65OfYj3tYeu+PeibtRETUQYlMx8t6nfDCyhc8+cv+hL0ikfBV1FZ3Kd+\nRDZo\r\n=FWhM\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"36ec62985e32e24263ca2d444e04a01d98ba02eb","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.17.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.491fddc31.0_1573250806471_0.11989408573536231","host":"s3://npm-registry-packages"}},"5.0.0-canary.b0cecf145.0":{"name":"@material/density","version":"5.0.0-canary.b0cecf145.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.b0cecf145.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8c3af273ef8b5646a9d1afe21738d4cae2b5bbc5","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.b0cecf145.0.tgz","fileCount":6,"integrity":"sha512-O52kiXcI15LBV+yM010UmDe7Z7rXFTyAA3dsBroTs30xmJQL4NHwOX+u1YTT+ElSg4KJ5JOhnmnHBduRlhTQNw==","signatures":[{"sig":"MEQCIAoy2dSq3wzGCNFYVwqBk3LRiDRjSstNY7ygbcNF3WQ/AiAg1us5+RkW0UusdoAPYzVQp4NFyaRicj8p7AUfFCz3pQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12290,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxwh4CRA9TVsSAnZWagAAMwwP/jgnE1bZr7n4sTkWZDb/\nMz9XNg11ZLt5FEijJ+ZKRDPS9ULcM0kDeAt4XL6JRB0mTR+a/mUGMUOUeZMm\nJopij/1EeITch/dG1RmFngMLC6Bm4wu+WGTwpnEWEV1RKxlAhd2mskzm+juQ\nRWt1FoaPp1qkWeGXV5pzMsVYpw9xkKosKR04iZh5vAgR8SDLK/CkGW19NAvs\nulv+aDTF8pdxhsqo8aYZoc5Unx83Yz0sppivtfq/SLjUTOXt648orSaN7/AC\nEK+BTBoBzKTLMqQ0TrtApFTboTESoYfQgfy5IzCWUnD+RA4Pknrgg91gTZYg\n+swmiu5Dr0TnAAkl0DAcmEFLIAsiy4m+KnFftrKsBRSsA0KGH5zOz8Y8chS8\nlFTgxb+NzsSMJl7FzLR8hjZvKD5kaTtw3EKxG26BrmC69Rb0vQaXRVeRlPiW\nqod24YO+Uvu5dEz0ZFZHoTdUqW2aye/J+EToxp/b0oEpKhyyDTY5duIMfcPx\n8GXvZyqKeI3mntEXh37HWYgzxq4ewlsxWlu1F/kHijC71U8hdbAMBcsRNhp0\noVcHDyrw4NOr9+bF3KH5Wz/yS2DmiSn8zbbtTiTuSWUXs+vkoG9mPwbZRW0W\nmD5nHxd7QSQ9E9DYbDDGvohjOCiURp3V4e9gXMT0HKprxwDmao3bEZHxop8q\nqQ/O\r\n=2oia\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"c20143ddd0d46da106e793fe5b768b628d433923","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.17.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.b0cecf145.0_1573324919594_0.42274750308121223","host":"s3://npm-registry-packages"}},"5.0.0-canary.afe0dd1bc.0":{"name":"@material/density","version":"5.0.0-canary.afe0dd1bc.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.afe0dd1bc.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"015b5fae5403bf2a3290c94051005ef79ed2f85c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.afe0dd1bc.0.tgz","fileCount":6,"integrity":"sha512-S12aKmm6koazGSE2NOGGvkh2CoMweiLA4mxUJCZCfoZ0PuKR7xJfLZnGj85+zXndAnfYJ7+m3rjmViyR2uhcuQ==","signatures":[{"sig":"MEYCIQCzsi8pMoMM4TFYbJExqVVqzBANSF7SF1vMVr+XLKXTiwIhALTr6cugXU9l+74SkRitHXxDp+02nDqJ6IgdcXcYsAsp","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12290,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdyYAsCRA9TVsSAnZWagAADBMQAKCnaOu6rD7uPQzb2Pp6\nZt6JJFSKv4ldp10zyd98dkF6yts753Vu6yIC5wC4vCMLSS1Fr5INofikCPmp\n0D7EVas2V7nUqsXr+gis0gXzhKuzaHwA0j2sG3LSuB1pxBWUjf6fWWyh4g4i\ntRKNhA8tn9XaCQFkq3fXAYDbb8BZvW51keb9N+tN8fTlOzhxcNp56t9Dbbsl\nfVxx8NqhrlhBt69KUzpw+sEyGEizlGVrnlAC2BDtJSqbfSIhIs5THtCHBo9w\nnCQOmM01tyXAWciCLdBWzNqaoIxGrM7dvfOydcHyUuG/Wlz+rGpaq0Em+IBD\nYcvn8JNRKP4I/5VbjBiqO+CvPq+E2zARWWWBSdguF/yuOxXzu5nKFow6PUVR\nrd4CkCPHhCSYAmlhoQOwdDQlilFH2yQtzfd3d0c4NdGn6gFqhQEK+NlRHE7H\n8eb3XnDfmgfONPvfoYZZWOckgLQonQ7ywIRYcKTcrNIN0IZ0uRcdyzCTmRie\nKjBjNjSjPWBzcN66VG/4BjSGvwWBDrZAzb7K9RmD9WEazjIYh5Ve4T9vM79e\nmS+wrauNX+VN3okohncH5diyLX72HvoiupiMuKPDv+4mS8us2dN5F5yKyhPY\nx+2t3ZePyWhhvgxpWDkzTrWltRaWlj55oC/r/b2kAbTTnVOW5umYzno0BlNV\npdqm\r\n=cBkb\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"3bacd69fa765f810b8bf40608eaa3aa2df12bdce","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.17.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.afe0dd1bc.0_1573486635703_0.5293981624713875","host":"s3://npm-registry-packages"}},"5.0.0-canary.b4cfdc40b.0":{"name":"@material/density","version":"5.0.0-canary.b4cfdc40b.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.b4cfdc40b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b89cafcf384534ea50ed0851ffa9789633b507dc","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.b4cfdc40b.0.tgz","fileCount":6,"integrity":"sha512-MkgZlY9SKff5R+JISpUD2PC/JrHC0RCgwFIpm4UzoqCGs2QEQpzQhRbuO7USsqJ0AgqxujcwW7XyP7gNqgpLIw==","signatures":[{"sig":"MEUCICtpDvxeCi9kqIHCsuZGILNoRlooZZ7NAkgEMX/HIJ0TAiEAoWKQtE1sByrjiHLfCrGi9Cd7/g/lPxPBmgshmvqdwyA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12290,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdzXmICRA9TVsSAnZWagAAb0AP/156rK3xE9aLCgs3S/Xl\nTkm3Wx4zj7bhQSZPvBFJVXfBDSpLHB/FhcE1DidBaSmFVSTNsgsGk3BE+6Z9\n1BtfaOZjoqSGJotQIdBfYdwElXrHDD8M5YJYRr+sl086e7t66zhi2cV45c1j\nfRpHmuUWJce14lAADrylWqIz613EW+ZexWvmteaTrKpOELbu1UEvdVBvLgxF\nLayhl9g8NTPYwTgMrX9BdJ3vSscSxdxbHleppivWI8VpcNydx5On55E0LJcU\nbUvQD78cEV1WXO5JiR7cOqvOzmMrdhyDtJ6kSlg2eeqeAQi7siu8GhKRIw2k\n42IIZyKs4Hi2UE4tlc6m3XS5zHgqek+MKCuQTLGxzKMbTo/Ims8g0YGTIL1X\nlXab4Efq9ZFAQZrud4KuOApyI5jUWWWwZ12xAyOVdCsq5FoNQ3zQ+3d3u1VK\noRAV64tZzaxEVzyUJvfnY7drOfza4PbwsbbY+bwwUQHIoSMIafrK3cnZ4JpJ\nuAf+1ELmwNKVNvyswbjUuQYS0C9Twh7RyEJJDb0zol9BQu1U3J+RyYZrTvcq\nZzxW1MhJn4o3kym0Bs0kGUTDWTFBeHhL3WtlXWxECpU1ZpoVosD8vap5AJaU\nXC5kN2SaRVqLBKTRkOHoqa6PlaRYqKuLf5Nwj/4nFLc6aZQ6DfA47Tw8CQCU\nfyMm\r\n=UZHc\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"2a81ebd1a573a096ffb378bd1ce7bc223a3cb54d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.17.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.b4cfdc40b.0_1573747080437_0.8999682587452293","host":"s3://npm-registry-packages"}},"5.0.0-canary.525989b5d.0":{"name":"@material/density","version":"5.0.0-canary.525989b5d.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.525989b5d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c2dc5bbaff129df60e3da58c141c660874ee5b53","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.525989b5d.0.tgz","fileCount":6,"integrity":"sha512-15AIRZbAXHg7Bqa+rfRTKPoYbAw9aESI9sPSqhgkHfoSs4Kh3C2vU8H/uEKTje6UI4a2khJHGcc7ZE3X0Sq6hg==","signatures":[{"sig":"MEQCIDcrDn9C4xJNTIjcqt7amK9IAsfF5KmDqZGZ4grqsA/gAiBbJjf2jrO3dUrUpaTM286gAmVwKtjzISJrWDcew2VyPA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12290,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdzeOPCRA9TVsSAnZWagAAGw4P/iaVvfZJp0RtY25o2GJh\nBz8IwyL9iizeaSpYhnNgODjVjyO2aVdne1s3GU4mRRbJJ2c16hD/bgytpEEc\nCGqMiEUjF1VQp4YLAr3IMAs2WzRKTElG+f0Wu7Y08qcgoOsWkiU6nLHNlT0f\n15poIxhKDzsHSF6kLTLWUW8iIPq9OSNmM0fU8PIceixdRDMAsut3CLB+izxW\nbD/VU6DqB+RRypdtU0ia7h9UM4wxzLArQaF9ITG+c1BcPYdBCNxjG03Uqx0H\nw2xp4uNYlsWt4Wzd3mQwBgr5uQPWw964yViRjfo8PqhVzSbV1eepN67IBkd2\noFaM7aWVIeaz4K8opNhYj+7EhRRBnwytNd4325897ygHAcci9Hr2qywafAQE\n2arUu25hL3DS/xTQj291L4oBuSl7MFrNiEzeqqB1t4Z78oreD+mxaL/tc3Jr\nMvpf6NVXyBqXB8/qUZDLn7ybxcoiZ79zIA9xPVBY8teg21ZawLaubGXLb5fJ\nXG6Het7QT1DUn4we6ShD+3ogdKb/NpgRrTAwLcIOM4FLxEh/xh8afRLh54iV\n8JGHf0bvLpusYE3bNyyvjUHxXubwFzBepuCU3sNjPAkcsJ55A9U8xBVzvsoC\nPakZIdVaDvqGPr61LnpnxdH+SjGy/NtX3WS/WUCe76aP1o8kxD/cT/s/clhv\nsgnT\r\n=DElF\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"2fcf375cfb22882468cdbfe126d349a996b450ad","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.17.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.525989b5d.0_1573774223479_0.5887651577605253","host":"s3://npm-registry-packages"}},"5.0.0-canary.7084b403a.0":{"name":"@material/density","version":"5.0.0-canary.7084b403a.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.7084b403a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b64a4da7708e084b5f6716e8a784d03687b96ae9","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.7084b403a.0.tgz","fileCount":6,"integrity":"sha512-tWz2uFc5/ZLbaMtao3kKb5+5OCfxLa6VeUP8DhrYfgUyBnc/wBjeE+zXIRC0WjYOQsf/2d22c0Z4iKV2+ssPRA==","signatures":[{"sig":"MEYCIQDbaf+UWbR6Nf8u2RCorQZiXDOQBfrM0l0P31Qwx7GCfAIhAOT8YP9pZw4K6dOsfsoshH0M1lHcFjPG0PE20IMkRRWL","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12290,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdzfnYCRA9TVsSAnZWagAAiS0P/i7F/fMdBD0tG+4Hm2D4\nQv5XyKDCSchx27dX1vZT5tsmoqgmK+T4oW65FSEneH63mCcTu/Mnm7+LSnsV\nlL+VQOyCWSbx4mL5G6CX5fZQWA6ZTovrD/Hb8yr4Th62eVjFzVchThG+4w4f\nqsS8v4g4aA7DohGEFcMRd8Vv9lwbXGi1wcsRemEjOa4TWtCvYn1NyqndhebR\nyE6tORugqXakmZ9ixex0fD7loWI6eVFS2I0Ft9PLEkgXKza9CDxdlgqJhvZu\nIBD0qJhVlh05fXSPDTLBs5IZJm/IeD8Nlcqym16BfMGoSTJwn/OH6N5JahMM\nQ/oT7l1c9+AgaovlJawtuHe0K0oEOo0UNqzJ+kNwAOnQc4RFWuOon0jD/S/c\nYzFqM2qKEi6+fS442DgkVW5s50qUIaMgUqWHypsTumNtzrJMDNUlIQgD9Zqa\nfOt+lyZJOq9tM70EZWX6FlwuwB9TkwfuNanlB0OA86gyXWjuEJEo6wVLFC1i\n/GN46BWNpuPiovHjA6M0tNyexBpg0470WM33aHvwcUIOOeqN2Ioxe9YAlLdS\ns+AXZ9kSYdG+lRU6OJgTSL1e6G+hbxcw7uuMj+9XUXPGlZEyxMTm4LY5wQpP\n22tHLayBAt3hGiOHmz0PfePmSNWm2oZZtE5gnE7AsB0nw5SYXpS1zaW2Z1FP\nl4ty\r\n=VpqM\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"6a82bd7664073498cf25876314019948f3295c87","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.17.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.7084b403a.0_1573779928337_0.1723451668987963","host":"s3://npm-registry-packages"}},"5.0.0-canary.3cbee6dac.0":{"name":"@material/density","version":"5.0.0-canary.3cbee6dac.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.3cbee6dac.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"39b04195960d842173926b0680f85d28f1fe2091","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.3cbee6dac.0.tgz","fileCount":6,"integrity":"sha512-+wdt2O9lsmtDctusZtyn8qclsV+8ZbgghpOnn0xE3XAUTwAmsZBsw1KBXG5c6aXkBpDbj2ao+Bzdm1oU0wWJ2w==","signatures":[{"sig":"MEUCIC6u7LQPaHXN4r8Xn3d4r/ll0xymYk9BC8mSa3Wk10WWAiEA4C27z/5+rZ07GQOs713kk6q+yY+nFz20rE7IfVPE9sc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12290,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdzyd1CRA9TVsSAnZWagAA+dUP/iLSmxUHpVf5mapBQclm\nqubR0daHCA318Gxu7tRndKZz4udNwLzRnyyYfxdzZZNdIE8wR2Hvx5FamKVw\n5t/tFOkiQmTFSlxHDwwLu1AHcqYtFZEl+TrujOFBQPpGK8JxSh89KheIeNGY\nMteMoO0qwcz5Mw7VV4cQb2sUjx8bwl4dL+K5jezWn8CHRrr8jW8wJXruXrVl\nWq8c7LWm3PX6ostzyW9mEdHjjRaSZBTz7rK8CNrrgV27rmrCUJRq+bL3c3T8\nlkgzFnwCoyfS2KrMmAW+k9v4s4xi1yAj1mTJXoeEAZ0Gt7b10nNH3Zli8Kiy\niOPZrSLAe5nA3oJA0CotXR79E7DDjV+zmsPK4uNJ4ZYpFz3LZHUKo+YGLUoy\nVbZrmTt56OhbAt4VzsSvtZlM18/lqYQNQwPoR6Kr+pZPhVKbEMZJa8QTs+OM\n4bBrISShOhzmJfPuU66x9oUmj8wjSfFWdnKcd2DyzZ0SyQHVO9ZWjJgvhXf0\n2crENFHgTXLjDSLNDZ/cpo3CBlKiRJwKHSLmKxG4BL1zHcijtd+6HUAhjbiz\nIsoE0CI0xHjeO9y7aGBqhTazYKpzntlgVh7JDZXBfD+h9XHXsMLexSDiYfjC\n+3xvNygWTvvhxJSpMTbpIM3uetduDy+3f80IN0a9X3q3lSGUU1VGERffLtuZ\noxoG\r\n=ni0a\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"5ae37026c572ffe6707702e535533859ddc81a48","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.17.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.3cbee6dac.0_1573857141129_0.013093927436807595","host":"s3://npm-registry-packages"}},"5.0.0-canary.591a6ad44.0":{"name":"@material/density","version":"5.0.0-canary.591a6ad44.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.591a6ad44.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d8363addf2d4146c877860d06b491f8b5bdbbed5","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.591a6ad44.0.tgz","fileCount":6,"integrity":"sha512-7hPly6MG4ulny6HSSH47myd/Z7s0+jwWgyA4kXg5mv+UQ7fYNy43NCga2+uS5QiF0iFmQ0kvUSRHDaWKPb+Kcw==","signatures":[{"sig":"MEYCIQDMxD3s1EgyB+fOpykwJ2NDkO9h0UBNy/08Gf3UEeZd5QIhALFwLB+crlkHjlGYboimtwAFeWy/q7SxCB/+6VHF8s1O","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12290,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd0y20CRA9TVsSAnZWagAAje4P/2GUYqLzEYfG8CCvX8un\nvS9W5D/7J2lY5XTZOZfIl0x6Atoi2lFSJu6CFgxtmHMS9QC2RGx7/0KrXVVa\nJjJ1QSK25p5AGsDUcsn1Xgb+zHJleo61O7pEy4Q1LYTsgBLjsWWLWhyewTTj\nJ+vHwSZvSePO4hmkwRHY8OId9W+HBwg4sv3twc5XJtXhJlMcFx3ryZhy+Z6k\n/gSe0XZEP6uf/gJUeRlB8fvTf6FcnJvL2U7MDzNfZyQhbreGu15PtCb0OJlT\nNqJq6JQFEq40H1AeMuh8rn150k5b21W0pbOD3LXHUde4ijyDZQLv8P9l0f3U\nQm8GOB0M3fkW6Ub8q1/z4SQRpMxbsuRyNyMMJWnfN+k+hXzhEGvCmaf3dMoq\nriWOnIxoPrXwEkH7gJ/gSWOWp/O95ZOsip/eEuJ9LdZlpyoDS+mw7RwRFZNp\n5BeSKKU+zIAtthchcz2Y0FFNrb5MlmJ3RAzFcyEjOe8Kg2dhrV/vAd8gaogr\nyKjbckj2f5cKqnrmEDPr4IcKQj5UwKUTW6pbXaOtf4yh2XkBstWdhLMwZObH\nhOiSQhzHFHbpFww05It+jBkOt2wveW7kl8QR54iqf4CM+kGIjPz3nrgz4KXg\nnsKB+vMhz9vtT/tTLRP66UDb8v4R2USibkNKx2EAuWH2B1WKuOaCyzlFYDLK\nQUbE\r\n=eW6f\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"b5469bc1cbdcbb7c9926006be2d2a65c3211c220","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.17.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.591a6ad44.0_1574120884190_0.917197707117257","host":"s3://npm-registry-packages"}},"5.0.0-canary.5729943ba.0":{"name":"@material/density","version":"5.0.0-canary.5729943ba.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.5729943ba.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1d8148d8889029b07c216cd14b033c105f7d9fe4","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.5729943ba.0.tgz","fileCount":6,"integrity":"sha512-kUuvWE2WQ9m1FslpzxzUTBySxln6RShKuomEVidDMAXlSZzUcqNPA7PWiJ4TDb47ueVC+pB7lYquji2dOUUMLg==","signatures":[{"sig":"MEYCIQDeeyG1cuvY/cIeD/3fj6Fnn/Bl5vEsESDx973Lc8ARjwIhALNRoG6457sSTly63I+1wOmGW/kNoIq9t4CIo2Vj9LXw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12290,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd1My/CRA9TVsSAnZWagAAZRMP/2iccwjhgweC4InS9LPI\nzFinjtmuW6jTbrHNgGB2wRzqivHwyjy9IHNRNZMGn4xPvSy6ikBc6B35yp6K\nGiZdyLQKNq9Rms1YZXDS4R1E7XEsVrydwXBEfkOX9pcSWhwHfJUDJKahI2XH\nOCrtAQD8BjAgplRAGITryOBOZw5MB+oGyYtAtK9RmZst7qS4DPlKBXApIPKH\nrrZu3Sdktg29QP/+S1MIyfkY+yBKtEdIiTbmd0hf/8AUQ/q+IU74M/Lg9vfh\ndVNn0HsYFDZrRTs1mlgkZUBEZWpFqnRe1RMmPxTBuaAyEtthtZw7Ia6zqjHF\n9WXu+6x6A6t7D2oaHHI0BK5P994WF/fLibN+jwsB/fHkkfO1yUxbncyQucqD\njX94a7CnHyPiejfGAF88qvXjEtIC0dOBBOJt6BOKDNtRIrTMzBWBi/MQ9cLf\n18Bwo35ApbOcGq/d1XAG+7EzGEEDsbdVn52luiKutzCEtQSZYUFowQaT9ThQ\nD6o38NiL1lSEL1ltiJs5T3KPXftoc7o34aSYOGv0lShR6KqPlC2kiXACZwSM\nfahLzDwKhZ9qr/qhH1X0g/GcZn3PFOOdoZaf4EfkDMGNzXnDA51fL+Jmyz3j\nKDvu7x2JA8w1vm4L+b4rp9TWjwt1N4Qd3grruXlaySgVLY1w33ScTSIi1QpS\nK5GE\r\n=yYdC\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"d49cf0658a3964963bb2b39b2e3a010615c815fe","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.17.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.5729943ba.0_1574227135266_0.141383706129254","host":"s3://npm-registry-packages"}},"5.0.0-canary.e89750dc7.0":{"name":"@material/density","version":"5.0.0-canary.e89750dc7.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.e89750dc7.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"34769963513b62401c9f1dd86bb5829b07aea7c1","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.e89750dc7.0.tgz","fileCount":6,"integrity":"sha512-vCLzeakTHmOUG676dfOoubRujo07m8sGbXDm1ZGRwPX7MO0GhqDtSFYI5eQHgBENBJ9PM1otBJjyMZ5cIEOJ8Q==","signatures":[{"sig":"MEUCIQC7lD1Zo9XzrQMcZajwY2QdD5JmvOOr24l88IAAlPeu7wIgcV4Cjh+Vj9G7/0YS7sWzhD8I7v95rmXoOaMLv3kii2A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12290,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3drQCRA9TVsSAnZWagAArAEP/ijFaCoIH31pLTDZOIwO\ndFox8GvnEo4VqG82kV+L77VVoGe92fg0TPW/3heKyns25g6/sRpUz/GCoe2y\nGod3p5ibK3FuB/Tsu1zpqXvJSeqhCPHWXi6EslfoD8GvFmCEzBQYfYp+3kd6\nPBDJx7qIXwXkndwuScBN8EmAf6ghBHBnFQaT31HXwUcWYtEtYuSBlXufLalU\nQsfFdVXPzUuqcu+RuI/5rFdIkPVeN0Sn0vI+wfxEaj5a+U6x1haLPK4LhV0P\njOduTYsPUzdDG3sDjELlpp3ngvcAKvMtj+KDtw1206T42bFoICRSX8FKu1gD\naDAgZ0F5RF65p2fVbcngs+xzdH46s8Zd9xLjbLvizf1Dxdwo0qRN6CV1UFvK\nHyDPhM7x0CZHzykkHRCoCMMVkGs3xDlGSFKsW5qYzfLYluQfY/tyb3wuNaSG\nwDGm8FEoTmkXzePpS1Im2GUWnXoFHL/5bYWYkpevH+cSVy4RKC04i5VWVn6z\n91jWdFRA2qqn5AMqQ0CwFDXukRnUB/zjnAgA8qDr6FveYBrlcBlBY2OJun1X\n4sHYQTuP1CLdcDeedK1TwHit7JqVxC15HJO3Zzk1WAtlHhFb1NHKlkalk6Rk\nN8oZuYZDbCHZIv02luzuKlwTdmvm+JJsk92dPLqa9aBVqhiBj7h52wuDxMrH\n7Zun\r\n=932j\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"2a166b3e817207f685f4b112635eeb21f5ef0789","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.17.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.e89750dc7.0_1574820560090_0.2678277285491706","host":"s3://npm-registry-packages"}},"5.0.0-canary.3e560b33a.0":{"name":"@material/density","version":"5.0.0-canary.3e560b33a.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.3e560b33a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a0550e81b6485b6d662aeaeacde587c13a3316d9","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.3e560b33a.0.tgz","fileCount":6,"integrity":"sha512-jRP9ODneTzVlkUfKFBEGfvLNQFfsF5LR0fqpR8LZh1f+Soq+PImnUjUoWT1RWLc9qaXvBwF5l6opsWUDzO59Jg==","signatures":[{"sig":"MEUCIQCRFHFjlBJvISZo1LNqYVhJm2NTUqaEoh1DUfcdr+75UwIgZ6REgsUuS8jNENZqH8ql+drTq5TzgCCnDYY7Ve9p4Cc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12290,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3dr6CRA9TVsSAnZWagAAdrgP/2QFky90IOPqtZE8V2gk\n6h1k5YY+6MioYrq0/3fNoUsMDEF6A9/rAPI8osZQam3di9oYV0TFXQUbDX10\nelTiho5x1Ksdxyxi4ifZhpCYjLS32gW/MRWK3cHK8YiqODbWSdp0T5wWqdmt\n2GpqNyAwrtazRXqnFC7CS6MjZAnV+W2bQnZH+vIh8DZcUiBp7L8W4fPakH1A\n1qell+x6RfmrPIs288lfiEyK15sPEkciWztVHkEjBCiek1BLbdS48t7u3Zf+\niPuw7KmP6zTzi4eesGJe+Lpi7QCK/sjejTmT19STT+KzRVQnX4ZTw6lrB6Kz\no2NwIiIr3Ij21RCfv7ro00R3peZ1g/bIFiqormjrXTz0N6qSny59eBpIVo7z\n+ZWPd8vXD1PJ11YJBckF80jCckAfCbj65JU4weNh/J54A/uSqCHVp0Iy2IgU\nFY5kN3WfV3PXvT4k7dEVykIUDeB56HE005Nx8DwD2/v5hyeIOQhyJnwQCn/z\ndKQf6boDgqTtGWxXEiPNmd0B6j1EA9r7LHRkjmJul3tff4IIwzIdtQSYIeg1\nxU7hKVABn2q5niBT2GHq2FZXVqpySHiPmFaD8OrHW4KoBUNnAlpZpKn/mD9q\nj9frC4dndifqdROOp+JM6xQAeVVYrnihnoplHeKfIvnWn5o/35R74E9YFaKT\nEyJ4\r\n=M8va\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"a86efd68e1e91c0cae784ad70b0e36c13c923dba","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.17.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.3e560b33a.0_1574820601820_0.03943589036283157","host":"s3://npm-registry-packages"}},"5.0.0-canary.7fd17ce5e.0":{"name":"@material/density","version":"5.0.0-canary.7fd17ce5e.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.7fd17ce5e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9df419251fadac1ef8f268ee7e030bcf610cda4d","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.7fd17ce5e.0.tgz","fileCount":6,"integrity":"sha512-1sGpwOiqNv62f05J8NeyX1rYDnvwO3hQD3eQ2nR5BH7P7qNZTGuNm+AQ8ErjVKUuevKXwvTWw0+m7EFY0y2k8g==","signatures":[{"sig":"MEQCIDVgdIODDXujKTf7jUHkQKfw0TmFtodZpjPUg/hgGn8EAiAL5SuXxeJySMU8KHOtCOqS+NYI+nDFO8I/JbR6tjR03Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12290,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3dsGCRA9TVsSAnZWagAAkdwP/A3bIzXbWoHJKwb6MN73\n+AxshmGTlxwDbId/bNVYIN9zI2UVdZ0jhXD95aVFe5gN3951Q/f9mn8qe3Zp\nEKoJaR1sPBQlNBaUbtnJk1JHenStXymHAf+exyelAJQGPn1i86J1AdrrU9vh\n5KZKBSHeZn0sILXW96ojQs/QLWjrjoBT67dRQfj86vjihVTDMIE2zTivZZOj\nSkTUY/nPz04iyU6pxbz7fDEpdpfKBSRkxF5HLzFI4XG4x3ZU8kSt4dIjta9w\nUg2VhfgJ2l9AL0+PA8qGKpLCiIqkmQC6xBVjkMnJyqjccxAGSX+IsiJO0OFB\nzIQ7PUBiS2FlbCk92tw9Q6iQFWcn8hDtUpKHUB6rABs4YMp8jX+z6qtniQSE\nquuAQx4wVxiL65AmsW0UFTr9RXLhza+B1udvbrPf9JqCWC8oypDyaTG67knW\nSrOLEyRVjnWtVr9FkI1rrlVNBnuZ0ce/ABOKyrk0JJSY+VjbQ0Z4JHQmEkPF\n4OYURyMSI5F9LfOFxU8dMspQUTw9qrr0gZSvPbtUS4UJjhYfMmbLTNdXDkKF\n1OUH6zEflbxcnv9CzQ4a0EW8KeB0HRAuOOQclYcoas+huYMZOlMPIH9xEk6/\nzNqoHB5oiUjQ14Eg8f/5pCwtt4aTkTYm8JJe0i6dNG1212j5q/joAPznRlnm\nKRMn\r\n=SWnv\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"e798e5bcdab4c998c88b2bde71412b2d38dfb262","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.17.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.7fd17ce5e.0_1574820614380_0.23818438265735398","host":"s3://npm-registry-packages"}},"5.0.0-canary.ec729683b.0":{"name":"@material/density","version":"5.0.0-canary.ec729683b.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.ec729683b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f907e0c77d98873c78c9f59b87a1c894fcd5834c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.ec729683b.0.tgz","fileCount":6,"integrity":"sha512-YIO25QJoKffvYKflXWXMKmx1eaazIi8OQUMMI78TiXYJH6Xo5L9og1Kvoo4iW5MAZViB2VkGSaZHfobp0nMw/g==","signatures":[{"sig":"MEYCIQCE1XdHDjj0DbwWR6AAzI5JabW2uhpVE3ox83Onzj7vyAIhALTNb96betDFyXu45dJHBa8h0nFLWXWYDlfSfNzthsF7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12290,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3pwtCRA9TVsSAnZWagAAnrgQAJ4uCn3sKO4L4Q6npIvL\nK5FDJbF+eeSBjexymeaYOQEC88dRTyaNAJdbElhE9EYiXqGmXHcj3UBs8reG\nhV/jqGe2mpIbJz3bUF+oTPja5+iKvcreq8yOpylk+z4cTGBYNQ67Vv582qvv\nlsC5txMab3Qc3p2shGSykVYsw0PEbCraowDv4+9eTqymSwAmyZkJxnalF7Qt\nvgjJw3fT5eNejJwuhOYPZnkf38tXngWdE8or6rhc1fIIsitV8dCBN717IIxy\n+Xj03/czJyXFjjLw1qia3p10pvCmpM3XeXBKeQFq81LsV+7HnAt4lOTeFwF2\n4WGq/cWxps/adLBlzYCcW8hzsUroDigefv5gYmTNs2vEoMIahHzi+OLJ8BmJ\n+TRzH/BLv1KgKaWWiB/UxHx3Wk5ZxJohSAl3vfaZj628pUvAvXfo6BC+wj0T\nUwyytXcQQ1F0e8hpe92EtiUu0q0ZyNsY39lHpLO6oA4PHdbR/Rh84oY1SD2w\nI1ObmvNCzL8ny0C2G2Ot2o76/ruzBPsGtgKDfWd0hpCVhTeOabNJI0wxnR+V\nQ+bryOgYRZybRkz/ymyCxsK4g8haaMWN+QTBASStvvCQZrefHb/378aSIO1W\nlR2A7VltNZylm/Pwwhu1FwDsjoQ7xMAEaiZQ5mchT1eezF3GW/NxZU5kzHUg\nzwxp\r\n=adNX\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"919526f37cd7606c0de4cc409ed4c1ead34b60eb","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.17.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.ec729683b.0_1574870061330_0.9762141885880045","host":"s3://npm-registry-packages"}},"5.0.0-canary.b8bc4a26e.0":{"name":"@material/density","version":"5.0.0-canary.b8bc4a26e.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.b8bc4a26e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"94e881461f34d3b2442d99d6f6804eb66b883039","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.b8bc4a26e.0.tgz","fileCount":6,"integrity":"sha512-Zd1E4a+BpYl9iJkSgi32rOwOzl9XDgGzAiPFzj9o4iDvNsdTcIyJibyRLXtQAVMbkgSeiO90Yoyo3XAQSl1r/Q==","signatures":[{"sig":"MEUCIQD6IcZO1iVPC+G9I6F5kAQNEP1O2hEqGLc4yVrOOOM++gIgdlLR6bM2Z2+mbUzFlGQ1h70Uxgm4gYltmYsEYk1Fxf0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12290,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3suDCRA9TVsSAnZWagAA7wIP/3B6HTCHEFlKZM1PJ0EX\nKplYCisiWypeq6jCKMuCvlUF7h5jf+Bt1CRuIJO72ibWilxcJVdYpUmyQwIB\nMAGr8uZ/dDu6I/4Nq6T/8zVTlB3eq8yodEHApQ5ZZ/IA/JMOuJ2n8U6m516D\neC0aXqCpqEI2Gkr7UKFXMVl9hwa4L1ZjMnj2mvnXaQvaB+PuTtg3omI7asMe\nNHktzdGrLi/z4WLFqlX6QoAU0Dyt0iOMVSt4MUrcVemRZ8W4LlMSP85TDuiN\njJp0bFHaZQdD9YyI0CO8yxgiu2p0NxCvU/8bzcIePx2q+ntGjTvK1Vjy4C4T\nc6TU+BsE8nwgoTJKUbDaTJGgXYN2mJd9o2TEmM/VoK73tO9WSMrpOWkmahyM\nI+MTnL1wAKS83w/yDBbAl/mH8kSaicRjS2QAQ/7V70GnU6w2Wy8w3CcEE6Yx\nvhUtfqUNjCZaTCbmt5fOxzGCEs8Alh0QEWzzN2hFix9uVCXbHAXtfL+Tn88H\nDgnQ8SM2aHUDoqxttCFeX7tFkQVuIXBja2ibj10lgCZe1GivCXK5e+fJkOEI\n0b5Ig21MIVwmGtlrKyTz+n+yuGBc6yqkIAA8+wk6UzliLseu5jxfIVdox2Z9\n7kph788sDy3UFVvY+EysTjwTb4+n+KgBiP3ZHhkIO9aOpzx+LpGO9iEXhbH0\ngdIJ\r\n=usan\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"d04615df572bbbf2ab2eeb76ea45696d0a40563c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.17.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.b8bc4a26e.0_1574882179391_0.5143962350986095","host":"s3://npm-registry-packages"}},"5.0.0-canary.f978109c3.0":{"name":"@material/density","version":"5.0.0-canary.f978109c3.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.f978109c3.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"563e46e99114a2c7e3f3a523751c26e71d4703bb","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.f978109c3.0.tgz","fileCount":6,"integrity":"sha512-WzD0R0pnJvq1o6CzqMC10ba/Jq3Lmedfp8zGm5pC2yrgvGx/3JXfg72aH+WdNrf3XLLhfzYtOuqzH1DTQzvdqQ==","signatures":[{"sig":"MEQCIDEftgmHyoNOIhhRyz59sGrdXaOfchnPk4USutLko2x8AiBUEwLBff0k3D5JSnBpY4RBIwhLT4Y5YWdTWM37Wqihog==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12290,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5USuCRA9TVsSAnZWagAAJTAP/29N75k8jZU2y1vK7Dcn\nAEpUTloCmWqe+fo0rlk1Fa1uUT0Mn5JOQkPBd7X6iB4LXe1W+lRZes+2hgEi\nrTAUe57i/8zC4vIPVD2/8WlhWwOmxoK3reXOkH03ZdI6dqtmXmp0i0MFcbJP\nSlMsSkyf4Dq2NURW0/fS0diKJejdZ+hIoAJTE46PDnPGCXFxpjt9imqnTuej\nmCr1U0bdjBSdIhrmRhJi3bZHSrJm2KKP7yJT59GVyYyyT4VBAbQ+jro0s8Ai\nzua3KzZaxhrPTHJ227QDTxL+Jv/x98om7GBiljpuZGWCa9GIAaz5Buir16Fr\nX/8RjoEdAfp/9nzmcMi4LX195IG2yrwpPAWtovLAJFmv6OskQ0pzuUh4d8i+\nvav6HRs4W9bgoLGgqzewzUVUd55V4iXIfYMRhK0DwuU+65deCx64DljkjRkW\nt3L3kIjNpGmE6edA1NFp9LUmU03BBOxlqgy7BUckcfCMyzPOWIX6NgqHEc9K\ng3qd/4t5rsOZXPWa7NUzMJtIUx+0Ec+rYnjTskr+iqo/9wQcd0KX6QCwdIep\nrFZwJz2tSyEcmvg/td7dRojJn0CBy9GZNL795m6W2Y2o2MxJI6QQAsWQxl6D\nxFbngMa1UcrSMF4vmyB/Mrh279AkMYjOoxHHbNsY7goB13l2U3CiDXdUoJSX\nuTM4\r\n=y3oo\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"27bb2072dd0bc0aec40da3282431f7513467bbd8","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.17.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.f978109c3.0_1575306414003_0.5079137932014692","host":"s3://npm-registry-packages"}},"5.0.0-canary.ad9dfe706.0":{"name":"@material/density","version":"5.0.0-canary.ad9dfe706.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.ad9dfe706.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2bb86211f2544e532d16585616f7dde92e1ac0ad","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.ad9dfe706.0.tgz","fileCount":6,"integrity":"sha512-Q38NvjYFUJq/kBIrdoej+LFZjbzifSHsx3BqIxLelGHGvGdIkPzGnJF7Pze7wOFnbe13CKtwtb9HfcfhzrPgZA==","signatures":[{"sig":"MEUCIQDihpq1WII5s7ptDyXHgB0W6/xPum5v+TOHXVNlOdBVIwIgVkPizelq93sU9NPV9XDR6EjZZxYmfZ6gia/FAdPTJiE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12290,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5u0MCRA9TVsSAnZWagAAHTUP/0NAm5nwWIjWFKU/fgWi\n9rx0Xlag/vM5w5iNjRsbecyTdKjeCoS5d9KOUzfKWVUiHaFE1xT9UO8rUTBp\nTfivm459QNCpvLHdzwUltQG3tI8UxiDKQQh8d9SqHHiPTcZwOXmfk/HO3TQ5\nnrB5heFyyD4r/0jiNqeTJp67Nl13yFD1GLlnvKk6fZoLBL08lmM3WNjovFVr\nddbu1MU8QFsStz2BUZ9f772Wpl6LJUBDRtOunBYZHWFWdMJ9fKXsOGj95Oqz\n92+8gn8biuasOuWWNIBuhMwjGfgm6Qqy7zCKcU8+624SoEOzA2oVw7fLpCdp\nvzr7dXGN0RPwo9b452EDqDH6CqcRAOHu/aiHRN/Wr4l1Y5u3WpWXjbgjAQxw\nUT3VXdu6OvrtbdvVRUz5yKd32lF5jEQG71zfQ9gVMi7xYH/vpHhdTGsuS3z9\nDNwCiM+qZU6FUcAuseSuKbaI+1GZj50js1iHxTQnB7UL0DugwhpJnSfRvu5f\nuV6TNx9j22mtFGKqONmSEETgmGEOmQ38g8rGBhlCAGIQ2jj4tUeGVn431LOG\nXQefgPknVMXLaBGg42NOr8DGjSELeCV/dSYu4hfVM16PQkpCLlNHPrRoaIUW\nyK487D2JZi5fGe23bvGYKUKw+BkCeJFCj5TSAs2vAulmN/Q3aQMS6MBiBxoV\nHUH4\r\n=0pbb\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"ded1665c7a532bca8466d5bc100026f56ea99715","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.17.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.ad9dfe706.0_1575415052203_0.7164831819401885","host":"s3://npm-registry-packages"}},"5.0.0-canary.5e45d77f3.0":{"name":"@material/density","version":"5.0.0-canary.5e45d77f3.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.5e45d77f3.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1a1a1d6e88c4d3310d393ea948541c5f5199cc1e","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.5e45d77f3.0.tgz","fileCount":6,"integrity":"sha512-9zfxdhwsWgsXWZa9VbQ/iDPl0mrh0/fqHKBep3nTWS29GI8ZhI63bFDpxva6Jy+PW7lRBPE/QRQKorvYIOUhHA==","signatures":[{"sig":"MEQCIEsUHsOEqGjlMe8uuGjuf4jBxOrnNMIf8XPAtLxaxViAAiAKHW0TKUEryG3YSl3VQpOmBkNn7jjQkTDpwfV/3m+8vA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12290,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5u1OCRA9TVsSAnZWagAAyjYP/3LFG7pN50tbLOUhX2NQ\nVrPzByYK2ZcHhmOycHD6l8rBxF32SfTmqkOv5bQ/4+w54AGnX1/2lSc08po4\nbiz4LMwXKLMuVfzpT15q/kBdKT2/nCjIw+JZ84sXslTSieQuiXX4Fzoa3Vts\nucZb87MdrvrvbvUaXp7GPeDFLvg2JeJPnUYnNTKXS1VVchyRmwvDKO6b8reS\nJQdAl6H7YMmZrWxlR6XnlVHdSRNohrEu0ntxunh0ykK/vz4v2g1p1h0+wKO1\n+9kVbSvLXdXPKB++0KkdfX0/IQPbhhUfrMnRumuvI7HvedF7A40wLmjBUMHy\nxwUpndJllMTUfNbxWqEbOzypcsRVRPZP6CtkrqK8hJewyA1sJcPoPzMoR8+u\n1I6B26ddiXKWqe+YgeaDbFkGrTAv4tJ0tq9u1ROs9LCxeGtmOxQJL7Z+KbIe\nMql7M1eMKk68/T4IS+qo2sl9xCE39kwTd8Gh99Ohm/9H4QW6kx2WjMts/1mm\nbdh2wRr5DyFQGKblPFFILLv4XD630wQKWV1LiK/jGOnBsqB19mRqUneF/rGz\n3W7b6UcnsRtYW0eR3NltqVSKBOEflBCKyFdzDxweonjronvRg7hFS+j0E2j7\nqmsK+JiflGbldedyFUPw3LI0xplUI6N1JG+ewymagaSyJMnaipBb8Nr0At2o\nYPpu\r\n=aWkB\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"d7a20a5fb792fe297fffc09187b6dd3859babcd2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.17.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.5e45d77f3.0_1575415118223_0.7509820111135019","host":"s3://npm-registry-packages"}},"5.0.0-canary.d10e8cdf3.0":{"name":"@material/density","version":"5.0.0-canary.d10e8cdf3.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.d10e8cdf3.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5c75cd3a048810ebb62598262c06ed52105247a6","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.d10e8cdf3.0.tgz","fileCount":6,"integrity":"sha512-S1QfFi6fCHUdDGeO6f9kob3XIT1ce+kodLb5G+6wnmN/l6jr+qEYE4X4NB1FdQ1yrkxPV7D2t3KSZYivvnAg7w==","signatures":[{"sig":"MEQCIBXQ5a3UwqT4yqeTLCE5RIDubwx3JqOZ//4RrATlNFG4AiAtxH95UOqlO4s4hE6gCNRSBsSzlZtq/RCxu38FVWM7uw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12290,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5u14CRA9TVsSAnZWagAAEigP/0gAZMB0JDQqn5l6pakO\ndA/Qpj3BBS+uZ7VVTPDBmzS5aVxTt4rY7Bwxv6CKdG7Te/p78N1KpTuwYE2g\nSJAAx0OOMPABqr4oHf3WGBWsr7vlx/+0Zomh4KlmUAYZ+dAAX3vmbgJJjCYs\nHQ6vDXIWJF9fNJIVyYEv0axrctU+fJD4z8rSDzSUqiVPdaonl9ppDpaOtJVu\n946fhkWd2B1vWvAlX1qi4Z87gDvd7x1WHENwY5OkG3oaVKXf0OuT9G+zVSe9\n72T2y9xcoZJLJ5BUrA1YMj9uZ3RxO/cXF2W1LU3gZv3YuXMu4hyYtiGc1hhS\nXXxkB5Q2i7pMM/VHCx4sDNEdgdknazJKs4tNJp0IA05c36uemtaY316siyzO\nBLB6NhyL68tHPyOjPUDYbUmlcw6xCjvOz4Zu0wHyOl3ZMOyU4zOS2hzSsQS9\nmEO2w0gtGa2ThQrc6DLVn3CxQCkccgAioWQkjjYs5OkGwq7Zd9/u6bX6NmhD\n11Sg7G7orRnNTB0eWwu3jr45tDYmjuZyUFNc7dar0GyPlIrZQrOzSJb3jyjM\nc+NnTChrWrqQSsUxG8Hw5mVXLSVNktHeoiL247kQ6QoTqhdSzz/KoTiY76Kg\nbLAZVtV/ttAKlGuURs/PmE9ehXiaWBxhJ247lFW4wkcggfnswu3SpKwi9bfs\naERT\r\n=BsIp\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"855cf0e11682e4f0f44f50292556ce39ae2824a3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.17.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.d10e8cdf3.0_1575415160420_0.7299557529668348","host":"s3://npm-registry-packages"}},"5.0.0-canary.a5dbd8a2a.0":{"name":"@material/density","version":"5.0.0-canary.a5dbd8a2a.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.a5dbd8a2a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"854ee81d1d75605642c83aec978792f493eb12e1","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.a5dbd8a2a.0.tgz","fileCount":6,"integrity":"sha512-HdLmlpXtIKmQk7gfI5zM7QPjnTxPiM/VUIvFmy0ivsotTDzkV5xZCeKdzWhjnda7QuYIeW24W0hJjY1yRuSaGA==","signatures":[{"sig":"MEUCIEe4g9Mw6zWVo0p4lepFv8eOqMkeUH4HDWFL6RKa8/L4AiEAwLM+PsQMW4b9R10I974ZoZQRZL1MGoAdAO5t5VRWoHI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12290,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5vW3CRA9TVsSAnZWagAAGYUP/j9NHfElQSxUY19IdyGB\nrcI7rwT/A8JTpvCusDgqJqlxeDelGW/HMmjIWVKNgLJtzhaAwYlomRabTgq/\ncwUZ7ofU1eyMeEI54h6PkdA8Gj0TgNBnsz8HOQX7zXdCxTE+Myl2bRljr9T0\n7q5io5f6jN35JRl1MVg7Dkv5vnqyhh8xTDZa0heXuLUCfE4BFSy673XfMD3W\n/R919D7HcMEvj967JjQlZx1Q35ETzCQvtWmCsN/PI5MkF+gatitY7YjHY7w/\nn934R9fM4YQDLkg/9yD7DzjI5ole7qGVPjpyoKu0C09QfOg6YJSecXck0vCC\nkONdyk30Q2hFRR3jXzsSVZaaT+CX2CO0jxAJOOn/TcMwXURVW/ukt0O9Bw1k\nVaH9I+0oyndiAGfbCOn4JCJH1JxeSKzZOwNUXwwpsCzcQ3GeCa3LlhT2VzhM\nFMZ8Dlf8i7SpKGXjHa8uR25a/6JEcIsjSk7572ziyagT/bfXs57dFE/7IoTb\nLU6H0UBu7v1/PXiraik9j2No/cfE/PZtFcpWODFE7Jp7O1BuDyqzJyjbSEBS\nmUOlPFiH2eJrYUBZzSLFO2SomhreQVJMrazu6tCOe3C/LiJlCK1DABkSbt0J\nl+X5Tuxu/m3wzvCRQDspxOR0uz9Jr8HIeIdDVDr+TQT+ghLEbr/ASGeEg96G\nXNag\r\n=HupV\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"8a67c95c393a733414be4fc008baf7637a9509b2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.17.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.a5dbd8a2a.0_1575417270723_0.049320484954132215","host":"s3://npm-registry-packages"}},"5.0.0-canary.ba879b68b.0":{"name":"@material/density","version":"5.0.0-canary.ba879b68b.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.ba879b68b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7560a22d499d1c0786585085ea7290995444510d","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.ba879b68b.0.tgz","fileCount":6,"integrity":"sha512-PSoPR+l63mNnJsfT2QQS3h+j/gffin175kTSzXOhC39VZXUxdk8QR7MCEV/WnsIjx2XW1pb+hvvOr+NWB71YRg==","signatures":[{"sig":"MEQCIBWZ/RVM508YaSW0fJyqcaa/B/or4uNSScx9FqsXDkWjAiB8d5XnWAU9avV42GeSCV40mpQxYnlSeJIrKN6f8iPosA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12290,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd6BV0CRA9TVsSAnZWagAAEDsP/3ghhEj075I232F3jPcf\nT71q1ltDdZSWVUVhPDuGe5bec7iZvJ7wzIRZEITXutki9XMngpozVAvTwvbr\nSZSoMRY4dGE0tlVG0lEY7nFTd4Zx8gdgp+4YfewT2y3m6XzTF5PFgcxuFyYs\nWheMYap1jE1ExuW4xisoo6sckxyX0Dhw0Km30qnbR/bbBKTTXBLj0goQx7Iz\nFggQauJhJpJSlyT4Wt9q4aT+YlWhnkmIBC4S0vBZcjZnmuOrNCqtCPY2h8Gm\nv/99mecykBGM89mFZC7HFlDt4SjzH8+9lPNsDElaal433S9hgpDa2+PS4nFs\ngWHsYmxbxpqbDrLVpnEPhmdg42ngov/QuAIrQS8jcPGmcbijJnoDX5ci2kRX\nYLBjQRXS2YH2Wflqvf4TA+k0Oqr+X4vgkCHd5ju1ZZlTOMEuQDmviRP6w69U\nFyNxwPdtv93b5QCwj2BSyIHKfEINhp8yPow3OKapETjY8ywaJa0zKIXMVfiO\nRaitHd610JhAwj6y9/8r2F1fUiEV5+UmzdzuxCZSMemNca//xKb7B+KcGZGP\nhDiqiiJXwqGOvm89WNNyFjv0WBZqumCz41kzyVDLCGgjxtPiJHARjk9ojytl\nWjqP0hbCRZL5ELrSYegK9CYZkGR4VkZPuQfit31jI3mnsCf5aCUtOinvDTJU\nCUcc\r\n=HZO8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"83bad042ea5d5cc8b93df88a1d4730099550bc6d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.17.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.ba879b68b.0_1575490931706_0.9493369665200437","host":"s3://npm-registry-packages"}},"5.0.0-canary.aa0eba489.0":{"name":"@material/density","version":"5.0.0-canary.aa0eba489.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.aa0eba489.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"669957ec561437698088fa09b3154db428543d4f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.aa0eba489.0.tgz","fileCount":6,"integrity":"sha512-DlPnkbnhF8dEi87UyRe3s7rLoETEvBHXBSeCm6ho6crpLzY0KfoxXiXXZjSeliWkFcZAz0ODOmT0I9TLAigK7g==","signatures":[{"sig":"MEUCIBjcs3sVJqa0Y4yudyVeeerF015ofpxTkyEjgfNbFj0IAiEAmzFP4dHoPHbto3SdTuAOXM9Y5FuvPgjnmBTdgcoYbR4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12290,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd6bXSCRA9TVsSAnZWagAAyXMP/RsXV7MyCn5dImHpdY2w\nY8LyLxqUaqwOFNhnaIEZO+5gic+MXIB48iHfnI7Zfae/j+0Mx/8AanzeG7gL\nL3+0oqiA0H9Dd1Qq+CNBP/GozBCFD5h6ewIOlryuMTZc/vCxm7oKlsmjAt2P\nNqPHJDHuXJ8JKwgHJ3YNYf1QYCRni4q4ARIZNTpROCj/5kvZAkLtYAkOKUt8\nI4ABILjAFOABwyjXqRTYBm/uiByFqJnhJ06LepgBv5ZC1h/H2GkG+P5a8N1o\nJAZzLQzMT91pMPh0QOAhsbjGClcF7xxFe1iwtPFu8LnxfEpgylDYblZ2I7k+\nD+9Mdqnzk241SYMnsTH6ZDVvnREDg5iRO5VNgbBOFaSCHSkwZKTZxoAkDRlG\nu4OApgQA7kSAYWCrX8o97ssfhS4nZ/3UTpMpgyvExYOQq0/Q7hYfSQSfpaQj\nUYxHUsgx01lRduuDya8ANgkzQIRdDFm+GqyKZbiFz1h6udv9EtrfngshGpsq\nWMreqWcVFqy6oTZ3IciTYVIiZfU/HEjBCrsmkjsSmmBkRtFL6ZqJWevJLkEC\ni7aLm/0m9jQlLguroz3wMLWaA9X5pB8IeZiTXK+4SZkKBTwwc+kMfPg7lJTL\nHR2wleZw1grglvSIBFQPj5fz9Oew1dyycnGjd7sFdb8GRXf3F6Y9/S4lAcyX\n66gT\r\n=hq23\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"50ef06854f8319df2975cafcb0b8c94fc399f155","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.17.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.aa0eba489.0_1575597522042_0.10616354296466168","host":"s3://npm-registry-packages"}},"5.0.0-canary.cb7b71a86.0":{"name":"@material/density","version":"5.0.0-canary.cb7b71a86.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.cb7b71a86.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"22c1bff069cccdabf67433046f537ecbf5f985d9","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.cb7b71a86.0.tgz","fileCount":6,"integrity":"sha512-dpjW70qyvP+bQ0TFuQiGTR7Z3NDFMER6yaGWhU+1WUIryuz3FnKUMO4qCofwuMS1r8AagzYcMDmo37LDqWFa0g==","signatures":[{"sig":"MEYCIQDzdMOiVSmbJymsnXwPVq/s9J5Enap/JA2ZV1PCjov9ggIhAOWg2fB1ott/Ka/W2B5+IDgWxDdm0CV/LaXfb6GHRMxo","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12290,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd6upuCRA9TVsSAnZWagAAWE0P/jLdE4OF++9Ie0xRQHtC\nN92TTTe3A8qOfnY9RkG0BXu1F/+UZFAJnCpOh6Bw1lPsgmQ+9TRhqtsTH+lg\nmHlncZ4U/ltjrIpQSkFW0hS3YB3T9qG5ge+SRCcv8eGNeZvmqnFtFD3C7o+T\n+Rsbmb8eqvM78TvSK0idh17bx8iNiwykFSH2gD7u/xiw0P803E8o+A2IkPwl\nhG2LNOGtl2pvKrcbarTx1FGXqAMitSRFafs2c0BMjjfb3ibCh5pjt+zK0ikO\nHnqKpyJADJ7cQoOHTe/ytbZJ8SP8MpZQFJp24kthoa9AFj4Flbsvb7sJzcsp\neU6fn4obTkEdlzCSwS1G8AVk/IOst8QpS0bj8A8OeUKggX5hQy9k4RZUtPXH\nXdloTR+w+yHNAm8UldNWrcFaN50b4sDwlU5EQnp3xt+EOlCtSXqVS6jj/Klt\nIgAKTJq5PD1RnfvzQKVhP+H2Bgz1awJ1WK0rQJNK1ZKrgVD0XXNXgYGG02r8\nZHS5ZU6O5WT5obeY9sx1Yi59ndltY87FVvWtwGA7h1aNNui5XPw8swue0b/O\nOV3WUTxnr6YV1ro1qcR3FgZZVB5k6ZUfDzCwoMhiuGvuuAGh+U+cLqq4iPnA\nMwP3M/y0H1dxcTMJjZpwpVJs8iHz1DAmjNrCUiWYTlXfdo/lLWFZ0eqdK6/L\nxlVD\r\n=jdCQ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"2866cdc43c0ae69bc09927b490f0805ca21adfcb","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.17.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.cb7b71a86.0_1575676526260_0.05741938843541394","host":"s3://npm-registry-packages"}},"5.0.0-canary.50f110a6c.0":{"name":"@material/density","version":"5.0.0-canary.50f110a6c.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.50f110a6c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a728e7e34dc80f584be452c6571f1df730bbe950","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.50f110a6c.0.tgz","fileCount":6,"integrity":"sha512-3za6eir4hkEdGVizayBHlTKN5XsFoVivUv9ph6NnK6vy4mZXxql0JHfApA0uOXERAr4JnBfn/8MRl3u1KgVyaA==","signatures":[{"sig":"MEUCIB7syWhG1u6kM5mLRs30HPcSWKywWZORRRXdTe3T9SqZAiEA4P++5+2lAxvzJb9yCfWtTfa16gRZV573IDTQEhH+050=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12290,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd787XCRA9TVsSAnZWagAATDwQAJpdakwDR7U0Cjx4cWH3\nbe0WfcGGswxMdL1sggR425fN3ck9CLTahv/ppi5hBsV+td4/83Oljbhke076\nx0syKSvSbDuPl+LeUXKc9AsqpYU45tRxon+X/r9U7EwTyALUEFLP03qTsmFt\nbCiRvnOqPJcbWC42/j9yKJWxnFq3Q5ZF6bdokj1BBS9A6s/H0LkucjYGTLY2\nJ2w+hg88rka7Cd/0R6laBsRWU28bfY3zG9Ba1/HoD83/QCCLkSLAyXJFg/rH\nsZMUAzfIQx0LGBHTHs80MjTehI9+zL9uAAS3I5TbGhXeDJ1fROwhMZsH48MC\nCwG2wD9KllYYU+HthRv+l9MViA7CFB7MBmCpT18GhIIZW46dev2R99JYEJvY\n4GPVL5rr5qFWuCq8z+l1Fw/vwI1pInwvEHyv5VxD1Q3F2cJa/2czmT1AOizc\nMLgwQrzl2745kg687g+y8bWWjFZyrVy1dn7YznTpf7ZwkWyBQB0dB6hWCO+o\nMxBkl0p+VsvKb7ZPoj4/hEskmmG+CxqL1QaUyw0rfUBjk6eTJp8ENcv/4ln7\n8ZUDh2JLSWnSyfOMxd393PISAKlFeZhf0BEE9EVrunq0PsczTACGIiip2+GH\nT+JMKtsB720FAFW4d1boQQ3a1OfCb9YaRQwV9xJ4wVImqbsnRld2ckDxqtNR\nNcgv\r\n=pr/Y\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"84e9b8113e75730b3079c429f751cf857a866b51","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.17.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.50f110a6c.0_1575997143620_0.9462230277021013","host":"s3://npm-registry-packages"}},"5.0.0-canary.878a08b7c.0":{"name":"@material/density","version":"5.0.0-canary.878a08b7c.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.878a08b7c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2b1b5f4b74e4aa9a2672a64fc9f0b397e2f1d4e1","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.878a08b7c.0.tgz","fileCount":6,"integrity":"sha512-6o3xUDEgf40tabUt5aFXy2XtOcFj6TsCNk5I+lQCZIdC0p3RPUqefy/jU22Jb7GqDyEy2beGb308xeDNUiRCiw==","signatures":[{"sig":"MEQCIAwYJi1TM6RPnboswS6EBHz/1bxVSa3Ro1SxIDc3Y4BdAiBDpwElcubObnl/B7vWcBVXFNJ2evWjlbDN2fx8Pahx9w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12290,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd8U52CRA9TVsSAnZWagAAebAP/RJJJJbjjblUOOcWcmBB\ndAEtPPUGNL6R/qx+2cIGyjkjccBCeuiC3Y7XYl8kC++qMqBWpOJChLOa1kcD\nAUBH6mVRBqu3ksSWejnWeOAlf5AyyHtVKEGrfa2S5Spb4JSSV+PmIlanBN8G\nLTYpx9ijO5ReKWiP8q6hOrxF0feQLdVXrx7L4JmDX4G9ThpnI7jygu144A2Q\nMomDJTFDa4ZXOlbQ2mJ8WC0xNvvCrJj787SgY4d3LAwBhnQQ+eux/DMDv5ey\nnqYwor0PSqy28uUx7E2OedRR6YS/XCWmeYdftm6hF2i0/eELXWn/tOQm/zgq\ngkJ1ein9/feFPMa6oW8FxY0KxjxoQyodD7SStP0QJqu7UJuyELxKUbAnYNYw\nSajREpqKt9Iwo+FWVDf38FngEDtNVC9a9UV5dakx6fhxe0ePlKyOZchiRugu\nD1dCJuqOb/5uRF/nkUHmsp/blVRHk+h/zwTWpkxPj3UNmpyL9yv0mjCreG3T\nol37lMK3d3v8XLCiQhAL8dSiH637EvsCdfpvhkmvqT3bY7kGvtkhZcw3cBf3\nr2kYmSuv5Wk6IitffL3+9QUylj5VAIfYCcPEmtIW7ngTfSJJsN/EIPWhsynM\nEskV1ZR2zJfXYIyMzWFGs96L4vCvacHaKhct6sARjQfvjnw1s2NNP1SgwFJ9\nfAM+\r\n=wlN8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"13bdf58f09c0e231663da8e8e9856d7a442efad5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.17.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.878a08b7c.0_1576095350601_0.7580167674849243","host":"s3://npm-registry-packages"}},"5.0.0-canary.397905b4e.0":{"name":"@material/density","version":"5.0.0-canary.397905b4e.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.397905b4e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"008dc11aec842f997042cab1a600885fc6599f43","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.397905b4e.0.tgz","fileCount":6,"integrity":"sha512-mdATsXR40XunK29dOmlIZbjheNmOtRatvDM+evkjq5B3axjHvV8wMZuqmVueqQa86KPJzfCdEZUJcKDGCRr/tA==","signatures":[{"sig":"MEYCIQCRWJmzKTYQP6AmUH74lA4GkAUZ0nzJAaGzYzlc2yc2FgIhAJzDq/1GTwF5Q09h5TSoUsqJeTfHCd0sAr5FQWaZNiQb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12290,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd8aoXCRA9TVsSAnZWagAAh7kQAISv1vuwqJb6tF5zhFef\nPdkuV+mY25Ay4jcjHGhFH+uZ1phvKfDikpDDUA9IB3yG7I1/JFQMz7KRLoyR\nK7wTB7YQzgZTReNePukpbtekE9uWxeTKBXLJcqyYZ+HYuDiBta08+DtlU7lC\ndshtPNcWRbYbmAtFugYFcBaHBmIrJ0dVNQR4zu+IG787FZN7wSdnsmA09wb0\nqA7xxqZVrA2E2ZmdAd8JeRjYOBMrmSM+WpC89GfUQPUTrOHg0L0NkBqGepDU\nhVD0OXrwqXpEMDJsIyK7dJW3TfFuBTca4HzIVqbKvPaFYwcCiEvVz4THdxfT\nt2mL6pnne38liHZvNsjrJbuUSAsDWq7ieT6FlCgCuv0AGN67XsCWvLdRqqej\nVDeE1MBmppr2ESocvF0Ouu055Zthn6So3x4U78+tO6uGrWKGHT7uEuGGq+on\nBej1ohlzGIKpLpFTT3rTKSi64p2ZffU1I4wsu6ofDvOm3L/nUaNnJe8aybWy\nDXBNqrs17Uo25A3mXQCn9RuUAHyR4fpu9opWjgojdaw4rnEo+weAp3Ewt1ag\n8EMHBiCYnHnNoLWFryIpX7WHyQ9gnN9rGaaKWVggCL24WdekF8lpp6nmEf6f\n68LbRyVna5jDORvbDDf4TZlou2APSZaa1nydEfFOvStLAVnuxigQAPJBs04e\nd1fP\r\n=3CoA\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"43ff8b8aaa48d3a31fc6835290f1ea1822301146","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.17.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.397905b4e.0_1576118807584_0.8305603932693915","host":"s3://npm-registry-packages"}},"5.0.0-canary.1fbf5bd1d.0":{"name":"@material/density","version":"5.0.0-canary.1fbf5bd1d.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.1fbf5bd1d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b969037cb7441c71b3d976e9eb06f4204e216211","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.1fbf5bd1d.0.tgz","fileCount":6,"integrity":"sha512-ZfONCw+etEQ97ZcqELw/5XWcF/AekkJZwLCpYrdPyzUI5gj6nckjqm6Yst0HOc2zCoQ0EkgnkcLEAA44Fqz7zg==","signatures":[{"sig":"MEYCIQCQ/rt694zQfQM8WwUxvoTnON21axTO3ohWNSJNH7a77wIhANV9U+vPNHGyZwF13SzMsAKoj6bsNGyd0PHvuhKEjK1H","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12290,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd8o3qCRA9TVsSAnZWagAAK4IP/3UVe9okdfdUWs2aZlN4\nwY2Ip7umPZVxSLIkEEe4Vz6YBtmZmXijcq3gBLWjNQtncEIqyMKZ/zd+5RGG\nyZPaB6e35m+uLPRicSgFkcjQo3UzpMVSkasIyqZAyoRmNsWYDf5lvoMAcklw\nuDg0OzhZ/9trGTTwHA41TPHhcHelrmM8Rogb69T1wDpUyut1PUSbl4KmApxk\nHG5TvuAlqpiLFmlFn79NMwMZLTJIsImzCBTboNr4HdbAZtqCbiR6lSSE+qhK\nn4oUcmpyAyUIPhb8jjE4fMjuYUwpdfiMLYkERrf2UfaNZqOZFlF58EW4vU9R\nwE87jwcFqYn7s3i0lmIN7lcNTnO95QCA1f7fTdVGMRl1QsCjWDfAE5jstvvH\nGCNP4VSk+JdVPsKYisl3BT43lPkbDAnjk/+ekQ2qOLBrJqcwGnSfBc7aaMxC\nTOZ+CDN3un5qthdQuu8UWmxfNzUt+szZMAJgjaEg6o/GA/NUQqhnNUnQf2ek\nDh2N1By51tny96mLiRQNigp1jgivHwmWb4asM0YpPbRWSLMJemKgOlb6EHmR\nI/eaYUkKvr0kQrKFibfoij12ZfCBwr1VoPsTmY8aIN7evnF1vSAV1BEcXTMI\nM11u8qXEYMaxnYVc8dOGWgjvBgmVLzEv3pEexPgJQgQdEPui+xTGpItcYTX5\nG0d9\r\n=LZEl\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"d1aaf5edd2a8bfd34d05df3e3c52dec6affd6812","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.17.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.1fbf5bd1d.0_1576177129624_0.8176821078627028","host":"s3://npm-registry-packages"}},"5.0.0-canary.b723dfa78.0":{"name":"@material/density","version":"5.0.0-canary.b723dfa78.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.b723dfa78.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9144fa90489166e2129bc1699ddeecf0c912acf1","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.b723dfa78.0.tgz","fileCount":6,"integrity":"sha512-Rv6fqaY/K3UqARwOJxMcC7lhw7HnAAdYmH8JhJgZdJzcQN8hFVa6osTGIzc9vef7lz0B7d+j6QR51EWYA2ikNA==","signatures":[{"sig":"MEUCIFgyu78XOF09WEN/lAIF2jyxE3ihOQU5gTF46gMMJaPUAiEA89O/mgn21uANAUD4CB8dXUJ7zn77Upj1V863uIGnUl0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12290,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd8p5oCRA9TVsSAnZWagAAtLMP/2UAJzKAUoWA4SL5HVcV\na889c0dPt6TgPwj5mvjIJgbfXYueV4LQ+BNY+ebdSyG9i/suzKgJz8Da7elj\nyTeiPqrBvH3mYR/p1XCNNFBwb2VOZxqKUO9clwur6Cq3/Jgmr79q+aQjmeFF\nBJjIapBLOxWyZPYo4fFZtA02oGtuU6VFd2j8UG2UV7jdm8pv5vMXPsh2Uqda\n48tlEMuwsIv2oGLvIV637nJ4G8L9mDIpIJDDj5wvP2MGWEykbnRXjEHSLvwI\n6C1cBPn+pzs877RMGF8wSDDDdRGCM0fEY8cYBT+QbydsubfaDyx9g18QeSRR\nk3hR7gNB48ryDi2z6R+3xQUF48XBFG2+++OBTZB8zaapgNIQ82pkBbuQJBMC\nNd5FMBUVEYrtAIhvI5g+RZ9kUtBqe5sfCIVDFpkuOLnGDLtQY5lAS38bL7oJ\n7yG5Xv2hhH95SzuQ8KiQOmnn655hjiXAyuIhVeOJYPeCTxwFEIXT8npzseIK\n1fEw2VwscSWiKFopBtneWpFsb2HrREKoJsTyaTBOLiHgP9l8Roz4cAAod5uo\nOJ+QKV0aOmkvriI0sLd37UA4ty9FyGhaX90rRRiXPTZQJnsQj08qxsbLWqWl\nD1kuiQeeKKW1XuGx45/2LMqOelAbuLQlthrbCD1cQqlE33tjTDt3E7rdNwGv\nUhMQ\r\n=WRBl\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"643046d4c1ac458ec8eb1623c5951b3c9a17d2d0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.17.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.b723dfa78.0_1576181352455_0.8347244247852967","host":"s3://npm-registry-packages"}},"5.0.0-canary.1c494e567.0":{"name":"@material/density","version":"5.0.0-canary.1c494e567.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.1c494e567.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ab32e79fcc52797469fc719ddfa08400d79b6d71","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.1c494e567.0.tgz","fileCount":6,"integrity":"sha512-nwuOgSpIPrPxV3Kk3lR9L2fX/s0KPYOEgMBHDh6bCqCU7CE8DDntlkmbravBOHg0SpEQ7/3kUz5c+fHSLwX2yw==","signatures":[{"sig":"MEUCIQChTxmL+/6vnI4fiigQyPh/t/P/45S8f59UNlBgEe8fDwIgcgIyYL7fAIMcgkMig1ycWoEALlnwczdQ4Xq46Czwl8o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12290,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd8s7sCRA9TVsSAnZWagAABMwP/1fAsiCu3OA1qqsh8Dq9\nxSrIGJljmh7sqjPsoGYzxhGt/Upm7XkhN0SiTedEhQosm0dnVJWXBA/MwrA4\nUTkzrnucfQfgdza1q+2jsSRZcMC62I6atDPSmA9oqpj4QXY3SoolFttqLFaQ\ncENUoSK5iLPfIM5D2K6tXtdYrDULvszG5k8yvwp4pMUg+L52AfDe3Jg750U1\nO7gaOAlKbagS4yA2+rgTqbfk280MaYp0NuotXWD4hxzQ6/XBBvNFsRPeB1jD\nHF6WlxtACCV64srH7K9vKNpOLsyvFiGso4EIeLio6RoCeNgLnoat2Ia9Xs7s\nwh4Q58PAEjubKalDrEb2TkBXKWHJV4K04JUmC5Pv4EBwQq6MeZRU0Qe4DUtm\nxSorpHCxJWpAEsXPJRZDp/CBw5kYqFEscE3VJtprg8M/bIFwk3KAZqMwCP2Y\n+Sbdgw6oxKSgnqKovOPO7u1V4XDdKZD7IUuQqlClbWyok9+MGy66ogD2FCZD\nPFJZc2O4IMvmFpjXfEh+fm1s1YTEy3rlD1Ez21JxXd7SoqZHTC1UTgRRWF1B\no12X6ILTrHodGDcxuP7KiiQ0sD9pNlHfHAfInBKaWUr5D/HfJHH+NwM6M8H1\noo1H1hmudWAkd0/+y0fqzFmbnQvwJ81a2GDPXTH+VYVROoWaX+2DwdayFVjQ\nzzOD\r\n=A7eP\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"d7e01eeb35d8a54be431b39b46b389f3b26262e7","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.17.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.1c494e567.0_1576193772076_0.2578896834619193","host":"s3://npm-registry-packages"}},"5.0.0-canary.c9e98a125.0":{"name":"@material/density","version":"5.0.0-canary.c9e98a125.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.c9e98a125.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e436a56aa561e61c8ef20a84ad8f26e6fd926050","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.c9e98a125.0.tgz","fileCount":6,"integrity":"sha512-C5qIeaQKxN7Dgehh1kF5H5erOqS1VF1KWSR8zwcakmXRNdVQbvcqH+dEnFPvg3wIIdzj+sDlJacfVURJkCZ8sg==","signatures":[{"sig":"MEUCIQCIOY8wqr27EBI6/vkuVIUPco0TiSl0p6s2W1yKE2CUgAIgX3tSVd7tWCJ+Hnhowk5AS0cgA/kD9i7vJ6egVZXp7Mk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12290,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+RnJCRA9TVsSAnZWagAAPTAP/iMVx9MUtHasiA+R2We6\nPZil2K+wAGITKdjQsvkbzqS9xDqnO5zBs4CkHlgMs2Ea8Y62/g0qhIfici7b\ny7OtavGo5eKb2Vjf29BuUbq5PuseaLqa2NqriOihwPgAB4rvipm1tq2rr4Dn\nppR1ikZ87ATeH00f6tQeNDkY3frVuD1SMlZgzSeV8uds0p09hh9l9CT0ZCv0\nJhtcZv83MfGdCBqe3GQplhBWKmI89ebZSPvzOMDiTUlXhSjQrlHwfDUGQggE\nXFbTYsv11jPK3WwNKsvrBxXZhkUPnv61p330SxP0Cq5cqPiLotui+LyQMXD2\nPGPRK5nMcw6TmKb0K5RWL8zNtNie1oNrOL8NJpajtrPuJw5LCAkaA2KfBkYv\n50yQN/H3ABxB/16ja6+Goir43kelTM+emASJGVX+qCLjWyVG08iV5URLJOHj\nPcHI/PMw7iP9Qx8udR0blEyyfHBRWqt9dNfoTMbceahA5UHx47BeH8kzbvWC\nnozMpEoKe/cfto8Jx59R3RVAo6Q2jkLnAdSuV+8DRoNUmDtKr5rAGFkkskHk\nXenZZ2ic64uodOXlGvA6AI9HFnfhzyC7uhUQ0kemzzZTw7Q7Kr5yWTjXkMz5\n1NVS7RlNet5Qk2r1WSzJ/hd5feTGf5bYXIS+S+24Jokdw9dXgWC607j92hHf\nqPof\r\n=XC+N\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"34b4d9d0fdd6b65308344880ca9abcb67a41ec58","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.17.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.c9e98a125.0_1576606153335_0.03864398121508761","host":"s3://npm-registry-packages"}},"5.0.0-canary.5ffe8f7e3.0":{"name":"@material/density","version":"5.0.0-canary.5ffe8f7e3.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.5ffe8f7e3.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"25518927a9b1ae2ad6b09e0fd3f5a3e1062a5084","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.5ffe8f7e3.0.tgz","fileCount":6,"integrity":"sha512-dTgav+CP2c46YlgOyV581AzSTz9fMg4iTV7FfAiplkyLUGZo55Y9a8hA1RWR0kwLpH2TxTsenckOuxq/5plpxQ==","signatures":[{"sig":"MEUCIAq1LVBl9Q6RLulBKwPDDLERPYgoc1kk29yjc1K/hBldAiEA6AM1Wq0GyWX/JKdIEL/Fr6Vz5pzYp/QlU+YweCqgqUg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12290,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+VeTCRA9TVsSAnZWagAAsCQQAJpmxEDlmxmMSE7BbP/f\ndwzy6kEFGtAx3tCr142Q10SEEKNMBfVnGJqrm0PmAJ8XjtUN58B4rV+1VwJN\n759AEVQyhTXriWEFIL5SaZPEMc70GEelTy6TDJHVEKlsCHFVhdXt7sDYsq+a\ng/Vgm0zKbCtUudpIEsVl7FL1dz6E8W/H7f+yZw+BcwBNF2U+Ts37fsqTJmDD\n20FP/iEC/95GSIhu3TxHTHY4plLZPc765K0WqGL30707eXww+2qqrQdPDfUI\nVJBgp+TNpPgFXPD94mEBnsBNgw53KjfO6oHN9UNcVizwug1d/6e8OMc6Njht\nCPvTCwYspf5PNhubWLx5cZR//JOH46dUBQESQVOXmDrxQSUC+ADpQcO9RBTz\nh+6f5kJg7uhl+TfKKtALMrXGSvSr/VpW0F7to93TnAVhyxch2Xqc/R4+hJGc\nGZq7mahjmSbvbJajtF+FytkU1ZN3pw8UhocYMSspluuj0YkJUGIl9AS1En1K\nx0QbS+77Uv8G3MjWA/bTijZ92X7jep/ruorBioQ8DZEfORY40xmtfhKled0y\nHI2qey45kZbRpvexoybnFNBnzSQQ+9aglsTcblFGJE059u3az3UqWfFzTpLj\n55Q5JrRtLDzFYHnWytna0AR1BowTGUepQ6QHa17JFr24q2aCD66qG811pvUi\n9qKU\r\n=i3LY\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"21e7c11057bb3bfef94ff10e24676b9da6f427b4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.5ffe8f7e3.0_1576621971225_0.8217079570607475","host":"s3://npm-registry-packages"}},"5.0.0-canary.47949b08e.0":{"name":"@material/density","version":"5.0.0-canary.47949b08e.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.47949b08e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"27c9e337720804730e6ef3defff074e2d127e9ce","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.47949b08e.0.tgz","fileCount":6,"integrity":"sha512-A9UqyyPV5fiu+oAyDYWF6k/lGDHVh22hvXKF+LDkzGMAnPB1phafFdnRVG0c7K3raaUkFyGyyPMB7+XkDNZ9Lg==","signatures":[{"sig":"MEUCIEpWPip1CTB7UlUscowLUYoyxugk+fAp9g+rf9LEk8uLAiEA/veGsWJOGbSrTdq4jeEtkYxA0gnWFjmuW1KMP6WjIUc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12290,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+mR1CRA9TVsSAnZWagAAFXQP/iYWB3T6hnmLp0KCFPWH\nvpcZXDEhxib3pzsLdPGYjwQKdl8tnAH673PYDRcGYw1LIBV6yBGO+c+tJsTg\nH1So3AvpkeFASvBjYabT5xLyGSWZ/6yCWtchM8aJjqKqjVIw4uI1HW3tRNrA\nPM7jYFVvogVxc3LTbypO/vNs618QL9zk6GutmpVPb3UUu9/IqxwP+kNmVhE1\nnULziauAnU27bBNIhdPHSQUw8PnW1v9oxc1ndfTDdCjL+8VwThE18FYSJ9z7\no31Y0MOoS1HqATJA+oC2CVZvOjF/7KlUQ6zy3qPVj4osDCrbNYO8+dZ/SNtd\n9w9Yc7iOHgmibQSrbcGMWzj5ucSVz80tFBMLsRO+Lb2cFHjxzRcLBJ/9SEvq\nlToAJ2Z+kbq05001GSugFDxEVmxkMYVbvQxqpE9/zQ9AuXJaj8s38PTN4zeP\nguEYxYxLO0lb3potZm1D88nR8XQZ7F+B+DSyhPp7+kgXpkWFBJS6I2FUHXof\nM2Zib05rcZZlK90eSm9liAhE2Ydap/U+HbZXkaDP+VNR1beJ60cUY61AePu0\nlPpS2IXf+9jCVm4tgHjGnP319Cor4SOXTfOmpqZCI8UPuEQXZ/QWN9ia5yoM\n4tvyh+8USBcWbR3d2LQwoSqUmPk5wjnKnm7dOMpGUxUhGJycLLvQRGEW45GI\nDgYK\r\n=w2uA\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"dc8ea470b79b9134800af9e8866b99949c575024","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.47949b08e.0_1576690805548_0.2355467191931464","host":"s3://npm-registry-packages"}},"5.0.0-canary.b240bcc1b.0":{"name":"@material/density","version":"5.0.0-canary.b240bcc1b.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.b240bcc1b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eafa018f5adfed6a369ede6a26597fdffe9fba94","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.b240bcc1b.0.tgz","fileCount":6,"integrity":"sha512-5dCxU3QEAH0oUWjSM9cu+YEPOcyrSyJsJ/wvi8Se528/D9PD3In1P5hKGWAx290rVh06q45rqXg3TB5sAhGBWw==","signatures":[{"sig":"MEQCIH0BVJ4iYt6mG8+7tcvtOz9uiWiryYAKo3tjJ1yocbwnAiAOEOZKa0xP9Bu6oPaG9Q1Boj9zHpzWzSngQOgtUr9O7Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12290,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+nr9CRA9TVsSAnZWagAAsh8QAIylLMqwvrr1QQ5jKrym\nwen9NSAgI0lvO5PxDNj8vmS3tb4kWa+9kqomG63esE+OBQBiw30Dvg4Zimj0\neCyGtl3AE3KJ6dzw9dDdbTkr2uzAhhVWPBDVutJs4+CZG8RoRV22RpW4khg6\n4UB9naj90vjHOePO8GaijX565KII8QyGIOJfY1RHrOW7Ixw0O5PYmGZ4wi49\n9TyFYeqw7EiMGwhqli39CfXMbfbynfgCIw7avi2J2ykoxyEfZVuf8a9e1R3C\n8mJowgnvFKUfWXmmIYIEKf+Tl3u+fhNrV/fBJBYKtF3/NPhhYqm6fG9lBr7S\nsGVoOZWivi1MLeu7c+nkgaoF2JzFG+cXY5jG8iDCWBxTgGeu5ICmYVW3XR67\niZ14pBLW+n3h4i7U7Oq/Oy5v4Hox/T5ehfdcoY/EgkKGoATZfyFsOmPn23cn\n7jY10WeofZuSqDXMqSytoSqoXaoF2lZ3ZXMHyTcHRdI5dxU+sLvdq7Zthn9i\nCiJ0G8MhsiEyTsneyuTVPONsRVvDZS5pt09IbemBp49DjpjPVMDOFXUvBfCt\niy/ZcUF5eDZ108Yvkgfb/oDY16Owmegy2MNz8BBVQ83HIOp+uy53BUVOStYB\nBWGlAPrObMTaFUOTB8CYCfE+GiKCdA9VVPrjiYj+TS4eqjkykyYiYOSteKHn\nBozn\r\n=ZqC8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"9915c413ced383747e1ca7f2069e170e38517b46","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.b240bcc1b.0_1576696572929_0.23136833426672188","host":"s3://npm-registry-packages"}},"5.0.0-canary.391674a26.0":{"name":"@material/density","version":"5.0.0-canary.391674a26.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.391674a26.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4c137c5b8bbaf14bba9e8ba45e4c32b975df3222","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.391674a26.0.tgz","fileCount":6,"integrity":"sha512-dnsFSvCsVhBHMFdnuLkygSuA9l7g2bEUTcsYxDf5rEhtKHlznxvKBmxnf6IaGYCD+S/SjiN0URfxvgkUxr3NVw==","signatures":[{"sig":"MEUCIBHKhACIgSxaBq1jpHegQv2N2kjdBP/AxOJ7oe6uwGDsAiEA0Un1EPOQmTvRVtJkPicZE3mFNVvDWeDhZkJs8T7aB7Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12290,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+nsGCRA9TVsSAnZWagAA0K8P/A+TguRvtvrkJQM04mLE\nXB4RWmXHzfNgRa4h07vdZVEDtH1YPRW7TGQbf2LJM4ZNoYBCVjMJzrHVR4RR\nOriAea53b/TgTONkKnCRCvidxpEj7W+YH80CtMIxajyuofvXF09H7ur4K+iI\nA1lzX4LDlpOQzQJ2zXmlEwASeDOGZ9xbBx7HTpRsMxuz3QcIyomOOw0pzOWd\nvNJTYP7uOl9WjrGiq+UUA235k/XdXj/NDbDBE2ElSiYbUx26S7rE43N2CqgR\no2grBhorVbS0NquearMMMlfdxDchKlzxNkyZVF80xf0gDnkoO/91zT0YeV8V\nVfkHZKQ808DfADXQB/7F07tVwpk4j7L1cXGgxZkv1NZihtnXHLjM/jvXdJmL\nqE/xCrDqHsRWfOWU22bOVzi+LlzHkXOWWEukwitK6S8bJ/Pe3hPXFUEc16nY\niZEY8tbpV7/Ak5IeVqahpXLAlrFcLaoSdyJlcCeMBISQXs+7LLdFayPsksg2\n1Nh4t+Lvl+rfOb5WlTP3UdouZA8CPD7kZbx65iGq+bydf++J/oAebZdyNbjn\nrc2Uq6nRJEk5ZqOnmMQz5vf4I04NF7YvT4E7g6MdJErD+HbI+YMSxU21Oww1\nDyBrnbcM4lerZzC1IGY9WkpJ/FQKYN1InO6CWlKySN6lGcxTWxRb93RMW18j\nyFPN\r\n=d+eJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"aa67ddaa5956be1096b1d442788cd4a5565d7598","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.391674a26.0_1576696581724_0.6605841606491152","host":"s3://npm-registry-packages"}},"5.0.0-canary.c4837746c.0":{"name":"@material/density","version":"5.0.0-canary.c4837746c.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.c4837746c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4de7c680e8a3d808fb6995dbde15a1f7996cd914","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.c4837746c.0.tgz","fileCount":6,"integrity":"sha512-/LQ6pm/K0cylUuiUM3w/bKl1If5p74Xo94DI7Gt4ZjWNAF0m7CIlSU2o65ZBe556VqvnZF+oEIPFZq7v025i+g==","signatures":[{"sig":"MEQCIG2n1+94kEZVpMZWUcZFJS5iAJGVRXpald/iHrLYJ97lAiB+szSRv3rM8hAoLfg2UEexDFUE+7Gq1r/VFsCx4kNZYA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12290,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+n8/CRA9TVsSAnZWagAAjSEP/i7qLfEvoKkGZVv++QT9\n/UEJ+VbFmv2LTxbuavqFUimOQzvjBYc8+Be/d4ttpFsS4dcEm3jf+GzaQuwv\nU4g99KLLek/ONfEaSOWU8b7T8KnSRs+3yyvzjUs4mGWd97C4R4Srth42GM5o\nniKm2mitbuk3mcquArIQxDK2uS7zrAa+1amqfDMIIKgxL+SFXd3oTLXcTe/8\nREjEGakzLby5xOXwgxRPaM1qQJXwL7bv+Eri4lhXNiy5uhT8NO1eGo2D9bL+\nKBDfpwEh2WniCOUqlrmROHEdDvdDYb0YF1Qbqw4pP+tMuQlN5wxrnxl+qw0J\nhL4j27sLay4qrDk5tpz12ZImzZIo3+mOmmMv89ryEc3PIEu45/OkhkWVi9no\nR/+RstazLvFVSYV1kIxF01pssz4/G8X1JUhuOlU31A6PBjPlQNOe52bomHUR\nA58qU/cyXzDvvIGnoJ9eCD2V29mRUJzU7cE/9480M15g7WZ+56cN9ggnhYCJ\nm5NW1wc6XAxOvR9Z7rjQXZIviBWXHOCrXKvlSOsqVU+ByVNRkDwqg4kM68o3\nn+oNzEjud999/BbxYu3pHZkVTaeBAvigl0gEMgn9uYPDqnicihkXwGPDH9J0\np6gWwbr8YFJsHzEbq1PLmtJ6gV7zmOGswgoP1ZsPDVtGnJGpH5350kwzvheo\nONGu\r\n=u2Me\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"44ccab29aa0b806ec249d5f5117ac9f5d82fc7ba","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.c4837746c.0_1576697663124_0.12095476227237079","host":"s3://npm-registry-packages"}},"5.0.0-canary.e41a70425.0":{"name":"@material/density","version":"5.0.0-canary.e41a70425.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.e41a70425.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a297be09953287babcd928ec554a526cf853022e","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.e41a70425.0.tgz","fileCount":6,"integrity":"sha512-TCRFIYFlLiqswwoKY6jwG5lpMYolBt4qovMnXj7Kj9jY7PHSeTJZOCStQ/+5nEma22l+CBQtADplstm9jkDMsw==","signatures":[{"sig":"MEYCIQDggVSd4hQ/bkiqo5AK07fZIYcyEq0RYgfrXICxVHnMKgIhAPKlBoDmglgw+h6lNRjZLRjqt8Ha36JlkNN8Q/cbcO9F","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12290,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+rQGCRA9TVsSAnZWagAAKb0QAKRH+WNG3HgOOnCN43aq\nYwR2wUqdXSm7o7k9LNWAcgCQ3G5GEPQVQrm7TEE9q/DFFNjQ9YdKO66ggaBQ\nD1TqgrgmTlCj0pPdP8uhiuUeJ/ZiKD85u0Mlnkfk8D16i3Mo34cKzKkUrrU8\nSFy2MTO4Y01oceKZYyOfKLVfA/gZMHErU1mpgMo1gQn5w45L9U84sfl53DzS\nyARCIj1a/QNeibtf2T9t+lUdsknRc5XTtGFq9vHYHcWsfLBq30okhX2zrvx6\niTtWAb22jVv6mbEofKG58rJ569mXdotQ7+ehVDiXGM785k7/YT92nWY4rsTG\nIQdEkS+AlaaX24TdNgfz5h4RBHI3jgu6FYM76xqDrrfcfGy8upm+bV3x9Bnh\n9xkJQU4qI7VJh/UD88vgExVVXwWJVRIzSj7EOjfTEL5HR3o+QJAwNNp7qB1C\nErwMd9pNEtXSVxWKZxndRC9/gtH6nVs52rBHiMYyLMQwcPa2aVUvwIS3OD/3\nMHGBq1eNHlk0CaOCpVus31WmuoQKz/hUObiUFgnvjpv0pYrTqSYF/P57wzE2\nBh4+svdbtlPyas/5BeAbrPC94n/lDco7J4pqhI8cWa3ODs9aXTemJzhIa2Ds\np+lT6sbf6sTJaS8zxdgn253N5yAWfotuaJS6baRkVuqMmOCq8UsXOQ9m9YBj\n3U2i\r\n=5ZGm\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"2e938a63bb3297bc73cdf8f1f206885e2ec84a6c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.e41a70425.0_1576711173955_0.30314961722685596","host":"s3://npm-registry-packages"}},"5.0.0-canary.bac43eb43.0":{"name":"@material/density","version":"5.0.0-canary.bac43eb43.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.bac43eb43.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2bac33fba541c287d5514451fb44179e102b78ff","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.bac43eb43.0.tgz","fileCount":6,"integrity":"sha512-0W4sXHh7n+iE2anog9OM0v7417aXdp/y0NAfR8BTukbLVWB2RgDHg+nqFQnPGFkVg9AxT/pi58PnS6pggqX44g==","signatures":[{"sig":"MEQCIAhaiVHO6ztxPjaR2r0aNgJ6Vr48LVSeypzl2yWZzU0nAiA3tW+DxYazG0pzBQGBJ/y6FZSe3bUW4qQo3ehaPgWTDw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12290,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+rTpCRA9TVsSAnZWagAA+fAP/jaHvTyPBx41ZZNYNK2e\ngRMfjBR0Nf3faAhAa0Tr87EOyIW/9ciYroaaYc5kmqSiolJydVeMccLj6uD7\nOZsXwVnYYhyxBA4cXy2bm0jQJvNcOVPeRNLSoZIBlk+NW/kM6wiAi60yaeId\nvKbF/QqYCJXEvDwnCNUZlEGaWuSy+B2M+g8IFDMLHTB4OS/kAid0rLugcb3s\nOtLtLciMvuknc35iQULLfhkzSV8ThF6tr2HPjTGMsarmTsb8b6d+XoqpqGvX\nfBiAPa/qYA1fZI5/Lm1hdzmEucqKVcZYhNp5X4jRwmuwH14+lSm3nMZ3CEM5\n59YikGyDyCZTwmAEQwISAFf5lgRn1IpLdh2Rcs55QhG3OYLMY3HborC51eib\nZJwYwt/SxRV7i5xrxBZZ1BbPlvjqAWabmsGmGVaqV0LTMooCyzQj/pcFjO+O\nZfDOUkznenQZAc3zisdZpcYxODSJoROr0tbS9OB9hjdongTjj81yckoULjop\nqud6LzjtQLk5NuLOLkrVN15Iu68d43z6exIhBri7XhyNBU48kKDAmmEpv7aT\nPv47g5/IKzygivBvvmGs+tm5NJKLu4QjDkatfucB15S5Xf/Aty5IOGEWcuwr\nUSKafrZiOCZnlbJ6zjoZfgnkVOAoR9MwQAoNqzfPavAy9mTHSGCHZLm9zGiD\ncLi8\r\n=Oran\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"7035dfa39edc06f1b58f72c5e285bd2998747232","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.bac43eb43.0_1576711400765_0.8770505883302491","host":"s3://npm-registry-packages"}},"5.0.0-canary.2e491de55.0":{"name":"@material/density","version":"5.0.0-canary.2e491de55.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.2e491de55.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cce69d24316281780b868fd2e2595735df17ead8","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.2e491de55.0.tgz","fileCount":6,"integrity":"sha512-jHXMR/drbgHaeV7O9fzbblZKnx+55t0w7+C1wvru4DLuEktS9QajlEIPiJqe6ABJ75dPfBvnyhXsqToI1xYgcQ==","signatures":[{"sig":"MEYCIQDOrFinR0/1EHsRjto8wO3qNFGXnWtXRZv3dekX53bPoQIhANQ7L8PiBbKAc1ee2sV+jH3nAPBJXzneiP7Arw/YHt9t","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12290,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+1WlCRA9TVsSAnZWagAAAawP/2VCPCvKA20eWq1MZeLC\nCA9M83zxAWi7MIneTlOh3JmghxGqoSloOLwdyXpLZrlErHsDker1l4SyBYn7\n/XZVxQxO/sGMPOeHcyu2PnJkz2z4UmGcjhLm3m73F0NbKzq8bx/WK0378Nr5\nXv6EZ5AR7N8NSJvVVk8cTJbx9E3686W1wSCEm83O2Bv6ko285DN5OxH85eS8\nEM+9Yl7J/eMU5qam7KjH3S9+U4Az8uHExeVTdRNXEyS7uHItOQU2tQWjwN6g\neyFLdRlkRnairElVM/WB8gZa6eKtc50N16+ZdMBHC7ySTBgUMpAmktzA741Y\nO57Nla4M+wKWJUdZwwarOp7MYkp059dPCW3WxM6nwF+TKvqxvn+HbqLN3gsz\nyke18/Fk10VU/pBWgRr95OkmCojuF4OUtxnPuOTTpU7KEjv61kTQ/VnSo5r8\n4xLKpZDiIO6qu2rCuBjrVlfoOhmIo1WZZtFNas4gWbgLFI+bwbAIlgfeI8BM\nkJ4nSpqkOmcJOa4M7j9PSZfpaC80icS0rfC/bzlu16gpEeXDT8LoAZc4XcII\naIst3GlFhIA7yAW+XQ2fSLkzKOBySXnPOgDXRIgn/WAuhfomI+6E5oWKunqD\nrCSbz1P9DulhWsHbA7qX+dNJIkEXY2bnIk5XQ39Kp7KDAljNA4EndYMgoEea\nClnA\r\n=ZYbn\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"731b98f2f9caf1251d3a82a3abe09828a92eb434","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.2e491de55.0_1576752549303_0.4026293854299299","host":"s3://npm-registry-packages"}},"5.0.0-canary.ae101c144.0":{"name":"@material/density","version":"5.0.0-canary.ae101c144.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.ae101c144.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"54ba50680b2a4305cedb8ae403f68d13c2f41e7c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.ae101c144.0.tgz","fileCount":6,"integrity":"sha512-BVpNdSOqN0OkrIMHFNIVKhTfs4fOpPDyrJlLtjLNnGozxXftGirKHtxlACeE9sA+HWfWRPLcmGEf74GF8KGsrw==","signatures":[{"sig":"MEQCIDvUA4sZWLcjmGBXjojDmeOIXGKZQvEhri+Aa9qdkP9rAiBOskWdMVCN3ObWN4e9dj2Ys2m11EU5T5uwQFSahBbbhw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12290,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+6QuCRA9TVsSAnZWagAAPvkP/j7rQZqxlDoS0rBEi0rc\noSBv8xlBEB8vg1uHy9xSRHm4Rybw7qi8r/AQFSzSR0VT3p+JwoKCwTwA7ArT\nCk7IXQJK3/eyf3uF1cS15FkTt6X5uLMHxqsuECQLNa7jYQ2LAKooWCVSyxIV\nAOulCpFJlCId4c8U8MivsCJ9Ez/rG91iGI/ZdbSPfz4GQpn6jabZ9dhziqTn\n/gv8YNeG1xdcp7yZnWZ4KqaFdh9At+UpF79aXxKItoiYALjjQJT0sjk3+XeP\njnlKUWCl7PUAEliAskDXzuBtTqZfDSyXPat5m4wKrEq8gdc4HjDaWiExpsSW\nfbWQrGRNDyEAKoEIKbarzWoLYRCeKb61ny3mZEXI4FZmM8+J6iOHIZwa6OXv\n48VxSYS9YDUHRCvl69UWEeKfIhDtUp6rv8jnXv/FRK+ljv60i5eBCXHO8Z1J\n8p2eVU5V/faNjNfidZm4kiyJpPwh7psI2/R1i9ANubq2YoudqCPZ6ctPcIHr\nvWzVuI20Ub4CKbEkmKGYLeyJz2ZCIvR1cxwy/E2LbWsOu8pxaazcqCJwBmTF\nxK38CpJQ3PTryMoQm79ynyGnKbphOnG+YUeWZaboCTVHx+xdGCjAJMcE9/65\nNZ4loHFxW4wso5fCC55XH+Mfp5PCJwYtJsTSq9Q3S/nTt9ZaspWPB07AQIDP\ncVW6\r\n=wkl1\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"d11f348d85fc15df510c3e33822ce23f44ee661c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.ae101c144.0_1576772654025_0.4547033876710451","host":"s3://npm-registry-packages"}},"5.0.0-canary.a51c31f26.0":{"name":"@material/density","version":"5.0.0-canary.a51c31f26.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.a51c31f26.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c1caeb81825085f8b98efd62287d36a8389af8cb","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.a51c31f26.0.tgz","fileCount":6,"integrity":"sha512-+sPqS4sfC3bjzi8tj/hU25JMuRlC1E5sCVqoMaJ3S0NXqxn8oWiuBvO3+s3eSEUQKd0V3yHVWN3L5clkiF9tEA==","signatures":[{"sig":"MEQCIE4WPnSuf889j7g3ncfebai+WAe9gO0VRPqnif6YZ0ccAiBDgThQ7/oHog8UX6PSA/oVDEZk1id0o6PDBdPF0vFTHw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12290,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+6/MCRA9TVsSAnZWagAAuwMP/09R3W3Yu9LuqsKu8gKJ\nBg+b1V0qvNWDDHNypebTx0ohZBMMZKqaBUhxfRt0+oCge8GDEPCA47mlYXeN\n9lqYADob95Ce3BpiRJ3r/KP1GP2hU1Ia4vOURH6ilw24IQ4rIkhBcTY26y/Z\nAj2nyH/C/me32dGfH+H2FuiuAX3l4secdZ9ydmiYTmLg7osvWtnr/opvsTJ3\nNJkhDy+rumkHInsa5Y/jJxZWGxr2vvdrdtPzfe7X9ZyYwRdI53sJ2Vm/HSfW\nTCrgn/RjNOB2QYV8IakUoyGmOzxVVUBr9ZW2B5XyDbLGX5Tl0xxLTariKRuQ\nrhL1/EKtlHnijTzeLJjVP4mBUpbhYR379tZlktSg+9r8vNd5ZD5OnqFbDeaM\ndd8fg+mc5hfczrPeVStxmFnnhnc+5yIhCCkWZPVwvjEbqcW+vNSHiiX+Rkp1\negRdzIYtIL5H4k6QLCI91fM2DRZnuSOdi+UG0PiRHEYj09zqfccNFtL5NVJR\n8y6ad7rXeA/4K8Wn294wJp7etgIZItvVSqbwNFLanVQm1ds2mx9JNz4qOi8m\nCkGnktZRTG7RG2vaHMKmj4Xo1NhqVXb17UFZiGu/4d4C5bY8MZ8VsGmmWR3q\nyofs80DWnom+h4hMfcO3tqlIhOtwg5chTn+Ej0kEjPxjjN7XE1/YmtB/yzu1\nT87Y\r\n=uFtV\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"e2dd52b70a7e3cd011647222c15955dd4535cd6d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.a51c31f26.0_1576775628421_0.26366506344708096","host":"s3://npm-registry-packages"}},"5.0.0-canary.21fc4e13b.0":{"name":"@material/density","version":"5.0.0-canary.21fc4e13b.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.21fc4e13b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d19346c74ace4e2badc6c72fcd64f2dfa45e4119","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.21fc4e13b.0.tgz","fileCount":6,"integrity":"sha512-8hKE4cYqI7pztSDphuB2t72jwuA3xSCrYRr5evSO1SgawemAqGDVcn0K+MfAr3KxLQHDIbiLPUzlj/MQoNRaxA==","signatures":[{"sig":"MEUCIQCvsBJT3UhyGr2ACuX8nMk7ftdZ2f9s0og8fC4QMQOImgIgCCZUY5XFrcgbPSos8jxo/QMpqgkSyZBXI3oLkpCSJqY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12290,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd++sNCRA9TVsSAnZWagAAmWQP+gMc5601hnfDCX8VUKPj\ntCZaAUilHK6qRizLvrMYnApJhcIdaVVeBTOUf2e1D4LiaaF0R/RBt3iDoTsf\nPMpyZCqw1TPaLMwcmfhp+YZz1A//ZU+vAVZEmQonK1BJxJ3oI9YK692nxd4l\n+sg4blfJ5JDdbk8MQUc0Xzk95ju15ml3FnVaihaqg0M8j7Epyw9vRyMthh/o\nMGnRvSLwq6bSDWWhndzGxiISMNfGPAV/cPuH+7IrUArewamVWddHd5ghaZ/t\n6SyaVQqPUSDbGJf+k3412KYEj8sodjvVtEDBFvPBHDzuTe8yEWTGRy6+JVnA\nDwSJkT2mtQz4jCtI6Vv2c2lvovHmCNnR0pIJX3E+wwlJLXp3hNzV7iwWz1jO\nVsyN4mJ9Kra6IgpJ6cxps7WAExc8BucoJVh43rqnJVBUkzjp/QNJg89iNjNc\nnPgTG5r4+ZhOw0hxWCXcmpwJzQTlSpo22CNwATySLPQBLuWVe1AjANSfwKR8\nP/YQdLFC/NmIL2Z7hQUi5QPUZtO1qHri62bWVoG8TKLG0+4SWIEabZJFzx3h\nX8+BLeDBiT2iCtFDr0zC7/Y1hcteg/PbRIK9d0Ov7jbvMK7bEGotj6k4xDPb\nEcVT6ivpU2QOzBumdoypmSBSiqDL1alpLy1+qHbid+cJACe5+Kni7VJSV1L8\nWfez\r\n=JRIh\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"ca71d599c2aed234cb9376ced1aadb512b071fb8","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.21fc4e13b.0_1576790797078_0.09718941021768912","host":"s3://npm-registry-packages"}},"5.0.0-canary.d2ae6e17d.0":{"name":"@material/density","version":"5.0.0-canary.d2ae6e17d.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.d2ae6e17d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"31e97d692b903ef828e5ce98b0b79efe0f300e32","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.d2ae6e17d.0.tgz","fileCount":6,"integrity":"sha512-8dZUZdfbhSrJD3Pw5cO2jeUuXc4jlfHQfXAEkbIrNuC277xRba0RsP8+FUDTCrLkuKbewSA0pJOPELlm38k5Gg==","signatures":[{"sig":"MEQCIDbv6l7787GJ1la4wpfS0Y+ouCWtz7qHd7+bRIHxb0EWAiAjALa08z2AAVqEiCmZDNI5hCcw6eNjVT98M5NX68cnTw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12290,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+/hoCRA9TVsSAnZWagAAeX8P/0w6x8C0K69do3isUG4w\nZ23Xwfap4xO+7nSCxnqEdbb29yNOnAOxJBwpj+HgrtI1JJVF5zExyvVVPzoG\nwQi78qlm5iV0Skg2KcMDCU0gAY88HzizrOwNiEM2zIgqr4FBWAAhObxAs72L\no0SykN/ozcwv7DHiw7NYUOgczwZwRLC7dszpSYyw9m4JOwvcwYgEbhXx1YcK\nWpPbI6RIp9HJzmgYvkfXkLjlGTVWkLVNj24ZU+w7iyjR0ikWktgMbzj4kPvl\nBtnRZ6BsQxLn6e22SQ9dkY3ZAPL10XQGh1kZCu1YxmWNAJ/JmLqM6xgp/rii\nACHJryETsH2WQa2DC1XsQW9e2mNKV9WnLFF3jFh8Dz7ESkc1vUcPAz/wxNqg\neAqcGQfIESaKUgMmak3jabdN3cRrPLp/Xi52od8cdjPSQOx2Ibp8HUqqR+JW\nKfLfrM08/pCAsa5ofL6DlniSq6X2owW18JTXxQ/6BGT2xCkj4R1ekACflruE\nBtgssU60lWBm0Q3YlUdf2HeYFQHE6GY9x+xtgWeth27FhzGoWXrcAOhkpH7R\nbc1xiQO5s96zU72xj49OmQgU0LXJ+sCUGW+IQjHi+8wM+pMa9eKHOWz3Fabk\nb4tNB9LmHrNp+a9nHcAQLnysOJ9dD8bj5aACI8ck+BMOLTXHFy9WtrRK+q4w\n6lGn\r\n=8bI0\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"aeb622d14d533f70c26396fb7db6c8bc48eaf8e5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.d2ae6e17d.0_1576794215696_0.8241871085395605","host":"s3://npm-registry-packages"}},"5.0.0-canary.ba30399ad.0":{"name":"@material/density","version":"5.0.0-canary.ba30399ad.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.ba30399ad.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fdb98804d868c211fd96a7eae4f8449d01217149","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.ba30399ad.0.tgz","fileCount":6,"integrity":"sha512-SlCmKweVLnaF20nVvFt3BPzdNTYG28VYxmfqTtcm0CxQOLKMRAX3il/dse/VcrJY3aT0eS3gEy0g4qWB93c3iA==","signatures":[{"sig":"MEUCIQD9mgAY3aNMk0qzrj67q82uwj/VaDzZShLSP/x+RD7RkwIgZM3hoY3PuIxolEdI3Vjb262xZgVgWqGX5EC2ItaidqE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12290,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd/B84CRA9TVsSAnZWagAAMHoP/isNe7ejieJq3zgFqq9a\nSDZiViP0X+KGmbA1wdKAaLuzaej/xfqY7M+sSzvBjFKL15lqJ6z7mDBl18iA\n8E9IL7WhHw9eoaG5/+zMF2VNbLHxUMYouzy/nQ/dkC9Rxu3qHLOFW2QT2Lh7\nTAJUFjUZJ7L3ZXsxR+TkCmYfn4C+6T2bwfo1Rg4mmOhaVMwH9XGWMH3+xCzv\n6RYbebJyqb6BJhu+gSTFh0R1fiNq8CFIpWkPYL9DpcO8iWYNpgkz6Fm9F242\nwBq13eN6WAvYuyPSCDdkIjNiSeEXKt9+mQXJj2dL+4fDaJfK6yrqX4GH5tdm\n8t0Pv1GXcKDOIFby9iuIDR2df24VTVenCkGyTO6VVbvBRcjHMD0x4fHCz6tZ\nqTtHhVV36rY1n9ie0LmdfRav0outU2RNUqy0z1IEYyJCPZVirKa6i+WjuEyF\nzPA84HCbeljlVS/Lqw3VO9RoZrVcvgwWRcSV6ELErQBi0cLpLPjYadlHBPId\noy+bTI0czodyRpHI+M64CffLOxAUrhFPo6mIIcMWbx8246dU78RN5Sb15kb+\nIE9eOqx6UCu/qsZRcZ5/v+Qyln2GnT65NiHxky5+p0/UvUd+PfYYqcm39Yqz\ncdkRCeV4SX52vbPcvBLl5JkFRiCPiwqd6Y26dhMqxR/GDLU9gljh/U4HNkNj\nHXG0\r\n=H3Z3\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"75ab7f122d8d469963211d9f9591a84602711f72","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.ba30399ad.0_1576804152318_0.7142545350358913","host":"s3://npm-registry-packages"}},"5.0.0-canary.a08ccec35.0":{"name":"@material/density","version":"5.0.0-canary.a08ccec35.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.a08ccec35.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2df8e74c591900e526b434c0cbfbfaea526da694","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.a08ccec35.0.tgz","fileCount":6,"integrity":"sha512-pfKWVZ5ixyXP5Q9WFC1IVT80yNTJ/e7IMqrRuIoRD2oN8/CCI5NXjm44wvLaYgXqcJiPZCm7+fB+T7d9rEL79w==","signatures":[{"sig":"MEQCIEwotSZcJgkyediAJvYRMr6GYbW0FHMb97AAUpk/S9edAiBdU5FlZxXu9cl1wFehVTtiVuxSDIG8jpZCdQXphAYfjw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12290,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd/ViYCRA9TVsSAnZWagAAbq8P/295HMPyzwRrzbcU3hFR\nD3qx6+YvxZeKH2dHfUH9BNtLGkY+lyGWa7qu7P8tihXYzj5IjGVnt34VSYBl\nA9bo9zh1ytkwJBNdpEMv1w4dh6yHcNghRTFWQhwo11AiVejebXHyK9hbm8li\nkA1gkpUTV/lgfIFLXYPHFkydHyN9RqRtJB8mLVG/B/Ik6GeR1Fe7akhIyS70\nparHJebJFwvsUatVTLgNBgx4oC4MHB5nIe9tH8c4I0nwSa4Sy6e4AqTT7l0N\nQNWK1MaF1dwGDPU4ZLcGAM1hecD6I3I3DN4pTZrEDYyjq+gXedu2ItNalU58\n9HE0k+jvRsWQg6rNSYRJYhTztI9APkBzgLnRxytH3Kavypcbjb3hAspw1Sfm\nJzER7gJdZMHbSqFOvHkPbbD7SOQtVaaIcCVjfXYO0N0rj1Q0m6Enrlo9eV+Z\nv9tja7su5iax8eZCJCljqIl20PVnBEiUhEua2TwE7WHAtwvF/F1Ud9uKpvWk\nfqRBYI70HTmoy0mRWuNN84pjc+hL9aHDZGtB0Kc26tB9M0VCLYeY5VX6dDM9\nFtic5pbGlRnnB8n03SIXeDUVCQlQmHi0AaA56xKwZ4Ms/5PSp87KSJJv8e1T\nKkAfB3kjJWPFqD+xGgvP+TNV6LQzupb6IemhhOq+zLwmNm1fYYoLDtj1pDW5\n6bRx\r\n=xZnu\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"121f2cfbbcf425b2c92760a0fcf0301dafb14636","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.a08ccec35.0_1576884375700_0.7113056495106871","host":"s3://npm-registry-packages"}},"5.0.0-canary.a2f75105e.0":{"name":"@material/density","version":"5.0.0-canary.a2f75105e.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.a2f75105e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"50f5f6d0b686784665d9a6001ccd8acd21859711","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.a2f75105e.0.tgz","fileCount":6,"integrity":"sha512-VTRjzIsl2WY1KRnnXnVQo+z/qBxckFMloVB9YXW2aFwB+ZpyUYjFqSuMYDFmWbghD74NPbCKgv2zrflQfGA/wQ==","signatures":[{"sig":"MEUCIAchKeEw6b8hjSPqhBs56cQcfu9szYAKbd4lkuQvk9MPAiEAk9Ct7b6dsWQwelf2bZOOV/N6kyNKi0hhhD6Oj/koHX8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12290,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeARm1CRA9TVsSAnZWagAAJwwP/1JBvdVAj8SWBdZkdpiQ\n1D0zFpuZU5kRGx3wUHUcdU2L2Xs4sQMXcY0qa7PjcJ6u0kQBxsyF0fYtHcFe\nPJ6rrW0B4YP4lfZu0M0sgISL9AucMfWE9X2SzMTl+B6B8sf9qh9EiWLVS4zl\nnDVg1GdNB0oGOdYSLQ9NbMnAPDuOP6AkiSfkRP7kSp1CFTGqk+wz+3uU8F9m\n1jzvfu5PQQ7JAwEfXs0rRtYAqOsCS7WzOI8JKAKD0TtrxNsVXtTYedr4lGgL\nmoKQFT+I8PDYcrz+o2Bd65MgjHNkII0AVQwOZYJ9InOLSGLIJU6HUVQdrmQu\nCs2tk+QjJOhPzsX8tfYh2vlgXlV2T5svlefklj65tvaT5gcZn/eRPrpHaKwX\nNHCO5N3DsyiQKu8KdT/S+55chdvLKn3Fn1BD28Qxopy6ccDG4em9WZVMOucf\nA6NHQz3b6NkjGf9L7MUiQ+lNC0J78BLa5ZzvP0wkvAWLL5kXLoIA9WHH6ixt\nAuL+sZ1nJlJc5VyLCa9xbJpAHtLhkP5V32jcPVnqoiwbekcKVCWBfLwe/ynB\nHbLfRhxuKlwPUS6tRBOdzxkwjSsDJ4FsATQExwC9idPTt80p9XJ7zPBKCm2Z\nijUZtFEZvHqfG/6oznR6u/vFt6DjTFHcxnr4B4trjIsfIrRLNbJB/lqNxSa6\nUE3a\r\n=tF84\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"7b2f4b595ae59e3e680ef1151ab400a3855144d5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.a2f75105e.0_1577130420483_0.0456775586470739","host":"s3://npm-registry-packages"}},"5.0.0-canary.c054a24c7.0":{"name":"@material/density","version":"5.0.0-canary.c054a24c7.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.c054a24c7.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"09dc94812c241179f53e0d40b3fa0a10f8991df1","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.c054a24c7.0.tgz","fileCount":6,"integrity":"sha512-iBqbiYzDgCTnidNxg1/su6JKi/YXVaqxKWuVI+d6leNt0zuiKFh/Rcm3wybH9DECRaUfSJA01RVd2kXywh8lhA==","signatures":[{"sig":"MEYCIQD66IggONNEMeMqHdaqdVf6kfwpWam4INoVaonhlUUjGgIhANsaxwOtdKJhLJYIN6ZZTZRYWbmj8Ko7G7X0lSH/3wDR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12290,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeATZqCRA9TVsSAnZWagAAjxsP/R9upyoG0fZrNMO90S6L\nhOQrvSB7GOGx6/VbPJ0KlJEj9Rt1AWjlI2Pg6N6UoeGqKsO02QFfOZ5r30DM\ne6xFnG2vJGZRHvRjKrxuTVqhOnHwwADu2g9KV5K6kK3zjpomY28Rb+ZxY3h5\nIHtgFDS0MBAxCycqGx5y/RPTVTrwp/e/OWdFbi259p+gV64R/QDBIRtb4lhq\nNCjUE88PS46KZA00u8okJqCXfQEhy6sGWzrNu8vUPhVn8GE14cvLxOj+kQcR\nVnXeIN4ZnsNf1c5zmnkP5R0cPBFPaTzjg9L4R09pjDQESIyRKViNn3NRyJv7\na24mrFkefxL2TDf1cXMW5KjFSiQHq+/nkbE6yP2FeHsIxTj3Er8HE3XjEkxT\n/9EKHEuOhwBQJ09RGTKSii5DNbL63cER/czekCVpAwvwd2tiwuMMzjlhatNt\nAoyX1JcOoLlwLogXpZ4UyFwQ1vgy6/P/DWJWceKZdkCtwpta0b1C/HSUl4vT\nUIPXMTeKLiGYEE0GmI553p4DD7qxvhMyXM9d1YjBp4P70fNUAVlB7U3pjVc3\nHJXn3w9hlKH9EtqKZIwWxwK6RVWGbwucH1Up7zPzagYPCXPNGKIvrpg2nOtk\nW8RHFuhefE0NKXwpBOWm/JqEzaEntRTq5BwDPFZqFDxiuc6nDqQmC3FBCuEY\nXid0\r\n=qKSc\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"4e2a3c12859a131938df8918a9f43b9146056488","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.c054a24c7.0_1577137770425_0.2535280550958736","host":"s3://npm-registry-packages"}},"5.0.0-canary.c6808c51c.0":{"name":"@material/density","version":"5.0.0-canary.c6808c51c.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.c6808c51c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"11a1f3dca71e617865ab9bc563094731f87fcd5e","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.c6808c51c.0.tgz","fileCount":6,"integrity":"sha512-RkUCQWaou30B06na2lbeKoOByylwYQ7gRUx4PW1ZAm4D3ftmhmxo9oPrC/e3KOGrld/wPEl5/G5P/p6Jwfi1uw==","signatures":[{"sig":"MEUCIQCNjj79WYbU/pOEXwTizpgRNeNgh1+8o74DA0IH6lFpxQIgGvuL4TFHzhMzSud9V7scA+DScg1ZEVERmmIhlt2OdtI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12290,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeATeECRA9TVsSAnZWagAA4SsP/1G//+TeW8fCoBGJO0XO\nTEM0SA3UXrR37aoKu5vaTStum4tI3vebfPPx9c38Jv8W+/TCdETCnJgvCqpq\n79pgzIWHCraIr5Rz7MJRaPXGAjgN+NVZaSNs2uf5AZB/pAed0FBujEWXLoIA\nCnJNmyZNVDBpAoqEYEv1F42zWDs66Mh8OqjjeLXXD1/R2fdWmKGitv/Fde+F\nD1xCvOD567qE1kb2tccKaQh+g6xoB7ndsK3LdZ2rg6IzNQ+YCyQMB7sWNT4Z\ncqOclrSAW+gh5mBdSdjk1ZWXyULMUvore5Ddi+xG0S5pV23fZxUdCyK/x1mY\nInNPmS28tL72gKQFA31wGH/4B4DbaG5Y+jb0yacZI0G9yJPcggA2aj2Oeuof\ncIifOqUE+RHePPKKVbwzG+Zy82GK7+j6ItaShPlhAETkkHg0yqqnhcV9BWAw\nkaH/BYbXJy2nYk0xVls6H/hBsXzugy+KBxtRFuUFtO4tpClqnWN2l2YHuKYf\nyMxKTUu3S5GXqq/YKhzv5WYZiNNVKkmcvlcNaqFvUt2+3DTVDKx0M/q2LFjW\nDHmRGBHHpLzHqWRK4eP0H0UnjjlLn8Vm4GW/wqRbGpQZLiLupP9mdHH44BOr\nJVkdiz+rDXDywmprbWIDGD3jZbisR3K7SR/UIgocx6tvitwrC/oDGwvjtVG0\neL8v\r\n=OGPT\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"02ee460be616b30da3c6d5daa7eddbc5f29d2500","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.c6808c51c.0_1577138052342_0.8159298406965925","host":"s3://npm-registry-packages"}},"5.0.0-canary.7bce9cf77.0":{"name":"@material/density","version":"5.0.0-canary.7bce9cf77.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.7bce9cf77.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6976e4bded6eeff7d9893d818bd502f1f08a472f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.7bce9cf77.0.tgz","fileCount":6,"integrity":"sha512-MB/nx2cPjODThfXuwGdgVy/t1M2uCEfOOWhRLWQTTicKpovhHqt4qSDtpvikyAPoC6IZW0brbSyCuaXuNbvWTA==","signatures":[{"sig":"MEUCIDorsZL4mmptWBEj1rQ8DLfrlPwiaxMGT3ct/PLyw0OSAiEAmSGO+GY6WLNtM4oBrOKhOAJPcpRAQ9DuZ5a0GSR1HCM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12290,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeBP+rCRA9TVsSAnZWagAAVAYP/RP+h4fil2g9GgvDOZ2L\nHZ/zxi6QiMrhOX3myqwD8hkz7d0a44TUVa6g6s09aa1q23Jy1+HEbRwoKTM+\nyNrJm7w9iof79vHIMj1akuAP/6yRpNfl5raJHjWeb4bA1NrFEOabOpe4pQLs\nn6UG5G3f0A8MHNb8auj43JJhpNlgbqSOoKzQBB2BKo4FBcwRVOV2yQ1QmO8f\naLL1yfncWP4/sqUrT9ApzGRrvOmxIBJ88UwYMvTW3qQRojYgYK90rbdgMTWs\nFvm9t7h7znRCn3abcm+n6xjcpwozJ4l/abHVCnlDbXnGupgna6FminPHZFhE\nklBBthEySlfYOYu36YkorFxnqhHnYrlGNVmCZTYY2j16h+cEo+dPLKXQU+mi\nYxuT6p4oQ0MN0h+z6mAehnTeGBRsDO+1F5+d3gELKEvZoHFRVthKJ3bp5zLv\n/T+r/ppMOLEXqWqJsNn3wLuBsBs8LGFN1Uo67QUVM9OroVziBEV8d9Gqoph9\nF9ymWFtfYkhQjh+zL58yPTmwX+0oqTPGs5iaMde8linAcVf7Mcj9560Z6fDt\n8VzauckmM7f3kc16+15C74lGXcwrWJJ++dlx57KfWvJP0Jd1IQ3D7pgJ1x5+\nS/aCTDZs4UaYwEPlAUMQEnKXzQLCsuXubeW98SxuOf06WlYs9R4BgIH5k+yY\n42vn\r\n=7Keu\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"1f5c1996d2328a53d1fc5cffe847b04aad48432d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.7bce9cf77.0_1577385898857_0.5781327361183486","host":"s3://npm-registry-packages"}},"5.0.0-canary.c92f038c3.0":{"name":"@material/density","version":"5.0.0-canary.c92f038c3.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.c92f038c3.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e3949d832652a1abc052f25ec71eb5772f376245","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.c92f038c3.0.tgz","fileCount":6,"integrity":"sha512-GD1Ib24y5WoGBYnSIBKNUtOkpINZqxTpXdIsmQQYvRyfKb7ZQiAmGCrR5YjLOz8NOtmmB8MgJ7QRoTgRjbmrUQ==","signatures":[{"sig":"MEYCIQDoOOxYw8QW4CZGeUi4W3Biqnl964dr5gXDrf4M5VTnZAIhAPkDvz8XtfhTNGNgXOuht6ZMMDVmw4awqCs1Q0F3Sgz4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12290,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeCnPzCRA9TVsSAnZWagAAWS0P/jz0JUmO+qtAfgxUnNVW\nLL/qp4gAOpgoRSQb7Nb6MuM4tW3SxDlW3qlmEMpKCClcL0ADXvrpVlzo4nkQ\nsNEr0n1O4eFFP1XaNEYeDy5fSqSqwGbxRWo282LRUb1bIndhd4IM/2b6Y3gA\n8JX5Ak2qWYec42vu0StJVo/soB7/z6x07MVgcjkn49fUab3HRBslJlfffsKF\nSd+kn7/cua8Cbus1vIbqLchNrZEs2ilMH3wmrdRpexNcU3wlQM9BCDGiJKUf\n2H17AOz4FMcyIS5+kf/8LrKH3zCATYH+H9pziY7LszfXJmObRFdovMjv1SQ/\nuiVQIgqsIWoHD8e1ON2FlyQ6tQ+nz0lG7tJFGq1zhXCIvb6ocegWVz08FnIZ\npsk8prAsdJk36p8ifEYfcCSqTh+KyTFcB6GvmLVYGz5qdeq0ZCbV0OFsF7Rj\nHmddPy6E4dhO4L4XBDjdsie9RzfiSfT9RrjDa8UUaOqRLCuTVVMGcsCfACXF\nlGgTaST+Z4bhzwFbtUkbkf+e7hjbHYd2Ze9ZlhJv9FJvXvbs+IePSw5A31kv\njJ4vIe89IQlBc2TifwfH0f5O5ApxSECnErE9CwYfnptf+xK11kQwxyF7nSIs\nkXR2jQugnum4GXqPEzqQsTUeuTq99Vwdt7gBLQ/kzU+jdUe8u6KAD5b8Yv7M\nDuGY\r\n=JBEo\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"823f4f89b39f86d10ed69fa8a943c050c2d83a6f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.c92f038c3.0_1577743346805_0.14470664661055754","host":"s3://npm-registry-packages"}},"5.0.0-canary.1f1ac7558.0":{"name":"@material/density","version":"5.0.0-canary.1f1ac7558.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.1f1ac7558.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c958ebc248998ede42899aadd3766505b6ba6891","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.1f1ac7558.0.tgz","fileCount":6,"integrity":"sha512-kdxe+miRL3rl11tK9YepqgPJ80x2yVEOB41MkZQcfaUlMFFje5Haooo3tJLu3Jf3HERKmE1DuhQq2tsBHHpQfw==","signatures":[{"sig":"MEQCIHgsPnrYkJ+xPovbL9+t2TWsxRJM89MlgBBGZbJ5Y5ibAiAVdrRABZ6yku9khrGgC+F0KvzKqCRprBx49KHCSvcDng==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12290,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeDlhICRA9TVsSAnZWagAA7NsP/1YrF0lxZWeMPiz2zvXS\nhRkgI2wTEnszQzyj2vTnfY1AsBqrNeSomLOrGM4aq/ZlEpjcgW10gZVoi6gW\nxB7ujgcxcclt1Ojw+PogM996cYp1FcLAe4JdsT8WNZfJY3Blb0XoI1CNC21W\nbKFJhVtETfUwRdbJnEZl2OqhAEVfgaWbOu7m6zdi/OQXZpXhwnnHQEX6Mv3H\nCXfiT+Q0xwdhABEHhRyv80PTDRbNbEt+EDJrYs9VdnW/jSFabrdYiRQ8Ckty\ngg+gPbqacwJnUsiBKmrOJh948qIeHPECV7gM1jN8MJAg8jacpaTp9LOUDgC+\nSF9itJJ2sMrp2LEZr90FwPCuiCfYQ6b2bGeF52ipWh7MaK/npX8LVdPKxY1j\nN3QHLUMUATr2x8yG6eVzKVJaHXs86Ak+irBcm7n7Y7ESLpOHEkPkfhaBYcip\naofxhnIPg0veN8sNKknzJ/u6m8/ly53oY64+J95zKQDYf/8VIKrnJ06zGmtq\nBlT5OFQgvFNlaBkXaDQeBK1DjLpaZIGzlEBGHIg6d/6EKYLXD8CVIMEEI/Jo\nxMQ7fscJ+1rm5e2KKJeWP/uZ1Xc9eBmEr9ENZEZ7c0DGFFcdlPRqqgMWXw6F\n+PdYQQyLtNeOuprk/L0Ye9X7/6LpvdEj/M/iBsa8SvcDK13GvnBhJA/q3FM+\nkajK\r\n=yuVP\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"698a9278145ef0b4e06e9c33d51051b9650c5b11","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.1f1ac7558.0_1577998407635_0.8349348390164495","host":"s3://npm-registry-packages"}},"5.0.0-canary.ec26e799c.0":{"name":"@material/density","version":"5.0.0-canary.ec26e799c.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.ec26e799c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"172c9ceac6bde403114504ba026b52152ec96fbd","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.ec26e799c.0.tgz","fileCount":6,"integrity":"sha512-AgT2kcLDdqbgX1h+uqQ2ACRu+vUUOlYOMZ3CGp8FYLTEBsLsIzIIvMXU80eRFuIBgj0SStpykZ9cQlnAQJeRig==","signatures":[{"sig":"MEQCICBvRgxgd+/2VD+hdmfMFtswsRV/gkRz3qS6L3hguAGLAiAAwdaCBHKLQq3W93E5W+0HTlJMcHyxlvcTfeTvwb4JQg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12290,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeDmOjCRA9TVsSAnZWagAAUfMQAJhrMNueUluJK+r0WCX5\nm+LhB7ZJdDu6OkdELT+ab6mfOi+1Lp9rkwtTfGVJXNElEbrUAzdA4ib+eAUo\nZjhTcORoHDoVfaKOxAIanMErrOvPjt8nsqCfxtNlvC8d267W9V954Jbp+T3w\nhJvMxgvmo+fZLrHWVUaf0KfmaODYcWf9Xx7JEUzEfXkqh2CLPr4c5TDPRKWS\n2RZTJJqFdRpiF8UBBNCrD2sIQBBTmZaN2NVQ9EEYAG7PkqOXtMigGlntJR7y\ngnsQw27hvDgtZWHi2+UYaphBzWeOj666AOGkTrNSxC4/CMU11gBQ+Yvru+iX\nwMP17PVM7f8aT5IVlMRB1X1d27IBtqbydq5gfv2jnFDfHTNIP7EdTsWnjY+d\nr1EHw5W/2wn9zdgBCm2QvejcH4vDC6qo/Gp1R3ztR6YUMU6a+3yrExhqs/B5\n5kGg1YOdslqGSaBlDcYvE54SzDGG5h39knirQ9Yc3WrXy9z1b+UDnIBNWZ5N\neBOvlw5PxJbeJ4WeJoJW5BEmlqnBn8N6oxLdmJ5VkDUWVqFwcSnxNC0ilszu\nc+WR8fh7V99IgWhPAtz+g6+4Qgj5je1qWZM/aqi3qaMy8lrtrj6gudKuRzrk\nA+pW/HoJJzNDgWrxi6AEJVcTioONLazSFKykPEsIqwb2rCw26RazSZFDyCuQ\nPOl7\r\n=xcqx\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"813829c13087aa9fccac08bcbdda0ffddacaebeb","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.ec26e799c.0_1578001315489_0.7979280508555442","host":"s3://npm-registry-packages"}},"5.0.0-canary.0a40ced40.0":{"name":"@material/density","version":"5.0.0-canary.0a40ced40.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.0a40ced40.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"34562acfb951951bad5487d65a86585ca585d7d8","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.0a40ced40.0.tgz","fileCount":6,"integrity":"sha512-btysz4gXMoooyKmakm0U/yuW+rPhonh5z6FFnc3IA8lPPOtWkcfWAYZHq51ZU4/xiX50W3l43m1qUczAdW2bIA==","signatures":[{"sig":"MEYCIQDd+OYnnvhu+XKJV4aVOjYbeiBw47Lx3yN2wXmgHcr/EAIhAKRo4VBpJwNs/FsN413hgiAYe2xxBY+MXMcB5mAGAHTn","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12290,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeD3UkCRA9TVsSAnZWagAA23sP/1FSuu4Woy8pskxEuOWA\nGLRHZqGNqI7d3Q9EA7084D1aeeretVxInTSysmDKi218d4534Y42Eg4TraVA\n0DFRnIe8cDzzCF9NOVfquIV6TrdMAdCf2bmYDrr+/q1uTod0c1J1lr7R9F/Z\n2re53KcKc4t538oAhFuspMAQWxMSkwTAmtjGZAdD8Bi2lyFjl5wIaSvIUV52\nG3mGQsqXts8JUeUdOQSNqGtxaGKDIEeOVvuYzvgOd5630JG2PUBKWwp+4eMW\naowrzkU9OFMf0djeDpvMph0KYxK/s6X+HypvKHIQ0Qo1J12T8D9kb9NCFhIW\noTt2juk1xU2fhlFUPM8E4QV3u7QxtLLpOaq+EyCqrWdDmxsLbF2VGFjTs8Rl\nST2gRrouTTlUT1cbt/RJM/8rpzLYO9TdY3eFIjA/CvAZS+mGsWgarNX/L+Az\npWX8sV1T7majp0MhZ2eBY5gU0kDXUunDlbOHz60T9uK48TRAWiieEBj9zLFX\na3Xl/407VCM8Ao9czruNgxlm4sT38nrjSFbrrKetZxh150deLAVLd5tdT0c/\nAB0YxaqwZYkVF9inifPbPU8D/6YC8K4WmlvzjMLBMaX8P7sxHNePXKjJfZhl\nVKFzlvkKFsaHhMLT6xNMJqYPyUau1ZGyaDKSAedBjmI2BmxMvsDKxqFHfhGY\nriXP\r\n=+qQM\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"dcddd5ac583b29d0fffe1a54b6f634f6b90fa44c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.0a40ced40.0_1578071331907_0.49190533836729156","host":"s3://npm-registry-packages"}},"5.0.0-canary.3adf84899.0":{"name":"@material/density","version":"5.0.0-canary.3adf84899.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.3adf84899.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fc3ba81d2ec587c7f6dc2bc52d89edc4041dc9ae","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.3adf84899.0.tgz","fileCount":6,"integrity":"sha512-5jN1ExwjVy97ejafJ0KCNaOV+ZND/maZn9RJ5pes0cKDVOqpKSYuubRVrvWpDhymmTv4I02LDoLtGHlAVaALrw==","signatures":[{"sig":"MEYCIQCXb9cL6XeoZ3X/e4tndFDi78FNiLBSq6rAL5Fguh/8AAIhAPfSR9glBisaeQWrE/2U9r9klBXVTea6u0wFjTjKGybU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12290,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeD4Y/CRA9TVsSAnZWagAAwBYP/1TuO4+AHo00jvkRks9Y\nCbTwf4uTBOMWuUaVC4lOEzXRGQChf6Zl9e0533Jfp5AsddfXGRD+Tv+H0gYC\n2vIZ4iajatD+IRKlsUtNO3XLJOVaetIqZ3rLq2xZbyRMkO4oQHfjBNvwrv9a\n34FwhuBmBOAkds4AakPJEdngM1Lc2nrvpo26lFKR+mW3gNQ4F/a0j2cAPuNs\nm6MKxc1eEhlnAm8VY9libPIYXuZb5SwS2T/38y1vV+nawBkQ0Ymo5JLN+7uo\nthRJ0lL31uQI1YhA8+X0IxzFiGqgVNPS3+OT/6CGgUiaC2NfcN9bpt3mkQ84\n5jU2hpqnzQyUrdzkDwbcUvSt6RV6gEHHcBRMtn1nS4DgVXGe5sz5dyE6jvHK\n/t9FXdFfA16TTrmVGLaU7CkLxBe7WVwPNYNTGln8O8MaIw/gBQXOsQl18XYA\nFAawTYXQQjeblV0KxQU+FntSen2Y1ayTE4m5XcKYdn6mwaR2fnzIXNqd3lGp\nPuShuLY/tVpdJ2OW0wW/Zkq+M0oXxi44wRsMp3O2nZJj67qrysqxlnNx4aIE\nPwcaSqxoQ1jzpsOifWT+Cl032I0DVSn4UdOBdG5/lrVwwv9Io2doU/1ZscXs\nCbwvaESzz3sHiZYJskNKcOt9rCGMRz9MYo+YgGWUM9/oA2LmFiuwPccGQDuQ\n4DQR\r\n=TpBa\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"9f20ea5e081bb781aeb0d66d6db6a0ea7a0f5619","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.3adf84899.0_1578075711425_0.019407131523636822","host":"s3://npm-registry-packages"}},"5.0.0-canary.0d42ee650.0":{"name":"@material/density","version":"5.0.0-canary.0d42ee650.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.0d42ee650.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d658ede46ae9d912a03587bb9176498fd1d9712c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.0d42ee650.0.tgz","fileCount":6,"integrity":"sha512-DVeQapvqhGBXAQUZ/TeLOkzppTnLZJLOLlyPlOSD2t3SXl7qg7KrjRqysuhxUj4lBYTP4rbCa3HkoMEhapsFLQ==","signatures":[{"sig":"MEYCIQC/670zsCbM0854XG3n6SpwV66SK+puaqDg/IQN6MQA/wIhAMbLqrML5zeAHESRhQRNasDaeQ5rCVhb0mF2pUafDy/E","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12290,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeD7PcCRA9TVsSAnZWagAARKUP/26Hodfsu7f27iGASYxy\nGFppSA3iCOcqettfa7JOOMC2QVTccF/D09rMt5SF/+N5/4hglDL40QtoCM5q\nAiwhA1Iz5qnL6pi160nPRMg1QVLxF9as37E/1t0ILTQ0DLGzPzXMyl7/Onkq\nPCslwX7P4kns6jLXc9Ey+wMGk5OdhablZ2iaUF/ka9FBGoQyWkpAitMmnyve\nGKBUzRZVQJCyWpm5ddFdNAqLTNfr2YF3vvrF8iPau92mC1hEf00tSfxYSVi6\nZOv9SX8BBm/c9xZmc39N5TYBtNbc8EMBpp8bbcDCpJ8Zj3ZcCM8WMt+UlKPa\nIRruNHb1U5jtqRxsHYO9tE7jzCVmp4oH4fjogbg2H5C/nQ/uWrx8hLKqdYXr\n2hJF9R0ntRdh46zMdt3XsC5+dNNzlQhrI7Jgvk0zMWFIG1dAQu0AyvGwipLy\nvwWVOViRxB7bnXgZ9j/RTA7I+VtOkgrUMwmYdbMw8nwqD9PLWZQdalM3oIrt\nXwD8iQhixtNNeoVD64JTGNoIerHzkSqsyCX5fY0u3FyMJK9wkhrVBqiDzfeO\nBhhTnfEdt4MOgKXs4un0rZcMtMcgogGvJn8QbTjR0bNACRzOoexTtfaMCJQS\nIY1rciEXzDWjf0x+qehM09gnxLsN4pXAuK5W2Pn/5csG06BmF9H+y4Vabs7R\nHmUd\r\n=0BOB\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"184f253632333982c2b642e450e6e98c9703fe85","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.0d42ee650.0_1578087387998_0.05395809433964782","host":"s3://npm-registry-packages"}},"5.0.0-canary.7be9e4a04.0":{"name":"@material/density","version":"5.0.0-canary.7be9e4a04.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.7be9e4a04.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"220b17cb79297401947aa9f57d64bec08f840d76","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.7be9e4a04.0.tgz","fileCount":6,"integrity":"sha512-lECWs4Z8HYS7KWy9k+nBq+vUNoJBVMl6Kk9rI2oyfBhR5mUcKwaEarTPxTFIFnsLt691NqtkLLCeYkGIlFauoA==","signatures":[{"sig":"MEUCIQDyTJuguDqotSOYcoqMELkkMzyhv+9YNBxaHUQCqqLMLAIgHf7Wth6dJ5eJkpuVbgwCjvuWaX0hIr+wboAVAIv1glM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12290,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeE2h2CRA9TVsSAnZWagAASnMP/2dhr+grbI4visazKZ56\nvDKvX5ScB2NBtAlUJc4bBx5A5m+m9yhk8oBeHeVCgg8wifhtjEjcRl59xFSi\nnA+JiO5vFpt7Hj00D1xTRe/gswQVWJBIawvJGBS29TxYdueTuEGKwfLI3iXM\nBLiYZKZ7NL+kLTTg7ScynTZXBpHJ4Gw0EulNqFfctg0Pdp0sCbVWrurdW2w0\nbbZ8DZR+Jz1MW4jrox5nD3+zs9SfI/RBcu3GwxyHySRtsqzCA/L8ZWUjQi0F\nRjvx2EsvxeFm5D82ec1oHLS7nrOWBrK7J354m1udfMUn4a0fsbd8QQ5i42aO\nkgbueCjDnp9pNxGPteJDavCiPjgWFsV5GCSVtdtWQCyCbpOlCT6Sx6J8VfQ4\nB8Yvmu8tTGsbTXBU6c53Ky7d1BArn4IZUVbGDkHycNPnOYYeLZQDFmU+pXbv\ntz8e3+Gc+JQLNmVIF4SSAG45rsB/XPLgWwLjqXv3U1rrWgB1FyQAxk5dvMe7\nzhQUfvHnriqX8ibv+aQU4Dr1E85oScFmf2omo/QOO/IfrxYJlLsT+AH3CaLZ\n+fvIa74S7dn95eXquVPwj82L1EQlWtzkdiD423OljFq+IvBvvsLyDZAWs6LY\nAHXlhcEjmMOw+2sr6/poWj9eecPMf+D4qM+EDpppw7W+vdQVmD3rWZj1qf8z\noSdM\r\n=pD/i\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"7675b02e76469ef82297d4232a252b678b22d1ee","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.7be9e4a04.0_1578330230017_0.9470216208308666","host":"s3://npm-registry-packages"}},"5.0.0-canary.847dd1ada.0":{"name":"@material/density","version":"5.0.0-canary.847dd1ada.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.847dd1ada.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"734653e75d8e4b5111b2b1a63003eda445e860bc","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.847dd1ada.0.tgz","fileCount":6,"integrity":"sha512-0LRiWJiRa0DiW76tYPnwO9kq5CcEV6pN4FO6OXZPdwINYwpKxpbUMq6w8aVIRQ+5Qc8qwPMayI4kYiBDngykZg==","signatures":[{"sig":"MEQCIAx1vD/ZJDVnOL85b7zSgF+139HhGPgY0aq+Lf3M1YZQAiBrHmsj7betgdD+R2EE++IKig1mXOfRRvegsaPdFi/L4g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12290,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeE4m3CRA9TVsSAnZWagAAp0QP/j2WPEaa3z9wILW2pO5L\ndAg2zTzbYSbDH+4Xr9dyQGNiHh/5ZYUPlgLKmHUr0zAtDiOLGcjxiP04oCOt\nFzsRnc8o3Oo0eczWwMwPFuX1l3t6e/h4k/BF7k5Vbd99V/GapHKmm3EaADTB\nDRCrHd+LGPVd5wkdYz3/Lx+qX2xYkljbrXShjgYMoK5gz1FfC0h4k9zCurdn\ngYBppl3Pe1WdQBOjW7AifGHPY42mGiOwjv+g3oNOCyQ8PaWBl0IambXfg0ms\np+fs1BLyg7tLgdKqECglz/nXe43HBjvhHoEZBWB7jDxyLniuI9y7fZweIGQv\nebDD3on5x6aXFmeLHJi8JdLrP7D89B0kuCYuGBv1xaNoJicxnkXmRmCA3Mes\njhUm3kjCTMvhiPUeiEse6DT4nRJhUeb9jaaLOijzq/AxrecCOWij3XGQRboV\nHfhrKRkaELBgmmbguGApFJ9sobsljB2tc7HsL+bB/89nc97hP+24j3JPmDgw\n46jwcIcuQpzDRnj3JJqeMLdbZ+t9JqYPIpCR6jX1gyxWzHWytt4YtmpqCjVF\nj61RFxKeCdwpHtJTQYQTbSw5XOVMl0h0bgWCjSvAJkwRsIHBSLt8HNH8TqxQ\nWJmdyT4yyCkLf1nOjAtmvgALxjSD7lHE/qcr0bllX4uO3xs0342Yywzrbrtp\nzrnU\r\n=ly9N\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"cccb6b13f05f64e22210548991ad471df3de97f4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.847dd1ada.0_1578338743173_0.9638096671364005","host":"s3://npm-registry-packages"}},"5.0.0-canary.39df7e5df.0":{"name":"@material/density","version":"5.0.0-canary.39df7e5df.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.39df7e5df.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0f644c093ef18fe27cc4867269a4b83500f9e131","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.39df7e5df.0.tgz","fileCount":6,"integrity":"sha512-YEYB/kUYk57e9dLnA8ihcWxFBHG/FuHSdDzlj740KRF0Hjk4MmGt60Lyh/kMjXzYC0WIJQ7Hsfz/NaGyvbP8ww==","signatures":[{"sig":"MEUCIA+oLKuw/pIWCw4/U9twMpZSocxhnMrQ0H4BcCklBvChAiEAhN3ejAnJJYQijApUpvp5iSU36yfyhOedS7BeGsTso4A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12290,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeE9bhCRA9TVsSAnZWagAAM30P/3/rlPvKEcMX5U6X/v4J\nmIy9FiyhtT4AeDKt45zAls0poclCGbpp/jZ6rBwzAntD2BdYAStiPCaOrE7b\naIW89x8IVPlUP76dx6hF56clY16k9YHaHlV/iPUH812dBdF/56je3wqQnKuy\nJxLd5CTUxyiXGlVSzMGNqMXXls1HB9kkMj3X8Le9BinBa2YGUjr6WhqdgScO\nYNWFCQ5N+K94hhyvx2rvnPR+fERrRtG1wJy0uY3SlcWP/OB/+kv70lcGKA4s\nvCi/9MWuDfOHY0uTUa5mYEVSwgLmBmL3Mb7SqTnIVepNsTWV/pX7eZMkUu+q\n/o5jHVoP1Ecv+i0F3ONcU9qfBNp1Wa+y1LAYZIO8GQGY9dWB4+uegbWZvwjC\ndBYSMe7eCPA1cwHRCGZOeo4V7QhDAksnWjAmewo903oFgcSx20BoDEoXhRa9\nAeJgjBQ+s+px5/0c/BOogjPQ/67QweW7DAj65FkC/90T1x5+c8SF2GZTux8K\nrb6Ej/djKtNMiuEo0N++txWbsxGr93Mj4aQjDQmfc47Qge+04XKVKsdcPCug\nvsS0qx6AC0lbyqZiHSlMKTVJxO95Jfdp5QRsnKEePpaQRkFaIsXky1V9ovuF\nke+6UnLdNWT4dzN9tkmpm+JnU6kORXQx6zJyeKyK3ews4oBnPq20NrDtO5Uy\nJkiQ\r\n=bGxY\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"a6995715f8fc80d9a20e6b8ea90e80f4906ca595","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.39df7e5df.0_1578358497072_0.9370142679548603","host":"s3://npm-registry-packages"}},"5.0.0-canary.f1a2581ab.0":{"name":"@material/density","version":"5.0.0-canary.f1a2581ab.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.f1a2581ab.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f005ac32bb025c4f29d7e36e9f22971b39e1f1db","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.f1a2581ab.0.tgz","fileCount":6,"integrity":"sha512-F52H71zvSivfW6seMX2Sddl91zVtQMwHUuhMsKTC8OiX9jL7bPiXapH9oV2JlRrYc4ScLJkQnS+UWa6PZPOX3A==","signatures":[{"sig":"MEUCIG6G5CpTM4nmZfjYkYysycOcSSutSk5D7Nf5g9HSOYaUAiEAtduNlg5zjNhbNMW+6xKwZ/JUSQIhDQnodkrgaT847YY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12290,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFJy0CRA9TVsSAnZWagAAgZ0QAIHWFxNSCjUDWnUqIzFl\nlrfOJRdWnCi4OpEGWST9Aw+VUWdQ/crxJJNC7epRdwLVag3yZpJDX63BJKbQ\nBERQ0lX2Mho48G0iE4sYyx0865LlPPxkieGWSH2gEbWAshZZyK2KZLPinJRp\ny8s3vsAqX80xDchA4MqcdeEn1Mkf/IeB+LapE5b9YhNjTUcT31uO06p9M2AY\nuLRA3RcDqOt+VHHqNzKHL51HW2g2cHlCDy6gyOy2gOCI1sI9Dqpm6kGjRZn+\nMVHqRFjA6Z/66F8cBAGEE8TzyAzkZKUlNBKVOmtOlAn5EKWEEbvY7F2g1TUn\nXZwLul6G3cGRJWon0n8G/zxR1FjtKKkxwB+OpE2tPRUghh+3bGiBEScOJg94\nnXD4WG/TbCCYokhjU3PxZMH+U5Ln8lnsYS0xCne9QrcJ6G0T/9cSgHM5EuI+\nEUMcPCHhclkZ316P7jmd0VARMWejyckzDKAFHrBfK6FQk+T0v8OJfV+jtmHM\nu+JHc59KrwPKp+Bqxprepn1Cyg/LUKASQpIkdK7uyG1F+OZ/RP2eFl2frj0m\no+EaLIhcHjUY/gKoxYDw9RN27M/SqQn8qSGnXkMAa6e+DhcjpDPIoP/bG0pp\nIg7h9WPn6qdhsO4fJjLsPzr9WG26OY5jqACYZacJT9VP18Vm7Oh0ARbiw5TZ\n0d9i\r\n=E77J\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"ae69ee79a4a22a7695be055fc67e5b974c2b989f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.f1a2581ab.0_1578409140343_0.5913840110141342","host":"s3://npm-registry-packages"}},"5.0.0-canary.7c7ddf347.0":{"name":"@material/density","version":"5.0.0-canary.7c7ddf347.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.7c7ddf347.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2f08e4a7d0d00d21f3e17213ef898d1c2f711390","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.7c7ddf347.0.tgz","fileCount":6,"integrity":"sha512-0mCX6Ka/M7ZXxEsu0gSz9BTMIOA/j5BQwBPq7xK9HV5ynbtHUtRJxSsbbiHvr9DAYRS1u5oSRG9Zea2aSZcVQg==","signatures":[{"sig":"MEYCIQCYe7p6gYDBJdg9LgHUG3NqoHV9WmlFR2vbMTycrvDcHQIhAI32Yv7Gj7jkWAj1qiYKS46tDc46dDE12SD5bHd8xTZv","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12290,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFKBmCRA9TVsSAnZWagAAU44P/iOUwNCYh8JY9NzysRhm\nLdUX0IK6CXQx3XKJy51Mk2xJYWDbs4XG+i7zQe/cHkt4uDB0XS8+N9FbTtRU\nY6vcgiHS0nIPH7BPhLB2LXoERsiJO1pwL7+tBO3z5ZOVaZ6L5NBL3LuPdk+u\novlXr7cMoMyH27V6EAobQN63AA7avWEZOxQ0QyL66Mmek8hv7HKTnC3oOpbI\nnbhfG6AkDHUa+P/otCZd8dIh/FuUe1oOXts3C+vKKHc2bvtbs8lRnfuHvzRX\nttNdOFI559OGfgBSqaofxagoZIhYLMN9gtwOooDgatVm5kfKtrM9R5B39KYR\nQVcKm0bmcsNVggCI8KNlOy13ZbSKsuNEu5WAwoMEkL9DIS1/b1EpcgISB87Z\njFHG9EmVCGfYek4VAKCl+u4IaMqhOhDKbCR/Kxs/XDsK7qJdYA/PScAnkaaB\nckHK3ppurTmJxrer9hszXUbru9uJDTrRJqzyt8A6mGAdjwfB/2K7fmA/qsWb\nxj4WdMA7/ndp4XoNst3YFButvXE3TsfM+2fG4Z2YY8R64rqO1kNalmiKLmDp\nXfEbEfYJ7xUa2kbiGshELDqXHMnEPK3uOcrMM1bd6hKCwyuKZ9bczgMWTaRp\njVXWbBkBsTLv3BaoYRCO5zVnP8P6lt0U+fYPnTtw8Hc6m4sNsWTvoS0IQ1op\nevH1\r\n=4FB7\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"940ae7448647ebd59a16a94b84c479f3f7bba9b6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.7c7ddf347.0_1578410086306_0.8502667901777126","host":"s3://npm-registry-packages"}},"5.0.0-canary.a1c84d4b5.0":{"name":"@material/density","version":"5.0.0-canary.a1c84d4b5.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.a1c84d4b5.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4ac94e42fb94e65b764471fad978c2b12f2b95ae","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.a1c84d4b5.0.tgz","fileCount":6,"integrity":"sha512-ZegW7rjhlI5RyyxyJa2wOlAMaZjRgQwIQmOTZvjrAOcWC5TiaLyFyTMa/3EFbRZc+qYBJlYjB6Q6Lusg/t5z9w==","signatures":[{"sig":"MEQCIA66NXj9/9Lg5J+oUUMVqhTCH1BlOdNZz2/+UkWyyVwXAiB6XITNEDysphClPt18UgsvTgvLelvG+vWzEZgKXQobdQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12290,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFMlYCRA9TVsSAnZWagAAGMQP/iew8JL2fUS3Tk9fpdtT\n9EMsJ73VxBoZb6Mjzs6AB/NpYUVm2nt1i4MEQnJQDhQLNdSLynAZ9coh8SXP\nYXf0vjLzSxmnh5wDqSHhPo8zjh7g8ulQgxyy+NcpKC3Ofk/URDbZuX6ZDZ2m\nzDCsz2My3s/KJw+PuwkJwkAkzdEh+z5SAOoHpkCN977hPHHGXYm4e6yErOzN\nVrbzQzPhqpVdz5chjXakTd9thXQPMYOWoCr7Fh3F9ZlXycMYZqWW/uaYVvFb\nXTGInhZ0W5E23egreM63hSeuBfxwN4J8eH+dNt3MRmt/HhryOZWR6togYvaH\nYs64hj9XSWbwDdbXsHKeMXSClwQogxa9T1C4STBtK5EYGnxbGoJwWsuWUP+V\nW+nZRXMA4ijKvj6qlI+4xxYwp8MQ3m5vRswDZzGvJRLQHHDuu7wsC3QZ0NW/\niogEY8Vk/bZe2vETP2QHYU5AG6/UPrysd9qFsmAvPV/1ps9Ca6T7FIc39sMO\nTx2mnsZGzEznCgG/Fv+Ohx+KTKvzHmSBNLuGe4pKK+QsW6KtNQbKOc/mREK+\n4u1FCrg2GvUG0DRJlv/f5FsXcrPk825StY8ZO+jb9pq0j5he8Z9ymICLato1\nv2lhJ1TlynkeINYX4s51jW+4B0DY/GWWM8AuwD56pFfc9SRWH7vB4s95W45R\nKNn8\r\n=JKf2\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"5ec624a1b571d87d94d5187056a0b6db214d229f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.a1c84d4b5.0_1578420567911_0.553067749685437","host":"s3://npm-registry-packages"}},"5.0.0-canary.ec9f16578.0":{"name":"@material/density","version":"5.0.0-canary.ec9f16578.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.ec9f16578.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5a3843134ee03d92379c7360271d784ddcaf8be6","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.ec9f16578.0.tgz","fileCount":6,"integrity":"sha512-um7ckEbMbWM9lBBqdwpvCDnq97qmzeRmWfbboZu4MT533/pirMO6h8FJt/N23YhcY7FNQb79rYcFIWjPIyGb9Q==","signatures":[{"sig":"MEUCIBi8NAinKqA/lHllCRetNLvc+UkWvrEc4wowYMAcdYu7AiEAhuYNQRjYtTY73YGoi+zoz98y00m5BmZSnLO9uJlpf5I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12290,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFN5UCRA9TVsSAnZWagAAAzEP/1pGDANIgLIbgImNMTCo\nFBx+uM99X9zr+tp+8EklSqdeeAjwKyNR3MVTnqpbJv0biHQsnIt99dcpvs6a\noMNWdtvzVqvl5b5h6l6YzAUatlyqIKAMnoSdGKlASQS1v209T3KgGsdV7JH/\nGlZ7r50gCAvAIEgMrvpifmHmaygeWX0wMOHZr9SK5SmXSffyDGt587XuF4cg\nSJIgx3ik59ZQMe9QNMFSnMgDrMSOE2+NrTTjJQIH0POWINcCqDQp2gX8hnCt\ny/smr6euwLoCWOMCOYMj2k2c7Epcpp+1mN4gBNhJmQIhVq5BdThtn7j2UPlF\nv6p4wn4LtPFT4U9CSVPq8kB5S/BQR6kOmvQyaz4oW0y/KIqjaCo7hIGfNNBe\n+M96dWE5GrWbaxwXONe4IPlCjpczhlU+1BfUXQjEre060ro/Qi0Fr/kDW4is\neHIVPC/8LMOVml1g8d9uPrHtww0lwj+YELfAGxA03Bnr0y702KXTSmT/BnJW\neDUBdDhnwgdXEt0brhgCf4LYYut/M0V2lQSs+aIZllmU6QPau7dJCm30X01s\n6LRptbXnHRu62ZyaQ93xs1WPmrdTl84Lj07XnpqefG9eXqco8YitbPGw/BH0\nDNMPmJEgP2TZNZWOVApbDHxwCYFxwSv4wqSaMRK8wANC2i5D+HrcyqC+MSwj\nLCv/\r\n=lZGc\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"23103621e66342865b8700c5948ef9134fa8d1fb","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.ec9f16578.0_1578425940161_0.6674198137558696","host":"s3://npm-registry-packages"}},"5.0.0-canary.b602226ce.0":{"name":"@material/density","version":"5.0.0-canary.b602226ce.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.b602226ce.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"94db9822102756ec94f3aa3467f1c0d971998e7d","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.b602226ce.0.tgz","fileCount":6,"integrity":"sha512-Sqfvj0xyA8fxuAOrIlaOMfj4oSPzI1cmCC3NoHxF+AeILQXW0s2GgPCeHIXaWiB2WjHodvjpe5zq0NNQVV+gUw==","signatures":[{"sig":"MEUCIBW6VQSNPWQ5eDCBFkf8NaHTbGE8yypFqvcQhWbvRJM5AiEAxCtNgN4TWlrOklaWLC2SsTvjmZUYK9zn6VzUueL1UEw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12290,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFOaxCRA9TVsSAnZWagAAmjkP+gJregcrL6oWceRAM5HR\n57uzTKxqAmz5+80traTpu5SvwKLoqsmxfEVwdWcnkTnxU0+nNGKjl/KbY10i\ntxf6XlwTyYOUj33HoWrFQ+coegjoRu8eHTKG0M/4bpt/vMHEQdXTs1fZ6F41\n00hfPuzPBO2troaFl+Ax2RRBHTYB1WRTVc3JBQuOHR7xTLBVomEF7ZQkI2OM\nxOnEaAfPrzJ2IjEkQ+UqF9bd8h3j4nqB1wgc/bdOzRHiQ4Nj0pbOmAqszR40\npQBlfsSxLQMgqH50zvNAvOR0fu2azNMiTUVbIfesNqpVbly3Q9+teSaK8gbI\nBmo93p07vT1eRx+1JQx2/+6dKbRe/CkLV5LYCT3LJieW8Jqu0ypFFG5UPPwP\n0MblONGbVkUdcRDXU7HBA2AiZx6/Y5KWMBk3yvq3bd6G28HZdRrzVDPZmnNe\nP1Z0s0YPxlSQ09xtJk17mMjbgt+bvR2zPqMhD3bt26mWvlrGRDviPr9jZVFi\nXwVGMMyKnLMwlKII6zs4HWRKpJmENSvyw9iQ6yuSVVo9t+Aruh7k/o+B5XpS\nEzy1s3dsUDt3fJ9WTBkmAxmmYn69WSHzQ4KYlCAZWlAkpviM2z+E0keeTDAg\nCmv+8ya9aTtq/Bp0P9JDs4kwvhrRQHIW+Sx1ih5UEi+8AlRRcgfiUosSay28\n/BpV\r\n=klq+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"de0d35ec6a5285ea0c12a54a6e35051ccd0aac1e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.b602226ce.0_1578428081300_0.8646766498110627","host":"s3://npm-registry-packages"}},"5.0.0-canary.b2d2dc08c.0":{"name":"@material/density","version":"5.0.0-canary.b2d2dc08c.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.b2d2dc08c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0949638f5d455e45b2f17953887be44fcc45289f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.b2d2dc08c.0.tgz","fileCount":6,"integrity":"sha512-Pv3G3TrwmGfQcVWuTVe7kN7htJXruECN9T6w31+ANnRmB+OfPBLQzaZc/TLbfKGQjVm6ZgjqqoCMibO8euHG5A==","signatures":[{"sig":"MEUCIFTCJPQWjr9+R7cN2oaDaEY+z+T5UbOP73AJ+AQ4IJADAiEAhkxKuPbMGR613NQO8OPLPSaHE7bh1ORF33leuArO7Sc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12290,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFPdICRA9TVsSAnZWagAA4kMP/3BpKhv7Rng0OeEKy0A2\nwoPRbDJpAKcey7e1XFecoAkf1FeJ0nNgNL+YlE+4r7MGJECYIZ4vEGV8fSpc\nOZecCOoM3o1htlyFdpeLM9GEjw/O0xAsKNdxpkTFky1jjJKL0Jc4BSa1XpX5\ni0px68TxccgPnOxiOaYmSysvD1WNEAdyCIBhNgFRwNfK8htq6x3lPURSVyOp\ngqECzlhO6FKrWgtvc4+w2h94PZaK1JnOkRbbRS4TdVmW7kUKV+f2fXOiwGKA\nUTJ4oX5W8DyMobZSrSgc6Tplf9QrRR7yGVfs0EgtPOKIs9GHFfckMQLFZjm0\nNqu5t23deMSeY/3mHVsK1fQtA+v6aq7eWO8xwDbnmTEbBu4D7ESbfzgheAhV\nTSpdBkObsVIOvuFOTPsDLvfS7YoZoA+pj7KUFw6oGa2IL/3+O7dfi9aaOIx0\nlQ2GL9gdM9jyxfkc8JX3ne+r8u1AKV3GU8YaMdKRqmb8ZyLrvZjwrCCGbQ8l\nzBSe4XVBq3tErWEgSSrQ9zSfJC4aaTWwut9dubNBUC+pv9+zkMcGAmxY+5uB\n7ERhXk13TExzk5jVkjQBC0unOjilCOFcjQIuLCeXfDkIqbjscKWW+qa4jnZm\nSVXCdJTCLUNx3D2T1W4MVkyb9qIj2WhOkDZVq4nOdKcrkIqkNCuQEPXVUwMR\nnmJS\r\n=C2d7\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"ec9aa1966e1f2e307207d815ccbe3f16750af94c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.b2d2dc08c.0_1578432328342_0.4414762817977256","host":"s3://npm-registry-packages"}},"5.0.0-canary.61f2d7580.0":{"name":"@material/density","version":"5.0.0-canary.61f2d7580.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.61f2d7580.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1ba84a34323c7bbb78252bf7923f2fd13af37977","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.61f2d7580.0.tgz","fileCount":6,"integrity":"sha512-aJUrGfQ1dC6ERoP2zDb0WqovOgig2a4qAVSzz11mmeE7pHmGRByfuXTrxpT0H3CUG29ronS3uecGFXNUIwv2WA==","signatures":[{"sig":"MEUCIQDB2cL+CkymB5vCe1LhLJElxIqFPJOdFvX34BblAYslVQIgDNyHR65wehf6l86Hfmdd70xeJsW64XZ6Kmz94PiozD4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12290,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFPp7CRA9TVsSAnZWagAA/PoP/RTA5CsdfjaULCFkB4Bz\n/o7sOFYrIPGDOUjhQf5uGLVrpG/v3kq9kE28ZuCi4zYx5Z2mfdGkVC2qMxcH\nmnVOIazBKZ5IXfAY7BKXyV6BLUuP0P7fgfBjJxsKbdcJ9LdmwvLyiSvOyhN+\nYtqSWyTrOyOZgPAMtLgUhxVCx7NrY/H2BqNULxqKXUiIY/ULBQIft/ihST7p\nG6B1skYQRk+MfjIw0U5kVcswXcbgGbQ6Byd+A5glakaEVl5Ye4kFHfR/FMm+\ndn9fPW3F/qQeQVz2krZseyGHNkZ6UVz1NfcqxkTBc8C5KKPSAHKwXW7lMCP1\nYaZUtxaa6863XTBNhzTnj9VNkM515jIZel/tfa/qneu0uArBsNn+c0z1aSTL\n2ZZWLrkz39uykUQTT8v/zeEPaTtMmSStLfIiZ4VrK1aik3bfOQ2qy4LfmVi5\nKw1lYyL0Wh4Tdw80aibMjyMItxA9DpwPuS1F7Otzclp9+AWph8SID0J5K+BN\nd8PqeqJD1gzX1Z9ZsnFFD4DuIfR/ThOMRGfNY0pdsRPFMuCptK6TbwquXkdY\nCbyZ+9vjUy/lczDAkjOGPZ+O5de6J4zX4zGuNg0SLylfjoE9ZS45Rdhjfw72\nTyGVBV8VX/yAO4f0hsQvxcuXFvj/Px0r+bInoRUSod0vxHZLt+vdTJ1HxnB1\nhQ+B\r\n=azDx\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"a826fac64c34ef89005bede280cad29c76346e55","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.61f2d7580.0_1578433147105_0.015622925100559293","host":"s3://npm-registry-packages"}},"5.0.0-canary.d1be53a2e.0":{"name":"@material/density","version":"5.0.0-canary.d1be53a2e.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.d1be53a2e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"956307fef793d60c0f12560db17560593c19662e","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.d1be53a2e.0.tgz","fileCount":6,"integrity":"sha512-eN9pXKQ8Vbz5bUbPLhpkZ/1gaHuXZIDdkWq7HLiJwhS7Fm7/M98IBK5RHUNJRSnGZUb9wrrADEAFyX6mEgXFZg==","signatures":[{"sig":"MEYCIQDdFqlbzb4QQ82t9G+yWG3R5Oh5ENY+1i3+LdaDkj4a1wIhAOzeOq+OYKjVjgElrNpaKmvdI4TZS0Pg0OOoJZoj2S4o","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12290,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFQMzCRA9TVsSAnZWagAAkC0QAJjAKoNgiIEKyGJ4uOUQ\n+AluAwbUPj6VBKDhNsTs7NUDE6QMh/nDyBubiBBjQ5Edc7GNuG4q+bf8Nuiy\ndp9vQmCoxIkSUofsIx2acV/ZpUpNSZZ+R27sP1Zx7bgysZqs+NvBc0yixmkj\n/9DGlySMUi/g0FIi45CR/RXi57gmfWLNVomNkQZ9jlDh51ovdDHrNj3nzGos\nNT1kVTtLExjiW2kv4xVYgL/3WZd+16/Ef/JObLkGQQ+eK3+oPbaDbdizDKYJ\nNNob0QMMRipHUmX0bmjjlOQnuuJ0SL80Bdi8+Leq+ouErUPJwUUhXnxv/JWm\ngd4KqV5/Cg9aCr2gHwar6BZQJ5nW96bGT4uAgbHXmARRJR8i9RQKwXUX8cRj\na95Lp/DHKRPiqWgIcFKFlwCyYCi5HqoCHgYvsdVCFCGRQ9ihxFZpvVxKA2Od\ndtfoS/ebZJIPsbalkppMMtQQMurM9btMqnu74UZvaZ1TOLetThYYTjFpnrGa\ne/vFaNnF+ZqmKNy+Jz+GD5eVR4pe9pAPt2yHeODSLveSBOoRnLDTjczVnOjM\nD4wgBR1Vb/GnBffCj/okJoT7ICmaic4EfRk6CRKJM5ePLq6ch1pqxKIYCrAb\ncDbN3wqJMPMAMG4NaOSUQdZYemo+KD1YqbPoS1ZojkaRZVhT+w8ji/q9VJ95\nLO3V\r\n=cHM1\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"5053f71f9a35d62630821c2c4084794f7bedf258","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.d1be53a2e.0_1578435379506_0.2593519123216588","host":"s3://npm-registry-packages"}},"5.0.0-canary.9b0d06e32.0":{"name":"@material/density","version":"5.0.0-canary.9b0d06e32.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.9b0d06e32.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dc8f1d92d7f1e78f05e75768f02d14ea15cdabc9","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.9b0d06e32.0.tgz","fileCount":6,"integrity":"sha512-2VckUJ9YkLnEQ5TbTaMvFUbkqzpN3smQMjgV/UHkvbXzGITQwMHIwtZOknYynhu6sAC1fGYrcCLkt9mKdDfU6A==","signatures":[{"sig":"MEUCIFnpsedsHaAgcppa4n35tDK5/qXxIhmOYpqvZnIL0eyZAiEAh2tv/OK2RSVlZ83TfJqqqJTJspL7Cb0HLXQBsw0VPi0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12290,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFQPICRA9TVsSAnZWagAAkNgP/A6qZxKrrbLCI6quHSXS\nd1uMywOnxBOqXYnCEP1MLJdt5dBDqClMNcWnIQKshyDjoym966PJQtIAWB0F\nYH3dakE0yoNjcvNhjWGJo61bpCeknaVewbmcOsO9Fs5UZS/feNLlbtPGDdcR\n0epzggaluApWeCvI4+9qjRUK9ggLpwWPhKrGC5+i0Hhxs/6lNfIfD4lpHcN0\nDZCQfSpC1vnqjKHf3wX8GNNWYwWnp29Vi4lJmH5uROYDI372a1J880zxE+wD\nA7zm58ybdd6+DaOrvKpWwCVPWUSd83F1Br8d+NgRWtjIiyESBihNBAh3+cqr\ncuRr66esDwwBIon1+bDlkw8XvXwQqNtzR3uybdWZ6+t/hFg+3qjByhGfs1/+\nucurMEePvB4O1UyMezX0qfg3LWilyPSDxZ39yydh0aDKex+SuCyviDLL9Dad\nSI6nvR4lO3spolQNPdoEsHrHW3M/kh888T1Gcp0PHptrVCtOdalOFMsouNZD\nb8s8Q54TuVi1iB9I+vvntrM8wOFZsLAHkpWwBsVfKlNLTcEy/iIGvh3ynP+j\nzU+cRnsaCoZ6sfVHfXEVyYaReqyatT3tjn0kJfppUkmb1Y+MHILvz5zB9nws\nBBD3M8bOicdEKq4D7QVBvzSYX0Lp4dW2Grkc4qYvMcj2zE11M1HEn9ChfP/O\nT8Jb\r\n=4Tck\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"485fa4920288a2a37995f4c736a1d429de15e53e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.9b0d06e32.0_1578435528277_0.18288649583347216","host":"s3://npm-registry-packages"}},"5.0.0-canary.730c807a0.0":{"name":"@material/density","version":"5.0.0-canary.730c807a0.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.730c807a0.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9c4ed946b4d7c2df81472a831549cc517aa72f70","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.730c807a0.0.tgz","fileCount":6,"integrity":"sha512-icFUSEJvnDhYtHfjYhZWgaqrqlRMSRvkZHbUzVoMsbWIy7j5AtnLTKPPkAOyy4e4IzMprSWzU0M3xSguTvc/KQ==","signatures":[{"sig":"MEUCIDZYPat/Q9ZtfuR29M2AurnU5N3abJrcJCAYQjOuXPrXAiEAz2237NdHFButOxaqaf5a2h9XdEh8/Rgog511O4ZmJLo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12290,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFQQpCRA9TVsSAnZWagAAZnkP+QC3YwnRdgFDCFtQmkl2\n9eThwZJC6szcw3tqsxQDYAthHUPHtTIWBmwto5NuNFZBTqMizT5pNj27Xr7Z\nKKAlF2HkBfqQFlL2YvzOu3wUVgld7gSHytRIVI/ia/j+2QzEH3h20F4xEZRl\ng6IhkoSHiEcyXBjjK5rcsOI7yLgjX1vd7K451n2/Mf4VLt5VuBb8oWA+4U4N\nzmnphBTDAtrgAEMj/KZIsPFd8orlTIFtIRC7sOE2gDZrD+/ivPYik9h4I6GH\nGlF9IYHGrJBd2GqiatJcYkGdv5gjQbHy+u5s29q47DK30rztQcA9O1FFd5Pa\nZnxIUdMc/u61yKy8BU3FqnhdFQKy5O1xWMby8DqZvBwI4eXxE4txchYaTxWU\ndMdkGv+Jy3o0nMRI81r7MKMrTeTvqCIJDkFr+ijEhIrQSWsQ2lFtHr8HvwrL\n9rewvfFjPSoHJYx2GaRnN5v6bwzqI1f0eBLqD0rdoBYWN5l0P8y3ZzPYgyzo\nfAZYHzaDYai+CuIYQEn/JsFQ2qGZ4kLXv/oMD4KTDBO6Mq3QIQcUFol9d14L\nrlznkBeE+cII1wtHhhZYs/qfAuPMOAjdKjO0kWrHCIfwOTLZeloQwv+pnlEu\nUT6ng3cvUxdNmkRnA1bnv0DNBT1CXvcKavN2FED73d64UPNsxnjU19h0w2DJ\nlSvO\r\n=XmZa\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"8860f1c513146b0f8c59a8c70750d1353e61feaf","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.730c807a0.0_1578435624865_0.32287042049983317","host":"s3://npm-registry-packages"}},"5.0.0-canary.2213152cd.0":{"name":"@material/density","version":"5.0.0-canary.2213152cd.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.2213152cd.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9978dc76b2c36726e03fa9c4e54b186d87360d7d","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.2213152cd.0.tgz","fileCount":6,"integrity":"sha512-HcpvKhUYW++axKyNsV1J6xVFoWw+l/Ytu3X2LhZpq47C3ajLiaVXV/5dZCb5VwK2tMP2mw1+jnZHGlR7Igb5HQ==","signatures":[{"sig":"MEUCIGV5OelZFgbOwWCyMnsbwHKbaEcOhPeO+ujEoU2HybprAiEAtmTIxoJ/L7xzZs6xrrqSe8/XA6lFYdsK+8p0KxXPlPE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12290,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFg+jCRA9TVsSAnZWagAACj8P/19Mg2NMVSnGnwiQ9vSj\n0/2YwwcU5tm0pAiyJBCV/lYHdm89KIcZEZlQ+qAEo0ngn0PHnEYUGV6Wzhaq\nabIFswzJvchuOURLw6jhi44JifEeJtuOS1geE5z5/ItH5CKBvI7iPqOP4c9X\nL9x74zJxXZvnPkjHdAtRaysX1A/U0Skp7hFR9avoh0zYBpooIDDpBDzzjSBq\nw7z6KeGI7WkEU9PucCM+n8duT1PpuRR1mFlyyszOLeZrtk7slRXr4IOATat+\nUd4PZlXK4z216gpQb+7JEB9wdO7baSN78PCTi94jNuJnbGqlsaPTJ2GCNmGE\nlLg6bEbM80LHc9Slgumv1dIj9ILwgcg1zMo7G08bj8wKY93QPJUVTNcrnFbJ\nTLKHVKWxgT+GTzbBHAPG0pIOcaFcDc6/D074X+42QtX9E0QVRsqtFuljhsY7\nC4nzdhefy5Utf8h3lJfjw/ekiVrDLw8hR4FOZASnWqm+quAbMzTNZIIjJIzJ\nNVtmoXEus/e9P2Rx/ucMClxCQ0ky3ehlYPV+M0oV8fz+PStubP71M8HCUuWo\nDhSdb7VijaViw+to9pytq3yf8WJRNvkCpAFEFRw0yDwTTCY69Wtejeoq57RO\n6Yuzp7cMiIO2OPT2YCetaOhE2gnuH2/d378hGCHOGYQi01lGFouOCrQvv9L0\nF9x4\r\n=ioUL\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"0a3677a82eb2000c085d0cab420c907dca8cf13a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.2213152cd.0_1578504099088_0.15262817158589215","host":"s3://npm-registry-packages"}},"5.0.0-canary.5750f7169.0":{"name":"@material/density","version":"5.0.0-canary.5750f7169.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.5750f7169.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d43009690c4b5d1fdcc514d606522ddf52218b4a","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.5750f7169.0.tgz","fileCount":6,"integrity":"sha512-bYq1QL3Lbu4twFboVq4092xeu8yi/p42l19Msooh2CQU76gbf5OcZ43bs44HCJ/242HSp4dn+P6eGa8D2MCnIQ==","signatures":[{"sig":"MEYCIQCG1Kkvl8Zrr+CvT0ZSmzjzOV3FBfskZSiHhcAqSuXs/AIhALXkSOYvNpV9C+hgHdILPyilvtx6vNeObj+N28g24vEG","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12290,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFhe9CRA9TVsSAnZWagAAhT8P/RlVJyUm3t4QmU14n09i\nwa9Z+mFnqvDLb54MqgfiAxStITA6SmCTTmgDOaVsV7seF0LYlprvXjoD0x97\nTEwxkn7lVtLGoPGFd+6hY98/yaiP+P0Zj1wqboDCFFs+T8uxDiXz7lwVdTcb\nn1WrfLGf84tq7selmGPSq4b6w3xZiq9abMmZRZ1UeMj39Cxa/qyw35B8ce4y\nh1wfYV4hfJ8YSbyJCRxt8+jVBZl4OOqHLtsB8wPWyV8NIf6VMP+aa0/dctp7\nm/ZiFD1PAWghp7V7mxJJtXxH7HbFC4Zup8LQm9FMZ6DKIQu8yjLxFonV1q5p\nxlUccHwPoldG/mShr4mb/tuENB5kRiotDr9F3aQyoeHbBwdWo9ZIUWj8ZXgc\nsRmHNDzhviM+4+p+GxtldF0PAzfVrVbXf5L1bRcY8/k3evYw5MbeYnbwGc2y\nx3MIBaAcFTdKRa9ojNOg7LGdjcSM/H2LLHR/ljHgm91RbggM8koM+Aph/3UF\npfod315jnfHhnbL66XXwic/p2Zzb7vT4AUlEKAAiQyN0zVLSrcTrahLg2DxK\n0vTO0CizzDW7QOgxVQipppRUuNXSBpAW36Lde0vDNnDGfhN7uq6pOFYkYuGU\nZxQ6s+hiHD/7oOC9/JbB3+2aMQAystGMTHqas+rJRT8lrQ2ZoUyoCxruJHhF\ntfeD\r\n=DuFH\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"394a48c85aa714b74edbf6f2b4172e4b066f604f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.5750f7169.0_1578506173565_0.08331037100580274","host":"s3://npm-registry-packages"}},"5.0.0-canary.f7abc7a43.0":{"name":"@material/density","version":"5.0.0-canary.f7abc7a43.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.f7abc7a43.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"acf09175257df931a8188eea5d6013bae11d3ca2","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.f7abc7a43.0.tgz","fileCount":6,"integrity":"sha512-Wy3nxvSkCbWKZpMk1F0DaxBKyuqZIAXERGrL+jgVblSfSCjUHjcIeEqbXJ39031N94Xav3GI9P+Rx68EIAwWMA==","signatures":[{"sig":"MEYCIQCou4ddu/R6MwvX1iMWag03I0VPvbniMMjZvAmGV4LWTgIhANpnd2uxOpcuBzYd97szZ5ULsAoNAnWSxg4vqDVgftiO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12290,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFh79CRA9TVsSAnZWagAALcUP/055jjy+WNFoLHtEnpbI\n9B6QSrCGGJS+kokZM5ER//IDHTZvm7ArXF8fLfkO9S2fRm9/Hlx6J3yHQ0xQ\nSbxDOk7Ht7DYbIFhNOUvCrElX5DfCaEchf9p+tY3A915hY7rlWwZ39CiUL1n\nInR5aPMY10ZsTE0Pe0N0PhOBWaxezTN6G6LMZGhf4FfWHUlR+bfwKt7diiqq\nb5l7WeM/2BUALn2Gt9NRMPQXuUjsc+V9cFhArxk1+8qBjsoV1nUtl/zQgVH4\nJZMo25izOUpq3ys54PmeXxYj5rO1DDxWR3JkHjHmnXt5DxF4jeKaR96jnJcv\nUtsrhKyc+RvD/K0BO3aCqbrIU/VHTbUIAIVFpokxbbL2Je2V0seerVrs9FQU\nti3GATD+W+zDvNr/PFfTXcvBCKcBZ9E8KoMFxgdYOKY+3RoRo3xzZBbKSRkH\nyv6Mp6elwgiWy2sLlKyIllKyDOQMlTBMYbTi8Xo4ojaM1JKlBgRBhSLT+YY5\nPMKBwSwsiusxl+vR00nsHp7fWByuyitblJw6Qimoh2Mxzw4rUryLohZV+s08\na4hZH/CCXkRnjU3PTvVipxHhwWaDpoRXJwEwPVv6UtZM0pczHepdHNYODMMK\nH9DQPXCzmmzNir0L0gWQrHdIHY+Fb9eoNtoHcTjAA9gGxRrRaCKW9pxVgilH\nOnxu\r\n=ZAzZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"f7431b4b45a3e410e9cbc1ae6abe69c3b00221c9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.f7abc7a43.0_1578508029444_0.25731910102653077","host":"s3://npm-registry-packages"}},"5.0.0-canary.bf7b4a061.0":{"name":"@material/density","version":"5.0.0-canary.bf7b4a061.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.bf7b4a061.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5991a72f9481c517bdc6b00ab73c7d686a178ba5","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.bf7b4a061.0.tgz","fileCount":6,"integrity":"sha512-SirMlB4d1CYfstR9fRU+pGGVkn+0dPwz1DDVvHXMiUFoqcS5bCczSR1JD6jrlFcapigWmIyrPpFphXVvZUTzCw==","signatures":[{"sig":"MEQCIA7xAwFo2vvcfU7Q6ZrRGeGLfPiMcAN6+ps7NsZTXoSRAiAtqt7Xlpw+i4o5l6VhJgbtKcVQGha5aGvwa/TU8eJQGg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12290,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFiI6CRA9TVsSAnZWagAAiBkP/juHoizEW8SC03riNemD\n/TJrpLae/jAjd4jKU9IIrF8oNopfIzfe54Afv4vdcnGfYPxrDvpUga1TcZHh\nrTEBC+Bfe3FN3iqZAOol6m+nA9AbnCktGCw+RyjHCvSUDGgU0wcNw1mhcT7y\ncG88NNEMx9RK1GtFY7+ijamQiuF+g2u3ZzoLAdr/4a3tY2qjH13T2CEYWQHK\nOhX4kkl+tbETwlLipgjjdPZEeGJviFOXpsE4yRFgRhNyRb4MWAzhxkqZkc9c\nlANbUI3uG1EGMwvyqZqTIiTQc7mvQFLCNseonvvdg67XjXAxlwyGKkTlR9/W\nZKOPAec/HyGJ4QDrQHm0kTibufIZ7/+whAQvZYF3pn7/vjPJMDAgv1ru2peL\n7X9PRxWO0CPgbxYJE9I2r8bNZQIkugpMQByn7k9g5k9JRAgZ83xqS6MwN09s\ndqEAjXdqK88TFixka+BW9f+HihgQKRPMhkCHApQMr+ehUgmJN4OG1i0PdnTZ\ndw9ChT5FKXm9kqilOCsVbS1Mm+2CdvLHjSOEW774T3144hxmq41mRYaptwqM\nhVI/miOtCcVtIC3O/mBVUxK0Q5G2faTQbbe4PPGnNWU2h3Ko/nrJGj3jyRo9\n9E6u3FIVFLBEaAOPZ2P2PAU3p+0C4l/925H4UGWswYeu4Sm6Z0HiYVAuaHAq\ntirw\r\n=ptZd\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"2cbac03ca7852ef897dec80561a01faa8b537228","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.bf7b4a061.0_1578508857769_0.46097199741118255","host":"s3://npm-registry-packages"}},"5.0.0-canary.784fa7903.0":{"name":"@material/density","version":"5.0.0-canary.784fa7903.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.784fa7903.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ab9a88870b0ecc253fb22ff957b43340cae2dd89","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.784fa7903.0.tgz","fileCount":6,"integrity":"sha512-iIRbEXliWf6KeYempD2dmZ29Dmwfm65uPT56qv77K1Uak1V4sJ/i7jQF1qcaY/S6tN49tfgdiUM1NsMleS42gQ==","signatures":[{"sig":"MEUCIH0Km8ge+chvG4j2YFWfhrgY5nUTfDWaiHsoIRKG7Es2AiEA3PL8AlGq88GE5No8NH2/ld2UeaXTkQkaAD8av/6k//w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12290,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFij6CRA9TVsSAnZWagAAW20QAJKBP+4l8C/Xl2OGe3hw\nZhkc0//WHREZFp+39tpbRQVpWGgSPgOjUNgoXZdrudB5xCWh5mhxbTLZ2z81\n/J3Nl6YplowrBg/aSmK8bfw3wnYTST+lLofSF11eOMpHBLut7r9+Fs0kCcNZ\n86mq3gmtqq7kZR7c9WXHla0qPE+Iv7wuR20ojWhl0N0g3v5McebSIFNDikSj\nVPC/rs0y7ffJg0bLkLe1Ekwq82y6Nqv0VuqNVVD8dBYNOsA2lyJu6o1V1hn2\n6wyn6+hz9KpM/eOYWe/lHxvxit34qY3gNxrD3pyWam+UbAymPXrLGcU0A/kp\nDhVgqsg4ukieMlKRsInws9SZAsvzZy3jbcRNjQLKZ1A/T1KRJAsATgd6DuLV\nlDS/OEK1MsIDgLVJgYLA+NdEohy3daSI6ojkbc3UgqsdweP+dc2TXHIesuJf\ndwWTvVjgEE/+LeMebAdlH6oybJqTym5Q8oKhGyKlmrqCh9ZPfGcIOpElExoa\ntr/V5PoGi0cSQ1nNnjJ6OCqQVg1poz5kD99ls+1QkYfLYU563PN6Mt3WEva3\nLCChnMcjFR101NtV5KPD54+PWoWlpvjAqSovDarmEGZpq2okmEfrpjuLqpc6\naxZ8EzeHvkyWHxVtMBOezgsH0QazIEg1rTsYJdN1VMB4u10QR3PeQ+BpenEy\n0hwP\r\n=mRam\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"61b0d187c5c030042fb90bb59c1ebcd090186cb1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.784fa7903.0_1578510586022_0.5353809979021995","host":"s3://npm-registry-packages"}},"5.0.0-canary.823c050ba.0":{"name":"@material/density","version":"5.0.0-canary.823c050ba.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.823c050ba.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9bd0047dbc4302e7702eab32db05a8316283d46c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.823c050ba.0.tgz","fileCount":6,"integrity":"sha512-YZgAii4FlmSQ+Ke5wwXhg6w6LZlAijiZJrBTDlDv6Zib/ygNQBGufdQ1XS0ejQj93SH2pIGCNCgQlXM4iqTpzQ==","signatures":[{"sig":"MEQCIDFjMRJnQKGeqVuDvZUix0jGL3yxOJtPu/PKxB0lPyyBAiB23IniF6GsTZcr8BPpo8AV5Qi30WhhsG91l2Np03pC3w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12290,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFjciCRA9TVsSAnZWagAAU+gQAKTQ9fdgURDyH+uaG8Zs\nClOeoaGrgRImUCbLDg1z7X3mZbGmuwUCVE7Xd4k/285Iwq9C00oSbISaI7Yu\nUqskLzzzdsDJYzXRf7iTujJXHNZxhURnX5Es1eAI568n6lI1Ahhqj+DJhCay\nKOY9ZuhstpP4CIw7wANH6+w+Qk0k7SOwkLZjDm8yqG868cFYF7XuHaCcWL9O\n6WukkYdPmoYQWIFAbxXigfxYOffR0qrsbUkmbU/YWd+9dOMwoIT7YTzmbS/b\nU8YnSYLkUEz/wy3/rnZqmTp8x5FL4jm1J6Yxg5lzvBH50KvQ1g99MquEqePw\nPUV6DWrlUZlZdbgExfcciezou5CrbVk498yw3GnCfoug/2Ka767iPJQT+gJZ\nymbtBm5bkAwtPiVWrwJIodcOncHHPtIfjipWW26zsBPMapRRW6u8urDFf5Wn\nKmwvc9D9PTGRDgXMFEgjnytU1LeWgUFbU/AVy/6R6StWu3lx5qq0+G43g1xf\nHf6ooEF09SByVYygSqyXIM8DTDedBWiUj9dBwgM68AoR+rcRLglNeGeAnshC\nKWZPQtmkOFZPyGTsB8zsbHNyLbVnfhZjZu/PzwUit3NsIf3ypwHUUaApHw0K\npcWi2fWvtGWV9P23DyDTDl0wYb3AX+6xJxX/coZYdD+Pdd5fLqvpnfBEMx+h\ncSEw\r\n=LeFb\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"b08bf7fb482cc6c0e80d365ea2bf510d80680bdc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.823c050ba.0_1578514210624_0.7517463614215087","host":"s3://npm-registry-packages"}},"5.0.0-canary.70c708dee.0":{"name":"@material/density","version":"5.0.0-canary.70c708dee.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.70c708dee.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"458c016c721d2b4fdbe3002655aa692ea5246bea","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.70c708dee.0.tgz","fileCount":6,"integrity":"sha512-LAohFt+YioLiXTZ1LgSRxxGn/WKaTzYNMu7mokHdpRsEPygOQroByHOhpgVZAio/3P2RFPVC0IpEy1Ly+cmEyA==","signatures":[{"sig":"MEUCIQCjYVbqN4nlxT51SBVwleNhfvWva1DJaD6q9HRlAj8w8gIgPU1mRBd3u0uMcQkgO4mh8UQXaaAaryrQdi31/d1L3j0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12290,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFjnGCRA9TVsSAnZWagAAW+YP/1nb2v1rPOKQBX30llFg\nmOiL/Ocf76HuWTlnPdrnPilb8I0YLc3JG1MIfWVEjRAi+gzPV5hfLYF3z1W6\nC4062X+RnIoh/ofoB39xA9H/XtKVnsKf9hz2G7SFsuR0xiXxJSqrvgdKZ+XI\ncMKvAK7gK/ocV9lYH2OGBnJ0K5cRXxwsYcPQ2tUs8/AotRm9pqET2l8Tk5ky\ntKjmVj8Pp4tt9RUeEc3RBTH/ivA9x0cpVKY/yYNf8GD3FJBzZtmrvpyMzxEg\nqLPeNGGjsAEYLDc1KyFkLqe8nicYhtFt6gZwBRrYAFu4IDzctFOaHJIHXG3Q\nGWkvhX0bDY+qopXPhOTLRb6XfZ38zGMMVI7ykFcS+WySEQJc0WMOY++2g5ZU\nyrQrpFbylaTK3kH7TzsbzwKOVPOJfxsLmIucS15/J8HhKSZEsuRT/FUfdY+N\naBCzpdm9nuhlJi3r1MDzI1Bgnni9zWPcpxFi2YQvlheH+LBWr1N3GS0jE1Fb\nzr5UX+M1X1hnlpLmur6SWYHVOxhw6AfXJfPrEdtKF0qggAaPZUbk8hJMZgxe\nRylvvGDi08+YU1YvqAdOcofDX6vEUkQ3sHZsqJJ2exVy1bxSmFioERCQ8VUI\nV6/9wnDjgAFmZ2Nj3mdgrLOLXVpDHrCRRqL+f+wyFUuvVeImpUB+SWjRUNEI\nv5vx\r\n=AjQb\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"096bee7c4a6fa97b650100f3d0e0cb484db375d2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.70c708dee.0_1578514886158_0.6180650331307405","host":"s3://npm-registry-packages"}},"5.0.0-canary.5ed9d13d0.0":{"name":"@material/density","version":"5.0.0-canary.5ed9d13d0.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.5ed9d13d0.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1dee6ae845178efeac106feb0da80f6a1f5d6515","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.5ed9d13d0.0.tgz","fileCount":6,"integrity":"sha512-ZMsGSiIUso3/Z0QAk6A3ulcham5kL7X0NHkDHgGfygWaVy53FTF+BU0IbuymB+rFXdpeQCtAY08wJY+LrotoZg==","signatures":[{"sig":"MEQCIF3wGfHVKzdGvCb1tuanumqeYzO3aaFyqEx9h/j2xGQYAiAb+YfB4jzL7RXE5Lnex8jKgylboVyeQEGBf3hntA71Gg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12290,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFkyqCRA9TVsSAnZWagAAOsAP/0p66V/gFkqZLtBlolFg\ngtj0YqTYv4o9xrqNYE0Fh25kmbYgEFmjJKPiXuSLDgWnnTjS8tVBxHYIkxLb\ngHq3csGWoLlG+IHAtAPAabg4ivIuIzy1CUHAKi9POPAP/jg9rysMjEmv3dz0\n7UaQHuzYcnvwNTqB3afaszTtFI68CjtlJGL5pJH0KAgQd6EsQdAgO4+zGZNg\nZ/Um70ysRL4ZMo9Gg47P5ZImK5cOWpQBTNHav1GMIPPXRc8tZ9WdEl/krU9Q\nMVY/gh8SDj9SUoFrGA2QAunNIK58jhSkZBDBgLTulIri+8mO38/T53WGXF7G\nNzUHIWtxIheX4cVes6T5rVY0B2wYnntaImPDpFIa2LMquz1h/OA8Foi6k3Ff\nmochfbNUfPd8ADW31m8vSIw7rI6beEW9t/x8UkIQf71khdbvi7JAOi13p064\nrc3v9w6100ID7WBat79ecs4pxtE3O+YltUz2hRky/TEuUQSuzbWyBAu2CxUI\nXEHfOc/Te5BueiDbrIGrPUXMqBWfQ9QrRO4/NQ1RVCkKKhktVG/G4aXZKJTk\nJz2CkjNVZmlm+pH79wZMuGG+m0u/xxbF0wfBETmRd0CLf5SaV9JvJhwx3Evq\nwgKxlHL+pTfbfbwK3+dBaUF9p9VG/HKk3aZawjwd97kKtJPztbx6GP4uGpKu\nZuvN\r\n=XXM/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"3c9ae4313970bc3335cb0223b3e10f3fa3ee8ae3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.5ed9d13d0.0_1578519722616_0.03449459535705146","host":"s3://npm-registry-packages"}},"5.0.0-canary.4819cc7e5.0":{"name":"@material/density","version":"5.0.0-canary.4819cc7e5.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.4819cc7e5.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"58eaf8e800663358127caca6526e563d3a71932c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.4819cc7e5.0.tgz","fileCount":6,"integrity":"sha512-tTgfgot39jR2PdIVt5gDVKpnJULUx/YogUVuv6dv6UlU7zRM3Jkl9it7N7JLdkHvs1Zk/ymJKUtio47gPjAqQw==","signatures":[{"sig":"MEUCIQDLpZsSAdxIks/YzDWEHJ3syXdscRUZefLBEbO6NP3CiQIgZmjjr1gqff5Na1SKteuywP3q93Gcg79vnoQHEGtoVP8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12290,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFlBBCRA9TVsSAnZWagAAQtUP/08oQQlepHJ1FmhyCr/p\n2apP9ycurhH03E/AaF2HDGZjheBlx857RI/zd6vKhcewgFLycC3wJkP1fpua\nWZXMGRRDh+Dx7mdhfxgZXVB9/XCJiQ1xJ11q6favrJvUXIwU8kCe+r6xf14Y\nDvOyQ38MEg8suHNj1DJYp6qhBZem2hmPTsEM4IyQWmSGoZA3rmb5dMiL80FY\nIVhR7LDEAyzbM0P6ZyM+BJc56v8172frzIaSnIxy7aIJ3rj8OOjtQfLs2piH\ncAuTe5nFtxFkczp1YoWmENAQ3e/9NeY8DpoFa06IcdEaDwiLutlBJzXcFMh4\nIF0WVlg6SMYgjgEt8N7GL0uhXq3K3EYKXXfXurdwQ9MZAhCuwL89voqNF/8y\nCL98s94dHJM39ovT0Z/ZTDwfR5WvJkYvi0M9OxM49u4KfYLim/NwUdh9hXXK\nGWGGTR+RfpZjCvveWkymdAcChUEZ7MLsJw1jUyW2Qt7swWqAVSf5qyP7iJ6W\npbsaxiOEBKxPQdSs892Xwhv2gE/pCvArYslSwrv9ZXpoxRTG8tHXyDFG05lK\nkexqS0VUeA2Nw5pgcygh7jdI3sC3TJQ6DpRQNSwYjSlvuRdIyEHBuL3uil7j\ngyxfsIw6drnCxx15/P05stC1yLn6MIvAzlN0YDZX3MIRmtgHtlfJ4W3KfMbe\npTdn\r\n=wK3b\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"1cdb8bd7292ce5180cfeb2b5ea0cf8eb4aa6a931","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.4819cc7e5.0_1578520641273_0.7646963182287159","host":"s3://npm-registry-packages"}},"5.0.0-canary.fe3ffd2c3.0":{"name":"@material/density","version":"5.0.0-canary.fe3ffd2c3.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.fe3ffd2c3.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c3d7a3e531180d8c98ddf37bf5d7c4238b28aadd","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.fe3ffd2c3.0.tgz","fileCount":6,"integrity":"sha512-HTOD+gE45VYDlYntRyEMJwralwGh0Lj7qpZPrcHpIRAdahhFslXO6LWizZHmm9wJp7Cju7aPQ49Y7PY1R5bCNQ==","signatures":[{"sig":"MEUCIQD8YEBYVU6wpg7oCa09k7d0s9AIWfPSs1sMEhxVYSwHYwIgVfWWWpAPV17vb/Ra92THZk0tYI/ePexhOncfJvQTywg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12290,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFlSLCRA9TVsSAnZWagAAL4oP/27juq5D4w8HXOuYA5iF\ntaBy0ug9xTDUmPCH21B253a4Ozbw4s9+Yo5ReI318fJjrpHZrSNTZC3sLv/s\nnXGnRT253i2PtNDPZJTDv/mGvzXJqfNjLUqzmZklpXS5q3grNXVitcYVxwRV\nm84PChMGne9wnZA0VfdeIUvu+OPAHeFkRygAV/WmvtqTw4uTdSH2ehXNNOgJ\ndy9t/R1AYrk1E/kMN/ZEUqPWsBtEk+Q/2QNl9XNmQe6+RpwM7LBfbbD5a7PR\no8vYRhFhDgMyRStGSP92FonsiSXHEElOyaGNms8arbzzGv8cJ2R0w/rMpgkb\nU8bshNeTqEXKbPlELQZPUqUpgb/zCwaILRYgTliQObAAXLdMwxSutqt6BG+E\ntVkRN7uE36ilXzxvpYOWzHVgNKuucCw00tcKz0vdrr99sgtAFvky3QoucsMf\nTMf/wBJqWEcfGU7+6VWiArxYSDKcn9a0h8DTyrVP45EKajfd7m4l2oYxGXtE\niFKJusIL+2YEnFuzkmkVG1d28PhIdb53rrU2hsw1tf9UIXVrnZRu3T3ylBg3\nQ9trmHrgYJrNb18k4J0CXd+ZSsUArFzeJLIz3dwuS7tqzlzTMyKlxb6d2+9L\nrq7WbkLumkJcZ0PidWS8peVFQ0dfD1t3+ECxrEG0Q9h/GkU2Tkftr1B+aP8o\n8GLD\r\n=JOSD\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"ef82dd049d6c2d6439fc79408aab4567780d26f3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.fe3ffd2c3.0_1578521738685_0.7483730033552858","host":"s3://npm-registry-packages"}},"5.0.0-canary.c0e850090.0":{"name":"@material/density","version":"5.0.0-canary.c0e850090.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.c0e850090.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e130cb9a2a35e10a6622f022339b4da7d9e6bdf7","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.c0e850090.0.tgz","fileCount":6,"integrity":"sha512-fMQe2y81RH3yWERXf/npiqeW0/rCdQG8sfKvgXsXYtQMWBqLk1Hi0txpFfLFh35/MHoScWiCYMsLeIAbvzo3ng==","signatures":[{"sig":"MEUCIQDu1g7PC86op89H1hOzrY9wj3gnVEoirrmCRPL4CgnEvQIgAK+fxhveEN0hUzEDxAHIrCmhxpHH5NvmGrig9P59FXk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12290,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFlYxCRA9TVsSAnZWagAAIwUP/1lEFts7kZzimz0EGJdc\nQG4W7YqF8IaFfTLdiAZlj9V1yUUNMOcUefvB7NcvgAis6ZONp1OM8B5s7XFE\npWEzoBkH0gh+1jaHy+/Ymw3uyNP5hUmZ8DJwsgrdJPdaFXdi6pucytZgdDEh\nilZSfqVfXx6r41CFS5I/DA37suJqYSwOqaEqDr1qxKs82QtBIqW8njXyoaEG\nFW4pd7ESW6+nClen2O8EpB5sHDyqX5F7QYhFSqdKWp/Kt52eO5YItAgKfWfk\nXyvDUi9AQ7HhMQRXb1xPWfYwUMzrodqQUohzYbII37XJXHKwzKJQMlYh6WD+\nEuvN3GJUV5OgkcqlHyz4DMk68EamwURblhjbcIVgjBrOWi2wleKsdg6rGoZb\n1y8Wrg8ZYJmC32mODKcPOPBJRqdv3LmEHI3BXxxze3RVI11rt2A+PItuhCNd\nGmDLdoO06KxjO3dEdrTKixk/NUuzjhgbAp63jye7iUkXTUfzwnNlWoSdCWVu\ny8meY7T5goFgi0Hq7P1QdtvnaI6JRpsuN8LLmSUJFcomFiZtgK2oy4Lk4VEy\nZEi19vFM2HpZ5A9+sWl+nGDqBOLs7/IWNjMiZfvXg9BmREgHb7XrlN36LfbW\nbF5oqk7ydtEHisFWq1sxHSNV1z3qrTUvk/oQ7IgTlgLcwPHxJMGkB1wzqVgZ\nzjwB\r\n=BSLj\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"04d9e991ccc9d40d53d67d592c9532cb43e763a5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.c0e850090.0_1578522161206_0.06902143071204359","host":"s3://npm-registry-packages"}},"5.0.0-canary.615f86f38.0":{"name":"@material/density","version":"5.0.0-canary.615f86f38.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.615f86f38.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2f92e10df7701d008c3d7ae7e921cef06097ea6c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.615f86f38.0.tgz","fileCount":6,"integrity":"sha512-HHfjvj4inr7TCa022hzOrUHahYMYdhgJPyWkufovWnpJgmpZGBzKOepnJ8LiOGmiFN5/MlCWx+orK23B+6gYYQ==","signatures":[{"sig":"MEUCIQC+k0QMYaxA3QtMv8Ke/1b0Fd7/QKEuQpbeTErujCfqNgIgAR7RjgSJy0xS0OuB24TdhI9EKvZoTAo3neuu2CT2dCU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12290,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFlodCRA9TVsSAnZWagAAtsIQAJ21nZUoy6V5dzwi2tVo\nXdUVQHJ4KweFiCmsDDDXFIFqf7GsQXdvKidhTzs8s8I1nQGhpUXSS6HOEIzc\nCqIIDP1JBXrZli5f3nbs28gWy167OyHBdVtUa6PcEHYgzA/Ak4Rzn4BqdZC1\n+MRga5fA5cvZLhYLUx61/FB1ZQ6c4UkrwL2bPT752KxL4O1Jthl6a2QU/Cex\ns0uJuQTqUBw4Oue//71ccv+9peaf/zppQ8SfTActLWyepZx9to94xD5hsdsa\nc1YhIvEnBa8VIfunhPsma9RmF8Q+cYKBMxB2iDp1GZW+3K1xneIhk2P7MoKx\nYNHEfWk8acy10X9/5S97Ce63vOlfUIe85SRufPc+KbSOUXG6toRmtPbvhG58\nzGVGZVGrtfk+1gJ/RWjf8NZHwNiqVl8T2H3YhKslMBcKZo4TwvJguVu9pClg\nMc4yfliDqkFbqDyGlTK2CTZnM+akq8ZkJ6sVYt3KiahJfcIi3jlnQ9juC1Nw\n2jezYX97mgRQMqU5NgN5ksb8ovMriBtKOHFfcqEMvSFVL9knM2bsQlbyQOS4\n7Auzt1oxVb85hat+B7W6M71kybYeug/XbUSUFp0dJlLwkXpglb9cKhbLaSLk\nZkDv4TVX4Gw24xAjIsSR+qu4ulyzt7k/ybnbiOcVzMzuZEieeSYHbvkHCFxv\nAk4A\r\n=tN2S\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"5ae8bb946c188918a80b70e03e7d35b1e27089e3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.615f86f38.0_1578523165539_0.4793096979778193","host":"s3://npm-registry-packages"}},"5.0.0-canary.1eb032637.0":{"name":"@material/density","version":"5.0.0-canary.1eb032637.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.1eb032637.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"777365e05da4f66feadaaa0745d40f1e62dfafc7","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.1eb032637.0.tgz","fileCount":6,"integrity":"sha512-wsGRIzHhnRvz5DD1o4K6z1rOUsTKE/SNa1uvvcqQQ8mHrKn/6/VnMxLCQABfFGVpPoJpOPixpGJBiQZo3ByE5Q==","signatures":[{"sig":"MEQCIHMT+W1vkUBemdsyAg+rTYdDQfzBXTqfIOb1Vq+MOohLAiAU7+QnQbhaRMMfeM/R0L5osUZyWTV33Gt5yZ4hGjrZJA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12290,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFl7OCRA9TVsSAnZWagAAVcsP/jdUmoyrRp6EOjG6OO5s\nGKmwi7O1Y644CjgFw2O9426hH/rGfb0du8CiPCOSwGCumu6I7/6IYa4h+4FU\nR9618UDZi7cF2yn2NiPJzb2Knf/2Wivf/xpDhxjnbmDs1tPFB1klZM9ZDSVl\nE6IJnN0r+DCT1OJbW3M6pMZfhgTtE5Ge6r72fZ8XT9yBTUGT+XrKuyZrKnnL\nLJp4Z0TXo1HCHnyfUBLCK1oPD9rY5tq9se7lsws6yDxwXmuErZ6ET/iX9eBL\nYo6jjaIwbAScn3ogYSxOKIGwzwyfALLB4ucm08Y4T9MNxGRLpCVFYOsPo7He\niyKhCb0yzno10mHvtH7e3kfSPggYQFfZ/tqYo8voD5KAEEhEqIwj7kvsyLZH\nTqPHN9fKH38HOhs93wSYCwUqzfVuqs14HTgHpc15KQ53VZzMnRSbOn8GQjFD\nWfBuGrTGFWSXabNHd69YsZSWtOwOjSkyYpJfh3zg/QAgwFeRK6FU/R1xjeUT\ngSTmCA2FaHa/VSecEReQwwum16XkRnNJoFrcBQHTFffdp4Kx0QAKHf2S4fPa\nE/TMnmDkmbnA9o6Ya1JAZXosQnZZeV9g8YvjK3Z+64cTMizLt47dFklrc8oz\nwU1S+Jb1XcTbMkdm05NTXFX1ro4gKyLbzSrluPtXYpJpoDO/pS75niA02Zv+\nYGPC\r\n=j2O3\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"ebd5efe5771491e06a78d3b1ca6b1af49af8e943","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.1eb032637.0_1578524366010_0.2632422573782687","host":"s3://npm-registry-packages"}},"5.0.0-canary.5bc5ebfea.0":{"name":"@material/density","version":"5.0.0-canary.5bc5ebfea.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.5bc5ebfea.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"476d1f2296f3fbbfc16b6a93d9f865fb06a345fd","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.5bc5ebfea.0.tgz","fileCount":6,"integrity":"sha512-rcdGrq5fc8jlmOEnp4Sev9G+3uUn+njJvzwgIK96CYvvFpnpTcaMHNzrYtcg8725BuIBlfypWLIcA9dQlgkvOQ==","signatures":[{"sig":"MEQCIF8TlSmd9SrK4aU5YXRxiCMG/ip30O39XW/iaIE//1PwAiAoXpvdowt0GadLlIyFx0Jtzg/corqTQ+oV8pTD++tW7Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12290,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFl78CRA9TVsSAnZWagAA3d4P/0K2rfkjXvEz7SeHSNZx\nO7SMYVVQ01W43VX3XFnexVDMvnHOO3C6J9aT/2GSzKH5jgKuvBFKri/7BWgR\nTvc+ha4aF+W6LYN2MwcKYiZRnJt1ecvOdjisJwuEi0AVfJa4MYWs079RESjX\n45Mdn9N2MfaQRipyUeb0dWtpxnymSQ4hGBpyAJdCvZ9fYwYRzxdEDbwk9fAa\nO8NIhIleQmV0L/2j3mBQV6f4cXXt3qDyIHJdmgPSc7U5qTciKuN70xNgMV3V\nm1vL7ly/DuuvUiIfX/hucRJyezryqGKai4HR9/kl6S/ntkXYdzGcXipLM7z5\n4YwuocoYPUitbbVBquA3wsLmgJ0tenpNbVFkzUBJl5Y34FMQKXHPidsyoJbg\nX3gtZcV6R8I02mbApRKExQEvOgSmG/P2+mv7s3/RpJV3TQJVLQYTBj3T68be\n7wM8v7sCJbx3Re6FJy+2S0Jt17JrknsgzRqpM310TJKrw6uGnV+6C3PH4SMu\n6l85ukD33bKp9YhM1CncMJxPXk2KcVQ4L3xZpf5FuZnzU5zOW48sXUZMnLez\nGGrGXbwsqwtfO4ApzJvEof33S3cB0h292JsgfUdptkPvttsVMQBYM+/ff9J7\n9L+dDJRIeUEC3SJu+2stK3OBgBmuKN+tZR4ozXTv7CheD1k8C+gBjdw+4jVu\n+QjG\r\n=8Avs\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"8d87a9536a0b9e4af0865ecc4d9b558a6c193f33","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.5bc5ebfea.0_1578524411191_0.9057072392017445","host":"s3://npm-registry-packages"}},"5.0.0-canary.1112b8def.0":{"name":"@material/density","version":"5.0.0-canary.1112b8def.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.1112b8def.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e9d0622b0a83a0bb8c93f7e109bade75431ab537","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.1112b8def.0.tgz","fileCount":6,"integrity":"sha512-iAoLz3RTa5aSDgKp7PyrMOoXYxZLY/ek1mcDF3poqvEsZVMdlssSIRNyKFqvQKpPOvbIDUmlfINg5VH01aoiUw==","signatures":[{"sig":"MEUCIH0QXRwtFRHSy6+tDGEJeD6AZ0wClugWrpR0Lt7FZzscAiEAhevu/tNfPzWpkIvwwylBQjv28NrdzjXJ9rOWzEX/XJE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12290,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeF6SYCRA9TVsSAnZWagAAjTsP/An8pfqk+vXMfirUuNyr\nDJEeTr6NnD3F4/WzrR7vhMPplYyv1B5mLN+86OK3r15yzGMe0ULPmEVIvKZQ\nKjHVcLOCOTXSrefUUjnIRJ7EcJN+kgC40qCrSg2Jyl6P3kYH73+JTiamt+Uv\nUUlNNbY4l275tOzLBKrxUZVErg5jDI94MqHQJmRZjeYMSrOpkNlcxgHLOTnP\nc8jntns704QOx8Qk59hjm7clPmp9bSJT8SWLQGmOg4Ypj6val9nn4NUqhYyI\nI2RIyiVJYJQzkMe1j0fQRu2S+n3SW7gQksOLe5SCS/3/IfpqVwq+cx3PzGGb\na3YWuA7CeZBKCKyzeVMn+VaCmFIyiIWp2hN4MxZgdjj1mOkbvCtyuaFQ8c0+\nBfJbd9/YaXBh+Ne/pOJjGqtzUGV+j3MXYvTRSC3jbpgV41csVzt8orGMV+eB\nEuXFtJmLERGnf4ACgtgnwDVKHh8x5acnI4dVX+6P0g8nS7oXGD8XAyNLLZ0i\nil9kLrIZvkDkEfiFvHxw1DX7AD0a462zMCSrXBqX1MKzDDB+39KK4YOnbwdX\n7K3ayNK3c72pLfssg6YdHjjrUkoDLAAMdLFFSgLe311+HYs2FAxNTvY76Zes\niPPEj/Q3L0fCd24sdXzgVU+Oy6bhIaFclh+S0EP+R0Sz94DP70txNUkFN0eB\n9iA2\r\n=FsN4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"3fdcad176780c1976528d217d2fb149875bb4b03","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.1112b8def.0_1578607768062_0.48979346398024703","host":"s3://npm-registry-packages"}},"5.0.0-canary.aab102017.0":{"name":"@material/density","version":"5.0.0-canary.aab102017.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.aab102017.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4128f29c7de1c935adc606470411bfbca2894b63","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.aab102017.0.tgz","fileCount":6,"integrity":"sha512-6Zyw/3PhTZDuvnyXiQTAcXmd4YD6JKN7yZXT2NVirP2Tk3bWqEebK2dgMLvA5BZSRYzllaIfaiNfQmoyz2QWuw==","signatures":[{"sig":"MEYCIQDqf2tnrxx0JeyDq7/QAUInm04nn6QP1m0TqQ8nmWQ9uAIhAMuQGn7X8d0WCP8IG73VRuuuFF9XxdXz9shzphADqk/T","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12290,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeF8FBCRA9TVsSAnZWagAA56kP/RmdOh8gqfacfnPQ4QB2\nb11e6RnwDjcHmmjFKYwTPufg4bLNGApznSG5IFKAbVvpdsTn1GTY7snu2qqD\nUtTGJpZQCPKLmR2E7W/teLPVId7qOGWUuTbjGu0gdJ4QX/YK/YpiVQDJe/kc\nTRFCzjc4Oyc69Vk58pvPUNjaiUWArE7G0OCuuCBW3iZ3hfpepRhkU40IlED6\ng1hCYX/ACvEdEZvWhtAZYkUO6t6YVQivRlU6d6STMBY7gDtZx1etHJUQUjYX\nQTgQVb60icb/SrLrt8iKSSkNhndBZThlGzWdg1uV6ohNqrscCwnvJkRP1YFk\nUll8+BOeIO7P5ar69iguD2KE9V/e+bwo4CKSuwosO5MFwH34F+7KyCadWAnC\nsJmo/AcYP+SdVCB+KDoLt4NwnoVoOU1kjFxlFc/a2cqEnFNScRFME86Q7uZe\n7qHjX26vhxoWsX2rNQrZt6Cv920uR49yTNbTBaBK4i/qf9hvbwr6YgFkzR+j\nvvJsKiJwq4OXShochC5nC3anoW/BWEt32dlt59uQaXFSQOeG/uItNODjCDgh\n+iiqUwhq9IWuWuc6NkNltlRb/rzRNh1bBrzBnkEIoFExeA7ojPEN14wJWDzZ\nQ6ttFsZsb9rZRccHSw6kuaLtJfP+75K39VUN54PuDafWSWMjxSxW6GM/RmwT\nRcKx\r\n=0iu7\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"3f5eab02080f0c4fb48614a44647ed55d55eb9fb","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.aab102017.0_1578615105454_0.6120608574617019","host":"s3://npm-registry-packages"}},"5.0.0-canary.426913342.0":{"name":"@material/density","version":"5.0.0-canary.426913342.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.426913342.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"508fbda8a8137433adec334579862aa2079c81c5","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.426913342.0.tgz","fileCount":6,"integrity":"sha512-PoWZMcAvEq7zUau7czupqLzbBfmkEdQ7f5sD3AmG7PjZyPO6lNjWktWE5EJx8NDjTQZjYBK829vhXSnWZZZ59g==","signatures":[{"sig":"MEUCIAviI0TdciLtAKemEHJyt2nCcSAURI60Y9pZ0iTfBZkcAiEA52Kxh+hJweSF0T+/Xj09Zlp6N1Am/JW7AWO100fSuW0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12290,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeF9bICRA9TVsSAnZWagAAz/EQAJnR0Il3ffiSpRPX8VA6\nMpuKY6CS0yMWFSrZ209I9csc0AtJHNEktyv2/I+A4L4vpACGAcqBt8shqOIu\nrHuOrazZ3C2+/wQyXAbXXMT5Kbq+y6bmZXiTuTpWf7llcW1h3nam1PaUk3he\n74ihTHG7olAyp1xBzs8akB3YATxEjqHZ3S4R6FaV4yVTGvA18HoQpEgCJ7Wm\noaPnwt/VI6NjboxTkyxMJ1xn8KYM/+s/NepHvqXiWbPo3CjIPjgT17IzElR6\nM/NCZE1KWNlpBbylOrkCxIVQGPwtR/QN3a8KX2vczIVxmGBHwSq+7SCo4J2P\nrMWG+smnCo8NRaEwhrdwyYOr8E/Fhl6g0MQ6B1z9iZ+feSS7GERlrUMxa0l9\nxOjJdwC71roCBztw34ncHlSlZO14pG7+LmZlX9+rZId/SVzwA3OQwuKRcHMo\nMFGqY5wvNSwkrzlQDPUdy0l4Tm8fGbTcQ9pYuw+rOjPYtQNrsOEwSOCSeSFu\ni0VTcUgvKxQuWDohWGJ4bCrFcwouzJIrwGbiTQaLPZm39mX2KBdn/kn3Cfa1\noTozoeTcxjr8ERGuPqPaKrmZQVpjY2HjMi2IREjQn2EVr4J2QfqNBSTQK3c/\nRDkJ33TLC/0jIopgTvp3qPyD8vvZ+Nhk8tEdgEqbuDVhEZH2YH6CsqkoHNy8\nSB7X\r\n=EZY5\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"7a6219dfe8ca1677971694ece39ab423ee8879b3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.426913342.0_1578620616070_0.33059589607545337","host":"s3://npm-registry-packages"}},"5.0.0-canary.d4ea9a706.0":{"name":"@material/density","version":"5.0.0-canary.d4ea9a706.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.d4ea9a706.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a14ff58e55c9fcce857c25f5d1c71446faa124a5","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.d4ea9a706.0.tgz","fileCount":6,"integrity":"sha512-SxptYM2PGfSDHIQ9dwW1AYMGJrqqof0dxDqhbsrhBqK2bOT4HqdLUWJDQWy+Qont19cjdwXI+RQDtF4TYXOtAg==","signatures":[{"sig":"MEUCIDqZrgCKj5wTPwL/rI0IO9DnxzXDPrkVlYpGU3Mj6oqBAiEAyFOKn9aX+TkDYCN794fZpqmzEaQTRQNblaecR2KNRfc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12290,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeGLNaCRA9TVsSAnZWagAATwsP+waP+7yrFr+gozat/HpL\neN4O45GSLjlQAEh5h8uVeixeN/ttwCr+runB6ZhJhj7i+52YckfCOBE2+xca\n76oVEV85zPjN5+IGxqjrDoTbJLHZIgMW6kmGzUmkMQ95/9ZWYrrf3oPUMcUy\n9OR8H+zOaIqhPL8qGb8lLIRh0Mt9eXqL4FOfF8dibO5ciB4lr+zWpdt41hyp\n933twg8WFvCKqxoRc0P5U1B+EGyu5ZXuODu88iOBXMw9/rKfzlZVOjZsNT1p\nuahN2WQNMP91a4gCAYvS1Cg5gdySYrD28be9CaYkZU4z+baw4zuJDfKCiHdd\nR+e8J1uuJGgHa2pQOk+XiV8ByJYStpoJXFM0uwzQW4Uz6SXIv/RFiwAkkdzS\n+iMUcCTo1ad25249VXXe7wSFesI8izlG8mfbWTGw9nqqDttpheh6exuNlyY+\nmZAxIYzSDzMcgTehDoXdxem0+wRirxrg3cfl5pgCPOBSbC8qMn6dJVUn/bxN\nLhFl78ZmG784qXthKmv8mkLiPJqfgWPDYZvjaPwGBj0wkymFx+ch7DnTLGz3\nwKUXRaNAeKJcjHKHPKmpjzetaZsxQDJl7BkmnBp+ks4T/rWrmPNCOE2wuJMd\nio39ZIsAa3vwNBe2p8HJtoceymgGLUf4+q1mHqfNH+UaeAsOdj2+d3sdCmF+\nP8+x\r\n=B+1D\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"f4f80c96af6c2e34c34a3ed8f01c1858ef738935","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.d4ea9a706.0_1578677082169_0.5909243864793776","host":"s3://npm-registry-packages"}},"5.0.0-canary.7d4ee2996.0":{"name":"@material/density","version":"5.0.0-canary.7d4ee2996.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.7d4ee2996.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6b41d189aea7bad3aa9189980d622754f6a79374","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.7d4ee2996.0.tgz","fileCount":6,"integrity":"sha512-CvdWVkxGhQjP9G6R3OPCvSZ/Zv/F72x1EoR9Wb5AO/xGuPMGvHybi1T4TR1koYYDryuQPneNvqfZRTgUz/GmjQ==","signatures":[{"sig":"MEYCIQD4J87SpA05eNP76V6ltSxPQ4xKaIEd/xFiWEmKBP69xAIhAKgfvoPm2aWygId8XJV2oZxuGMbmOW1XZ11vXzcMl1kk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12290,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeGLq8CRA9TVsSAnZWagAAlAsQAJB/KigAaNO5rYN+qbm9\njZKGmUx8pAFx6bs3QRojP4Km6IviroujbKiTiZbzgJ3QEVboefvqMCN5YYSY\n0s1uzo/1u8jb6wb3GJwKtWM4uRwrf6Jy0hGWusAhWHyGQCR82jZv9S9Nsqlx\nnPRU1ArYLYmRipsjdVeQyfy9AeKCBIiWLvhIY//iXognmlufujblh5DHHkOo\n3yWKu3lqfv5PqEQjaoWw1dXMSO4ZYQ9/YD76Li+nkCFPmO63LMI9SC+PUqvG\nmpHCRqDfAM5BcrZESO88SmX3VhjPeDMFKbF5vX34/69iwLpKwkhnuZBDo0Zw\nJPiliUq2f2ofkEmSL5LBC5dI6hCoNJfp/LXQkajTiJPZp+Bk73/uAYlU60Ax\nWtDyxn+AKk7AL8IapF99sHff9Cpce0sASHj/ySQ3NfXk0WoYs+8Ety9m4TLP\nLhmahcKXo/pAopQi+LqIk1Skvqg7ANPlea6seHSLl8itWd9qgs3aIRhaxhTS\neTA9TM7ZjJSW16kTdQJ4ctJk9P9T5wl9sMJbKRVRKohe+EuBO3J4t0f4TQAl\nepgQGltrELeOqQlYRgiju0pd3Id6PSMUM7TOhgc8U+HL8JAwBqOCrzTkcNH3\nkaXWmXFeKpc22xvmz+LWdTSnEsnXs/IJ0fNLy7Rz/T4NHFdSIsHDITRg4gAi\nwdqB\r\n=HKPR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"32cff7b459a8aa1e335c6ccc84213cff0f6e66a9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.7d4ee2996.0_1578678971652_0.4664404153300721","host":"s3://npm-registry-packages"}},"5.0.0-canary.981ec9b6f.0":{"name":"@material/density","version":"5.0.0-canary.981ec9b6f.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.981ec9b6f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"215bb14292b310bd7beb633bb6e97e65a44efe59","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.981ec9b6f.0.tgz","fileCount":6,"integrity":"sha512-LwfV3DTUpKhWsNvWBPNmJLicFu4xpMQG1updc3hOP90phnDdzYEJuX00Ox7XpY2DQmtVYLxOKltzJczy/Cj3EQ==","signatures":[{"sig":"MEQCIBkVwoUYm77zEZVCU4A3K/JrWKjcgNSFrtJ56MraYFrTAiBEH29XjG7Oad3FT7PyIA0KKLolrXioRQXbO7Vyn7L8Hg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12290,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeGM/NCRA9TVsSAnZWagAA8z4P/AkdWrPVmOkJ++PK6raq\nH2uTOSpsY7FuIL9m5JOoo7QuVrfPbCWBB5FrGteOjKAqztwmP8Y2n3LjHpP3\nl/zpuJGD9MxA8zwFtqNvUSO+IJUpNU/jXAFyq7ZV42Nz7mwj28Ql0Mfo8gR/\n7OongI1o0b34XqxdM2fypNA9oQRdIBJ8+m/wWmeVrdYMvrhzVZwBykt2ZdTZ\n0j0x6les7Pgw3XaY8I5xJRBf65H4fCLQxvXZM3K2bgK6Qw3xvCrqaOih2nga\n3e4So57aDP26163524YR6QHJ0r+Cd8c5+3Td0NwDWlLezAN12M9qmyqJ/jrz\nwEyYgFaSaqOFxb7+obRFdAdAr2Kymz3NJN8vExiaS68amGb+gOEGWQQeYWqv\nOLQrOO1PVrWGt4eeuNpAYF1wKt5M+ej3nPmy2oEy47+jZ1bloWbeSVuTqcrJ\n/CpYQmwhjL2KghJ8FzI08r788i+72CZF3Nxk4P2e8/TF/cdkup0vvHl/j7AB\n7yU1wtAGFOqw6DPHqSCDVYbmKny4pVfZPqi95edt257ZHG1JM9PFCOgA26P8\nVymNR4JwF2AA+soY4N330AwvOYJAMeGQ9Bxi0hfBdxVy1n894ZrbTmvc8lQx\njS5NrR/FV8y5wQLHeBZnqATtqal4UxHykn3hkAB6BCrWzvMB4D19ynl5Cxe2\nHJ4x\r\n=/dH5\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"e2e9ae33775d14566dd45608f66087b2761d454f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.981ec9b6f.0_1578684365126_0.042259994543343726","host":"s3://npm-registry-packages"}},"5.0.0-canary.737da83fc.0":{"name":"@material/density","version":"5.0.0-canary.737da83fc.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.737da83fc.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f7fae5f22540f8bbfe158c1874296f58332392f9","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.737da83fc.0.tgz","fileCount":6,"integrity":"sha512-QC26KIOdsLzqrnVRjl3cLT+ZNwTxqqsGlsocXw6E+suTg5XmmK+uXiMQ2sR3+VrSKniwiPXM2luU8ayJR4EVhA==","signatures":[{"sig":"MEQCIC7CMQQoN3dOyLRs52eGw3M0vEzVWhAEY93UM/qxSSLkAiBNbjxURTQEJZqf0oM9ddcCrYS8wKY8tyWL4t6HRtsNGw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12290,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeGOoTCRA9TVsSAnZWagAAKwAP/216YjWugQRIAXaWd3o/\ng2MBIyzblK9n6oQeiamjYvqUjC5D+A53D8YJOVPdHpRYqgqdAd+EY7ctAkwH\nhONpG9dPi2k4fsMYIUKMKGE6x3hTAd/T5seP/FggOrylSAid5TraiCurE7LJ\naqB1qz371kXMBR9Y+ruTY1LzkLk5mo1zh18ArMCZ3dFwvNtoqJwQzklSB7ia\nC9U6P8IOJjAPIBfXChASlt3tU2BZrG/AvTZrDiwDEx0wW7fbK0jPerEPjm5w\nX1HfYNf1gzUOK6eXbxl7N4etcdty1IlsCf9BTuhSkppeqWTse7gjY3Cz4XBN\ndep/21RpSOgNKfbCLc2hBoZhWfHssVkK8Pgb97jDTA7uiMUIAkQzGPbbACpw\nUiv4l6emOITraUFhj9eZsSaZgLu08kHwPkxhtE5j8JT03efHP/Wi6W+bHGHG\nzOAZyR8VMSJgJKjt1AadWKll/zpErpHasgULLKxgE9bS47O8sgEe04pma5Q4\nePxFb40w/pOd4FtLD6xnsYmt9QFMvScuo/9s0GFjxqQTyiMb7xljzYV2KhWf\nHFfhoZ5T/N7fjj+wgU7CGLg5ywTh+Wcnlr+9uMiZ7a7QXcv2pkix3JxecKOM\nMVWy4vWZYZKe9t+kD1eiZtflbgdvZZTaBY1iX6k9bKM05PzGaqdx01uRF6x0\n1Slc\r\n=lJ3V\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"3ea8f6e8d81e688483ab007855dce5cba3b72015","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.737da83fc.0_1578691091423_0.4711018263197182","host":"s3://npm-registry-packages"}},"5.0.0-canary.aca8e6c18.0":{"name":"@material/density","version":"5.0.0-canary.aca8e6c18.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.aca8e6c18.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"125ec8befd9bad77c81dfe16d52a6c1f04998bed","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.aca8e6c18.0.tgz","fileCount":6,"integrity":"sha512-lpITrSjxcr5Kd8ZJ9O2IMif7hzB5mVkPw22b46eibtX0A6B+y5DQA7NWjATl0YPPsV0Q60X0SRhiYJ7qyhbTNQ==","signatures":[{"sig":"MEUCIFYPOOJtdVaxLyqYm3y674TgoTjXYO2LsrA1h4D7lAqhAiEAzeg2OfvcZPaajhPn8mfZ283K07c0HqGZtOlWs4rybN4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12290,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHMVwCRA9TVsSAnZWagAAopAP/iWasAnrhZMjkAYMSbAv\nIbY46cL/4hrZKEKhfhCc1clNJsw/lRw+XaC/tZjI6DnKWkXNfG5vEJsTqKZn\nEVrSKNciagWJhj2VrsdJwPVjTTlNqdVzAwhYIEDI78kzGcI89C3+ZsYpCZLj\n3R7OaHYF+79AvygDflhyIdkn2Rd1dcPyJ4uFYSzvQoHgMXbEjIbtYTgyfPoY\n/PI8jWOsmnZJlZ+jk/cIxMWWORjQg+vnM3P9Ha4q/Cft4uqr4MajXaJ4SgUl\nBe2+JCnP4xf0eDbpfaDgWgUJ/zHDmeVAoAryOKH2EM8vh0DCc0NtgbeCs7oW\nHhbjjAClU5XEyS0ygXpZ/8aiw3Egl/3ass6NLVzcuVlM0ptG3+OAsl40fkF5\nvvnP0g451fif0DVjXQql5oHpiUNQPIHr4YgdYPLuAFR9bgDzpGG1TMspTsX1\nFDMpNcOZWSOBYnwFKtEErgD5+17C1ENCjGFeO/ujKxoX+s/8/vljmlwpbXQs\nehh9+04kdmvz0KwgGpR4ITRQgmYd6us9sprDsVGK/nCFqer9G/2Pmx/pk4h2\nO12N31UWm+mrZ93pb5i8YijiBu7lcNOONSp6P4PI2s+k2rrLZCDWf4aUVmfi\nTB5/GRDYShSkUeC0CzVAhP3tDNCwXN+GR+mfNCHc2UFrmBzE3AhStjsP+eC0\nmLEx\r\n=MJKT\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"47bc251033c39b1b8f816f8ae77c888c07b20fee","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.aca8e6c18.0_1578943856460_0.6273937174409978","host":"s3://npm-registry-packages"}},"5.0.0-canary.c38d84e21.0":{"name":"@material/density","version":"5.0.0-canary.c38d84e21.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.c38d84e21.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"14a516ff16af0e0aae897cb9b8dfe485594bb6b3","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.c38d84e21.0.tgz","fileCount":6,"integrity":"sha512-m2FoyUrCMSZZbnYEU7f7D+esE4lY7aUDaQyfkdKwjCCFMHjMCMuBDKitthDv9j1jpB9VQmmCUrYB4FFpQDyZ/Q==","signatures":[{"sig":"MEUCIQCyGnnpr4SUYHsQurHwmLhyMPx8DLQT6cn2oDtGtTqOGgIgIEAPIZCegAUsv8lwh4pl/BUA2C+t+WCA9ADxnLgS8Ho=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12290,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHOtfCRA9TVsSAnZWagAAby4P/0NUf5Dptdx0S3WXt50Q\n8dGJaJq8OnPnXGLFtK4uJVzDKDHloyAuSYbmoWpSfpnlK7Ux5Ejh+wjr92qe\nDs9G517C1JQ90Cu/r1fba4nQJjhVKih6OScPPDhMm5z0ylMmSs2ZMYn/34zY\nmOwyZcysmxbmyyKOFQcTKI6kwS3p7XVrnJonsJBsjTLy7xA8xNrOXsfGCw20\n/3bCoSDd3WzRWtNJOV0YgP2OTEOUDU5J0D0hCHHroXCdOpXWiyIMxN+sOHF2\nAjwexi8HtMiNbNP15HhKNYY4oejQvtu5U/9WDqy0y9IFKQv+CkdzyovJnWc8\nw88AhboX2HXonZ/diUU6AKTRXB3gfdJAygdth0sUXPNCJ9lXD8zES9K8aydY\nI2LVvpXjzEQ6KTHMKmcXMc/JLAC6c4dF+Jo8jjoR0BlZ9AW8NIKiLMmdo/KT\nbMvYjKYuzfEQbBYtx1ZSEFiMJI3qwrY8eNOoXMJSOdCyE9YQXgzDIhQOHM97\n+FovknedvuETfb5EoEfmMorc5yTREV+kJ5wgzi0Eg2Nq+/RpQHMr1bZ599eG\nvFeuijuGp48wZyH504ThDHCPUMtB4WAlvW3VuN3C7CjqPxtkqm70DmqRW4ZW\n1+Gok8RtQLwHzOidpG7zbFyAgizcfsWRHOOa9G19qZdFZW3lvB58aVEU7ySO\nY2fB\r\n=2OhP\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"f283cfd55cbe9b1863cb96e98011fe4badbb1fd0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.c38d84e21.0_1578953566766_0.8194391667605003","host":"s3://npm-registry-packages"}},"5.0.0-canary.a4db5fbad.0":{"name":"@material/density","version":"5.0.0-canary.a4db5fbad.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.a4db5fbad.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5521807b771d6c1698253169caf5ad2ccbd7438b","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.a4db5fbad.0.tgz","fileCount":6,"integrity":"sha512-/5kcQ7Hs3W4ecplcS1GyjH9K6jjXXBe9S94LncJlVYyyDZUS5GTVJqvMVnCpkMV1eGANYSbHdChyRHPG2FoApQ==","signatures":[{"sig":"MEQCIA6u0RR3G0d1MQvsP/+fZFF9ccoTk57m/cnzXyhlSsYDAiBpiakqvWV4VYNiN5BpE/CFc+dLdSVumMWqEJRJBEVbRw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12290,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHSQbCRA9TVsSAnZWagAAwOQP+QCLKM9yVdD3EbgYohli\n5Vy09Tgsxumx81k0JGxZRGn0/wrFUg7dAcLw8j4oR0amyB5st/n/a9WbymEw\nRURviIG6OSYnWMtOzxRg/iFe4LMwlitSYrruYwhkxlHvCwvq+Gewu3S/s2jT\njoTcyqChZmcqFT6wtbfQsmH4ZO3uYilpwAMYWeg+8Yjs3hQaPJbe5TRsK4kM\nXHdmrWudBYrSwjUFGbrqnAxq9CGf3GR6jqNE3yIPsjJd5fUYZOsbhxGt2NL9\n6d3xANoj7rim7VsbEdOWUY5IAt6JJws/wYzqe57Hx37lQsEMQmBQ1/B+uhcJ\nEwrEdR41kBsBDMdAzyOBoME7ln7WD6LNERsYVVVUIC3Dq2vTgMJJ9/iSJELI\n7RDbFZqoHP+ZZ3C8gmseRRX0t0CC0q8FYN30aW5R8MtwVgL+vBMZtCrFu8ed\nWkNIku9bI6Dg/IHoR6UFic2kCTtzC3vrBD+hPw64NLjF6f8RmPr9TX5K28j1\nPvHrAJkR5SaT5Lefye+S0wF8WeIYweloore5gOhXa0TqyaZ//AUFPxlNuA/f\nKSkSc8alm2nRucjBqKADzMEfKQtUy3rbJdBj1NGHjKjemqqkGa1kG0jraZIU\nS4UlLj7z5rYABA8MAVA7kOApyNN0ZSYLpK8JThGnaAbIs4Dg1RlMlbwR6uCz\nnJSF\r\n=RLAM\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"bb5fe141944679686f178779345a5880a89943a9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.a4db5fbad.0_1578968090754_0.9310850478693686","host":"s3://npm-registry-packages"}},"5.0.0-canary.faa9af310.0":{"name":"@material/density","version":"5.0.0-canary.faa9af310.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.faa9af310.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"06c05cc592dc90fd0381907efcd7d4778ec65a56","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.faa9af310.0.tgz","fileCount":8,"integrity":"sha512-U9cAUiFJBs4/NoXYSlRWup1HG2Fx3QoSpYouoZJsh7NAbujaZG0xsVVoYMYqdxNofSmzrZwCU1kHj9oHojKRYg==","signatures":[{"sig":"MEUCIDUQ4wBpBjBEVoepZyhOW7Gmhdmuuvkdv+uCEwlzz1UjAiEAhBfpDxLIjPpxcudJVATR6P49Yqf2DULNzT1HH5kiU+Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12778,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHfGwCRA9TVsSAnZWagAApDoP/jx5CPJGjRSE3wVfFfMu\nBXIbGrsbPkFq2itmimHho5lcw3mwXcl/CqCUheIBWPLkM4zs+PALdaSi/1HR\n1EnRgaPGVjM/N+ggpzGlStFZiNUnI/sGrsgFMZftwixO3OCeap3vPlIHJjNK\ncWRV8ZT1kxrK+kGTNzUSjKHz2OuVUIRRW6z7pcFTSN2bBkhVvNTPsyL/ZOf8\nnxr9mmorD2rKRWX4c+9eFIFg5P6x6nbImlzmLKt0JN1T4D7EC0WVd0+vpJrk\nOqZrwCgoApllqx5Nxof7fgDntsU24s5d7L4GxvRRpVkRJR5KZcN0JQf1XhTV\nwi1c7xIAEgN9bFrunTGnF4YU06lT++AviFp4IIkC5+m/PYYSs9HD0RkaxXxn\nNCb8uz4LeE96wYpODBxWh5kWLjOz0o5GZfnAkxvFwfYUTIKa8KKVWMNDa8+s\nYpamEvUbimzIpo8bk+eoyl3eCAIPrNHoiqFdMA3iX/GRDyfQwZiCRzC1kGx5\nhzy5+DPuZ+XNPzLxixRd0woqVuqUhKwkl9aC2/oH/17svw7Z85Vu3SnKpbee\nss60KAMs8MZokG9xQhs5aEcj0aymVLDvMskbUXlYQpV2b78XZ1JmrExVn1Lz\n9HswISCVSUbk/MNTJpOqTckoXhlWwQNC1pQ5n5nqsCHhyfXuroqXpOvqVNIv\nEkOy\r\n=/q7E\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"ee374355df19027c59f24bdaa809bc18183453df","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.faa9af310.0_1579020720417_0.05675848010315643","host":"s3://npm-registry-packages"}},"5.0.0-canary.60354c577.0":{"name":"@material/density","version":"5.0.0-canary.60354c577.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.60354c577.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ffbd2ec1bca31de3567bd858b2f8232274f2ffbf","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.60354c577.0.tgz","fileCount":8,"integrity":"sha512-LtxEopxOQ590tpHR+7t8faO6ILkCfqR9YS2JDiPfXEKE/uVFduCouKj9++VdEceHaBU43Q0xpTeWOQIJYDtODA==","signatures":[{"sig":"MEUCIQC5cu5Gr9yw28pQOTh7l8fjKQzNKBqndS4VSLfVxzDPqwIgbav5pOvwzx1hyNrAlsGx7f3sECJevbrW6cMOJzK/BDQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12778,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHkSBCRA9TVsSAnZWagAATTQP/RgZ1Ge+gK33NuoZtDCs\n6bMhzI/TBcIIR2PIUfe6zmiOIfP0/kPyDd2RgSvK9IzkwFDsVp6bnAOteV8D\nkQ0Cz0YapfNM6tl31FqdWryzWzvGexNdsFv0tPurcIRikkIYwFS48SrLmxai\nXBIp8rkWLBn9z9ipw35VXRtcBKMBA5OBCH2R1AjXBTq5h/Ila/gpoh2bfXzz\nIKdokDk4zwsiW/EAc/OqJk47vejrjSmwKcY8BuKTao0lL2+X8d8p5DkVx/Vn\nRVCFF6x1lNEqcg2nVljGAxT+OJ6/9cuikq3GXT9MBSmTmqE9lhcNnUCqEzVV\nQyfZOUEFT7+DFJH2ki63PghscmZOF5v7NyoiG+fNA2Sojsg/peIvnbMjphIp\nceMYKjsFNomfoelpLsYCPTPXkFYYXH7afAtVqcKIv7wrDtoOMrfkq/lJHRZa\nimSlRJOBy02xD+rpjAFXLvENUAJ92YAha+NV0w+gUuTB/L4DxU+q8bOFG4qo\n0TFbG5KAC6SmSVN8zNYwrdWQjv5mvH40GpBMpHdRYPSz64W+4X6iya/Kl3Vc\nYU5PLWpxXLFiOv/TECnQ6Mqq1e5pSqxuvovcdKtso5N/MO7GWmbHjVVOG/TO\niai0q5TKs29hjpHzQK79+iujIFOrjRZnXfDYdEAU6FfGw0wy0eZIOIHUsF0E\n7Qw7\r\n=0wGS\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"d9f4420da446050561084fce698a543b0dc6b543","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.60354c577.0_1579041920783_0.2923959604567803","host":"s3://npm-registry-packages"}},"5.0.0-canary.d07c78daa.0":{"name":"@material/density","version":"5.0.0-canary.d07c78daa.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.d07c78daa.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"44f82e50a2291ab19bb89472f220111378b6cc68","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.d07c78daa.0.tgz","fileCount":8,"integrity":"sha512-3uCAnv6FPodguffrMGhKnfIUNUsXPnfOIJ7W6XzXdEY46dSKOv/NxklygIRHhYVwlX0JfelzqdxkBjedqOdYdw==","signatures":[{"sig":"MEUCIFI4TWcwBYXMzsgjMVqiTZwfm5+EK/fJjApSNpc7SMeiAiEAnznP2usn63OlUSHXMbBI8whdEOsCrZMFZXqxqmoxt8A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12778,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHlDYCRA9TVsSAnZWagAAFrEP/3Si/AjfiXzK8tTNdoeU\nchfaBTuodEKLYm+rClKrwoWNjC7vrHrhd+xBtPalLOOP9tCr2JiBonZsGsX9\ntxmgKF8NsFpqabjwIBiFiN+N4nlPZV+eK3RpZbpHWZ9TwdUlO13am/dbRQZi\npRN66yobdj+d5Nt6B0zkVDbmEpe4Y3XVzDbpOpL+2Sfd4B86nZc9K4Oa1gOe\nuI5zj+KrWXb+03sTutiKebX/RMLmCzF3QAfRVT43GZU2W9Q/I6483NLkVekU\nihmY9XvzpTTHfCGgVdg4Z8r9Ke3kTM60AeGJfkM6/nScHHP90Iu63xF7w5k/\nLk+kICUH54LRI4zLd/ewbUTFLb9sXuLIZ7oUCc88eUCTiC8GMsuOrMIYFAir\ndeutJP7wRANDpZFZuqOMeHUOvmKk3425T62LR8KJb+t0Thp6sP7Nm/jnT7Zu\n4gMdVWUD6OuNbGfTW5PSMwFOM9Dz5uVZA1cR+HnpuBf5DtWbbPUqE4offdL7\nMMxNzqVoXhxnIPCckMFjv1xqQX1v2rNn7+ezRIce3NJN4H6vl9hl/5ou/YyQ\nSGjN2o+WcC2CEl3o081w1hRJWv1jr8wWYqVakLH9GbY1RGoNd1HmJNX2pdRw\ne0wme/R4rRcHYBd6YiRc7/EZ1O2NjaFzRerVsCg2Wjad5sXyZ0nfB+2qOqY9\n7QSG\r\n=0jn5\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"3657a12b1a5b9b1742b2749f6991e06a32416314","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.d07c78daa.0_1579045079954_0.21105033990882283","host":"s3://npm-registry-packages"}},"5.0.0-canary.8ddd5c6dc.0":{"name":"@material/density","version":"5.0.0-canary.8ddd5c6dc.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.8ddd5c6dc.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2de129a9e87a4734c5a18c0506bd843116423598","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.8ddd5c6dc.0.tgz","fileCount":8,"integrity":"sha512-uk/Y115weuBi2HUXWI4INg0qAN84xneDJBlMQ2uWFwgOoni/Wel3Dz/7c1v5ltu50eqEDYZ0oXJybCTSZqYk6w==","signatures":[{"sig":"MEYCIQCkA9X4xVGGq15EaDBJD7jydOiqRITuTzHCXa7tioB2ygIhAN1y+Ws/BZxSU4eyDepOTxxVJvWYHX9RbZ24FyByR4cA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12778,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHm4GCRA9TVsSAnZWagAAwX8QAIgIDlBdX5z/dUOt1vSs\nj1dRdeCHWxruRGK6X2t6Q8LNyrqeUd8MjcDhsFa7VE0wqVBj79bdD+7b6FfZ\nZDj/1LCCVy8SdnNGsH9DpgU+rI51cF8ogxMwBEJ7L1avl5lErlR3/sePmcrf\nixd2e9450TdwJcVsTLucvIyc8Rn+blq341CKYOg3TQPcSkI56ZP4AmogAGKh\nXcduvRG/LXX2kllscC451W19/lnfMVuwy39+FYI78l1WGIdb/ufB/LOGSoep\nyFcXPIXbje5QNMTC+0imuuxlfcOmE1uKpAyVk9juAACdLguOujk4a/QA20Es\nwuHCGQw3IXsvhm1LoQrYf8Tu8DvJjhK9x1fMUQGUTZtiqDsHdrC1N8MEyMdN\nwBDYSBJ/gJbUwR3NSdcL+dcLYnOm+R95Oka3kcJ7dyZfa9r0FniFLOapcN+A\nlkF0DyMQ44Zyep/jwhT6gXC7gqkdt6EppPjATbkj03WODkIUbJK/a6KJGPAS\nWCANidaSe+FaFlJujGLPD3K06lQCQqnOsMRwUKLwKUmJmaC3BN/871RI9tdm\n/R4SegRCip+ZgsRb4QWLCOzJzATAiOmFtbSYL5T7b9y1CzQkxXV0OJjmBaYh\n8wNEi3QKQ5E4Z2SodVc4gPiyzQ/C7ToOqKqCB9xulBvUtraT2toH9wV4WSG/\nx3n0\r\n=uXxO\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"939fade350708e559f107b53d2ab9d27d6f84f1d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.8ddd5c6dc.0_1579052549558_0.7162672131196421","host":"s3://npm-registry-packages"}},"5.0.0-canary.a9511d870.0":{"name":"@material/density","version":"5.0.0-canary.a9511d870.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.a9511d870.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f99236780ae7e1c666520c2a23547c2712629eca","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.a9511d870.0.tgz","fileCount":8,"integrity":"sha512-f7nymcKIgOs0VmGOK1+oHr+LeinvGZ2QUqzocmMQ2EJBf/HYJZStlP4PLNgf9Nizx2hRqc+JLLldGq6TJagr7g==","signatures":[{"sig":"MEYCIQCjEWyrhcxjCZZerDbKYoF0eyD5vBO4EmJwq7EAJNyvCgIhAIziNHI8jJcq6UBYmjznzSpx1RmDNAyfGN3ybzJKCxaN","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12778,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeH2NzCRA9TVsSAnZWagAAgBgP/1KUw9Jo2Jj8ZAHSi8b+\nD9AJsAD88rZ7C3a/k0MyH3Hu1pw1TFXU1YswGYOoG+Q/HGhKl/xTKB5J1IJr\nkJ/lUO1UW/JldFE7BdsZF/63hF1wE6mUyqMoD3BrMIOEEldnEEpjrbxrbus5\ntF1P0kg51l3Fbf95oTpAvfrnHI0erBAAB4hCXYo9bWBfUxPoIpF2CBkdfT4Z\n1cklaDv988jtySEaDCU+j0JWy0VD82uEIDAvNrW3WowQCxZENZ5fD8AldtVA\nOzAFCelfUFg8zrvpr/7wgg7trUWi3dhRxPNeZ+SxU3JbwxOr8idIDMAY33Hk\nFu+Y705Uu9RALXlsBiFi0UTX+oTf5xalYeB2BY/0ukYsSO0SwZhTgqHUPlvn\nsVu8uLM4IDW01XT2fm0j4Nw6OWjNZQ7cYkQqIeLnjTaF0Mb9YFIrBpDY5fRS\n6sEo0e/8vFORwMm6zMwbgU7xuE+QZObLOHiie+JSSQp60VFEwcBmPc18jiTC\nbZ18e20FzVHMQ1y0BfJ4ds5FkXxX4GjOc6L5c2SQkVjYv/9KMpJQwUhtW1xg\nzi1f+Z5wXdFbZqpkLezEo1I5ERSr7fWjeC1EdQAZOj0/qUxw8e1oofINMixS\nB6pPrhfHOrWm+2jYzq8aQW+FY3yP36OnDM8J0pFlJ2iy+TWmLjEyldCrQusv\nknUD\r\n=W75/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"69b4f620220b7e580f5273bb82be01e5990b894a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.a9511d870.0_1579115378598_0.9000611767921614","host":"s3://npm-registry-packages"}},"5.0.0-canary.7c8583c4c.0":{"name":"@material/density","version":"5.0.0-canary.7c8583c4c.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.7c8583c4c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8c9c60c249ea412654dcf76017ad09a4a986a06b","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.7c8583c4c.0.tgz","fileCount":8,"integrity":"sha512-tj2YcMWPx8RkN7jFoegh1ZKI+Qjk49xw+ON7kTYRs3/UWG3cOlQnLR2Cg+AzpasYx4b2M0u4sGMxJWWdMCfoUQ==","signatures":[{"sig":"MEUCIQC/qlBTuJQgnoFN22AfG1GHV5nvUyNFSil5FcDF/ZLYpwIgf8NoHUBUfmVcOw7ohRKYnureP3g+O4ec8KNeCo0hfXg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12778,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeH5ZaCRA9TVsSAnZWagAAx4gP+QF0sX7KCD8r3YpbPs+A\nEXa8LLGeCzgQiUO4zxMnf2I46Nf9BhQ3/oQsfqGNfi23VrWfPaw0EeUKpqsq\ne/5wWMUpLGydZjmTAcWKb5f1ZKSK1EVBt9OmUdn68x2sRF5pJS48bUjHYrs2\nFeOcqKfkV+4DiPCPZFaWnTjUkv+5b+nej6lk3M7KzAiM068e4s797higwmPL\nN0DR2flZLJqRMtTa5ypWUm9GS03Z9g/DrO4qMFR0rInQ2FdX+xnurABDWBz7\nVtvqvbt+buY2EoD4kCWd2RxOfHmUoGeg5FIfbijYQ+FzMaJyPaey9N4ROptW\nsD3++niZlMnGqKrPEDrck239yW/3VJebJu08h/Ek3zu5aZpfDokup/W9pyTo\n/C5dnVmK3fb+aYr9PhwADC0KLRSIX0x0e4g5tgkJq9dn1kg/fcB9+hJIGKSx\nR5Cn8yZvH34jXQdH9ZzeF6OZ9yx1kw5vTV0avV+vdw/5ZEWVHeF4At+obyC4\n04Fc1QPtvYda/gup9adIZL4Mlxzg2ssM3YAqlkvTwWbJdUf6d0H1SvOTy6qS\na8F90HC2uLyhZ/gafAQD/Envfnzes2Uf8iBJtCMJGBpD8Bd79FyRASV184bz\nNW57Wl3/3mVqX+cfs/tvyY/Vh0nEhK+ueSKkEDD+kOXtHUBRMnGdsgkdnR1j\nolyN\r\n=DInc\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"d89f2d9150d02c17271eeeb692f29f456fed4c1e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.7c8583c4c.0_1579128409984_0.12010337440288033","host":"s3://npm-registry-packages"}},"5.0.0-canary.5d4b82bac.0":{"name":"@material/density","version":"5.0.0-canary.5d4b82bac.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.5d4b82bac.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"48310cd3d7db21b32a6354e1a7540bce5d1c1261","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.5d4b82bac.0.tgz","fileCount":8,"integrity":"sha512-rxhPuysmUpSZ7Gz0jp7u4TIMa9daiy2tyNsqvXvSr9go8JqbPeMkIAkM+Fja+2QfPlk7jGod0ecr44AtLMoZQA==","signatures":[{"sig":"MEQCIANw6UZkWnjY/TYzPLLZ3vtI9TbDix4lg7uFvY/HOAu6AiBsBoBTYj9uNeCouloV4nWFDBnu8c+RoZh4Xd6gzUXEFA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12778,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeH5ZqCRA9TVsSAnZWagAAKhgQAIhobRtX3Y/j5uysLBb/\nFfYRpj2KbNHN0WROrCV+3noiClx41Z+52xQTDovS2IAgI/a1soMLKxSTYrQ1\nUQzbA5q8YJjOhSdgMdns+pwQUuobMmSIjY/hvJCuKo7nRjfrqsNhacyEYMOR\n/wrshef0hqiwLZi+AYnuHH//N3XEGHTn+BRBE4D/93Dl0evt2ijFtKGqeCeV\n0NO2z8SDG2GlnJlXvGdIFukH1fq0rFCE46gpv4HrO2j7RpOQPGfbvIVt5FC3\n4n2AZv7IDUUsSEHqlxfOYAZn50m4iItlrIbzBB5oJgNv+xjWhF+D/UVHemsf\nAK8GQYHjmIXCN43hEnr6IzMk0uqiHFGxxtcqfiJZzMhg/eXQdjY+I3soBerr\nVjZs4mrw9r1eBAx/UQ6b4mJ2WpjP7byQzxnxsjgDZN0LwLKpKMCIB5XO6BYa\nMGkSG+83TlKl+9KNcHTAMlid4hNKys3QqdalPVjQ2DOLTntau4x1kEBQde+K\n9ldtgydoxqREyya8gH9ieRPhAhsLSNBjullo+FOlzLc8TBDnNlAPk/uT3VDW\nCoDyQ1FYkp/9tj/OOAI3HbNy/19tFTviQxz5wOIgE5KhwEPA1WkniI7pMbis\nub8alBDgRJoq7sfffayKEWRMTttnwahW1V+vnXo+cf8B49txBFAAE4Qe22G4\njD9R\r\n=ht/H\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"e679f52745cb7c74219ab22354c6da39a642ecfb","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.5d4b82bac.0_1579128425921_0.7218399155225004","host":"s3://npm-registry-packages"}},"5.0.0-canary.57d0186e4.0":{"name":"@material/density","version":"5.0.0-canary.57d0186e4.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.57d0186e4.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"92e2dd6a40ab0919006c1109b80a631ce2fdc55e","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.57d0186e4.0.tgz","fileCount":8,"integrity":"sha512-VuUZkjO+uNe45HqSNEPjCmkRiGdwthWKfXUdZH1yCN0Hexui5vOHfkz+xIiAYv/JYBw1D102/Uym/vl7G2e5jA==","signatures":[{"sig":"MEYCIQDmlbLaSJgGf2agf0UkeDxnXyUZn0+EvKSjRCdWdHFMCAIhAMwINZEoVu57GCaornxbIORCJ2naAH40X1Hc3JZRPuF8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12778,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIKiLCRA9TVsSAnZWagAAxs0P/365yI/fQZFhL1cfUEic\n1zzPQdpICmQQTgkyZPszu3faatBMSflExYuc3k2gOpPaMRpU+bulMwjHXN6r\nfZ3g8cQMwRZQXdzVXFXY6DcCx35gJbBZIEvJCIu5iSjc14xjSvfC4bxozqdD\nbYW+Wm6DPcgCH1fjcCth9s3D41AbfKpzMyf+kEx1gZ1ThtApIruwmcuH65ES\nr4Dlb3+s7j3GLuXYyKYLwoZyTcfJlxXwzGZfVjBYG9wofnZ+jyiemsR7JJr5\n2v6rmdYmWvxSip06PLYgg5j9S5oT7puk//wlX6uyBadoaK/WrV8YbjtSkUfh\nByMVN58D62uNsOr4g7HAR94tfT8CXTbSR3M4IOynP0Btu6t6HauGVK0M4vao\n8o1NifQBzgeNwfK1AlABDsty01gfFQvdFkeI3yjVPrEuGIYutV7XKPEy7kaC\nZPSBG6rGIUv7khqf+9pDGi+Z5jtBHcYK0mzilZYvEYu2zc05rc6tlwmNVeAS\nzR99RNXfURipWd++78khksCT3cFdy20uJ37Fa4Qe3wMsyt3NAzqTjJwDeOfi\nO5DjnSPGXVFzdN8wQZXfMfipOb5f5m22F5D6quvAE/GbHgmLmljpe2bih3gb\ny1bbhiOB5NAKdMD/TLfpCM4exF5+HKjQPhGDkr7Go62C16UekrIx41Wkcmty\nBv4s\r\n=zVb3\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"d0058bff117ed84df93c0a71b3aa8c8d6e34cb6d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.57d0186e4.0_1579198603568_0.3459391273510748","host":"s3://npm-registry-packages"}},"5.0.0-canary.071a6ab70.0":{"name":"@material/density","version":"5.0.0-canary.071a6ab70.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.071a6ab70.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aba12eb4d0930d9ec259b2837e69fd93b5a1e9dc","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.071a6ab70.0.tgz","fileCount":8,"integrity":"sha512-6U/zl0os4qvgefUUtsSH/t8eBLaNt84grrqn1ty4xQ/BEOR2hXhfwrRseG+1mzzsuK2NrpFqjSlTqpATFUlf7Q==","signatures":[{"sig":"MEUCIEvVBiWuVjtDF3IOEFn1vXsL/hyvxa72ikWXHnTs7gdHAiEA8V6uxFAI7Bu9b24b4WnEFtDOw1SOd8JhLLG8YvIou60=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12778,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIKoXCRA9TVsSAnZWagAAygcP/ilF6sP+as97Ka46h5/J\nrGz15HsNBjZ5S92o/kHaVwH1tAV9sBU9VK/MevOwUCHLbWq3+guVFLwiyOGP\nRQStl3WhzFaWZRn/4K3PHV5VJLMVQQ1IqHIa3D/xFcR/iS4rEE9k+asAclTT\ne0juMH3YwdBTOGBn0enZ5flvsUTVmCfXAMHXApqChsLts7cRmucIemGiX/MG\nek5YfBwBnuOz9KgTDNEFnoNjTODIfqj7Jqn8ktypWGnhR0FlZ0RT4yosvaS6\ne4sZCj0bONMEFHO70N/xiOg7IW90EDHmJHx3EbGecgx4FAMnM+BR5dfag9oC\nBRgwbBrDTiHN4j4NxREeTT/wh405TlEao3pE6P9g15QTxnUznDISxSeCts9G\nlgjZAevzCpgTViMIClWKFGgptlG6WrsNFAR6jeZnRdS0l/G1pw0SGgSYnZJs\n7/pCdVIIayUYCQuR10yGMVCNONAD632WinS2HBxiEIGDLC8GhD3yKwzMdF65\nrTvf+MbnNqDxezRXaH+qmjJ2nYtvjOFXigvcIHRG9jJJaXeYCojiC7Wczgvl\nEr24ahKLJq87zDikt/RF4gzMoD6igpt1Ko8de0260Nd6ddyrVBxouX//YQuh\nJVip/xQ6M1KW1+U7ErZMg1vnISEMZJkNIsO0Ht5AvgVYH8tOs3e0sdpM8r+6\nbUvk\r\n=bfvP\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"40ae26c99d00481950066e41e33aac0545186659","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.071a6ab70.0_1579198999272_0.1989455027079141","host":"s3://npm-registry-packages"}},"5.0.0-canary.22e0cb618.0":{"name":"@material/density","version":"5.0.0-canary.22e0cb618.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.22e0cb618.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b3a7c6736e071ea0045051cf64f3bc588c199351","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.22e0cb618.0.tgz","fileCount":8,"integrity":"sha512-MfVJk4mhvpAMice4hvSY/bMmESAGdXzE0Y9f+TKFxaDGmIesgeNfukyh7eqYK+Zuh7rY3ScgXsnJFVhpzdukqA==","signatures":[{"sig":"MEYCIQDzJebPABXb+G7P9iaUb7zMn1uTIRZomgxqaj/q0DH44gIhAMwVZtK1UFNY3xH6WS9AAsH+j6mqdMq4cDi2W7jtmfkx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12778,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIK+DCRA9TVsSAnZWagAA9TkP/i7HKB35+xOcft3kLp6a\nbOiIYftMvFrz5m1vx4shhgYtgIvsPkWUalrlCsRd6WOiOlX3gn12FM1zTVGo\nFrcYzvYpqeD38Cb9/hFBrFdsXBUO5KK7THC8UBOH80aWO6FheTR7zYKxBTEj\n/E33+BPio7U5vI27sWAAvfdX/E18nNwJMWkZSnG0XvHjMGs6Um/D/VwfTbb8\neWRSy2yK4TUNoNBdXWCT0nrZCUav53TQzaWCnOOLEDI0UywgkPDvah8W2UNY\nz9nJ8Db9UQC2TI0KBJYzs3RM2D2R9kSOnTAoUqTn3a/gCwZKPiSf3n85VXSz\nCu0doinQOpWGmHItHxLjfX03g6p3wRn/930ZHd+4itYW5BgOjcBTfinUWUVl\n3hfynmZ0sIj5DiGB5pTuKnHFAOYnQ6Y/sYy9dfxUHMKbU59taKpPIv15BLlp\n8/L9v1HLYP5f8Cz4fDpkK2AIJX8SrHWHgjWXX1x1d8KCqtFhGP0nbCJvhFUV\nN5l3irhV8tpEfQEUKwQ5YP5oPa7/BT0mWqTU8pK8c8b0BnLVLWOnxEhnY/UT\ne7GPx57n/AvKORMclrOg7YEoKUUsr6m7fZL2k2KViqhU7FuB4idfYRd7e9Mv\n8Ttgt7n17X0JVTeWPghJ0MVqfoDQ9/cITMdYEpBQGapg/B0FIvxg0wZl5zB1\nGyNp\r\n=LUIX\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"a2ebae5c07da66b94270b07b137673cf19d6d344","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.22e0cb618.0_1579200387272_0.8836116837547487","host":"s3://npm-registry-packages"}},"5.0.0-canary.f16f15b8f.0":{"name":"@material/density","version":"5.0.0-canary.f16f15b8f.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.f16f15b8f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2cb6fbb02d0d9e024f05944d9629ef4ab5db72bb","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.f16f15b8f.0.tgz","fileCount":8,"integrity":"sha512-LegXHNd8Pboz/DltSxmTBOlOMQ3LzzuNwQluWxaboGvXsMfwy1ti5tzKFibCsTkujvg9yssPMnADiSAdi0zm4g==","signatures":[{"sig":"MEUCIG/5+9pxEEolARjHl9saRD2xoitwP2eGRQvn7yeVQmtmAiEAuk+0q2H6PmdrAEstUZMattSCEvkohMFzLalCbsmck/w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12778,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIPp6CRA9TVsSAnZWagAAfFEP/3ECsrG1/81upHZ6nxoK\nriUakrUTyAADbzPv/9ydC/gOQYCyV/cUlyGXI8lelNyHotLcFD92lADSFslR\nb8ceZBEmWmCUWRunKXTo8rouv7D/TIGU4V6eQjE8HbgucXcLY4unq4KR6EfA\nUjZ+sMyRZZdlMsO2CzTy4h7KQi4EkcCtB92pMdFO/6yDYGEnJK5Y7wtOgcMU\n8IbxH/7GZCqpjNFRkIafeEoK2Qp0c6M7eEYgqSnNsNKG24vaAZQbAmlsdeX9\nEnv4p4T1aUMMfEYSy1/8tOiMJGkUctiMzIwHAQC3do2LXBylJGO9pRnQn2oV\nl8J2DXzr/VVGW3UcJ45nP2RZ5hHv0HecM7T/0leiu+a0GrbOdDfkBkJKP43+\n/Y/0k3g6V2gSF7ok9pzubp72CmgqhXXLeBF+qpXtKfpE/RO/NrlX37+FWsGp\nA/8euskjh6dfuG+8DIrwAuH4hdW4m1qHm75cbHIyxTKSmWr4sGOOAuYXvBae\nVHlufxggq3U92nYzcphHLjfhn9NNu6jtGqbz+ZXeA+PaCOxyFAnmBn10BCUF\nzUxfHF13fghGg9e0Q+nQH/hHZfoGX5b01K7Tvo0fAMy6dtoWLU5ofs3n1xRF\nnqHGgU7udWS/urq/0xSQtS0xG+i9g7W9nx8xWOOIYmJpiW86Pqb2oM9moxI/\nhhlY\r\n=Kvf8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"edeb2cce6b325b416aeba9bc6f4598eb518f8b24","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.f16f15b8f.0_1579219578021_0.033380609265385885","host":"s3://npm-registry-packages"}},"5.0.0-canary.aa8e43e9a.0":{"name":"@material/density","version":"5.0.0-canary.aa8e43e9a.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.aa8e43e9a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0adc20d21f768ae34fc2244b7757f11f2576a891","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.aa8e43e9a.0.tgz","fileCount":8,"integrity":"sha512-BTU0iPatdd5dfWWezfXftRm48fSl9MJmwe65Rr+7VPKNK9175itW/2dGvFYAi9EUa3b9gQWvTKmbTzKeFnA7Vg==","signatures":[{"sig":"MEUCIQCF/fL36z3u88m8EOHh4J5JGSuxZsGcdTKwXnkvESRuPQIgJp057Q/Y42uz10WWsbPJ2yHOBIjJgnp+K8RZwBNg9T0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12778,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIQF5CRA9TVsSAnZWagAAxYUP/2Eki+N7A8aBUGPwT4IC\noZ+7e0VKobcz4cPTICTiPHdIYXOtOtO2ld8ok6fwyOi7r5TtVbv6in4BYcye\n3IzARqVig5F17R0/q7q+Jdq1baYaHP/gVLeUwZxTD8SXg31gWog5/Px0u+xk\nPTt8XGyzTnew4JgzuzStvOLSup8nhSlBJKhoiIoayldqWGmfZ+5R1Et7SXIV\nE6FwxAJ9I6/64Fc4TeP4vA88bm/PmHy/Kni2RmbWskT4Zo5y1ymBkOMAyVqR\nw0gwSSKlcfNmAWSBypXMXohbh4lwxJG64ryxGbfeH9mmNlthk2e3XbAgEE4I\ngB4JUBQpZWVE5shL97Q2Q8P/k4ORJp81EiecCejN0avIiuDbx2F2ufvr+8qx\nFZBujeBiBN2X4q/Lee4YV1K1FLZmIP07/uP3Jk+nB5YvJyqqfVc1ouR22vEo\nMcVUlG9p3ZqeVCi/ent2KvYMyRAA9gDuJ83f6Lqz74vKOkauTPZHvordkczM\nj8a8H1sdu2A2IM81BIhR37J4a2aPri+c1srpYEc4bhVavkk1VTGyCo2mMvSp\n0lgtixxTIL7Wao2WmPbGGxDLgjqrG1YrBCp0rZ85TPfXrqhZgpSXR80DulV6\nkcvF0JKSFmUgCuJVFonM4DAdfrPa1oL5sPoyuIJXwEeiFwU0mpHCpp8reptP\n00f9\r\n=YYKJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"b95162346a28c58839b2d3e52201e1f8c5fb9789","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.aa8e43e9a.0_1579221368929_0.5802031892709112","host":"s3://npm-registry-packages"}},"5.0.0-canary.fe1f3ca07.0":{"name":"@material/density","version":"5.0.0-canary.fe1f3ca07.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.fe1f3ca07.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"47e41f09161d286b1ec71214b506cdfacd4fdfe6","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.fe1f3ca07.0.tgz","fileCount":8,"integrity":"sha512-6UyAKp2LIQOWeIOyEsgtveO0HkFSwfG5tdAKkzldvzmH+/IolAGu7Qf6Yy3j9NbvJdo0wnrAK5DJZHeS806wrQ==","signatures":[{"sig":"MEUCIENaXfuaepF6ghpEiubr7VvWQijHbF9YfImKa8vlnB0iAiEA4pVStwQyCOpxDFGBbMxwlLcQcjGDAhJEY7y/YF9GryA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12778,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIQb2CRA9TVsSAnZWagAAoZEP/RiAkDHxxv+uZ8Pek0Qx\nWrMkhISod3dIjpiqkO79YPZ6fuwAVqhk+X1HdcmIeHZrH9ugweQMRB7uQ9Tj\npa5e6VC7IV52pHg0bgKPn5+gx6ONtr/r86A2PVqpbfqb3Q7zp+jQGP9AOrH5\nNM61D4+0F+oB2cjMM/oE6DPHa6cD3cUG9J6naFcSdkv5TmhS3YqkSuRiUOSh\nnc4Kz04r8cUMJ+mSPmW/BbBp21HfHR2GhghOxeckEI4J+YhB6gKH1tVVj67Y\nULozWz3rYLKkhVcrtO8zuUghRILZ/GfSrQkqSuQgmZRtCXgRDeeQAV+7ndPz\nqgehxTLY5v5d7a7XQd4Uhttx5525awaLgwcRiYidkkbjDvkTINRv6BvPY1h0\nZYnhE5HY8RLRDLTDTpu1xRHPHkTvzv/B2mVP6e4Gksqz1XtbZQXAfD3Jkbow\nVM65RvW21q+qlOAb0DO3tVePK3zZ7a+kPvzQTcCcntX54P6/YmN/mHWnNDgx\nd0/NkVLgphEjNet8XW1p/cP01rDyKDFrIvmU4BZTBbkSjO5SsG8kJfutBao0\ntDDlnS1Y5mT9Rl8Inh85b4HSBFHrdqc+T39PeAQKZk+wzVsRFJEVU/7wpMjs\nMJMeP4v8wbqfK4wyJt4vz656dwXCEKAd2hjZpXimZZnKEGAMAh5TRZYO3biO\nBkoD\r\n=/qq5\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"55fb21a2166199c09c2ec1273c4d38c6c3eb8cb3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.fe1f3ca07.0_1579222773086_0.06407387770962081","host":"s3://npm-registry-packages"}},"5.0.0-canary.d405af26b.0":{"name":"@material/density","version":"5.0.0-canary.d405af26b.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.d405af26b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6204e079c6cc79d190557d2cbf7243f5cc2b2d1e","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.d405af26b.0.tgz","fileCount":8,"integrity":"sha512-+tTu8zJDl+PZBPeo8G9NR1wJBhBgJDAr/mbtJb5aH5NTKMDl5lzvC+VgORd6/nNTaeqPJyrhG6YRezRHoM4uyQ==","signatures":[{"sig":"MEYCIQDrqsksL/cAe+k2rp68NVmzbIIS6RXQEXqUIsqrcr8d/gIhAMLZpCiPNRffRbL9lOMV1997KltREKOYOl/ESwCyoulg","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12778,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIfn6CRA9TVsSAnZWagAAZrcQAIX0zM2CexoHtuRV/EUn\na2NrJFw4mPk8QvC+VRvKOaN81w4mkS+3wcqNoh5FPgyCdGFL2rbBWg+/C4cv\n4euNRyVMIE0ZCH8MohhYd0fKrQ42LGpbPjyrnyTjobvee7ZBC4NC7pD//kP9\nzxchyqd7lx0SoZ7brXj+mJeM3DKzomLqiEoaIRfpxFkFLyCkDn2DhoYhoqpj\n2JcRGnVFmCD0xEPrj2ldKAnUlImM0y+15ZrbA8aCmUQcLPktXz3+gy9ovrsT\nB1JIfsbUuIRbOMdUDgO+NhwXjsASBlR7piPyCQboWiRZaGKLKG7YXR2hwVlH\nDvqFPytOR4xyBiWfGyONuS/NFGbMfvi8pHW/diOHl18+SnpzJheR/hGzUe4e\nBXzcL5/D8zhxddEcqVDfVhXy8s5fzggvxjKjn0RRSztB6rxc/oibff36A2xN\nYxt8mWeYGAi6y1nVC1u2uOOvNujEECg4sbcUpBFf0ZQWrcQkHE2wsyqkU+eP\ni6quM0ozxPN9TntvdPN93Lsp6fz+0eY70dSjfIBKpLMcW3w2c1tD9T9AUJ4k\nG7HXyUkAcP8rYJ6NV6Rnv2rde7wLz8vOXQyXgZ0BFbiypKoPNrRr9lXB0ixV\nFNU+vl8DbnsdNNiCAjUO5PtHg7aF3uk1trlvVEeMFkwK2cA+TGpr17cXJ0Vb\nq+Y6\r\n=LhGr\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"0520800061215f99c3d58fbcb661327da2b8c126","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.d405af26b.0_1579284986003_0.09086044981274433","host":"s3://npm-registry-packages"}},"5.0.0-canary.6e857aae2.0":{"name":"@material/density","version":"5.0.0-canary.6e857aae2.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.6e857aae2.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"67e9ec3c98c759d3dc436bbd99203dcd7d28e8fe","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.6e857aae2.0.tgz","fileCount":8,"integrity":"sha512-rQhL00WYFUyJvpqqXLVFRIOLj581AeqpsjF8UPXZ8LIW+wJ3FiwYxhuF3Pj4rMP8yD6L0I4gWfo1617XMxlLbA==","signatures":[{"sig":"MEUCIFvvZVcUtCua4osNd6GNSELMirL8/hiDTHcPLBjmOWonAiEAxL2l/UI+0tIQX2UXR3hCXhCzJAxZnu/Tq1iQ5Gei2uU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12778,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIfrcCRA9TVsSAnZWagAAK28P/0FP0bXNg3VjG5KBt1P+\ndK7oQhPKaIMGDe6l0uriyaYZkT0PyDmzXWY42esyHVUCn8sp5GbwY03fSOOo\n7nCMKpqF5veWTbA8yAUHdfZurR1qKxka2RPC7ufl25Uol9PlYoaJUt623B5o\nQaDO7j9sro9o8lzJ5VsZ00RlKA+rowg0SuqpEOd9fg8JI31uQMDoFSZYOKdE\n4ELBP6THlo3j8BJMSYUwcEnTSCCLh46ApFGKMsBjsROVQwJHDQd+bGQLPcLy\nD49VcdFHKeDrhU493M/PB/AZStAv8La1NUk46Sp1ITys5yTXIF1OBf74o59X\nEJcX4tfvvrWoL8eAV5EDLtsToY9YULZWS/sE2Y52QrppECnmhNpAEy+E4XQT\njdnFveM4pVtevKuRGvte99bDu8lBpg6KiSNT5DxpWWYVIrEQ5axs+4TnnTXh\nyiwypdh43pl+8sK2vNaR6bYYPPptK6e8pQNlLmQD/OqiSixi1ahiogLbcm0z\nSOil6IqKwK+sEkTffnxPusvs9vH1u0rJyvEMGsIb5DqX6gAy6hyxdqrV0Y63\nf3XUG6HCnRGEcCD0zR7IVduYHnTkVQrIgmq8XqUDqtmHLoxwAanrxGPGpP4K\nUBHoPFILrDORprACczrx0Jh3OkpvJdrz91n56pgcSrROFXsbHi+jb+UCQIst\nNWvS\r\n=6i6V\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"2a53aa5d8048725819709e1279ce78762b8b6170","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.6e857aae2.0_1579285212048_0.784379359069548","host":"s3://npm-registry-packages"}},"5.0.0-canary.e2e764f7c.0":{"name":"@material/density","version":"5.0.0-canary.e2e764f7c.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.e2e764f7c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2d9216341d26f491af4dce30541cd8555eadd19b","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.e2e764f7c.0.tgz","fileCount":8,"integrity":"sha512-GaKZmFAvGWcPEjIRsosJ+u+Ys+prb/O8Z3sRdYvKVxat8T4jkhy0QiQw4Yf7IzVnZgM+HfVcWiseOI1sCm4qaw==","signatures":[{"sig":"MEYCIQCVqEGgjm0QTA2JKbHm2NOVVdjrDo3CXHio3J4k0/id1wIhAN9rSGCwV+pmwt8oHAPXjbH5Ol4BFcWa4gNy/w5Nn51l","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12778,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIf5rCRA9TVsSAnZWagAA4YUP/0bphpUBL4uh1n9FOAcw\nn/4RlqAOYf7c8Gcm8SP5EaVk7zKjB0tgNpqRi/x6OH194YbUUGCaBsj/ykBo\naL+MraEefkncHKP0KWcxL3ew6jG0FaW6SyHqsljycD5S06ZDr4zf7SnafktC\nmgmOY/BRn/cFY3EycBlS4M9xZ3Q9KkW/LEartsruYUvcEDuw8Zn6ZsjIPnPk\ngOKGwXnKpp5l//Zn1M81rdHt6iWtawFIN7SBnFrdGIlogP5tymX9pgJiw/ez\nsTyT3LTl9XrQlTVOf1viCKeR3YgQau+yUd0I1eWoHBmWxmlrJlklWl1sVuTd\nuB3wINYJ8/5rDdSfJbiFaAAcNwODK+CLd38dKAWVsdf5cbDh4bM8vZ8pfy8b\nFeSos4gL8dsgVrcewTwyrfN9CCxW++80OfpDN+z3qCgRQgxF0+3Bs0wG1/l1\nPjvNdnugE2Pt+bUMJrSgqeh0/6saKu0XlLf4BOeV2zvv38pmBk29zqd/rfKs\nuwyc0I9WNrtAusvF6VqHP+NEthan/Q7NOWDqv6N9z8SPVqzEJlJ3YRK/Tsgh\nlKgwlea53jw2a/IyxFeEhdz0CIp6btpM+1KUVcoG+/fnxfGWSHuENEkAaueX\nhHH50ejyOp2Hxup/RZzTU+LybUpkbqGJIYtFJi23THQtQcR+rhYP7qPJyBBY\ncFr+\r\n=hfYw\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"9dd6d44ba7288e1e0e80905a629b922c21b54e37","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.e2e764f7c.0_1579286123280_0.478153488623541","host":"s3://npm-registry-packages"}},"5.0.0-canary.7ef986a87.0":{"name":"@material/density","version":"5.0.0-canary.7ef986a87.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.7ef986a87.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"09726490e0b0eddae4efed17a5f2d4af8f0e7c51","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.7ef986a87.0.tgz","fileCount":8,"integrity":"sha512-rZiMI2kVKVxrM7lx28vIex5xUwSkJCVWFXgwXRSrMJiifS39PZ13UUllRRYCPPNlYrxzsU1Fi5Sad2NwTuViVQ==","signatures":[{"sig":"MEUCIBKvoys7ck6ldHcbC6yNKKq+ESyiHU5dxdFFhVE0LHSYAiEAq6us8HzT7j3SFQDB5UI3WEiakBJt1XcPYTPxQxRmYSA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12778,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIgtCCRA9TVsSAnZWagAAy8kP/021EBskme6SAgpFIaLQ\n4uBF4PiFkdPAwRX3qM2SLCrmkvBb4nfwyaxE56F4dKU6bO/+M/4j9S5eBU7x\na/7MI8SG+XTuLxIvsgFc552SBHsPNckoK2iNbB6prsr/DuRC5Wg4emJTJSy8\nUk3sPht5NoCy6ZHDt7MciizRN5QmPuzZUvaEzHc11rv/X0c61clJdTrsaor7\nmL5cI28BLxShONG/1sh7wjydxQ4Xrf5cV9o2BO9VLpTKRxLBRnuLlAudE4tA\nflOzAzwFRgaSOnZnll1afyvDARDhpPsVUEwHKGRbnFZhEg5FdavsNemdz/U3\ngkbePSK0FaMu2XNbLeVaF2k4v4I7bHMlZ4f9HnEo0weCWHbjpDrxpgvaktc1\njZ1IZbKAJnf2KmQDA5etvZ0Zb7OgbaoqsWXF3KlL9BIiXBPLBsALG2mw2xmG\nFBQvC4KaTbYc+WTntaZYx2/3KDb19slJBVrPp+fotEOUTtYyOQwgwLpuYdET\nmahl43rTOcWH2FoDLUtNPXRCjYRJ88OQCiXkExRRoz+mZ6kG5f+/mqVhG0UM\nighKL8rtJKvtS9c3XyGhZafRcTlm7o4EXJgpElWn/Y3hid4Pz4P1YKQ4SWbr\nCD6WjW7I4LHp2KEUn018qJtPyfamPZ4OoY0sZClI2iFcd+J348jHB+5qF/eG\n4lOZ\r\n=kOGd\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"d18e160fa2a4eddeeddf0a07020cc2cecff9b573","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.7ef986a87.0_1579289410217_0.9844227339394591","host":"s3://npm-registry-packages"}},"5.0.0-canary.29402e2d4.0":{"name":"@material/density","version":"5.0.0-canary.29402e2d4.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.29402e2d4.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b4a28553553339708910944788bc0754a85586fc","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.29402e2d4.0.tgz","fileCount":8,"integrity":"sha512-93Z7tiWhKjgUUd2moIin5Qc1v5i7t7cP7kV7fFaHWOetoJGaZa0l1MWCYX4zm7tq6w+hDgcaU4obDTnMLPuklQ==","signatures":[{"sig":"MEQCIHmYRUazDOMsqhcjAIXy0PdZH+UevWtfpUsFqHthfOGrAiABlY78FEAlA+1t0mLV3J5/e02gexMvLdMtndvhuSepnw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12778,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIhtmCRA9TVsSAnZWagAAEokP/ich3hHp+naZj6zSt5VW\nasf/DVD3E+pat2mhzPhWauPyvylzjLOI9S+rsGWU7ii7ncmcTE1qspm4tX4V\ny4R33s9od8wop//D7JyBrz7PyOE5uvcKbzlNC9TWWELZIgL43LdQAmOJKpNH\n+oEb2wtLM0zXGEdB62HOzT7QkbeoocW2jZ9Of54CW46NHLEXDczjKjyBHYaB\nDGUKzrQEZCWC339vP0t1MLc46wQQx76fSD3U0Vim/lDyW+90i5qiNQJEvKn5\n9tC2uFwDBfl1kg5v6E68d7zXgwJ3CrUoOV9PlFKdulseo37p9Zh3iia0z2xl\nK9pYP11qzkBY1Ido5LimP5DsOMPF2eFafbbe5k7mucdSceKlUqbVIrX93wmT\n8HBqcJHyye/T//wvDnawQKVKRcAYO4sy3Mo1Xscu8SdXdrqfxeX0AzEbO34s\nAJotGqNj4o5JYQXDKlY4HE9f+UxWSHLe8M6E0QhiJJwhlwDdM/07vuXjSZSz\nJxD4rpI18tpc2W/Zsy3cOghy6HnOV5an/Bv40+j7x0Xfd8BR/7Xp5X1/CthO\n8pG3ZLTM5VAx7RILksPc/MuQ4QGBdIdsaMzcKZW2eRqdbnF9Qfy53/DgIqPE\nX94c7lZF8WBVz7ejQX7T5ZHR87+DNPrKHT/lTNfjYEh7I0SdhSmyZ2sBLwTr\nssLq\r\n=MqWW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"6c6caf45e8fd759ec1c6409699c53250c8c41f25","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.29402e2d4.0_1579293542079_0.4149424285647021","host":"s3://npm-registry-packages"}},"5.0.0-canary.2b3ec563c.0":{"name":"@material/density","version":"5.0.0-canary.2b3ec563c.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.2b3ec563c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a0da721b4c8b1fc5f46f976a1d073fdf1a7bb22d","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.2b3ec563c.0.tgz","fileCount":8,"integrity":"sha512-wYeuuoSk0dVp8qV6aJermmeNxZ9F/30p8MEtRLfRmoBhC5/plMHrv/tFMGltTzglKMlSsQ1S1amCDU0o0LLQgA==","signatures":[{"sig":"MEUCIBVTBaXGyG1JQwbs+uPutdKWerfiSCbrsdxd41M4MxJ0AiEAxYqaDQpVaMq+b/70xc3/VpdwuXWziBwbQ/2mfcgpPss=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12778,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIj79CRA9TVsSAnZWagAAHWYP/RlqRz5im39K39+vQxz1\nBOvpp+LCIxypnlp/8Rze07GDlSBZBS3zX3+ArtI8dpfSwc1sDdq51RM83iPT\nRa3kWQwxxymx452UOzz3NnywAz0cOWnRwEGt247j0mG5RvHSsU4Dw340RDIf\nZFW4iZVOQSf3+Octu5HJ3K0YxEaBhwLnjGYfgsInFbcPF78z90o/XxPMZybS\nRtVG28wJLSIK0wuNj/IO1hsNGVLXNfFDRAbqWsMeX+A4wnJXW6jgRb8XeAnp\np1Pz7PCOo4xKWvMdsz20XPPpOo67lTtD/x90lrX71xUveQ2UxGhyAlDwvIY6\nrxWAWqPnQ5gJZNvR05Zh7+q0aKPv5PcX1jcFWjYE3/5zfzk6RwQZcetYDGtg\nlBYuXwMHoTSFHKeJuFCEkg3A4A8421WmuigKJ0gicctcWDW6bzWetlYalC3k\nt1M7Lmg4lSv78NgdPtkzEO0EderAPhLCQmfvUEspMM3v8pxiF3gvXktTjVjg\n4gugqcWia+iHDwefNW93zKarOvoBTR6QCjZ+kphB3VRJbjXQAqcsITZ4R9Y3\nji7rb/yPL13hOV9Uso4sM7KX5PE062U3Ggl2+htTHkprA9/ceyp4PH5VLMyW\n2rf4YOCzCDeE2anQN6gCZV7k7E7+KxVohEMd/vPKv0VfIODLihNaX4epslju\nzSGj\r\n=uBq6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"e0de6399e32c2553a23c71775c8e5b54fc527e5f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.2b3ec563c.0_1579302652747_0.6847783970663921","host":"s3://npm-registry-packages"}},"5.0.0-canary.e8a993677.0":{"name":"@material/density","version":"5.0.0-canary.e8a993677.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.e8a993677.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5796fcd97d5eaaac04985ef84b60abeadf978f9c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.e8a993677.0.tgz","fileCount":8,"integrity":"sha512-bIcO+mmrWoQCrW2ALDAQeSY15MJF3yH9X9b21WFvS03Bxkp4FkOSz5fS6EqISiZ/kCovaqQ5+FUw64U0BZLSig==","signatures":[{"sig":"MEUCIFXEOW71HxzG/V31Eco5KlJnQ2mDIFTS/tSTTcXBpt2bAiEA1iF8qnqxDwK5rQYsrdT0eDzuCHH5Db+Hgf97micbqoQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12778,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeJyt/CRA9TVsSAnZWagAAvfoP/3Aap560fUi7qdHFKgRJ\nyTI6A8R5ppombDb3FilXj/mlgglpjw5X3MsMNc6DWQMby992G51bBPWo4BBl\nSRLXKi0f15xJ+seOPlUq9waTHUY5ncn5+BG3QEvna0kZja6WqqZRtUGHTP6t\nKcvprUgGSknu8XPbjpuDXgcO95Rp/FsT/vJun3d9CLhzsUDk5jK58I0kbeYx\nZTNxGtoJ/uvktsnIeQfQss1KeryWuuEU7e747wqLPO6IawBqdwZgMtvyCVU4\noHHFaZ8pxj5/rJKZK7fVoagICH2yokyq5Qs/8kHkRxLBwIt4L/7YKDDSDAHz\nGwZXV6Tx7ykLRBt3ezlB1m8tlcFhQmSrs19P7e057qjP+3XxP0e/loaik2tn\nfWeIb5igYBLe7Ak26kGsMddVGoND/jMBtBrDGkIZyzOw84YeX9K0vzzw9KwK\nXQ6zXNeD3LCbcMwuTfrb7ZyUpwq4DW9DIWjpEZTYzZ49yxmpA4/qyNNODj/f\n2KGuQoZtPLn5kQuGuGLOXPLIxcd3JvVbCGcno2+p5Aqz3z/tjVKB5SG9dRmq\n+xglw5PpsaK3fFgpnA5OuB+xmdokOgae0vMc6yy99kSKFKrdM/ppmJasHsxT\nENEOS/yWsJn+vrjdGthMs+qdFw/P3IR5Ck2lod0fGCy5hzx2rFZ50WVOHzHq\nK0mj\r\n=Azt8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"653e52310f90e65950905e8fd8fca6f99e87ba63","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.e8a993677.0_1579625342501_0.962451924766623","host":"s3://npm-registry-packages"}},"5.0.0-canary.cd4903304.0":{"name":"@material/density","version":"5.0.0-canary.cd4903304.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.cd4903304.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e7111f0eedeb12c1e2aaa57437a1a022d6b7ea4a","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.cd4903304.0.tgz","fileCount":8,"integrity":"sha512-7Kh63uW5NJPqiiPrqAf+uHKlZH/0U8Kh9piPkWf9Qz32F8+qlV0DHmieWhvKsY83Mc9jpMyZX3pC41aUMLXLUQ==","signatures":[{"sig":"MEQCIGgehFINWNnjobEYdbH4JWkLuC8aBP+41vMDJVXf+03IAiAdhHhm+gbqvet7PfwlVVAXmPm5EwnTlaY9yhdF5FwEow==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12778,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeJ27wCRA9TVsSAnZWagAAtZcQAIClGWhJwc7qwINmc6BE\ndJw9EeKcDkZ1KALVsP6X3FNKEauaZPg+Kb2tH8dnw99RCg5mA2Uhfp8PSw4w\nNQL1tljYckaJx0vTMklbzJnImIxaGtmG6i2qlIgw2/5AqhuRrA+WszV2SGag\nzuBClgJUTwpknvBSBm6cS9TQ68C+rJ9tRZAu94PRGit6/oU2Q4nlek2jKQbP\ntTPibleDtSxc8+BHEKCteaM+KWLJt2BUZtt3P9AGcbP+iL1bpyX/IeSZxnJq\nHcLJ+eHwLgyFa08zDPrjpjVYlxr0GekzetiK8iPlNZmieZDe7lISVJDzAjUA\nb7zZq/IUO2nwb1N0sLBMEeinOc/nbkaOKnfgeviR2oC8s5bZZ/IRTkGiICsH\nBmtkIr/DOW92op4tqa4Ouw9XoyZycdi/b39YBtOHoJ0iWR49+QbJo9YR6YFr\ngQZvl1liNYx9qgjUGqmSgSVX0ZcHmSZ6wKx/WP/L4acfFanhYuxCy/ysplXJ\n91ist4hV4yiUTkEcv69ohvTZOHqZEQSqYeQpAIFKjliF0myKQ6G2J5nd0P+y\n0aHCg5BrgSnY3FPy1j86wD7PfEVcdG49t8Lw6p2cuTVpHGfxtC/ZsgBDppjR\nhMvzy0GLinoXDtHGQQA7UXNcQU2J8AawNfmZ32KC7rFZDw4Lf/N6Pg0c/bds\nsQTO\r\n=Yds5\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"0a1f35ca90587cb380a06e8b6eb8650279b9953f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.cd4903304.0_1579642608004_0.289547640976044","host":"s3://npm-registry-packages"}},"5.0.0-canary.7e4b04b25.0":{"name":"@material/density","version":"5.0.0-canary.7e4b04b25.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.7e4b04b25.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b16ddc59c398d5f25d76b0c76e212688794277bd","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.7e4b04b25.0.tgz","fileCount":8,"integrity":"sha512-RM0PiTjUH338/WtHqxI7SbNOlqeQe59mR02zEQ4Nt5ROUjzD2M2yTAaim1C+Fi7E16ih3OKXTch13XXcpg1+4g==","signatures":[{"sig":"MEQCIEX4F+C6UtGjDBhN8I0nd9O6NR43MqZ704/ocYqsoaS1AiBF4KVGPdxrbrGGQeFa6kOO6O5kuCqiUhNqhlzCEMAllg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12778,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeJ37yCRA9TVsSAnZWagAAlBAQAIGIx/kw7CHCv6rrVza/\nB4NfzPTf6egzXz7lefYV46w14OR/MGNxy9sM+JLhV2ew7nY2AMnoonKDkQrz\nQCAebcHKImD6jpI6P8yqfFYyoE2zYVr4yZLNMm0dpykpVuF6bP8Kap1d6OEX\n7YLDzJNjTapxacJCkHwrxM2zIXYZtOKnBhXJ8zccTWuOgybtbTsoN/N6dLeW\nSwMtsn8+rIt/WaAgAX3IdB4u7qIB1nXMS5BMitl//zkV1Gxmjl9jqE/iHTgg\nGcaSTBb3hbVGXoQD3OIWLwN9iuElglb+LVc3mPCZt7IU8XBzN7ogSxtDjyUY\nG+r95gHCAipWYHj49djrEpxxcBAZMLsjjXgNN96baEcK8VCg91eJNgTSoEkT\n/jdSAr5SRisHHHfcUhYg0s2ZXvrKQPkWE/8ByMm8RURUb5R4cg3J74iBfqo5\nbdZxmaHfmF5ra/FwHJd5o7Z+GRSdLhBhwxjjIfnnNPnJ4+nfgw8HXK0XtiEE\nj+XC7o5dqrr/Ng2Ic1nMEQYOG87LejgKAKte3XFdqimVudCVUG1L+BAp6G/g\ngnwlSlJRBZaC87goNfWcCJTDXseLl26nlRjFU2IS+HhDecpxB4A/sC8+Hd5V\nnhqg4MSez0TGFxsJNmsYCekUnuViXZzfINqyfEes7MTsuSG35d3e/ZS6yQMB\nRZRJ\r\n=ebcS\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"5ce556593315b470008c9bb156d98d7624231a5b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.7e4b04b25.0_1579646705236_0.5099669218921519","host":"s3://npm-registry-packages"}},"5.0.0-canary.ebc296937.0":{"name":"@material/density","version":"5.0.0-canary.ebc296937.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.ebc296937.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9108b2907ef05c28fe8cc5cc943a38219a003cd5","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.ebc296937.0.tgz","fileCount":8,"integrity":"sha512-O3YWb8IW5qITVXljuWVqNnQeLIJ2BHr4SbmNIVNPiMhs5eBwq3kxDLjc2DBHxk9+yHPpEPY8qlziX/P1kMmnNQ==","signatures":[{"sig":"MEUCIA36ugdN0F4XpxN/FV7D01IOZsrd14QTXIgKSbnub3FKAiEApALkLVFhdNdsBbh0Vy4becOtvXYOzXuBFtdF0m4VOJ0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12778,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeJ4zNCRA9TVsSAnZWagAAvXAP+wTWMiajgjh3QmbgtEvQ\nTkX1AXUFZD6aHsHZ0IUB+mJSj0e5fLU5YkSatQHHaorfh5GtMl/0zcKfqeTp\nUAOg7ceVu+vvivLsNksZudnO+uq68CMLz9yqf+Mb+PuQCH+0eIFbeyUalCl2\n4OfwEvI4mGdGTCopPXsAHRw8byx9GJU2OCCgaohyeEpG19dbpiXnKRvfkFOR\n69CSsDROLZQ4JWDVEzwMdCi0lLe4nEBmqE6kiIPH9H41u6rbnSItPrM7DlNc\nin4bh5S7iTsqpDJGH5x4Bjw2yt7WsI76nN7vpFkD/6ofGGKK2ZwChwn124Ip\n8VPVOoih/lZXugPEcAvX5sdSyqrYoa3Kc9HcFGUWvgT7fBRSkVseU0oCPS33\nqyejmn7kkschLKLTjnZIMHW/gDtf2o1ekqXIgdbPtQtcOz7DXstIFcrGJnJ7\nbG5Cwl40O6vku7YkhHQEKpFneyzXcG3RlA5/seWgS4OA8uj1+IH3wXdX+KcP\n9ZvMD/a3ewQNKC9hzdYPUDMNdvV0yaILNb+AfJhpsXcua3RT/4ueu8916/HK\nNcvYkPnFMTnZ5SYSxFjbT48bg0B9M9W9PEfqfJdrTcQlHGMLlOnKhhMpMctr\nWGSMNzzRKJ0zpyfMyFTyhc3MAsr4QDFQazBSGM+LwGg8wY6q9TD8uhtPLA66\n9Pi9\r\n=pT3m\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"56393bf41fd3e60f82b11c9571455b6e0b0f2025","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.ebc296937.0_1579650253102_0.8173975478016093","host":"s3://npm-registry-packages"}},"5.0.0-canary.cf33f113d.0":{"name":"@material/density","version":"5.0.0-canary.cf33f113d.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.cf33f113d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"03d20f7300a79a509c4af6825a27b03247f3f432","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.cf33f113d.0.tgz","fileCount":8,"integrity":"sha512-8Q4zAaNXHkgaMRETmMao5EJC+hNCcIjtc+4/8bgX6D3iXOUuAT7oHxAvxIZHzg1aOUqD1LcCLCDTj/BVLzBZ/Q==","signatures":[{"sig":"MEQCIE4cJXMxL5XBMw939ybe4KS6MTbN0VPvuJlhdWhmwttkAiAZuYZO7FvgQKNxjOe0HNRuxSHqIHq5u6G7q4mjT5SMTw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12778,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeJ6OcCRA9TVsSAnZWagAALpUQAJgztzprgm5jnN2add6s\n1fzIC5gr1yRIr0ZDaejTRBvQmKPxpTxH9OiqQUGO1o2zZYX6g694buPChhPX\n0PCilfvwwMOJ2pQDOerdtaMmZLnOLB9YuD/MuECfsunH3wbr48FsnnwjaFDA\nXO3XnJ2C7JFWBglmgdmKKznG5jf5lNNWZw22iVRI8aQiDX1txlbgvUwX0CX9\nr8k4rd5wPfVgvyVEdWO2TaXnFdtjpD6o8+pHcH4EPkiuTxDRuRWRSaxAZK/U\nBXPDfmunxV+WJgfnKRogWNcNXRafcimQ1HtSNm5h6pMS1xddIwGRALviPYMQ\nh9kouuc/tWT+Kn+t/8VeQgfkxZfuG/Ruet4IJsnjGmav8/S1GGQ4RG5DdtoJ\nl6XgMEqFbMQn5Q48/Px4ZMoywowYBQrzebBKDioHc6ywecTo6x4jwON54GBc\nHKEibAK/xeLDpBgL4gmmcMxtVTcuqXJxKUyaKpYCbYNkRqw4D8YAHr3jn5rB\naX0iKYW1rS0gzsIGFHGmlrMLQ2LSgedoP+Pq/2ft2JakUJfWvVZTLGoEa/ws\n6JC6O8TfTcib/hrpMRfZsikm6L+5KfnxABXH/pDN0KrEAxep10oP4etfAu1J\nRxUb0qYmUac0YWUfFX9UjNqRKLZRi8N40b/q3NXtJ9BEXJxschsvLD5lCDKF\n2xSY\r\n=kLM+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"337736b1343fc4e03714756c4fc2ccfdfe1e5537","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.cf33f113d.0_1579656092537_0.8869953618966551","host":"s3://npm-registry-packages"}},"5.0.0-canary.e1d5f1be5.0":{"name":"@material/density","version":"5.0.0-canary.e1d5f1be5.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.e1d5f1be5.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e1302f39aef5274877eb474b147c1fe0921075d5","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.e1d5f1be5.0.tgz","fileCount":8,"integrity":"sha512-3FSfRAvAXvn96kE8AKEGOjiUZG4SWckHx7yv9/4lOzKtD2QSQYiJ1EJXi+gSLZ2e53aFo9FnMr6tDe96aTovQw==","signatures":[{"sig":"MEYCIQDW4r4yytIjZZ73W8JwI+JHyWqxwp2QEeswzxtji2C+LgIhALuy5s4DDWYmlXCF5phCpQWnPiG/g9tvhJqSZrzD3Flm","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12778,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKH5WCRA9TVsSAnZWagAAlR0P/09hFBUnfgISV1QmkKSw\nQN3M4LXXNZe28QQR7gHva1sbHkQNu+oKN/jJJT3lECZ2Y9VXhahbI2GJn2hG\ngUBKmfd13DshFQY1Rp0ZiALkQ6HdUm3nhPC2wqTKEqf7Ky6N23tYo7UzkBMH\nCf3Y0fsym1qQCsc2EDKtYLZ/OrtY+JwItxHFVgoA6vXBYovYdSNvRgOwGIQ5\ndzUALDoIZgkHF8PeO/5jIwYKaO9of0QSyUor+GYyU5qdnhw5qYAf/0RFPMKZ\nb9mPCj18LchEzUkbK/FZ9W39Qv5wLsjb2z2v9jPDtRaTnQVota53u+y+cFK7\nf7rFJsRQwID1lKUkPoHAsZsDEhD6JkM3td8/lLLmelYUri/vw36pMLa2FG2j\nmm4/1e8iDLu5Jt7HMtfzbeuhlhnkRyAaPtw1LZZt0u4vcmYQjYVLVG5FxJMv\njk+/z4Iay+CI4lyQqZDqWfBBrqt+F07XcZsCE8yrAadmHRmPoq6sgh0/J+wv\n3xEjoIguPim7rCxNI4XjgVAoyv0L7wEFi6n8W2ODJZAIw9F2tqnG0tIuhiSY\nDI4yfI9sZoAjr47Cqp6f6B0GyxI7OMdsDAQWnG3ukgLvt+vTmMiPcPd0INJO\nU6RCmSUU8MlN0ihBAI43tWrYkVlcCCYcm7r+AdyQT3gpEyEGSeAfd0GxPj8K\nxjRo\r\n=YRMs\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"4726896d58f0dfdf4ec6ed819abc20912d43f2de","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.e1d5f1be5.0_1579712085660_0.04432856307658328","host":"s3://npm-registry-packages"}},"5.0.0-canary.6b6a4ff92.0":{"name":"@material/density","version":"5.0.0-canary.6b6a4ff92.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.6b6a4ff92.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"18c395689352dd75ef4170cefa3261de72182075","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.6b6a4ff92.0.tgz","fileCount":8,"integrity":"sha512-uLdB3BY4L4ewQiNz4ckG8/oytVEF1ngCIJ+A0vq8cJlINu4Zr5fXG36zqio7QsPR0/3OFWdOCq52780+fllQ5g==","signatures":[{"sig":"MEQCIHJvUiogQSToSs4iEXltiTk047PCIcXssuCCrItwudeCAiBqRQqHq9HUz0CeepvQXXa2DY11QjwaZsVOKECWjWCAeQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12778,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKIzmCRA9TVsSAnZWagAADYoQAIP05WRleM50rs8IZUjW\ngGfaYqXzdI2RPfa0zLXAaBT+KMTWo4pSPO8RuILv76bZzD0o+NW3yCBoL/SP\nPzF/9EKeKUPP8NfUBTEaVYbQrOrhMJDhGZJ5+jup/3h6eNvzVlxje3rzL94M\neOaHlhk/j07X5i63nO5rNEjXC0LsVCPyroGnS73M8++OohpKZPwUPzmln2IA\nwhrH/e2ejuVld4CFEgCJkZmVW8NCzhBZ+Cp3/LZ/bZFJoC0e4ARdjXjraTVI\nQZR/qjefscjFzBJo6xLzhO7ZuQbqcxk7lVnS/tWxEQ5W7OzKT33f6qVObvGK\nbfQR1lmmkbUz6wCyRq07BbsIBzzPBLyAcf5nG611TXxxk3969wbc1GF0TG+8\nIcdT2I1972AqXcZT9VopMOhCtsyPlpNQtKaEUzTELMRbwJNi6EB+XchEbFRC\nfd2WHN9wDyrMDkSjVgbON0J2oYga3XYE6EwzUYK1vwjNiIw7nAtAE5ImPPJI\nnZVCOBhy2NnEkF+zeoeyxBXPHtbyRx9+7R/0CjfEJUNGK2b+WcloYOKt4Q3+\nwk1vFKp/ygzhIMEcIATBzjMykMOYnZntdz4i+VaaW+JIoPN9HqzJXHl9xYZa\n5JliYj1k9juOhBrIlzxnYU6ZeDc2BavPJZXoa860I059ag1Pt6/JULnsGaCO\noL9n\r\n=4I1c\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"a4307ced3400e7b61e83495c8903f219bba0ae44","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.6b6a4ff92.0_1579715813767_0.9256523849775875","host":"s3://npm-registry-packages"}},"5.0.0-canary.6092f71ee.0":{"name":"@material/density","version":"5.0.0-canary.6092f71ee.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.6092f71ee.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f3ca7504754ef739045491940f4f2884fc0d94bc","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.6092f71ee.0.tgz","fileCount":8,"integrity":"sha512-ai+OtL8EsR6mIwhDjT07ZDaTkurJzkBj8Xdtwtm18Nr+liIbwDEV64wvDbtRQgA58DnlBSwxTwJsMbD/N6Ni5Q==","signatures":[{"sig":"MEUCIQDTCz2vfn1yCCY8MU17Z3N9NNz4KlktJHeJ5PknRGaWewIgLYIrDDnO3vB+sBvt9lTvE1D+eogJMQgUORYVITOMssE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12778,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKLuiCRA9TVsSAnZWagAAsUAQAJoh1mD4tKw/1VnD40d4\n/ESCPOGGgsH/YE8H/mT7O7SvaFYCxypZTmjdUPNLxi9PVYFlZPOrd2j1PtDW\nRaM4yD1EL504DTrTQ9WHQeXueEwWBbQ16q15PaDYrNI0r6WVVzSYKb4izuum\nVo8J62cbHzCuvtbUwLUO2e2NLpcLA6q7kxx6Ywgi73zYQzFGQY9huX744Qv8\nWvReGwrWpuJPTF2lQJvetnl6NsMzn7tH33PW3K3Uj/83fu2++9YwdhAPNUpS\nsOG2TdBsWhl0KAyUUaYdyD4q11B4ckzafk7TPeFNyKUsFAwgKaI1ALpy1NsK\nUxnkq2J2k0WH+86TvFQ+DksAr/xShyW6WLG8wbuFVibOslId+hHIrzBZu9CZ\ncFj3Wh+oTsjdbIVrGFKYtzMivUnuSwTeM/b80v/zms4g4AIrMBn/jKbkF6DS\nMop0+Ro+593PGtSoaHgF6oQdQhr2OREyp2nE8LlQ+C4d5sChr9HzvdvrN860\nNcqMOyjGvy4grDncOgVN+6morlBtBJ5VyQX3yMZR/wRmUYpjwUyT5vNLubt0\nIjebOsqFDuHPDEWJySnrBSL8cB+P1TpOWQ9hldbiEO31IRQmfSwe/Dg1nLWG\nCx766tVRviH+oeYSOy4u2DqFXlXrY7czMEF9zmF6v8jok1uk78gZO2Wf8P2S\nVeIK\r\n=Bn6y\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"da5d9e639c767fd3f9ad77c867d990afc21cd359","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.6092f71ee.0_1579727778491_0.45319945776044146","host":"s3://npm-registry-packages"}},"5.0.0-canary.d8d95020f.0":{"name":"@material/density","version":"5.0.0-canary.d8d95020f.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.d8d95020f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"115411a5f138a25da05ecfe0b1542e1a55fe032e","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.d8d95020f.0.tgz","fileCount":8,"integrity":"sha512-tKznFm3qqWSQCXEhSvRZ0W7LyAtekgkIO11Gj4iXCcYPoiSWGc1awXFBeNaMC208IdU1CpnTnCO90IR3CG+tsw==","signatures":[{"sig":"MEQCIGcriFRr90WS0S0KRdwhRxSaiT+T/j9HXs2c4Xi0V3m8AiBV2rNEt2fmRs+pEtrMazx9aWlAKFzYX3ssPQGpvGwJmQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12778,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKNYICRA9TVsSAnZWagAAxvAQAI+mp5PU/iFuAgLT3Em2\nPjPt7Ibe77GkpXpBbVNMXlof+NHJnhuVOn5IGwdVAf3CJFcvmUlcOzdsJl09\neTrnY8tOj/XICP3SEBBoLNspLY0SM8NAJAV95P3QqgX0PRToTxLBHmL2WYy3\nN2wRm3eC3Ldu6BG8uhDelSRI1LccCk7S++EEEGgZzjtoFaaZhYLbYHq/9JfP\nD1wnjd+sBx+2v0KRv3AmlAQ8+1XA83BMLP1fc7jPk2RiYOOy5lrnzHQAh999\nEGGtNHL8Ip+ltieEIkEFMD0GpE6YA2tynL5gqq8NB6svQ0ffbo6PxgXQ3TQw\ndl6BvGQeGm+FUYKGWBVtu1Llia9NAZRznrsUHiZwoL9DSQjiUDnImLEL4NjH\nNlgR7CSA8X0+PNaxkX6MDI+LspuL24ra3IN5c6SluSbBy5FG1P+lM4z53J5A\n7WF0Qf16GZV56vzSsVH6C/smXEfApH94edLGf/Mer/wn/g6HJE3TKZ2aNHS6\nuxzRkX/yJHr3kE052QddZ6s/w5xJyiXMJJ63AW1Aun5RauYJMhZDXMVuB0YI\n7xdlAOKz/K0f+LqoCVG7V4bOWe83JxKsIPv0QSV221HsdVZDy4Q+85PJ7hRr\nrWhp8sCSx1JjKc/54kEb0iEGaX4mr6ihMkFWpAoX0RJE0/vDxY1TwC/p4sr7\nRciR\r\n=OaJZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"6360c5189134a77fd45542c27776ac2f86b16a49","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.d8d95020f.0_1579734535771_0.01993674745383056","host":"s3://npm-registry-packages"}},"5.0.0-canary.b7facc628.0":{"name":"@material/density","version":"5.0.0-canary.b7facc628.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.b7facc628.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"18461a40da58366f1fa0db54baa804fd5ae9c6a5","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.b7facc628.0.tgz","fileCount":8,"integrity":"sha512-PUM+Ytcvh1MFlU1BtPFZvJlne5iV0WuEFzyWWEiImE0kAflbaJHepZepja+rZrt/cw1y40NpRnXjguUx0zYy4g==","signatures":[{"sig":"MEQCIG+gL2ESljKPX99zjVY4xpXkxHFD3kM2KhwQROslQABsAiBtgQuFzHLjjfABnHqIN/vT0TYK2IBjWO6Xa8VHviYyTQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12778,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKeHnCRA9TVsSAnZWagAAnKIQAJ/q6MF34Hqe+F8hm/mc\nxgTwSZoL5plnBVKWI9CvvvvgBPGVhKP8pKQzA/F9oNQihrCw5U1CNSvboU4S\ng81rDTNkh7VtUFRwfhUJHGh+hFMIzIKUdg/PlXeEJtj0YWaC9cGYZNP76rcb\nzWSDnn1wqHva/W7Rpx1e6ReS7rtj1C9dheJVAAjAJB8C5ZLKEdXrkYfjqT2d\npqBBOwPjn0NBWopdj0LZWqFewRCmKctlY0VohYt1TZuYNVYJqegu9WwTYnmE\nL2W5XH9w6xYwn+/Ha7GnI8lHBrD2/m6bLLblDcYIjqwLXGuerQWELbMryOvy\noF2dtcP4ROvMvTuQvYlSwS4D449Kb0NnnKDfAdFJpPxy96ttlOgggBTPdmok\nswaZF85QG2j/e24e8Xz3JC3OcJpAxRV5HcC8JjMjS7HlNi37+y/yaL/ygzcA\nmjLXmskX7WHXWD6B6jcp2HUuRFUcjBOU5DfUICY8i/obRr/Rlo9LAfYD8L8U\n8NKZywgx8144KkIZnP7XzvZo+CAIPTZHHNKc4PRqY8yah3DEzWXMQYxroIrt\nXq/ZHlaZtaZcrnazgiX9PRSBv+AsHlwVXzMwZ08cdXbqBUDTQuv3P+eHIB5h\nWrLWOKBbiQxX92VD9Y9vq8xHTbqxNACT51jUnSPX9D7+IYP/JWt1OLJ5fm1j\nL2f9\r\n=IRjI\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"265b39c05dba4587f44e16eb788b56c1cb0153a4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.b7facc628.0_1579803110798_0.6463003098441378","host":"s3://npm-registry-packages"}},"5.0.0-canary.63f357dbf.0":{"name":"@material/density","version":"5.0.0-canary.63f357dbf.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.63f357dbf.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"61e51e368d20cd8b1bad78e090014d9960b96f12","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.63f357dbf.0.tgz","fileCount":8,"integrity":"sha512-cPrrGXXnF7Ckz257qLJD4mPJL0THsyqLZZo5nfX3f4lO77gbDSYYr0WX6L2nVP2k3sHYvshFu9efgpLkRRFsxg==","signatures":[{"sig":"MEQCIG26cya82LHlft+jYJooOuUS4NfI6OTE7oLIvITb/4P8AiAGOM73G48JO4giNq+32nKgZY367xxgjy3I2FdexWkuJw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12778,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKhYiCRA9TVsSAnZWagAAmyIP/Rgv6WoEpGZSvL5+ySlJ\no68KjA6easyfQ4eldhRMAQ7Ch/xlxz3gjwnq1+Omq2DXa0uLh14bM3EAAijQ\nrbGhLPfSuGV73mk1lcSUL9WXm/QhmVhxu/XUcTH97A0Wakjpty8SNNgKTPJz\nJ78+6fFOWb89bKRPgfm5/kfqvbdQrqzGTH6nrnEittklHEjYepSGKuygfLIz\ntv62Ak9lRZ6yZL5lmqaLSpY6Hx3mffPVIxXuNFXkJtCAf5N1Le2Mq/Hemp/9\nweB8ePO0IunsLGy9n7Uq2GY3pAgA8n35/1QFGUW4ZQVZdr2IQ1YwrXos/NjC\n0yiUJIos0DkcWsSt4jeH2g9WO75T31kHNda8R1awtOP8i6TkSVUqKx5ZIRPU\n0uj52tFYAJU/BUcC/WZmznaYeQNWLe1lNqjCXnVsz1+2FZkUNrZmd+l+NAee\nadOwRcGHeazoQ/hNAVKySJET9uAF3w6GZrE/t3iSwqyQnW2pvMzSBZGR1wdF\no7mJQqBTsACVg4pJ4vYUPbRLBz6HCabRujLcAUIYL+pkLONx7jgifw7ujtSn\nUh89vWzQBt7Sy5B+jpXeRfAjjBoe1GSK/G2gvKqk2nf1uHvkJLkUs5zHXIre\nh+FsSM3sP5jBx2Ld52W0FrQWp/tc2lU37LkiHYUXRslJrMoz/ot1DZFiG7PZ\nmWAu\r\n=Reax\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"eeb2b38a1cd8ef32c66d35119a666a4b01da6d7d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.63f357dbf.0_1579816481365_0.8491059299693269","host":"s3://npm-registry-packages"}},"5.0.0-canary.f2426d26e.0":{"name":"@material/density","version":"5.0.0-canary.f2426d26e.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.f2426d26e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"33dd635b0794c32527268c350495197dd1dcecd4","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.f2426d26e.0.tgz","fileCount":8,"integrity":"sha512-bFJ14LJYZgnb2wdHpX/XvqAZbYnVnXwxt2AEOrk62Vh6gkZa7vt/LdchEyOetTIl+/Avh+O+rCNZ4gYoTTLQKQ==","signatures":[{"sig":"MEUCIQDK6eEWg7s17Vr3t+lyq2wZ4DX1MQi2+Z4y647l2p3WzAIgfoJSOCoG7vcOMiHc1MUMSEtSvUrpRzk04OtPZ8GupiA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12778,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKjJCCRA9TVsSAnZWagAAiOkP/3Sk2avqhp/sH4tXXXCg\nMsruHuTuZ1ekJS4C8s8HxQkrSX8bVm1haNXuiMOOs9nlNTERrZ7zklV+hkP0\npRMiqpw9dnJFeDWl8T9cup/n1AUgQoadU64CapUyhv2fTI6hR48R+bbMGCew\n5FKvQisfJczOmTFQpNOdHRTJ9qQvayC7NArAiwBGGmNN91L/S0Y1ClHwY4iw\nuYsEbv71Y4I90JeIFp+YnQn/OaS1MN0MpqKZXkfTYASj+3IERzy628DjgG7V\nEpNHhoDNmJ0KlUC1Psjy3CxYEQaL3vL31vmQjh8ubm5cdFx+7bchXh938aDR\nS/xclKAJsvBM5VtYSqpoH7wMX11meW2Es7EMwkjjbnK0H/TQ7HmBdWBf90yA\nU+/EP+aGdTkgm6oJmQcTpqHBUSb590Tvnw3v5MP392csCBtgfD781gfq0CLa\niCLCw5OwFtYWbtAUE0uZYsstxZutbaWp3CmdUmqNyKS6qX91tBzj1rgFpnAX\nT/ZjfpUcUXf3nqRTDYpWWCuHaPPxTqp1dsHt3NsxXbgKzpsk2Q9QnqBavaLV\n9IcFecAoG/em1ZWYuaTj4oFe5kk9T5zT4PLw/htEjLv+uERDpYlLZVzXWNta\n2/11iqHR76+bpxlSqP4xIVYq8s89e+7349lKZS1jfo2/J6ac31mXS+seMeCc\nH351\r\n=dU+L\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"f25cc47237fd4889c25ddd16c4d80cff95fe3c91","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.f2426d26e.0_1579823681771_0.9056106011658125","host":"s3://npm-registry-packages"}},"5.0.0-canary.7f5e0c23f.0":{"name":"@material/density","version":"5.0.0-canary.7f5e0c23f.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.7f5e0c23f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2dbb114e1e353c2a05155738cadecdcf83b551c1","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.7f5e0c23f.0.tgz","fileCount":8,"integrity":"sha512-++BBlwnFrKz9lwduj/wp3Ne8kv66cfWTj3uguqKG/OmxromEadMyTcqI7eWZcEl8ylMaSreKWWWEdm5nS3mqIg==","signatures":[{"sig":"MEQCIGh4bZtnUgnyO1pc6Hqdht7Wt+FYpjFJ3C11pHyo+zgMAiBEAZ6k4f0BARrwBvq4LN13cQrslISo6DDWfNMycrFcmQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12778,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKx+DCRA9TVsSAnZWagAAyGkP/145k5U2dQ5Ck3E2LQFu\nioN7vTuDVrwu0UsUcySZRw+CYtgRjZooygbqVA+jjF9u4P1+MesGJJpzsTBD\n9wz1u8AEr4DiXU7h2HeTCN1B7FIufrMPuWEB/S2q8vZ8I3+3rxgHNz1iTEi9\nmD1KRRd+s535S1QX4Ga02a1W4h10ai582zjw8vEi5KCqqiLGIcY02Sh7B4wH\nl3Kppem/bfS/HnA/7DzhXALn5V4c7oB5LTLI8bubRoez07mP4uLp4XF8Km6g\nXb+coKOJiVW6yaLe14Ie5y2timsRRN8mTK5QW4aIdaJItar84hG+AWQvlYBA\n243MvbJkxiixhY8pQh1fErOAkH1E1pLsqpJJj/p3+D+mB76uiEeOg3/pzlXQ\nv+Jon9FXVSxaJmLGI/rwXiT20rlXCYMV0VYQFs3e+CvrryOqrtwkbH4gKZ/m\n2s5rJ2OWxJxbCPNQw4u6ZlLITpkHXS/RDbYilP/WvO+lnQoGG0NQcXumD/Kw\nTBHAhOJp8DKXgtSVHb8HYnUUEl4wPigxfHF8nYxvo3tsJ9FPqDDnfEzJ++nv\n115W7scsRjQphuKhDMxI1X9ACrYsSmVakuU9EDikfCl+5O6cjJvQi61iPe80\nZUl8xj82BZmMsdE/a4amFRsClqANo62dAZ+qiFycAYn9B5T8Q2OQGqFXfy+O\ntKA+\r\n=bly6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"619b057dce90a552f56e341228cfddbfb7746acc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.7f5e0c23f.0_1579884419087_0.5370049565076387","host":"s3://npm-registry-packages"}},"5.0.0-canary.3fc3ab520.0":{"name":"@material/density","version":"5.0.0-canary.3fc3ab520.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.3fc3ab520.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a166a18d36559ff78ff989e1726947e2fb66f437","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.3fc3ab520.0.tgz","fileCount":8,"integrity":"sha512-oIe8WzgBlV2bep6gl3KNUzY67V4WyUL03URCV1txdwTy6iX5uJr+JHCLJ0e+OgK4ehRxBj+iDaStkzB0yp04tw==","signatures":[{"sig":"MEQCICqxo+rw8skvXLDUAyHKHzFztXerMH0ydTXZDx18zUaQAiBG7BpXOq7tPDOegiGKY4sfQ5+Cez1OluAf5yfPbMbHJg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12778,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKydHCRA9TVsSAnZWagAAWusP/0N/yL3Bn7hE2eajaXWG\nm9ml2Wwe0X9qpEvfOm6LeOhfpgk5J/C/KRwN7M27kZpjhdy8NAoESAKs5x28\n9gATsZpQ5k/txlEYKHP4dUZsp9WM0dux1OgSf+7Brdbi+2OuoUDX15T1kyoG\nPhaKzCAZktCTqmUp4TPgDqDF2P2L74sQbtu4Pg/VQYWnlIiLyyKT22Usm5g8\nNQJ/O0eS6sHHbR7zxwmqW6gDifAkSdQWpsLOTfM8zbk37MhdKkZMkun8dzKV\nhWRsWD768yrJDzhOEH/o34b4OLvPXRunj/aN/fq4jR+rNYIyl/8kqW0nE09B\nTXVpNJC1j3dQ+5T0wgF65n3y1hQrHs0KCJuo5e/c40DcA67JED9xaLn/OJAp\ngWtSvoWwfg5GF4GKkfqjQRJeD0b+xACYXSKcX2x5pj0mA9vyx57LxnB/R8WW\nOLSIn7lC3AhrstXbBC+4XUm1oMH7dqsLylsFBFIhJAsIiiCgof+4zEozPFLJ\nuXHEUNay5ITV+CleN+/GhP+OfQciuPT2De2Ncjib7hXXUYlKhPIVdTPDCb63\n2xbMsd+jO5HwzZygUNjrnaNo2DDGEEFqv3w5NanF6CBbct+nQJIyVpbGBNyf\n7j1KJJjH4+XQLN+hh3Df4V8BEvI0DO1HwlWmGouiv0/Q1WdmR7sO43OWbR+A\nL4MD\r\n=0oZj\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"d15050fe97c7130fc9607ecc53a7eafd2b9c58ef","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.3fc3ab520.0_1579886407000_0.5761258655098558","host":"s3://npm-registry-packages"}},"5.0.0-canary.80a4d326f.0":{"name":"@material/density","version":"5.0.0-canary.80a4d326f.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.80a4d326f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"abc10bc2991f905ae524759391658bc52411d8e9","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.80a4d326f.0.tgz","fileCount":8,"integrity":"sha512-jTv7S/+R0bYDYAvDsgRtC8v8epfg0NSbWQG92M8TaMmKovASIy+9Ear3KIDgjCplZ18HGPBNLdf+pHqu2f+hIg==","signatures":[{"sig":"MEUCIQDssRBVXG0KDAO4X+VCf1E5zl1NMv0JDomlpH1vn9REKQIgSwINMSO2juLgcGEvjEUUr5/MoaxCWsup8hV3UI6PxVk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12778,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeK1dVCRA9TVsSAnZWagAAL6cP/iXtxzWv4EWmKBABUBB9\nGHcSeJqzFL5pRNDtv3mc8UsUz/t1UlZFzjqXkraPEmZxwY74kgdUylKmoxB9\nm1SHGzxTgNZQcOJ3Ead7ex1KFJSt+iN9oi0U4SeIzTzRSPhgT1hAnrQirT9G\no2B6Lb8aX8Af6GrhxuIf/EblwGuWS6eg4Zov346ZkjkA2qVfOwjDOPwHtKyd\nkDH7NMEC0oLAtmS8vk2YWWXmbAIcuITKDqQk2/9FYZYQpAHoULvEKp0s/kZY\nWUxkKOadZSMFb0HCkZphLZnMu5UNM5vGyrhweN/K5HhAtSoUn/4dX3GYshgA\n7HVWveD7+gaysH9l/pBKYdO71kw95yKs9Ea3nGVSfTE2OO2+fLlGVcUjFVp2\n2ajmwca923eUSpN3egExTUj7YhxJmIHCVKXepMhtv1Idg6/9k/GZxy51dnjC\nRgEIVz7oQ6jfRmgZt3C761gOwfji74T5ed6BV86p/A7CkYpdgTgLzp+BP9GR\nqNdeNAZ67vraYhBRciCZSQcARXYZt9qihag1lrJGb+CEMucntL0jmmr1QPMF\nHNJ+57v+KBrYiqDGHwI6Fr7/LPyXQvt+X++VYJmYi2lgC8VeS+Ro7PwKd8vY\nhgv3q8ZPDvcatyV+QgKazte/VVOjL0fLy6tOgQBBkjBnMvaSRuPtgBP7Csew\nz9dl\r\n=lI5X\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"b0001f5c4ba1986c74470e492e82bc13e15e2ad3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.80a4d326f.0_1579898708855_0.3251681702630147","host":"s3://npm-registry-packages"}},"5.0.0-canary.ef7de4def.0":{"name":"@material/density","version":"5.0.0-canary.ef7de4def.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.ef7de4def.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2106f8da7fb5f5a6f8659bb29610cb0ffbc64a10","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.ef7de4def.0.tgz","fileCount":8,"integrity":"sha512-Pa6LX3ZYSlc9qAoiFQcqL9pFTVtYfu5rzZ3fS6fFb847p3AKiJNCGZ+vjdxrzp3d4xhn5QOpX6QLpka3kPrWGQ==","signatures":[{"sig":"MEYCIQCmTpAQh0qa1VOi3ZEu9aNoSznn6O9lUjAjXenA5+JmVQIhAIrByw7uo3qbXswUMHSMKMPHWzOOHBstjsF/6vfcHvH+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12778,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeK2ImCRA9TVsSAnZWagAAImYP/AjT5N4NDXPDwzP98c4N\n6PKFw6NEsLT5hElFKhEctkO5FnWmVcxR4PLUPQ3nRMDrU9oLrmkwk5zB2/bs\n5jIqlf44cFVnlGUneymJRo4LOkqylmJJ1lmcvIeogm9AqXNHOAVAwD6YfuYv\nmDy/np3M+oFbjuUT3MKSfcsdn0xjK3YdlXAZMO4Od3UFYADyvhV/8851nvPx\noQbJr8PjLErhf7CtDF+FqbFi0QVwPaIau5ENgzhaJAX5s9l3ZG8qEouEWbim\n0oJk4ckNiTQUjlRlUwqoFtK3Vn53YYJUKCZa4SvN0Q8H90aI63LqW+vy6L9b\nMAN2imIiwkxs3A2dnJk/VZlR1o8OA37+AHl3jA2RUXbLki3gAz8/7CYwxNxK\nzlObkeO+PvpG6GM27oSdeeCESv+Bqb4Vi6G1ny+oPUxzLTFi6S6TIPfw991V\n2mL4TYse3r+frg6gP5zRH2D0jSyMZRaNgDe8ZIH/NUBGKKrfOzkvfDp98Dq+\nzPBxHrTiTUSurjWFk59oZAXHBmZeIpZe3uzCoqXDrHtSOoH61mekqObKkKAA\nsIiH7Dx/s3ax7T6BtgsTdP9L0wfjNGi4k+yNypkDvd8SkJBr8UTFmmc0P2D8\n076eX31QtkECEhQLtOEh0+IXcmatEy/Eu0SUPtou07nGV0flgVRR5TLeINqP\nV4Gm\r\n=5/0S\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"1ac98da12680a4581dd0427e23f1dd1b95a939a0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.ef7de4def.0_1579901476118_0.7612576900460399","host":"s3://npm-registry-packages"}},"5.0.0-canary.93e2288b6.0":{"name":"@material/density","version":"5.0.0-canary.93e2288b6.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.93e2288b6.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cda9c92451a978f971242af61dbd6cd5eb2f8875","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.93e2288b6.0.tgz","fileCount":8,"integrity":"sha512-eC+ch3+vc7VrOsAyvoMXYAYam/I+Wnzqj3MaV7G+/D3YgduIQWmMpPiv10aGMbYMtPlHK4nq2y+bCR5vie+/Jg==","signatures":[{"sig":"MEYCIQCCz1ufGEGqCtZA65ZfMBzmPXQuDWvDfN/61ic/vQSBHQIhALlFoVMJI7K/GbM2KBVkkUXST57uiXtsg4NU1iAi63CR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12778,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMGdBCRA9TVsSAnZWagAAIbEP/3rWEi6in2W0k0rOLZC/\nn1MpPYfT02ofbX3UEyYMgZVccs/q5lPSbwIZPWSd8KCvuahgLigRiVfLen/N\nbrRTox4qxcBXbvYtE3r8TkqIXu7OlKA5eST1sjCCV41HQGVOjA/kC+hn9Zj4\nNmE/qXYdPRy7WR80+UHETsEOP/cJlR2NA1Y6TJUiYxm2TSCprYQ53S7/p7ot\nqX4EV9JFfc6P+P2CGOlAkpPbasgsObVeFSbujkF4zV18AXtLQqcx02Zc4PIq\n1+RDb0H1u6AombweEfgkcm1tfj9MXD24GPgcogizDqGRjUGZV5UDWV4SgQrf\n4gkozWAau8ii7wJN1JE0R5sUMNVj4/8wMbTRc0GipWRhrKBy0JNtL5wvjNma\nNDe2hlSlfHQDAsuFWUmAT4uTqnWbWDdExQT76QDPjN7hmFF+OmKFX94BGL1h\nWA8zL/05mG4ibHLrPqAg9DZjx22HHkMqfvEi08m0ZXggcQq/581Kx3IXgnT/\noKiZaXaizNa0jPZySDHaT71nscgGtAUXzvaqX37GzJjxZfUqQPDPAO5r1eGk\n/mAh261VkOnqe4lGm7ZZrJlZA1o3Cwm5CpOhQ42tOAPBXALJtE3vC5Cm+oFK\ngON7cB9Vl3qmWGoeo2ghxuzqACDetLKmvJGhQjecIJnQRXWhGLyp7uO7iWze\nbHWk\r\n=tSvY\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"00984d219befe7ef5ec7c042cd975979249ca8f0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.93e2288b6.0_1580230464598_0.761172462161199","host":"s3://npm-registry-packages"}},"5.0.0-canary.34ef15f67.0":{"name":"@material/density","version":"5.0.0-canary.34ef15f67.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.34ef15f67.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a1f37c3d9ddbe852a57245946780ede8efc92499","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.34ef15f67.0.tgz","fileCount":8,"integrity":"sha512-KbWVk2XWDfnToifisEKLsYYrrvtI+DBAGb7VOaQQJMrp8LX+YdM/UkSIuiZFEZ79bFEp6U4P6nuze8ZnvNelPA==","signatures":[{"sig":"MEUCIGGDnzpsUfSfnzqfaLCaJw9QeMLWF4YlNnu0wJa3HJYoAiEA9p0oPdiFG4Bzzh7eUKNzvC3I8dmFOi2iTPN9mraOdz8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12778,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMG4NCRA9TVsSAnZWagAAuyMP/3BRYseem2uytPM/fouc\niAwgvVgfDwT4iMdO+JOgd1RAE9SUjreSI8YeAQC2mlo+6lg/zTw8McdUveUG\nAIfCK0kb80p9fpXEjm9kFPcD1RWQ228JjPlnitWD0oXFyzPs4iYNxbVEKnD4\nuznDSX70DJAC5O3PhAXPnQzxuIVQc7ojovuNtTty8I3AdTXWBRC1nMRqesh6\nI5Fk+X37ZIzo5z1I4CcbX7nyThX3MCDMG0+7WNs4V91BvQhIEuueRWSyfIHp\nzdj+i6NxZ5pg2otqCjFLsAA1TnAitKzAYu+De9lCbjO1mtgGPIzg31E4ZbjM\nH0CjboL/DNJWBjVLzWfQ7p/UoHTQcywTh4/siw3P+strhH2wvpUk8ujtLDSZ\nk1iwa4Rndu8UWO5m+Q8vdIiwahsxOoJWvT4TJU3Rr6KWt9bzbBBk3KYuvaFb\na/MEME1Pm/pwkx5KoJeCMYzm7aRFw35KruOpa/H2+IB52zpKyQ9qX2CvOpZf\n3KS6pY/fHFODdNJzsGVvSYiiI+0PpNQ1K94g+3GEqeCqigAAeWHjWnxstEoP\nkzvmL9Rny0H7c6UwLomGJP9tdk5kaxwK86/npcgtsSpwkOZHtBgUbxJ7F1wO\nJBrjvFoCl4XJVBhJUDpmfAyD0iCdaJ8Qxlbt3RgO+tOoqszPIqCXCbbLNnAf\nzmhK\r\n=I9RZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"21f8c61e71f0a9c48eb2042e25093b7a821e30f5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.34ef15f67.0_1580232205148_0.009664843665789347","host":"s3://npm-registry-packages"}},"5.0.0-canary.d3d176ba5.0":{"name":"@material/density","version":"5.0.0-canary.d3d176ba5.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.d3d176ba5.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e76330eb58a068c7fdcc18a0752795a2131e27b1","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.d3d176ba5.0.tgz","fileCount":8,"integrity":"sha512-ZareCxy//A6TvOzSZP5Ih6OLsN3B+E6+nmV0qvCQq3VuL4qDkcTgBAyybZNQW8TBu/FU36ar/RxZiv/Xs5oIXg==","signatures":[{"sig":"MEQCIEIklYzFSnwa0+uSsLFinikyuB6V7g9stCj/JOx9I1dTAiBi+zEzc3SMfO6xj7IWLgFw03g08Y0l7ZpxsUtygUd8TA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12778,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMG9KCRA9TVsSAnZWagAAAekP/0Xj4JaDFjhE/aPXFwYo\npRqRliOp/U7dVWTUVm17aTWfcNJIdGivcCXLKi0lXkYg7rV91XJ6J/rzVBJb\nF9vHmI+sMc86bqxkxDCAkhkv5GG/7ob4r1bqD5bEWRSPvyExbp6IFTPT1dtU\n0bKs2fmoPBVTnXc8sknfhd98dierPHfIboKab03iZlsxbNVwOphYvgW9gBT1\nmG6fncmw2c7GTxFo4BBofJHFNd7LVbNRtK5Jws9T3TcQ1kqAXYWGtqbjSN4E\nNLzy7QWO8YjqV91bg31kj3wIz+5TSEJ2Cnm7i/Tbp+DgrLPKcyJklK7BQoQG\nWDL3whY8aph1bBfIGghkrMLcrCfVYn2HTayO3bxxNrkOkzfgjiePirzN/95s\naq2fziyIBpD+n+iJRAvMdTWEr2yfHaudMeIS6Sw+OXUmyadQycyovrRHHBeV\nLuG3d2KArVERSbGCCrbbhtw+qsRYgq4zFDG11p/u7NRV/86wcNN0Gs2FYN+5\nvgPqrpY3BmqXV/RnQ/8hLC3YrLozeBdAe9gr5FxYIddg1j6hwbrTGGELUbkL\nGBYj69fpwG2M4Xnk+hvw3BTWjjNzJHEhlzoQnZMTSmLiRMnbVeXXy/SXpOEo\n5UUc9FnJQqLlXRH+iDEzsYDfvqDA0nTcE495PGEZyLEoOb5lsv5tcoZlZq09\n+Hc6\r\n=WXKr\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"218eacd6961bf740e059146072cd9e6c710dcdc3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.d3d176ba5.0_1580232521845_0.6943701177084682","host":"s3://npm-registry-packages"}},"5.0.0-canary.32c1df133.0":{"name":"@material/density","version":"5.0.0-canary.32c1df133.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.32c1df133.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b8e6878fa30f4303933db70dfcc901a0ebd067b3","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.32c1df133.0.tgz","fileCount":8,"integrity":"sha512-O2BBwmIavSnCjVxcqK2z+UGt97jnbR2kQqsnCnA2kExMlP06PWOREfgx2/77IySAhpwFL92BVkc0UqshM7iaSQ==","signatures":[{"sig":"MEQCIHXHyUGkskZsCabMUuGXvOec1xksLAPfl6srvV+hFSJLAiBXtsUbxNGnxlGYTvaf3Zb+VjBEZBEjdBnEYh7h32HOrQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12778,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMI6xCRA9TVsSAnZWagAAxMoP/iqNKmlgTzCD5BRAwlcc\nIWUCy5hDTZu4LCbDKTP9rY+y0ZtW2CMEeqz9u2P+zzn6Jv9B/ZjllUynoNZZ\nqooDRAh8LtOXzxS4Ye+0mshV2TJ4t7IhLXFFd5yF6qUoi1GZNJEdWqnvF0+B\n/4AVdrqRj2B4kK69sA3DPkcqBhle5tNNFmZ1W+2Az6Xu9bwrQm8lHYJvYLjJ\nllvU6L0XtL4UTDxR9QMOhP2QplMHi56W7THr5mDpiRuo6NnCRmQaxD7+JB3d\nAOES1b+sZ0i9nOgRml1Hr0XKlglXb+QNDd2uIbiOA1iyHpUNqvCsiOWVKMUc\nbuMQzOLyp0I6NWS9YzDGOO4ExJcf33D3rONpoyuyQqzP8svP1D8/szT8Cqqp\n51bPiiL3Zf3EpijKsgfvrU6+w948WyC+EXbRjUlqqijPyO/xj3u43t9oIDzD\n/1d7xKkM8kehS6WhoZFClq0w7EaNbSGi34i8q5YDAVZZMSPY/pEvU8kmNsB0\nvIidOmvQ/8OWOoOHM/fUBmAIrEzT2TGH8d2IAVe4DCwC0YafZQikL2S0SQT/\n0eW/XmdmknApWIvA1pagpLx4d64n5kyigji0FUmeTkt+uk7Z+UOO4MqB201C\npDObuBKa+nVhAL2IRF5SAx6KfgTP58RgQr6UIy1bQSD6yWNKHjhRU9BiZEsc\n+pNj\r\n=PiHz\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"1f36bc15da25ecb33aaa27693bbcee65c1d56eaa","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.32c1df133.0_1580240561241_0.5783034371687388","host":"s3://npm-registry-packages"}},"5.0.0-canary.f3adce86f.0":{"name":"@material/density","version":"5.0.0-canary.f3adce86f.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.f3adce86f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3b59dd9c891ecc4979938fe473a817b6ce7e8347","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.f3adce86f.0.tgz","fileCount":8,"integrity":"sha512-4Hsc+nYfLP/vG2UOZm6/CpEXT7AmtUWbtX/L9XqU7ISa7+HW/4DKm+sQ5LUiyYqqh5Snecem8IehLNeHvHRxlg==","signatures":[{"sig":"MEYCIQC8TrNme+En+7I+hbL4PwFoEwH+lALQLuMX2E+a9QRdpQIhAMEllU94jLsEyKtIDqtdb9/RVTz9T2ZJCAmpaRvjezaU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12778,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMKwfCRA9TVsSAnZWagAAyfQQAKIw8Plljhc1n1vYj+BK\nt0Mu1KSewhlxh3MAWRegs5eXiGgyRrIJ9kZCWlxLBW/n97UY6HHUKywqBIpc\nOVpJnpOcD9X6rFe6LxWfFhXgmIEujYVU8tmNgvVVeETy6bo1VDWXztcI/BMW\ndNbZ+/UL9CWNUJnsMmVb9EAr/XFt9tNixyEvTLEmbINhVttBdsExplVUBsEv\nh7D+3WrF6BweS2m9T/gFZpkHw8yx6SeoyK2HnwlbsmAUPkDABl3EGqtJKhz6\nrNXKO3gK23v7fsqtLq1VDROIDWsQbiapP5kqxPYV3Y9MTjEOcdpCFNjwAPkR\nDIUJTarpcxVrE683RVasfoX7zxy9oq08fcpNC2/8n3I/GRVycaYwCNYAxe0V\nFT6XzOOrn4CiGrWjsSfHr0VnoOqg5+0R5bgsf3SfHull9dEmFr7Xtk5vbF5S\nekkJiG3qTs3/elakvCwVpuluoFvCA42H8sccTK1lKaLBlTqZKliGHQpg5ZQR\nyBt94NwPk1AZJBcBtQNzoFCWuTgce+H8ruC1BF/gdG4p4nhbihK5zRsVWqQk\nKv9OJJalh+wCXu83KR+tED8L0hY1NDWmLDBAIxxGMkXRBBvXp1QTiLTpqh4b\nGk/ZIkxAXA0cWaohR2KIyBE/1u6ZfPNqipIiu6hC0ZdcCHuZEzcQ/OAMoArn\nsCkS\r\n=Au8t\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"c352913b9c3e29f7b404b08db88a506e692187d7","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.f3adce86f.0_1580248095301_0.9627560205558612","host":"s3://npm-registry-packages"}},"5.0.0-canary.a4423f890.0":{"name":"@material/density","version":"5.0.0-canary.a4423f890.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.a4423f890.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"92aa3069d3cb2745a0cecac7f47f9184818aa433","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.a4423f890.0.tgz","fileCount":8,"integrity":"sha512-e9QKAiR8lzNa6ffJEg01AglVyz2pqbNtl0Hbnq3XWUtjQ5t4yHHGTBGx1iI+mNZRNFHBoeBmB9PHsH1X//vJyw==","signatures":[{"sig":"MEUCIBM8boiB79na7mMaiegOnf6EwW/kr/82t8FyUqhDosuoAiEAkTlETgjzvM+qX6ASNqrFq9OKKjlpT3d7yLsV1+mnjaU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12778,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMfRhCRA9TVsSAnZWagAA4rIP/0Lci5cGQbIxfOw21XTp\nnNJYuEBFPBNTkT0clnrW5OeKU9nSZ7Ehj3CGGermJa2ucjPe4fCzZB4Y3NM2\nEPKiWD5m2m9mZInKOer2KpDRreiMkcKoR6MzWI/N6zDhFWw2BK3ajcP8KjMj\nl4IRLUyKFhuuSCIxbNBOSIIcXOLrW2dmDKORKhp9kgV2EnHi2XB6U4Df9Pjh\nFDXRRGhXExariZfkuWqkCCEuW0q25nOLbvU9QYDNJP4V7SrHvrAnC66uSqZJ\n2AO4TZs8bojZX30NmK9nzaOtAAM1EspSXxz6TUf3nbCIDf/Y4/LGidovq9NX\nU01jcZd4ELcn+5qbNBDblN2uVcm1MmBmJgKiXIYn0IAflzkWH1LHP0x3yXRP\nAmUyUPDtHrtSaGlipYZjYy1kWdGKcAyyja7lop5fXjYy6FjpbBPtMgfjYHlQ\n7hq/wb/8cimM4wsDYcHh7WSO1Bmz4Oin34f7t5UmqetckwLFMP6bBZuYh+t7\n6jUvBRrD4MyWIwem+UcjrdTMVp2afsrs2BFFnsbaq19ujw8hE31E9CU9ohht\nerbSpCipYgtJsyqeUJGp2frZJoZZyZxTRD4sBygS01QYDKD/XOSdYkKp/+yD\nuECB6VMJT190WNUdpJJunUpcAwAWPjsT4+5AdOj5Ys6i61yHG7ixpaTz04KO\nLzPz\r\n=8J58\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"981df6741191636b0a527b318fe896f47f74cc0d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.a4423f890.0_1580332128984_0.5464410997873597","host":"s3://npm-registry-packages"}},"5.0.0-canary.9351f167d.0":{"name":"@material/density","version":"5.0.0-canary.9351f167d.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.9351f167d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"65bba5a328d7bb4dcb95e57b520e1d9f92abaa3d","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.9351f167d.0.tgz","fileCount":8,"integrity":"sha512-AqbgALa7vJcf7StWxnATmQhXutP7yDp9B6rFDHEHlVdFd6Ie6OO9AYWjakeWEm5YegJC+3WEdojOAhkws/kgIw==","signatures":[{"sig":"MEQCIDXs5hYbLJ87lidvb5zlkDdgvpElEEwkV0BulUjxM2RkAiA9w0AHseylbWUhMLvComgdconR/Lr/xaooXD8na0w5QQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12778,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMf8pCRA9TVsSAnZWagAA7+QP/2PgG4KM/MVMrKu3va2i\nFyIubQFC6qo6tnD1edO/DMwNMcBlajUlXNCeMxq7PSlwb3p8T+h5obDtCJGa\nM+fmfomp5YJabUtszg+DnuIPMPqF1n9Nswo4XpP345JvQK++mEna9+Uoe6XR\n1k88Tb5XnO7pvzZ1cDHKQN+9juGhtW+8n2FciA1nxeZEtPvPAfKar7fLPbIc\nmO4jBFfXRwlFgG8mRJKnkSGlgA0wUeEGPfgOz6vh7mtf0cVq1ITfsO1Xdqh6\nzdW1QPmDUVhWV41+C+x6q+LRMa9tqzsyFBU7vD+7/vX2DKidd/QlU360NeDX\nz0XvMBVbKLeXhBY7SaMy/iXVTIxIJm3q1lioJr+Srfjfi2Ao6uLHvU4qbk2J\nYdYP3aetMoAvG9YKASEq7B53GFdclVsxDSA0Axo0DO1Lp9FSL084MlEuvuNH\nAjtY5KFCMIY58Xs8bK6FJpB9/ydTaWX7y9cv0j+OESw9+t5AE4Im7AYSn9oa\ny4pAGCv98zG9UIn7pwLbOXgzOCL5vNTm5/NdWrysC8Ugo+RO5x29/DPZZ1ch\nrpJ1vXTAUgZ9LDdtHD4jUeg5cLQ+Ta2vFz46N51qj+IDyYpoZzNK7iY7XKfc\no8CiePgtWAfyiIQ/lEsORMWbbahWNuk2nMZADe4f1CLr/xoa1qv/+t5Iyjmc\nXN/s\r\n=AfXC\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"6c1a50ef6adf8852f326e285227923411e60a63b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.9351f167d.0_1580334889348_0.977946448127359","host":"s3://npm-registry-packages"}},"5.0.0-canary.29b89dbc1.0":{"name":"@material/density","version":"5.0.0-canary.29b89dbc1.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.29b89dbc1.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2d1782e84f486447024ab8c01da6496e0782554b","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.29b89dbc1.0.tgz","fileCount":8,"integrity":"sha512-anb+Q2hOYuc6sii1Jf5E0220qGwbZpmLP7U/bseszwQW7UKYRV9e7+UFOAW7BZ/vsRxiA4Gk0z5BTL70FxZKWg==","signatures":[{"sig":"MEUCIQC+Sbcqrkx8hZByMilbc0GxCWYQYdAvGLLstSbB8urKrAIgBBhtdL+3003unJCWYDxMaskCSq7i9wi6d16CV8YrcM4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12778,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMgQnCRA9TVsSAnZWagAAtjsQAIuO4ObzAR9lqekitVLe\nsKDzCuFon2+yno1SxNTcxhucZ1Upco/9NAoLqGHh4qqt0IuKjRKQRO3a8AUa\nmHe5b6EfEWD5XhdEGLflwTMv0GlNV31kxmhwp51nYum+GE0aXdPQyhZcmdDP\ncRWVZNaLzE2cukLarxWT2WspJL2w5CTmVTqaUrS9smOSr2HwJSdRL3gOKrb5\nXmshXuCUzebKnJRrRGWzbmgSbHFq8GUc3TbMdSkyX7t/COLgJ5+DiHDXojKI\nIIXGb2FPe6NK/dWeUNXd6Yub6nNDbolW7eAF2kCD1npWZCLfd6Nc0bF7iPm5\n9P4FSiQPFDa8a6czdy5coIQO2xCqnCTGCqrFIbK6RYK7cZDgxBbq3pIfwKuk\nf1q01/jaHJHjtK+S0uT1WSKQe/RY7k3pX6Or3QEXMZHaOSR+b47n3toB7CgH\n0cMYc0hbQjSDcH6Gqz5evAg3PTcs1q91K8P0bqz/nDgQg8KMTrJZnY4XmNgA\n5qgcP5sTE8JL8Asv7kAA3jrrbST7mpGd151eTvps/bH1pOqqsXTGrVafGkX6\ndw1NIBIP4by2xI/vEH6JY4oOxBO/FLYtsql616va65ifG7ItdefxtkaxceMj\nBW+YBtixhG3wG8FdA5XiQKShFNRqZaYlraGIvTd/YCbC7S9VCruiOeSyJZ+g\nagnK\r\n=nFa4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"662c3c36b5ac6bb47c841a10193f2c717bf9ca86","_npmUser":{"name":"anonymous","email":"prodee@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.16.3","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.29b89dbc1.0_1580336167207_0.5647123229051516","host":"s3://npm-registry-packages"}},"5.0.0-canary.45985457b.0":{"name":"@material/density","version":"5.0.0-canary.45985457b.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.45985457b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a4ed475ca30de969e11e8e08dca7c03a16bdb01f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.45985457b.0.tgz","fileCount":8,"integrity":"sha512-CSLK5gOC4mA5jlTFCrDRS90/F0A1+Mm9JYSWmeRaGU2U2IU14VETQ9By9alQDMkABtcR9orLo0E4g4C98DESRQ==","signatures":[{"sig":"MEUCIQDKp7qlDQfASAgJTBAYQPoQxxlLEcvTWobx7n6VxPB8OAIgTJScT6Q9rK9PSLKLBP+fLDfKFlFg6cPOE3w7T11FoVw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12778,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMhX5CRA9TVsSAnZWagAACQQQAJc/JWYQ0E2Zc9Wzqx7+\nsuWmIFlGO7pAiBzscjgEyzNPRMjzVgMpX7whWBQqkmPnzBl7yi9Y30gpZx3M\n3P02TMxPfFMdNBae25DmVU7euDniEVipRtcZKwk3ByyJLsVwz8UnotmYy4QQ\nyDcP5qumldwOWAwm6WkF76OG241RSckZLFZ2NW9nDLD2D+ymoL4tPzax0PAS\nBUMXRjnDzPhcDs9SnGwh1NAEWXh/T6LOU04pIagYYWrxcde47XDS5gCZCUC0\nXGr96kQDSP+XuwzR5qBJk7lD0qoZEn3B48oASpfZJ0PNgWMFLipDF0r6vXGo\noMUAxxvRzoGU65iaiNkijuP+QggiLxNosiuQj9neYRU5WF58ONIcuG/NYqpe\nxQswaYQ2bkmOaLv2QstAYqA7WMadKrpnlks+9kmZ5urApZslpnB/uzCb8r7Y\neclbvsb1GIRawGnAXHWynaSGcfO3c2p4Bk2YVSCl9oDw+U0XU1MRfl+uUM+9\nJrZXO1/BSVex3IFyiUYoabjYmhivl63Kj+TwCg/a4c8MyYjJTh547EYQtaEh\neRgOLBGHooFT//UBPhuNBRZXEIC9VUd3QJjQdFFobkJ/wgt6eMZqCTrTMuBh\nCMZ+iokLNjGGOizrr7JzpTurjY0Vo/p1/jt6S97Wxub8MOUAEYSdj8t0zAi8\nDfGa\r\n=ayyM\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"bfd13ab23e42c09d1390ffc6d7cf1caf1a237485","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.45985457b.0_1580340729176_0.6080148688855063","host":"s3://npm-registry-packages"}},"5.0.0-canary.a1a0deb3e.0":{"name":"@material/density","version":"5.0.0-canary.a1a0deb3e.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.a1a0deb3e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"63192ee40199d216af8ec28858b16584c73e91ac","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.a1a0deb3e.0.tgz","fileCount":8,"integrity":"sha512-fiveGGId+X0XXdV7FpENhJzRu2GBslybJlMB7cEGJvMC0BXZmqaSJlIrAy8zse69jfPtLuIuSzFLD/hQ8L2y+Q==","signatures":[{"sig":"MEQCIFmnAyVlS0mMmQRIoyMB7uDdcRDhs9YSaqQ/fU3/TGVjAiAg8xjhdhY4XKmHrLI9AByY/KSUpt7XvRJRyR51DQNcxg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12778,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMxQgCRA9TVsSAnZWagAAw6oP/jyJrQxf0IPML/xLxsYY\nAF8sgftmZBb5AqSeiRA6FcUckpwvhz92/l2O5xq/FmTdHJDKbX5qgT61bPOE\n7jt946cFmeW6VBN+jgivVs3RQF76pxbjyStHbvwb8w8Uao7BqDNwM6EpEcbV\nA9D9hS8CLvcKyygEJq+RSALT+MgEqz0E7lUuhn6tIyQcAq2wTrZ/Vu+hwYOu\n+7KajnP4aVVCBOinIAXjIBhaPm5ZG0yIgiJs4AMeq51LMfIRX3ZhlfO6lxo1\nE3GZl8MlZHjSHfVuPK9bl7YP10jypc3bahu571u848efwrHhFMbFfVgSgwal\nNNJ1Wv8elhxbQnetwbJCtfWRa9MsUt5lLt8o1YArPvSLJWPyw5fy95bwfQar\nAUrnNcSiDypmQDo1ET4hbq9xHmz1QN3zMSA97xIz/s83Mj8On7/OrR8O26Mu\nyv+otOlvIHWCXFsmad8qjBJM4Tt8UCM+R2MOEl7DMaeJW9PjAWb7reBbh5Kl\nHCMxr4YSVZcTSwFDVcuYvmmkEC4Hf2S1qf+mnvHGNG3TVP0DCIi6IJXjXOAg\nbZxqNO0xWKexASYb5X0LLwECydX4w75WT8LT24QctyXmEb8hmiTxfWE5Qsh3\naJl2gVB7bvR2eQ2NDw06l/sW4mLQNnwDG2vDjVIsE80F45twqFPAIyDH2g3S\n0bLJ\r\n=nKlZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"515cdf56b0195423f7134244b26cd7999b647d68","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.a1a0deb3e.0_1580405792258_0.32833386756594285","host":"s3://npm-registry-packages"}},"5.0.0-canary.181486643.0":{"name":"@material/density","version":"5.0.0-canary.181486643.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.181486643.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3f3cd83e19171ae7f78357760e4915edd42eec09","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.181486643.0.tgz","fileCount":9,"integrity":"sha512-7oxlya3B6h6UmvohgXb4C/kwPcKXjiZWW4f4BhmKpkS7Jq7tsHRdQF7uWBPrCSRuyDDRpw5/X+O/yluIstqkMg==","signatures":[{"sig":"MEQCIC3XEoNv2FpjDRdyiWAMr2fcCY1t7XWG6yw3Ua9XHcllAiBXxzPsAdfBzH6pqizMD0s7vKvhDTXqMC4spTSAoiJHaA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13052,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeM0K1CRA9TVsSAnZWagAAM/oP/1lOtNbcw3kOWAA7QR6E\nlsphqYgMy/PMJtvUz22yyqsIJzOGmz2bmHmnAK9olMzvJASeEpXFk1ro5ybd\nYrnt1Q+kpk/AJF6msnd3D3CjwAoaOio6fZhzWu/AdWQjgFrhlbPYrHB41GkZ\nVD/lCTUg0s7ZSQE3pJSHpbl1xMMskUbT5nfZXbTjuqzG/Q6HVfbfoXBlRGz2\nd/p32O4RjecCdsyDD6pEKluPn8sMpIYOTUqk+uc4d2udvexaEWs5ticOBxkv\n4yxOZslSrfgFz+RD/mcXYIZREpediyzh+uLbWV933GeGiVYbbHREQVGhHeu7\nwUAKJx3PO1tN+GBLNy2+VIWHtBpJiUbjpnAIbYVkI3BBEc28eRWDrNq/tlEp\nvAw1tTw6qqUah9K55wqHuHWEygZEcb5e4+R2rTgxFUclebXq/obTPEVZtOou\nepja1h1AqzhvDBMdbZYMB+rc0gN1kr9SF7qM3LQw22kEp84OlO0WNGh+fLlu\ntamBHNnVlbdhurufSlPz7YK19hCBAqo/gnyvUIDdcbjjYBwgMhn18/Tkb6nR\nk3owWyfa4tljZSQFTrTbuBThmIYdLa2cZVASQNfk4NWhO3QgNq5wZzTQfehC\nTmtixnnmFufxMBGIqmbDNSmcAfcVHMlzTs8nNDEhISNovfbHv8vXxawtiXeG\nwDWM\r\n=/5qm\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"8f29e2225089ac3fbbbbf9e1a64e9773ce276236","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.181486643.0_1580417716576_0.7635038639535858","host":"s3://npm-registry-packages"}},"5.0.0-canary.3a85313ac.0":{"name":"@material/density","version":"5.0.0-canary.3a85313ac.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.3a85313ac.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"002eedb1f5ff1057b6bd32c189762b26c4209a14","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.3a85313ac.0.tgz","fileCount":9,"integrity":"sha512-qYBNh586pkokOw/3dJFR0AZf0SUtgzltjURP9xeHw2DBtnsDK5Wn4+H/J0ph9na2R8XKDxL3eGDSR8i10lbSaQ==","signatures":[{"sig":"MEYCIQDU1Jnh7Q6XCWl4gj9I2jXHN5ZPLXfwnAhWCUM0Afo7cwIhAIIN7qvweBF3g+V7UECnD7/aKIYW6RDtuqA6+j3KfpM7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13052,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeNFRBCRA9TVsSAnZWagAAT10P/1afQa2/yxE8g8kPWQ3x\nFydsS6+Y8hhyjC/9TBC45O8aSJcBKd1rm9E6fbbUbfZQH6varonQSGrt/Rce\nL8SWo6XU9zqIqH6KbRw0c2O7Kv/bUjnyIBnVM9wu82b/EZ3le+lV5nvAki74\nBM91QwrV7LOygJD8kJ9MdKkvkpfcLQvNzXn4tnTvh84hBaTFpgC+s8ZI/ClO\nNeX4qtuBMICUA0M97AGy23aTFyMQmFWtnahGGw9jJEHWkNX3PUx2ppzuxqRT\nV83fEsuDnqCi+qeuYMj1QqGp4UIofnJB+rCOr/I2ff7Sbz31s7LdzoKOdSr8\n+mnmx87OVQjAuI9A5wChpz7mbGNG4reVnCa1c6IP4F4JOX3Do09MugAozCb7\nWPkX69uhEOdQsLvJVs+Zf5cLrST7McbwTomSenMqWsVe+HY5TEdug3eqgqPk\nw3NX0qyEaap0DjTNj7bZk9jqN0Ww4I52pN96X+tcN6YmHEru+myKHPW2JfKv\nrWZOhd6Ihoik1z+iE/aphLzw4/5WuEFlMK4SNFEeD5xj/3jVvcV3Yto+yHGO\nNkQFy47zShqP94ZGNveXYyzDr50j6bywLXiisjBk9rT/W2E/t+T7uXIc+dyP\nLzILZgXX9DHkGNygtJHbgPYVBwfYcg/KbneAeol9JuiG7VcpAjvfJwm43Bb2\nYms8\r\n=elkw\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"a37832202a98646a817d62c20ce70cd38f089d31","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.3a85313ac.0_1580487744839_0.6919442410184555","host":"s3://npm-registry-packages"}},"5.0.0-canary.b6c7f624b.0":{"name":"@material/density","version":"5.0.0-canary.b6c7f624b.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.b6c7f624b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c361aee06ac7c03d78b1c92794f0dd133c7835ae","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.b6c7f624b.0.tgz","fileCount":9,"integrity":"sha512-uMQuub9Ce0+BcU3ZC1+qSnp3rbhOMyqXrvw9OI5bKJKXTV/vxIweHJQj4u12TSeo5uwEtBZUaZm/QyJiuvFfyg==","signatures":[{"sig":"MEUCIQDucJBgJUT9WVft8p/BEs7CdyPWO2ZWN79cr5my+ge6xAIgHxE3lT1w2mG19XTNVcN5A4WEGk9FVsw3AWUF5JvAAqM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13052,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeNF2cCRA9TVsSAnZWagAAf+4P/3lRuv7qzMWg5k9A8Htr\ncHLUh8LyqmBzd1iA+WFsmT16NQgfxBeos/LBVKjx8hUodw2OUzG2Wjp1T5fe\nZkA9Zh5gD3Z7m3yuN6EXmsS3jn2qNLuP8etD4yx0hn7rHATwUQDNedXzlhAU\navifEqsQ52Utkzk9dLRLdAGr2Qxqh+jXkZa2fe4xIqqEEdK0XPkPpqMyXqcV\nFCDKDTS+X8jnZqYwZgtleGu80EkZE0P3u6mDh46UjaAJUu9OFSzTgA6q6oh4\nIr9bj/V+0Z/BXGxXwNnCf4Y5h8bYkzWfDJgcqUSZMvBYONyA6RQj5rcFcGKM\n8VoJeNPOkWJRIiK+ibV/XUbEyJmNyhPjuO+lyv3CVyPsfipWfSV9HbGn62te\nx2kcx0Q5eR7IXoY9/VDtaPPc/D+bdiMLv6u0zY4bti6axrTxFL5oA0qIY+rx\n18pGTzlViNg17G8ufXzk+L8c5csSgSi6De1ZfJXXJPbm/01TUBIEIHomyd8s\njUbpIP972C/ruKq/JhIHB5buAU1CjoJjw9k1QPwBfkoU6A3TWZmkBSvgXcUy\nK60ucmvDFifJcMsxwZCVSdVX4bTz0T0M7bsRiW7DPjonhIFVDazRaKgOtYSZ\nRBIbrZJN51rgCkHitRWa43I0DzVZHcR4QyRq2yQ+ffuFVSKSUr5TLMgM8XlH\nESiu\r\n=CsBi\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"eb607bfa0326630c63037143dc919ac8ec5c3636","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.b6c7f624b.0_1580490139940_0.5672642839824797","host":"s3://npm-registry-packages"}},"5.0.0-canary.b3f70ebde.0":{"name":"@material/density","version":"5.0.0-canary.b3f70ebde.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.b3f70ebde.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6b83b0f5607219667d10eda16201a32acf394f5c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.b3f70ebde.0.tgz","fileCount":9,"integrity":"sha512-R+bHQVeqRdUXgkXFhC1ipWF98BqUUgQILDoi5Ll9IQPfK/fATOKeUs/pTUNeH8O+J52s+p7jCzNbEEGzob6Tlg==","signatures":[{"sig":"MEUCIGQ3fp91CYhHclpcWxCNzPUMHcByMdu2R7gEEH8xT8ZjAiEArmkrPp36FrrXwrYKVi5V5qRYsY+ojotYS1H7SPOGT68=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13052,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeNIlyCRA9TVsSAnZWagAA7tYP/0odCIvErLoS8E2jsu6W\nE608UTaVyvnOTAB8RKcwZZGr3vjl2rO8vzM+9uBtstDt2Qb1ncuKbQKhfczW\nhICkRGBr6STIR9CgId7beCJpebYzAwI5ng0h7zNvmJPVFXvOs7rPMN81tyEs\nvVWiRZRu8z55B/K0xaKMP7jP68hWRPwsuiunJeFUFlI7Img99WLu+Kx506lg\n6W7VT91Kdo0paSLpo0RZ4O76Ww1TeMUbM34ahjN0Ia9w52jGQeZR4ydxodmN\nDSjucCVKAiprZ77DVq10G/7RSAKGwxmBn9yr63/v3fRVYl+fJLCdF6UUCazW\nM2nk+Ec7WKDJplv/EfCmGXR78zNSEP70dUx8neBiVs4l6znkaAtQEZorv8iQ\nVpS9inh+mmhITEe0eRlc62Dc2SgWTEW7KxUeVJ63piXGrWvt1VW6xYdoBrBT\nGrp1OlTUDsLJeVRB5D9CER85snIT/NqUB+UYM8NFU5Tp4ecEACgPXr2Q0Pc2\n5EjIlKVI3mSPy2Lz1cn4ePTfjaUq56yCtd9LUtjORIKelQMVG5WtB7/qebMD\nwKt7/AzzRp+InTJ4DpslZJmEDgAtBrGK10DVBne32+Mf9ugcH6HHiXmLiNGw\nvMceVQFcG+vYWNB1FCWoa9r5SqGEA2A7b++BWsDyrKU2I7UuJOmm/BLM0jIr\njm+p\r\n=kCv3\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"00a0473670032b0ea60db83e614385e1e3166dc8","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.b3f70ebde.0_1580501361569_0.34319343472060004","host":"s3://npm-registry-packages"}},"5.0.0-canary.3e782d8f8.0":{"name":"@material/density","version":"5.0.0-canary.3e782d8f8.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.3e782d8f8.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fa94518494e705121941624d38558ed1273781c7","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.3e782d8f8.0.tgz","fileCount":9,"integrity":"sha512-huLvm45YI7Uei3JivhHiOU2Lk9qGNMMpbic+PFtu/fwDEFk8HpRMC3/UlvKDeVXYGVHeMDYlrn/thfcvdFfJhA==","signatures":[{"sig":"MEUCIQDITKHTIK7cPZjYY8YoqfGqqZlC00rg+MaSi5/Q3DFUpAIgVKk62C3+CZGVyeXDUR9I0U/L5ojmiLIBNhx48Jq1zPE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13052,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeNiHoCRA9TVsSAnZWagAARDgP/0YdUeaipA4G87YsfnYi\nWYxXf6BnNwpIP36JQa5nIIabet39i5dR8V/vveKk1PfbllITxcUN2fXdHAh9\n3/peT7chOEP1+ns6F4PdXRunAj1p35vAa11EwWh2mlI8/axucLQO91Y1pgiU\nn2eH/jdvUeV1C+4qRbN/spi1fFASaMqrQMGX2p6voibngvs8RCHbAPDd7UbD\n3DDv+uXO0/bnckkiGTy4GOpYVms1HECPEDApYFuZ3UmKn5uMg3s0OdVGKTzM\nHDLJFXk2DhsrLPsnJeeQd/5EEoCHXbyqlCrFt7Slwt+eBahRgb1poICsk0kh\nSuS/QrHMEjIuNWZSNJZ9YdSLl94scRtScKpLi9w306QlUZXcQ3XQSPZ5d9fq\nqnyCZDbsDWY+2cKxNYKsOYFP1tM/4swzEXsQ0h/Ya3GX9j3/fvb5fA6f1yDp\nUQ5TwKTDgwBYgxNUkrJbmm/UEW8zeb/j+6E970g0PY8TSa+KffJGMGc1HOfU\nuZDiJGxgXgjyjePt7b97OhODE3BqlDavRv8yEFK1XVvVoM4XfRcWykdh98B9\nlAFdWul3RmOZuszhhn4zdrebF5hbZvXC4+TNVZHDVbtC3++AOAG37DiFHxPn\n9bmBqrHBfyevcawy7TahkLXMRa9mJtoSVnOUrZ7tiW7oAyV2rcv92bphvkB8\ny+B/\r\n=wiWk\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"8aae1fd4299832f77f4d1d51398e5b28ed5af5a1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.3e782d8f8.0_1580605927751_0.977477744566583","host":"s3://npm-registry-packages"}},"5.0.0-canary.535398572.0":{"name":"@material/density","version":"5.0.0-canary.535398572.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.535398572.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"81f8fae816c1b6c5b8b9f789f818b7587b9f639e","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.535398572.0.tgz","fileCount":9,"integrity":"sha512-MHG8XhULwzmp8ypBWiovFg9o6HSVFawrbpSXi/wrRkezvtkiIJDo94b4OZuy5A3CZEpaWrB15gdtB+7BUnaJWA==","signatures":[{"sig":"MEUCIHyLiWPrULPBZE3RiyjSQldgoCxq1T16L291PmwmxnxLAiEAnAdJb0A8xHEhENyOUac94/CdyIk5FyzuRUNk8/JMZG4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13052,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeOGIKCRA9TVsSAnZWagAAJc4P/jPxh4prsRq2eEVb7fOl\nNpI7v/AzrIsQ7oG7gzWQYWakQiTePSCo1MhTd1nwAHvQ+ClOEYOKNOTJLRcX\ny6nJwd2tf5jlhuUx170vg9208W+wJWmeIMTjbZeybkX47gcuWk02Aidccuby\n6TqRvnzsMBss9KohosBs+5zW2Imi43ghY2oNNIug+0cFhRx0OjiYS5G68Pim\n7SOVoLUGQrpFyodZxwtItM1yUzk5TxJkOgX3wMh6u9W6GEJzcSlpa7zOYOTr\nIsXOhfzm/QLrCYm1jOT5WM/yTt2RXkraOBUvt1tNrtnIEQ1z/NJupXz/Xnwm\n2kxs8kqrWuxs1eJR3y8FcSyBIvhHsbICqBH0YpS71Ijy8doZREyY3Q4HEGbU\nJ9rznFTUfB4sbnjXD6OTFvMrwIqaqhkWrpvhByqyZOZd41aJeygzfo6WgS7s\nqwl7zVd5+Ijd24K6msS1Z05afCsZyW3rBR7h1qPIhgvePM4ucEoYjRXSfgIq\ntqnQIM+1KN2M/XVbgSjI6nkZ/9t/fG0HvDbYAgS/HNENUgWi+kSuMUI7NSHp\nX7PZnO2iKLcpOzyiFoBHUYC+aVgWQOlZgGb+rqoDdJYSmC3HTj9MqFJZf23l\n429XbhBEvUJLlGXbn1hR5aeZZBznAg9PcZMw5qkS3pkuBuqEurw4jHMBM/pj\n4fCs\r\n=rUDu\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"7f68038e23db60e7b4c44c1b17a6a82329805553","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.535398572.0_1580753418520_0.8129217400719819","host":"s3://npm-registry-packages"}},"5.0.0-canary.5ff33802c.0":{"name":"@material/density","version":"5.0.0-canary.5ff33802c.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.5ff33802c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3dcca6e8dd521bf3fbd014b095c8a217f2dc1c79","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.5ff33802c.0.tgz","fileCount":9,"integrity":"sha512-PKCv7Im/qbfI9e3JKJM0tGTecHL2mHJGkLFkN2WoZW3zs5ifgNa+fRdYTwivcq9R8XTbjsZtpXgokKS3MOQhTg==","signatures":[{"sig":"MEYCIQDmO9c6yVDygV+a/G3ZPeiZTH5BfoAm5yan4DGA8kTHEAIhAKJpvFJjmDbVk6aA4wrebi5C6CfkxpVVFgJ9e+eb3T4V","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13052,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeObHbCRA9TVsSAnZWagAAXyMQAJ4m5ylWb1y1cYV/+bf6\nhHAs7zBRnU1MylzEYQZgc/DRYz/nxv2kkFjT7unRIzluEDJZJOA5aILJ2YXb\nIakjHiaO9Bxl3HulUbz8bTnuTHLr8Se0DZUCiBOAPKjvvOJCTgKsaX1aBP+G\nEFJ+zUiL71vVpn2jbMQZ3Ms8SgpOsauTixzP2kpAzBZMWsIu4/QX9TnbJ0xh\nh0EsoZeePJYCDSGDtlRnZIEqfWCO6CoH1h7hKnDXtR6wK4EX1dZD4m63M6lX\nsGODESwkV+40uy2sJKSN+GGx0Ro3pcCKRJ/sL4i+IkUNaKXnqE6mM7P5D+qy\nD6cAa9ZRjoPXoA3hddPVr5CMgB/UcqDDcVTGyLM5HkHeeGKmMNyn8TIqr91L\nD7gFMzxKBWCrt4uYmNe64mx0iYpkUa9UoeobP6Kg0K8aTC0IAx+i1bSgJIVq\nyX38BShVD71A//iMfXJEJ2ADmD1NlGThk9dYnHKdrUYF50LGIKtKMmY18jwN\n//BebeTw/T51JjxJ51EqyUVx2SIxLA/vWA3xz9SHhIqcbuIrjlJRm39UKtuv\nr6pAv5YLeZ0HhzsyLKSbUVDn0KdBvPPr5S1g6FmBSP/bgE8F8gjnvlZdWlWR\nh8AJr+uZhq2rk3d2DUTT+WQQBKJ4Vybw5auQarFJquRc9nVvT5KRRmd5fx77\nBS9H\r\n=3AMF\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"61246014f77c40c0d6594f32e40f4ce98d8f7c8a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.5ff33802c.0_1580839386612_0.6235854816038127","host":"s3://npm-registry-packages"}},"5.0.0-canary.1eb29491c.0":{"name":"@material/density","version":"5.0.0-canary.1eb29491c.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.1eb29491c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"af3ad1544e773bce3e6b8228ffd16ed1bcebe9d8","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.1eb29491c.0.tgz","fileCount":9,"integrity":"sha512-NUYPZkMaSVYNvHRVF7vmi9maekUq1lbUs6oKX+DUEVRR0IDsQ7UoPMV69+5jObEv8dlGWklvlYJA4Y6PicQ0MA==","signatures":[{"sig":"MEUCIQDuQzy1D6gjHZ6k2CtqrP3AVozWeJaey4zN/h//GPDw8wIgSij9Zy05gRRf4nZCXMco3+zoLZKtaTIvpksYkN+o3hA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13052,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeOds/CRA9TVsSAnZWagAAmTIP/2Ll10jmJ/O1aQKugEbL\nnIFBYySZowciMbbNKUPk2whSEX9ulEUuma/XdUqOAqsxa2CnNlvmGH0+CQT2\nOP0KpYT5Eg+9KHplshX7VnXygRHdOFqIVAMytTB8Os29JDwFwuyBoxggdlhl\nBqLThDfuiOxbVJGwPBLIo6nVGnfSL2tpFvp+6FmNj8JIE1XTeuGeUGlyEp2V\noMaKN9u4oYblNf+i27vlnnHFxquYvvRdOibBMqK1zqZJyZCMlMYHdQmvh8DC\n6EX+w6MsOIvSDT/zqkA849AQ0AQvs1YrbNMZSLxhSRzrMj8lxtHXaCK8P/VS\n1nFvYkkHc76a1gnkdYX2jZOoGrMcD94piH2ZTT8y0feTgWX3hh2HjwVI6oaM\neN2tEX6KCPQVyGYENUQsm0c5Ox0kvZPvevmjf40ibbNsGApT5QVUqvODQQNe\nT0H1zSrJNku1zjsRqFLx1EMiWbIrrNUUUVRLrx1g8ZbET0vC83m9LPDu2hxk\nkl9DJtyaYTG8OnP5a6U+x8e/DCfo5gfmiN1V83R4dG2aDfgyKbYRPkZuEGaQ\nURamXbujZtQ/cn6+M11GI+uU5LPqxjhasnByqVdY3PBYheQLu+CGHCpU+O6a\n/6MtUXrFFGIndQoWeXumyoHa7yWV2WVvfI40GCQ50GjalCn0y8MSKlS96W/p\n71We\r\n=MldT\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"689b043c66790b1c63b5d2037a1ed800248443d1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.1eb29491c.0_1580849982736_0.4817975170559661","host":"s3://npm-registry-packages"}},"5.0.0-canary.4c7154b26.0":{"name":"@material/density","version":"5.0.0-canary.4c7154b26.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.4c7154b26.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e3052d76f5ccfd8e6833344f8dd401bb1cb97454","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.4c7154b26.0.tgz","fileCount":9,"integrity":"sha512-yHQYB4ebnCbsxp6pJrAQM+bhw1FhEA3IbeJ+2S5oPiNaZadW6AvmOCIIClJSZEms61zGhnGinP2GitsANH5V8Q==","signatures":[{"sig":"MEUCIFAojYx29b8KE7qkf1qAHA+fayGzSdIhgTUkv1vQRKIZAiEA6+9WPvES6f+n+Wy2LDlCUOHGsk+gePPlX4+hA+ZR2No=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13052,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeOub0CRA9TVsSAnZWagAA2XAP/26ydwa/sxh9UeoBAe82\nS5ivwVKQwfwmNwvBX6NotLMiMFMix3/5S7F4VfGGvzxDZFbjvdlNSWQlETEY\n7nqoSmgYo7iAFOYNE5dUcKkaxvI/kBCed3vRaGe4WxBEoINdIRXWplO23fqH\nLiJM8m2NrlRt8I8T6TrSZnHBt222ZG5M9bsx9v6e+s931PS61hqjVTrqx+Jd\nJjYw5ilhXu1E0U2sTQpboBvY0ZwnLKr500n14PIyZ2xMUkMhAPqT0R3zz6nx\nIGYvh5HgtRNs3Ygwe4diy9PTgLmrL3hLYSnXV1g9axSh+irlKd5R8iMqDIYn\nk1rLZrq8KZd3yDPFJdZH6hNhEJH2r8YLXRBtpGz2IH3RiRCtpDZ6apMwyZ1Q\ndkVo81Gc+OFumWX09D1GK3PNCQiXx+jYBn2cN+zZjCsCL8fNnGSA+asvicBS\noNdr46ala/CFPFk9gIat3zXn3AiRekYVcEIXU4VNzXq1UZhEYja0ETdjfOuL\nU0g/LpjVLy5zomgenpv5eZjMNWqZ7gP2/P88+JlZvlCKG2LiQuzvwblPbufg\nkAOSrgc3SftNKgOol0/GizF/JpeSv9PKSnmavpHEd5Yc7c8RIAt1a4jM8dKG\ni3hHUFhn1We2KcMRkWOyNSk140FVItRwTDl2ylhK7ha6JpH9qQD+ZRxlyIC/\nvuv4\r\n=awd0\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"e15f799c180f6eb07455eb8d644b93db93df5402","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.4c7154b26.0_1580918516020_0.15088579587486195","host":"s3://npm-registry-packages"}},"5.0.0-canary.ab5f49a2c.0":{"name":"@material/density","version":"5.0.0-canary.ab5f49a2c.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.ab5f49a2c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"44455f8225f788994c79bda19397fda2783aa860","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.ab5f49a2c.0.tgz","fileCount":9,"integrity":"sha512-p126hVe32xACDoaR5ySoUZ0WmD1133Z1r3+zIrJxfhwyIlHmhWaItxb4jletSnsTrpSLSJelCt71Osib9DLt3g==","signatures":[{"sig":"MEYCIQDAAIH25a8IF8hGlTz/1a4tIIN0yZasrYeOCiPbzGh+8gIhAM36kaIg/9/7c3Qaf9g0/1pGjBqbC8ntCkBJg5w+6KNl","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13052,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeO1CJCRA9TVsSAnZWagAAKvAP/2aQaU2sDe7IOzJwCd7O\nQLmLQYCzJPE2eIL3lLLseiiiG66IRK+XTaMgcFHMhSTIvGrSM20oXVu4qjlX\n8E3jcIqTo4+Ftoim+aCRxSzaxKBdgp2VNlh79cHRLX8goh6OzCDzYozSUGIL\np/Rskyn487qx4ktGfrbk2MpcqII+KWUfRhoi19jbTmd/MwemphaTrYJJt1X8\nIa2hiajQLzaq5wnI9B0/8+ZY+/7csgSNNNF7JmD6FVyxFSfYcXjjySDnG+JD\nICJ7HlTPl/HNRblP2Xwe79yoRbVF61nJQSXeB74gEsV35KFa/iQfu0/z4Rkc\nTrvKKOpbNv2ltWFLurzj+kcDgsrFqsAEep3pZtd4RBUJGNpaFAfOPQs7QoMo\ndPtZ48ER7/XP0l15BDTaZUoC96H4bpfl+H8A4TZAQliH9cTXoaii61pH+vg6\nOBi1KOxiS66SFthxI6t9PPn/6C7Ju+aQc7NJR3eGFOgRMZiA6HTjwAZ0kKKK\nqUf114W89KCmCODmrJ90EEsMtivTga3fjgnfvcp+ZiZsEjMCIjWpwuDdyJpY\nTF+BBPked2WxX/ON+KebmeUuTuMg2wLSzQ8T8AqQHBb2JE7QHOFOADxwZurq\nYMPlnaZytVg9QoHQ+bRH8RKnJOm/kZemxVDIvpqE22ZdubvjZGOKN4dtZyz7\no/Mi\r\n=54sm\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"9e2d33465e4a55862766486d77f187c0bd37883c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.ab5f49a2c.0_1580945545501_0.8168999577428582","host":"s3://npm-registry-packages"}},"5.0.0-canary.c541ebe15.0":{"name":"@material/density","version":"5.0.0-canary.c541ebe15.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.c541ebe15.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8aee8eab8cf01085bf11046a384cd7273e014fc3","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.c541ebe15.0.tgz","fileCount":9,"integrity":"sha512-km5VLsuzokqyHFNH2GUwjjKB75ZfO8a4LdYX4kkZlXPVmvbUrODIuASDQz/NMf4NeY5Mw0xncx9I6/S1fqOBkA==","signatures":[{"sig":"MEUCIQDXlG/TlPxd9UoaPnsGcnBQuXYMjaXBlQ2Md6q5/l3oLwIgbEwfJkjpoa2wj0ByHKsxlfgxet8k6BXM1rfCr9p8JBM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13052,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJePJM1CRA9TVsSAnZWagAAFX0P/25z3kYbIH+mVB0OuptL\nLHW4LptneBXSwId6MqDVnR7LxKmv6MnQb6ucF8P4oOceyRwtbOvnc7I6WSWc\nJ2Fg0vEe2qz2dlcVPIJFArdxnhKPfc+4ytJIftCwLqXP/QDLV2TPT5Tv1vjw\ngempeR5CsDwlKKARxpof9PHU+tMInX8mpvK+/r5TxyN0o9gqliHHPnpyVlTY\nx9qLNTWEpocEFPS9q54fFyTAJ0EVmq8NTpZoHy1uqpyEeOMH9hwA/0sioQOe\nq13Jj0Kv/9nDhoyhpA4RQrGwcf6ajNUbgqXYqHJMFEbBYg9fJzK08E2XgWTX\nHQiQ3gS2YyqXU98ucyzZS/O1nB21e0zShSFuTlT6GSCEGcgy43p/AeswXnjs\nMZ+fcvs6+en5NdzdJW734THXTs+TgA/X2tIFmfrx9lM4heLWTKMQXdgV4KQI\nyI6w4js98WiSSoB6LN7vc7m4iv7AgS39hCJIAWsgCMMZ4Mf/Nfojzgz0SEID\n1g3KJjs5NKWq3Q8/yMA+QCyGPYUKYq1Qgb0awOdt/tIkLTakZ2geA9w0YLZV\nB437Ck0GWJIjc63eMbTx2o6hmD9dHgotMZLR1TH1Ho8dYVukeJaT/UMeN/b/\nRitgc02rIQELLLQrxBHSi7BBGceYe+kt//WHGRTtYkgjFPcD1Y9ZqZyXyYEy\nUQoO\r\n=xYVz\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@import \"@material/button/mixins\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include mdc-button-density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n$height: $mdc-button-height + $mdc-density-interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `mdc-tab-bar-density()`: Density mixin for standard tab bar.\n  * `mdc-tab-bar-stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$mdc-density-interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$mdc-density-minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$mdc-density-maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$mdc-density-supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`mdc-density-prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"87d5a39f72f6a882a8412df86762c91328c6d985","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.c541ebe15.0_1581028149198_0.7102172043482744","host":"s3://npm-registry-packages"}},"5.0.0-canary.98f7faa05.0":{"name":"@material/density","version":"5.0.0-canary.98f7faa05.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.98f7faa05.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"753c5d78897889683d112b1cb561e60b5d2430b7","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.98f7faa05.0.tgz","fileCount":9,"integrity":"sha512-Mm+YjyJ5XUyUy9YMoOttJsIKpK91ILaFnz3guYlU3mBgRn2xQXn96mty5gZ7KQJAUyrBJ2925mIgRwLFZqqQ0Q==","signatures":[{"sig":"MEYCIQCob36wyBBHFN+ifQPiLb3kWiE3soDOhjvk+KEmP32kJwIhAJKn+yQT6CuzSF/TvduRQ7fyFWJGy47OquINvt/t2F+G","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13014,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJePbiACRA9TVsSAnZWagAAdJgP/2/QfOhfpApQiXmFuMyx\nHywwSSCEoMQERKzefte8Xk4C8Zk6LIySYzzm1mpfB+0afsxXGKERsDAZRLOo\nxZDuzZ+JCqdVWTyXMiYshvH7ULlJ+53YPW1lNU6nNaQt41Gfr3h8dqvSYn+B\nmkrNHglCjY3C4JygO6sOl5RZe3ClEMvQoWN/bSYhNqwORzH7zy+T5Y0Pafug\nld42djq860u2azedqQA5Ix5WNHuY78OzZ1QOpRsvfFN4V5lQIdcdkC4mtukv\nPcmT/s0pm6baua04w3KNvs+gQaR/ZjKY74USvRXoGyFhPGLkY0Mu1MeOQU7W\npyDau8epLEUyR2O83vhpyR4Hrn2d/zjqI31/1bAipgFdceBycfLZfIT48uma\nFQfylHZm7KGVENTzTSmZI4qIxzBN0fjeiiLKZf6e+oWex5/zdEg3ho1o3M+I\n9Eoi0Aos2o+6TNTlO4eftF0gzZ/T1PMEu3UcyAt2ffe8hMkrDN82Um/Gr6ko\nmxYSU7EWHrlRjxKSuXjzHqHH93C2Sfz3yCEF/ClbArgvV3JGe/goA32zwPw8\nC2Tr6Dy67WdSUek530sWBj+Y0yqZkUXoZw4lQlx4LGmnsz3i00ZKOvaXk0nf\ny+nI7YtcFI7O63J6JlK/+WGVtALPSPbbfvkT4aMUVKyZSlomNp088LzjcJwq\nyNWE\r\n=5VRc\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"698f18ec0e8c9dcdd38beb5ab6b4cfa6218fb288","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.98f7faa05.0_1581103232294_0.7642156019863502","host":"s3://npm-registry-packages"}},"5.0.0-canary.b4727e43a.0":{"name":"@material/density","version":"5.0.0-canary.b4727e43a.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.b4727e43a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4f441e4ef684f056fd02ba5ac87badfdf7ea389e","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.b4727e43a.0.tgz","fileCount":9,"integrity":"sha512-WW2fO5EmOqVJm7Nmp3W1FR2FTTXWRVuJX0qRxR5YJQ9cNp9mmJYHL8fwyIEpw7QSXTAK5h9HPsd2n5UHmReVDA==","signatures":[{"sig":"MEYCIQDzVeVzaX7yEpixS/sGv21PMeyRziCNyXTJ8kBgjqeL2wIhANYkX+pmmwC2XnJHi38CIQVZ7KPedvkR+cQgpCbK9ZAC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13014,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJePcCDCRA9TVsSAnZWagAAySEP/0rjdUuQfR4cp8wIirYE\n60uISXVZkrC2DxGaoBH5oggmYZc8NzaU96p+KtMCrIqHqZESTv6kw53lBA8u\nB1rg7ZfAe4WZEA1+1JZBjxZ9GSZZOjGreQz80dmMSpwXLNZZyKyfkUjrQ240\nMUC/THeElUwuvsiJ2aeTzZvZ05Snsejsppldi+OtfiYsfu8QmR477MmvHxlC\naHZekefXHoucSCmW/EfnNjodotd1lbZNFW+v/KMfJtL6+9IfxHPCNjIabgBB\nMs3AzezLlBGpXgL7MnHuay77fu7m25ZDGF84RwoOZo4nktg0AY9cSdb7qOyR\n7RhkSBMPi0ih0ZRolnHWYBDiBBpoDlBe02i8hVMKhOyD0l4lgsUXgSECIohm\n3yeOu2G9hBmJmJyX6S2coubT7cMyyjurSFCuedlte45wJv4/XgpnfS90Kp3X\nUYp1Bjy5zIivWEpL6bz1SeuaVQShjUa7hp5upp4E3IFjY5+y/+IymuK4QHnF\nkeZDAA06+GMhBa2yIYWFiCeieS84mQO2gyfRtig6uTXnU8sckR/hfxVKRDDZ\nEhMvlMoXnwYMptkNpkhJE7vqUXy19FAEMErpLVXCYdC9IuJoxRbfbQY5G+5S\nve6OH1Y5P/W8oBiQvFe6dp7QZezpdLd1LwcSXiu7nlyj57ZqQ4Ug8LsxoyT5\n7nic\r\n=06mZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"140a0d7a10f30d8ce4b10dfbe40bc63136e206bc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.b4727e43a.0_1581105282999_0.34340399304382574","host":"s3://npm-registry-packages"}},"5.0.0-canary.91d9d5a65.0":{"name":"@material/density","version":"5.0.0-canary.91d9d5a65.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.91d9d5a65.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"00b7a464b61274d8aa8c021f063e9752255de792","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.91d9d5a65.0.tgz","fileCount":9,"integrity":"sha512-tIMZwU3liW5BHPQIPAGWTE1Wpq/KlPtGf4dw57GcCM+JKJsIPD6tsV0Q17QvjCFHeT7+frhasSFntqSQeF5Tsg==","signatures":[{"sig":"MEUCIFv8qA7v3vU+wBkWLpF0EVc4xVCYBE7BSLCAeTV2tFYuAiEA5uwMwg7NywQKXw1xcriYY0jWJo5w4eMeLQwynO2cStI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13014,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJePeuKCRA9TVsSAnZWagAAbikP/j590M5Orhcz44nDn6oO\nkdXYJXqfg/e27VX8iPjR7JQMj2pWuCqCeS0gHWi3vRhS4kx3I0N1Xtk4JRD5\nxLYfBvRKk/n/XxFUQ+E49OuI+UuXKvl6Om/MWadQV17D+Kr35wQcRSx+/U8S\nQj+exDzio7BExLN4tcf786gzHDOePlLNtvnSriO4680jzH1FjFVDFU8JNLdr\nf2G2VYyLUoY6iuvpQ/vZhXx1MRxSp8/60nXgtmjbOyXb/94MylMJI6R0an/X\nIyu55EfyxGj7aM5YZc+LshMrR629jciLi1VJLP/anAWpG4BC3Y+n9Jq0yFNN\n2zCN/9RnnOZkNU/mwaC4Kv2I1yvFxADwV1C0pyTESB+1z855VovJuIcsIhgN\nbUTUW9UTJtU/rwg6ZBlWTooWIO4HvLaeE5oGaOEB7UWPusvcL0ugfsIlG/fs\nDODawSqmuJHUjjS1u3zLTK1u0PJfAcGP6tYrlF3pgHt1DJqSt5G8DM7RQ+8H\nK9BJRnjmE9xJGJfVk7j9bDhHg3eRYg0A53v8Iue7/SH2LMysmlJjFAf7J19S\n+8/JUt7Iwyf31/KuQyAp7OBrnRg2sAHTfmBUmqKhYY+YXonoapwN1mCc8VzA\nCly1xjTNXtJhLFrtyLyh+h5VyhqZJ1LU3DXjGYa3PdmREUR/xK2kXoYEBl58\nB1A7\r\n=mkKx\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"f98276c6136d4bd38889e0b4d6354081a3ca941c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.91d9d5a65.0_1581116297852_0.08964712419510734","host":"s3://npm-registry-packages"}},"5.0.0-canary.d5c006ed1.0":{"name":"@material/density","version":"5.0.0-canary.d5c006ed1.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.d5c006ed1.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ef7f11f02cacd584440060d60fe1ccc9e71a326f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.d5c006ed1.0.tgz","fileCount":9,"integrity":"sha512-giyP7hWP3RXP7foFcn7YylazAKN9rLI0WU7FvFdvz2t8gP8ZL3+uar+axLh+Ndauly07Mn7H55bbtKeFIYSaaQ==","signatures":[{"sig":"MEUCIEpDNUfHxXUYTsRqkJgmaNCAmGP9XARW4GvQK0IRdnrfAiEApikXpD/bvpyAI63toxIVPv+RR9ms4A9ppoLd+S9Pb5k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13014,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQYk5CRA9TVsSAnZWagAArC0P/3V81F3Ey0+Y2ko0O6xJ\nzuFye5mpqM0LpV//RmwpKFujnGFZCmWj9nuCqhXO1Wd3kW+EikyA/yHwGwtZ\nzaFPy+mKS5Vx9dU8QWxSt0bCB5o0px+/4KdHCjWQzimUSvKB6NG0nyK1eSur\nbQxc09OSh+G2k8FTncxVYhjkSI3miI0EUzbk8IEYmg20xJ6JVgDGLNKCc7QO\nVpJpEomii/Gke3yzOUP9Ni0t72lNoUM7ucHW6pUHPZO2aOemdnGgSiPQFH9k\ngYTp8s634wjlfvcijhmsA6hgckYp20o8iX170avfJOL93Sv4EU+Bp4+kp1/5\ncvyC+JloMg4bEGYxOMj/ztyPQmQ3gqF38dL29O5Xtig27jMCk5Q+ripjwdAP\nkAvBUyyl5tJMKNV7OmPXJMkDKsbfzfMQM+455BwRntZCDG5DB4+prCY/VAyg\nA/dOAEdF6WeCgXxXT0d6p8fpovewUpxni3ddf6z+I3KhIqwV/2vLFEbTlzfO\nUETDBUrEejYKJ1gHFNu+VzCBNQ51bIoDPL+HEw0aWptEAZlI4DmgKMbhELrX\n39obK7/fE2ebfPhQULpBhdA1X4BKJXwVZlo3n4AOzXNXzRMEBHwQLvo8/iLO\nWMFis/jJS1kVMXWisFYnAdG+C+LFUDDP62TpbRWyADb0r+A9dc8my/TG/CT3\nS90P\r\n=T9xY\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"fe50932259fd2af2b34c60968682a0b94f7fed66","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.d5c006ed1.0_1581353272560_0.9652548752917616","host":"s3://npm-registry-packages"}},"5.0.0-canary.559f1a570.0":{"name":"@material/density","version":"5.0.0-canary.559f1a570.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.559f1a570.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cece44c594bd1977f2ad93bc04efd0b120030b24","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.559f1a570.0.tgz","fileCount":9,"integrity":"sha512-yoVV5CioFp6WTSLx42ZRgIuPMSWwYUW+Nt0FxqdnkHqbeJFmZY33QBlpuTJA4/1Pm8kSl5ZPPO3UmvkE2Qgqdw==","signatures":[{"sig":"MEQCIAOQ3xicitft2DJhhyZb2Zrr3MDhAV+qi17uLP5RWunwAiB7qovf6G0RRugTesI/1EFQl8e9InaNGL3lkmrt/7204Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13014,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQZGuCRA9TVsSAnZWagAAbbIP/RMhJ58t7ksO1EIkc8Ex\nRP5afiJgHH/Wq2xZuRncErx4DQY5flRL6ThgrXGxtHafuDueB7Otqq6wPm4J\nlNroTpc8GRdwwcB1uoHkevek59ER057Bvg8vd0AHZC4UPXqXrxK9uVHGJMr+\neKXK7IRFY3W3xoBFRmF7MFiyGoxSFjEa1dqXnYtQiEdcwkU2fNq8dC93Pxjk\n+yZBva+fIL3rdZdAtwKbGKz3vdcXKPWyerpnDOCxJWtD7e9HFI0iLr9lVcrB\nPw3MPoLkFGHKiIRq6WWRXEMUfErzf2+tfNw1DXb/KvvfKzGcHYA+eAKuybAV\nUU3r/eEieqGYFszhWVKsO0Jkrc5JyZ/2Z3U3J8NB5z9B9HGMzOtnMW3hpHFQ\nX8IpkZHOxqgMC5kdUVmzpptp8A5xEfUXrmqzfu3goaFJA4NTIL4cWYixLH3B\nB4Qmwi0ZNL9/bXGJy5d8xDCfh4oMjTtk5pxvWbEvt2lRuzC6iUR4B09Pk5n8\nopn77tzjf35lOpMXZVAjBMFubdV3xD2htC3JN3znUcfj7QpNii0Zct9uz8ot\nhNqebCtQeptcuuvJZByHgGM1iOfoq/2xnQfeI7Vqq7j0o6DkFYsA5ny5yF5l\nn9XHIU+R1FPvRR0e8BiEj7ZLqWx6GWlEHSmE2zsf47fG2u6btwPD/FsSE80I\nv+k8\r\n=/e6w\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"a4adc0cb689de4e266e65d90d614fbe1177aa5f1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.559f1a570.0_1581355437829_0.0897919740571893","host":"s3://npm-registry-packages"}},"5.0.0-canary.ad3bbf782.0":{"name":"@material/density","version":"5.0.0-canary.ad3bbf782.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.ad3bbf782.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5ba1ec270e27c2415ce3977d47fcd93b31ffcb39","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.ad3bbf782.0.tgz","fileCount":9,"integrity":"sha512-LxjH8eLbIW2Z/kM+g7qphpBnH15IaRBwJzYwiMIMZfpqx0odnO6Zfejj2YLRNaxuFn3UXXkA21yq+o/1rNrYVw==","signatures":[{"sig":"MEUCIQDVWp2QZrFrqqSdvFAM96//wsTAF3Ya5QVBkLebmjLRWwIgaydmQEEPj15b495H03ufs+i9hlqoV+2ug+ieM6y0KFo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13014,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQaqzCRA9TVsSAnZWagAAs3wQAKGUnGoUAnlljfgRMtpC\nUBRi3e4LjB2bupAPciACmfZwNWHF33rYHo8+R18zFoiG67Pu87l8Ry3HrYK3\nWwpwHYUebxZITDzjg4Rr/Ha202RRLB79sFEKnaWYAT2v6Sn+EKMJ8c873O12\ny2XyJPNxPL9fjdHH8DDKXBW+W0W3110gNNMzP47uclxfIv+PzmYX6eCMeL+t\nj+dZrlH6HxxzAsMvMTgn2BeMwE7bCxtZAO6ScsApQC6IS0EQ5G8EWklDQOX4\nB67tc6VA7ETTSTdaQ/g6c0AI3GSD8n2Wo2jtfmx82fVWYVoCSLKIZMXa5ES8\nUovMuZexAYCujySJAQZYslbYy7xqAE6sW69xgPppig1ns2KNIKYS+AH7OmF1\ny0tsPFd6u4y8Zlp6HhDIhm9QdB7bAD0wXBWNUM84xsSb9Uu7/gpjHbMs5uAw\nH1kgMSYTMk6dEjlrJGzPn6melN8cqWGUETAJKuWyxdtGnnhTEg4ztYPCjrQt\nCsshB78ckQgIGGgk43WAA7giUPsKdBe+yQyg4pk1+DwoaWyCrBpS8iGjpF5P\nB6NM5OM2r9X2rbOhD29rTCfZIcinT3Ur6wRAx1jDlxLswOQ03Vod9xZJb51Q\n3XWEH8Jls1XZR0E+qZHKx57qcr11MUztPHgI9ToJiCck8TZf8GgLmx4P4E3m\nb2xr\r\n=YNrV\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"48e565307134ef2e860fdfd1a8ce59613a783ba7","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.ad3bbf782.0_1581361842797_0.3293001484716238","host":"s3://npm-registry-packages"}},"5.0.0-canary.570d8e49c.0":{"name":"@material/density","version":"5.0.0-canary.570d8e49c.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.570d8e49c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"50ae879b4d08dee6d7592354b3a5b6906bca430c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.570d8e49c.0.tgz","fileCount":9,"integrity":"sha512-7yJhkShW7f3PXVjO9uRqxIlNNdtHu60PmujxS7t0q/4aKJLer/Q3M4o2ck3ew/LDMI2bVyu+v8AimCE5d+7fmg==","signatures":[{"sig":"MEUCIQC8ux03kHrlUkTQO99sr5BXMSNwqn3Q/+PZLpD9b+4AeAIgQpcOE1xcEutGY+UEZ/yrvrgWG1m6dRgvYJWRPG4LbHY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13014,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQcA7CRA9TVsSAnZWagAAhDIP/jYfj+vjr9QLEcLm6hN/\n+c2UESpOTUCufnZdQzkutVZ4781BtIKNk29nx8PwwjkEulJO00Zf0hxwPvbS\nmCqHvqDJTWfR1p2Roo1n2Jujq+oBnbv1HqPQyRG7LoU5td+jxKOxeqbcrz06\nhv5Nt0YqPvrwXOhm5o7g0Z4j/TiY1LhG6XtAA6rf7mYv94BMazBUk9sMfB5p\nshsjBv8D1fYRjRa4VasDIv7fBUg0ufemClVxCEJNOIUNp4HCbBmCgLqdu/0R\nCL0TjyzOQiCe+G6ciBmGXY83EHsT+gYbEN1Yn9PDyD6FxDCJU2PKDP7euuLg\nVHKy2ap2aV16Ue174X46nEK4kv/NwWhwDnML+aInQT0xrtQT313EN+YVViKS\nl9narQ7Iyc1ukgmYNwjhrV5xBeghao68jaFtzBif4jPlCxda4gm+nppRnG+M\nSBPTssrVtXExH+t94fX7yJapTW8RUjxbJgPb5hDmvmN6ySpSfFwkF1IH/w6Z\nDHmk/jNsfgQrMnT8oaHPPPtkJry/EDv5dKMbz/0aQZ5I9hIO/+TfKF05C1cT\n4xhmo0ImNeEDi8HVXqN0DAtfr+90ZvXPLG3jvU59DcI8K7VMkRUC/YzZJRYL\nHDZ53Jv+oy3tFFmbojWZBl58AKnQ1Mrkmr4YdyzX0p38lfHwyfvDv2Tvu/Xj\nlJWz\r\n=l/gJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"b6857e33db49c411cf5f55873a45f72841824fb7","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.570d8e49c.0_1581367354426_0.6181996673260606","host":"s3://npm-registry-packages"}},"5.0.0-canary.48b06b89a.0":{"name":"@material/density","version":"5.0.0-canary.48b06b89a.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.48b06b89a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7e2367cef3f651dc97a98d118924a57aaba78b64","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.48b06b89a.0.tgz","fileCount":9,"integrity":"sha512-ysQJpXP00pjjsfyg0jgYdo3Vlm6raReGTTtAC4BAxIgrIs/yk7o0TdhBlSCMDOJd6VfPSGbFRrQB4871/0DSYA==","signatures":[{"sig":"MEUCIQCgFbbp04meUDQEAVNnfc7SEvW+OaIhhiQea0b5HskHTQIgZXWoJ72Wz7B1VeLDTDFdHEOXWxZcfO8O6TaMeTxzaxg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13014,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQvWICRA9TVsSAnZWagAAdlkP/2Cimw53//NWG/3CXCHv\nYWj0ZTbx4CKluHPUt0C1V09iTCMToKZ/BTmFg7nAo71f+Ay2u532ewnGFPeE\n/xNna8U/F1DTFQTweBalA4GuDmHE/tFB1ATWBeuHadE5i5+G2BFTbfWGXxYl\ngATnEjBDxu+U1CtXt8OMRYLMnnI5cTf2rsMcGtxxdWrbNseoX18VexcQ0bDq\n7kffTFn6ayfEHxVYBM2kVBLupElpNuCD3afFG2p/F4NBlSX9zBuV1AIMb2VF\nwUnTn5Am5vUzH++UAIoAeeZJN4qFyCTzzViSJAgxbXsjf+XCBJ57G1mXkeqS\nGvOO6slvzCcuVSnX0fDJxphLC3HZYH2yZY5/2JoJ/2erMGi8vZgKz5eM0yJo\nixprCGEZLqVhIET0cJlYv/eR++fHdxvpzWyNx+JK/Gzy4Aj9ltqEtHlKd7Pr\naOyZkFYGntT0akFSASxgCYl0b1GUHo0OwbCmXg0p9s4Ok0sAUEPIJcwbX1AB\nGFngZn0oRA4YnmnKGibcVGX7uRNjlNNeuYQ69Wv8nmow99y0IP++Xy9za3MP\nhRqDd87paJ4B33dY4T0efJiAvJC9TRi8UhAylpNezp+m89QA/+yGXMavn425\nRkNNTO2oflLgnqPN9IBn8ih8rn1w1UV6nmOhcdWKeCCVVqLQ2z5LlNJ7lEZz\n21Be\r\n=1NV5\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"540a576f2286061b02bebceda7cbf10554255781","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.48b06b89a.0_1581446536251_0.8620603971693175","host":"s3://npm-registry-packages"}},"5.0.0-canary.612443dfb.0":{"name":"@material/density","version":"5.0.0-canary.612443dfb.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.612443dfb.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d2963731452cbac12937a8202c8deec56ccacbbf","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.612443dfb.0.tgz","fileCount":9,"integrity":"sha512-JBBzqwfNZhuNrZ5B34c6xdWlstft2bmpFfttqlWtAe8YyZEmvNl99Q9GK5bebQQfnMkb/CWFqZgnx7NUZvjj8w==","signatures":[{"sig":"MEQCIDGC/RHGxC7es4UlTMyiYGODUGeH5fetNFQaJe0mMDPfAiAn0gmXblZHuhR9IzN5mCheA54Eq9DRy4c+Uc7jg9e93Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13014,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQwTxCRA9TVsSAnZWagAAmiwP/RFbgBW9YTsNqbWnroWq\nEKGLHNRdfUxFeHY9QgDeSf3xFBJY+hxhoL19moH22e7P0bcZtF4+cNdclKIg\n+NG+uQ2mQta+SvaTGdAWxeJ6PumDAs7hP66R4MfdGiaHv4n4TvmGirYGDG5v\nL/ccO1m8YNBRJkw590M/6Lnvf3b5krYsfHsa2dV7ug95WK6LqHgVUYPGdr8H\n06BdR+iB+h01+0+1yC2/pL0Eyauy+Lc7wiPfdfDfff331UmcC0jnruiLdZ0Z\nV8cK4Vk5qjp5bGuB2vOC/UMsNkmBKm9u1DllvvAnX37gcGbONugEqMBCkpF0\nMQPe+acG0X6WhpbNBPQJ9QjbzygL+iTJ7MHsPuJzZ6OfLfezrHIpc9SZX1c9\nqBbROtUR0z7z9+qrLsBx/zStQO+53+bD6XFxJ+2v0JeLJETgK2+AV6aOKWeW\nTnfbV2omr0LhieTcMZOUPT+EXEVJsu6czsuB5o2VipfI0+kcH5RmvqVA4mOU\nUl7zOsleQOML/PoVAxfxpTPZjqzdt8INL2aXjSbjEdDBGhQzmqn2SJZFGxvU\nqzCzkfu/HfxbC4T54rnrkPWjPdbkbFWkFGpE5FUMa2S0X6IknYYAM5jzGG9l\n85ft2Ea8g5BE0ke6Uy+aNyxL/0OY27ntTMotk5jDZa0sBMb+Gg+nvm31gYyC\nU3Lr\r\n=tFmK\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"622585006b9702fc93bdf0ae416f6c58e398243a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.612443dfb.0_1581450480595_0.017988768093041507","host":"s3://npm-registry-packages"}},"5.0.0-canary.8c11ea2a3.0":{"name":"@material/density","version":"5.0.0-canary.8c11ea2a3.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.8c11ea2a3.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2f810215305956dcdcced79056011f71ab5c0874","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.8c11ea2a3.0.tgz","fileCount":9,"integrity":"sha512-o2D8WlWsEUVlxfUoDuuyrKEfKhsdKV5nS1JzgbM1e7umYWMeU9UtaiCkKFl8vjXAS1iL01sDk371pn/WxB+XxQ==","signatures":[{"sig":"MEQCIG1abyHAokQGwznbOuOtEhQptPy8HM1mzYdo78tn8yLbAiA+gH2r+ffkQnh2p7f/vYmfpX0PRcam5j04wiJm6h7mmA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13014,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQ7xhCRA9TVsSAnZWagAAZFcQAJ99r9M/5Xp8m9eGGWY1\nt0yBpgPKM4fWs3LQ8LvmHPooY3/Vghqx60IdGNccYvFffIl6PrE3gGDq+/aP\niVMZ6NsAGhK/46SlDLj3QROcQE9Hdnt+d7lcu7XWgAX8gWJdrLemWSPE88zT\ndzDVeO5KfJEmBsmHQeJ9cwxCTWDgZXZjj28jX2yYeYViBrjh128Wi4FoLtb3\nyJL+ccBMtXJ6FSLJv0uohJ1xK4Pj6TSYMxkUc1pk4/NKgRFttgfK6MVpLc47\nYsJV7xTAKKT20e8F8vm18wPRxoppkmdiyJ/kJQPaJ43z4gxniYU5XhHyCfH0\nZStQEODNtQsu88aD/3Hjg30T/NFwqgGRj8ZT0VTmjYTvYwdVDTTUFNzJkK77\nuImHklxauMTp3P1KByXto8O6+Nu9CBZsrbeA5ycuVMO0v+2VYEk+K085MADk\nbCMVgi8e1g1rdcbmn+A9px2WQjoNfAocjM2jDnwJFRn6RWpTZnz8vyITHSgs\nNZZTNXZfJyy7yRBt0JOk8v8yNKo4Rp8Swsn0XwTB3jhE0FGRurLzqCWKWRA+\nyVNqHIitsaMLXI7rzF+Oa4MLpp67gUHbZIE/BdO5mPVovG8dnnruzc7Qg7Zp\n7CmF4Fs+rZy2yVJ2qX85RbR0vH9GqeDqBk26ghf9ajOJqNH6RLXcAQJz9VV/\ne7y5\r\n=BZD7\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"47068a39cd18bd1e384c83a2ca5c3d53ef8bbbb6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.8c11ea2a3.0_1581497440386_0.7401531228217859","host":"s3://npm-registry-packages"}},"5.0.0-canary.b2f3d311e.0":{"name":"@material/density","version":"5.0.0-canary.b2f3d311e.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.b2f3d311e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bd53d9878909a4beb980b61914cc550a5eb01750","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.b2f3d311e.0.tgz","fileCount":9,"integrity":"sha512-f3QN+UmqB7hZNaN2zaaozgMUjoIDQsFDz49ZAW9FyMrFGozvM6wxziEIuqL3wSgIk587qT1V5iHgxtSl6qk/FA==","signatures":[{"sig":"MEQCIARLnf0XJ0xmIeX02ISSWN5xh7muZo+BHe3gDTiaECN9AiAzIBoWf8rrg5z5XzDPyZGTjbZy1STEzGQjWpjSyKiutA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13014,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeRcLcCRA9TVsSAnZWagAACLAP/i6fiIjiL4l46x1rTytN\n6IGSwc5OmY4O89XDzIx2wq54Izb/3L6JALsTgjHAQ3gS3BoXYGhS+e7ItO+w\nRSMs+hGA4gTDZtGk0frj/30zgEIAzWoBJkc4z7UcPRaUM/7OQAcG3p47/xUw\nNQ5KjcJyGfIHpKdxIujOSwrcFX2+LYqSx1O/WLTB4uaNdbxkVL/WH32Ix3WJ\nBP9O//IKYAeQA+oGiZFfbFUjOZ3Yj4Aakppdc+21/6UlhW4Aa+hFDp9LhR58\nGcdNKQByHTayNXavK4II4Yzc7sryAyXCbwb9r35LQ56enVGhaczrE0dZx9t3\nQvwTytxVvI8QYh8aYcsM9H9NaPQvkicr0KFz3lNs/3Y1oB+Muz6q8magnKIy\nmXG5tIarnqSowxA0qijA3TTpdW/cu20RUZGdqPPqRPLIXGKEtVz0wQoeqDV0\nhOUyqf4q+bRHKvAgAf5ai1LPVm3vGPkBdSPksCPbsI0CZmmq4QJ/S5vFs9WN\npkq6rc31MGxSPbFcIBS0YyaajCb0odvx0sVDpLFyj3eVGEUNMWOenEiAR0SV\nggwt9ed+WjFNTzx67+CHJenoMiiZgpDTlWmozNJTgpUi1myGXA/EJxYZPUpf\n7D+vMWY1W/bp5PY720I88/aFjsNGta36CaLnzZFE8SjA9Z6RMiiadqrXZNvf\nNQj9\r\n=iSbE\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"e8b88d39be927e40deb73ae78a049ece8c80b9cc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.b2f3d311e.0_1581630171470_0.5197717450433639","host":"s3://npm-registry-packages"}},"5.0.0-canary.4f488d0ee.0":{"name":"@material/density","version":"5.0.0-canary.4f488d0ee.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0-canary.4f488d0ee.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"462aebac955c9f6c20420fc93611a6defc66aebe","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0-canary.4f488d0ee.0.tgz","fileCount":9,"integrity":"sha512-TIHMu4zEfvYU/+mhqW4kswBJjmMx4vEbx00s9OMue+tUfFaUwxWMEG+Mp0KR9jFn+JN8AayqZPcIFmaruTUNNw==","signatures":[{"sig":"MEQCIBaxWCuRKQuxScm+0C0XcqoSPJo+5MdAdMHEImliNhRPAiByD86gusJ5a7NnNkMtHCgdclDszVYlvbvaeXK2rWo/Mw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13014,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeRdY1CRA9TVsSAnZWagAAW+kQAJgnHCwSZSXX8xBZv56A\nqbxhFsZapy+jdp+o2/cTb0hROAANhtlsvAXo+BA5YAeiVwQI0WOY8mDbfMb5\ngHs1+SP9YPgVYi7XeldSQsVaoKPdmBWoR6K0VGkK/dKUrrxmguHaEPzonjTm\nLFvuAUo5i8mXmwQTvXBgcFBWXJJ0me2/T190qTxr8sXG0b1ghRe8aQEnucU4\n7CCnLzu8jXUdoPXRWy3rqLCmM/2uvYAmFeJly8wJ+4zVI6LhHWYVO8O9HWa9\nWyn3ZVKmEB5urtfrdrc7+boWHf+R87QkLPOcltimok0pbHSibCs85v2tNj8J\nfEkojvZwXB0sEHe2Md0yjnfB9uN6BoF0p3J+0vt9DhWBmHquGm8HhWkzH6q6\nNeEHKARCgRXkmm8a1O8dP+QQHYfOXQXI6c5AXpA40UC9z2BeAfVC7nO1dhTf\nozk70juP678FpfMLMp52Oo5pX/pT+yWN1ZM7W/TeGvbcXG/X6VHq5+9cxk9F\ngl9+D69apv/6vG2f4ivhVfA+F14tKA9aMeaYiZmGvdZIaY7LNwMqRJZzmy5k\n5m1zLL/btetuxdJCHy6Yv6sTuFPNMgSi83PJsXJ0/mhKQ6FitnHraS52Lmnk\nkneCBBRd0fncBH+P9tI/ZpojIuWdsIDpD8dtvUxhm/KcWYxnFDjrUJgZ2v75\n7Ht5\r\n=KqIz\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"e3b2ff94a1a6e30260b88a9da6e55d6ed122c399","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_5.0.0-canary.4f488d0ee.0_1581635123268_0.5111291439764392","host":"s3://npm-registry-packages"}},"6.0.0-canary.fe79de07d.0":{"name":"@material/density","version":"6.0.0-canary.fe79de07d.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@6.0.0-canary.fe79de07d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"daec0b4c2b721dbbfc7b3f3a6a3a77f305a7cc96","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-6.0.0-canary.fe79de07d.0.tgz","fileCount":9,"integrity":"sha512-VD6Fe3vUY90AZUMzWgNTJa/cDw5o8p1rf1HviB/F+xLqndSoqjlvIUPkPS8JX4GAltbC5DXyMYA2cvtrXBq/9Q==","signatures":[{"sig":"MEQCIBOOLiSZ5SZHEy8OqU5qu1KYNQRkgpov6/3Wm+x5qCIzAiBo+emlCJaVvBHOo0h4D6EsdNuPG+vgN1sFamOwIm+Qtw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13014,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeRdpKCRA9TVsSAnZWagAALBIQAJHyw66V9sGfD5d7tG0Y\njeFWUjjCczmHPA0BHyTFKEk3s75NHPVxgQt4HACaCfHipQcofXbSaZ08uGKu\nvj0edRM9qeNcIiCAn2PfaH1ztktZnuWKSKqSnkiuaLFIpKxLG3T5hxnPMQI3\ntwWQpOO+AG4S5T+i87bTvdEVMMBb69ThIVX97KIt21a0BJSl22SNMvyk/XSd\nkrfz9r60w3Xfw7oN6NZbpYJIXZz628leJvbmyB3Oq0frF0WcMoAUdfFLAE5o\nFO3XvCXClc1IplnWbloyfunZvKcDVy0JuIgks9jtYd6q/jrHiElFK3TAgm9z\n3Vhjo/iy0ezo21hBy2OO9vp0ArEhptHGdfKzowNxHyRXlA68LMHdYbwhJhVy\nOP+UqS+c5BEtl2E/NMQ9bH7yUXrW7C5Gn67c+zWkBeSMX1gFIeeb0h3joRLy\nMcBE9uzG1KO+hAAURetw4ocJcmwUJ4x2qqwAgzT3dT3Yjg6amU+8Vpfrmy3D\nYvCsDqKKHL8+2QiewGsbKrHdXQpIf4S0lsdNyW8mpvBx1WebrSvRKo7chJ08\nflusZ4CY3dhep333B1CeFUG7Ab0d1AqXOOHnI5hCI2ZsvtgGH+JsBlCTWbMI\n6bJ47OLQuv6wQcpOTl6g6Z+xpo+8kU10POwhbK/oMq6DNs1IUOvrzJqq3b9v\ndS3J\r\n=ZYvf\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"e2b4b3810f62a16846d719ee7439bcbbac266d30","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_6.0.0-canary.fe79de07d.0_1581636169618_0.4067750549422313","host":"s3://npm-registry-packages"}},"5.0.0":{"name":"@material/density","version":"5.0.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.0.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"643d9bd1a5d89b3985d48fd1d6572f73d05fb2e9","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.0.0.tgz","fileCount":8,"integrity":"sha512-K2TnVrSjS7muxcy3gxKsYsCFlZI3qGbG39jPziqHUcnJKCpilspBHRiUvRDyLeUPO/0KbWHJmVjdVsQbgY61hg==","signatures":[{"sig":"MEUCIH/ebw7x+4f54y4gJppdwO3ckHCZvLAhMPx+6dyMZxsjAiEAjGttnY0vSlXG7y63mr6cR5NtAtuc3ujJ3YrNwt0eS3k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":11975,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeReTsCRA9TVsSAnZWagAAhaQP/AweGJYnSwaAzTgK5M9Z\nYysR1tXUvse4ew5f1JVVpte7WEcBCFKFUT+OPtaoZ/98iBWw8ElSUVo6YvyZ\ng40n7lanV1WjNp37KWxvLALYr/l/o+CoPBtPm/I4LuBQYhN20qLA+PibU6IR\njB2m3Mn2eIVcGI0ENKb/9Rs00P3EHlGjLXGpSOYln3QhPnQh01Xx6+zDZpsA\nnfq9CWLiU6K4Kc2e81HXQRkYVtbHBQ3qFOTDm7uGLeQlCCGdsErrR3vtSzDK\n+CAQfaEcplR1oNRRr1o20U0+5r49lQrPzbFuhsYrCb7yfV3q86FANCbYEHWv\n4zgUtoWdODteYaAVoZYI5jfHQkgZyNwT8V5plDPj7Bkz24aSW3DCWSXSum6i\nLB8zdJSuhHco6d6WE0iO3F6/+lzuxsFlDY95zdCy38zrz8sjITipCcBrw0lb\n7U0VszbnNEBNKrg34q2V3mtDTx7g5IolOdJ2MHk9qIRgBPs0zgs00bRiyXqT\nueMswtAcNuxbdG2phDCXhEt46RbEIZ5vYI+swDs+WMyHyXSrYgNBnl3COgH1\nWcttcwgwxF6ui0rpfRfwrE3Gv24RjGtpO1dXcYGZlhYvNEwL6et2maSK4hf3\niejj4paqmPSZ7ByMOzJDN2D+TDLLZS9wvbwMSZH5lofO1Ms+MXgnKEVKXwnB\nDDK3\r\n=Beq2\r\n-----END PGP SIGNATURE-----\r\n"},"gitHead":"47845087df2f88107786b4577b1be4422b14404d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/density_5.0.0_1581638892166_0.7632261429767935","host":"s3://npm-registry-packages"}},"6.0.0-canary.5e313b1f2.0":{"name":"@material/density","version":"6.0.0-canary.5e313b1f2.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@6.0.0-canary.5e313b1f2.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"685101b799852171375ffaf63103743cc7a0b2c3","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-6.0.0-canary.5e313b1f2.0.tgz","fileCount":9,"integrity":"sha512-uPGvw0TsNekDaYx1fWttAuwNzyvnh9w9/6B8QzG6Jot9RLn4y4sudYOe/XwlyGd1m6mTML5hQmRZUTW3nTpk4g==","signatures":[{"sig":"MEUCIENIN8uNQs+1a8v6IIB8GSEmg+RI1MfGr8z5WPx2KpFFAiEA1t3C4hIWne1z5tfUzNg925ZvNKL0i0zAnpvo2G+R2G8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeRzGBCRA9TVsSAnZWagAAoFwP/3YrotRPQ3L7kNOlusaV\nVtU15iRDXlguRNl4tPkb9B9FK9VioOWlkBFSV4FZGdb7g+VhNpyEUwv0SHQ9\nS7nZVjHLT9ek4flJUYRLckbpHp0HytQ+v9vIqLFqSHpup9bjdpoIBixC9YtD\nj9KdGDnPJN5PDhqIoTHnDaa/owzU/6J0LMtAdJgS+JNF1z3gynxHZ37vzYDi\nNzrdxRfj6zZsWFuIkvEndxCChPR8UVp+AZLTLsuKWbbZUFXTqsVIE1V87oUK\nVeddyVViSQFSjDZmk0eVHa37l1xkcvfA80JrepHbsPCua113anfOCVuvdnd5\nRySr+7w2Nya6qilQ2ZQ4aqp8MVQUVlbbz9qw6JSGGfXZj9vs6U+mKlW4qf0E\no6Y22W9OutlEIVaTx0fUkNObmfms/dQu5FHqOOXjkxZybLTEpe6mmzj0XEsf\nJLW44YFLubQW5wbK8Ag9X5q/2xiURbxc8JK9Jn/05mkFDIYsGIw4ova/qTQY\nR81aJ+mfuDuo3339ytdYx6nHWZ7NO2JHeh5t6N9MLPKxbGKP9Qpt/W51zbqW\na/6nwaXrYPYvqUzf5o2bI4J7zzFINlHPe+Kt80GdNEH2iZeTyqrRMTGH0QLf\nOoMlU6A8oA6pmvLsjeswaVSvnFoKjPubHW8UM/DmyWUkfx/1nf+hHQ+h2a9/\nduE9\r\n=u8N4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"c7787e7880c79b0baaafb2af1123bbc383025b20","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_6.0.0-canary.5e313b1f2.0_1581724033238_0.6136926114465677","host":"s3://npm-registry-packages"}},"6.0.0-canary.6a56f387c.0":{"name":"@material/density","version":"6.0.0-canary.6a56f387c.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@6.0.0-canary.6a56f387c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2372d7d5ef714b887dae0816b4f627f385c8bfc3","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-6.0.0-canary.6a56f387c.0.tgz","fileCount":9,"integrity":"sha512-+Sm9Q3JPHcTzKEXGmhxtviWUAO/ybWSbYj3cReMAWu/aK06VAtjZdjEP9S3mTouevcPlTD5iMsDiOXG9oq/MdQ==","signatures":[{"sig":"MEUCIQCJCQfbb80WZ5eWOgsfi5rmbiaIScg5tU3lG2DZxBtL3gIgSEPRl5XQHP+iPQnwQO9wwJ8+2nca5nWwnqEHyFMmEmA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeTD4wCRA9TVsSAnZWagAA+6YP/igz73Vv8tTNW1kup7pV\nV7uvo2Th7E2jUa51mZ4YFsmI9wFQfsbe9PNK8LGar9ukiD3NqAXwXxWTVz9i\nrcIK1uYE7tgfcN77Gj+MW/xrqNN3NK/BWCRSX9QSSS5TTBi2Tlznq0a00N3C\nzrAVyqISXsH+bvra+st0kt9XnX10za49o0nZDTYh6WXcJd1XPjCsucHQ0kHY\neErb2Rm/bjYrdUmCaeTARCnB3RZNs3bOcARfY4pwKagqseqGoApFijD9w+6X\nVdIj8Qfu0baYRK9J7mI+/tbYDGm+kB9/FpWP8TRsWlnmVj1tr1dwt/QuGEos\nOmpDaqZCsqgK3Ck1eu5yTbohR1oId8sYVsYUsKyTnP3cNP168QV7fGozb0Ro\nER1EGpOzwhdjfvskRAJVyyhwSnCViBwUf0ZU7dbG7a7Kw/pHe6JQn3lydT0F\nsx2uwI5a5EaFfu30HUGyITdGiQ+zo1uQLV+1U/SaB/w539dF+mfLlqZrFw41\nrlyWyXpWdWOpypTpCDwCiC/LUtBX0aVACrkXGVDi1zmW6IWq4+d9W4hbEPnK\niV5+NPFBNm5I5aKZZYZ5RAABYVOJ17EQp4QOBebcZOF09CNMxoV03QQm+3BI\npuUG4zBYprwaPEj/2AaIoZkJCB9WSjgrWeU55J2oH0ZloBCFArs1+zNzmqwx\nYkj+\r\n=TRL4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"1e3f916aaa994ac19a65c62b461edb01c08e95d6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_6.0.0-canary.6a56f387c.0_1582054959793_0.7149086082311276","host":"s3://npm-registry-packages"}},"6.0.0-canary.bdfd52632.0":{"name":"@material/density","version":"6.0.0-canary.bdfd52632.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@6.0.0-canary.bdfd52632.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0228439c546bf0b508ccd951c8360b6c65813ce0","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-6.0.0-canary.bdfd52632.0.tgz","fileCount":9,"integrity":"sha512-YrwwkxJhYeNzhoJG9jFZ6a+H/pYahA0BaNU6Pdg0ypPIfAjCmqyfs6DaEkJjqlhg2i5QgfZeJG/ez24e5vNYuw==","signatures":[{"sig":"MEYCIQDCuS0LRyP3NCt6+sDcNzUYK21G3pFPjk88viDulrmf+gIhAIXSSxexZb59Cyw92+brYvcJcNmMJo6Q72sWMDLqWeg3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeTZjbCRA9TVsSAnZWagAA60YP/1EOeGxWsnTtkCpuiY1B\njeiwwYL+NbPeAk1GLU8eneR1mKOiKuIdd68UU+X28xnsxNmwjQsCPTukbXmf\nGW2a9sWucRSrTUgRJPC47Ot5RnwJxPyVkUFPZ2Xl+yPscUWi0ENS915VNGmx\nH6cfSBBfCOz+uOTibCJ/vHaqWVQK+YHrIYJoRrSxeq2KDxHKPJp/QMX6lDKX\ndtkJLmlJZChJe30IguOWVSQ5EHIM7hyDP0/YeUYJxHkKulNa79P5HASwCIPB\nsKNQoQ83J4PEdlwDnVGuCWSkqYrFwlfGoumKWP9yO5PREkNqNo4gW+sKXusN\n8J/5GQaK9+wNmkw6qrgOiLZcFtkxCJK3TEWwcusgsUYQ0IiIr5YJHOA+aT/D\n1uKi6qTFNC/rSKRmF0EeRxR8N6mcz1ifMvnTFROQZNxUeY/auYKphPA2pCIq\nvWAbpq9N5K2+tlQMQcHRphllS8hJ8k/pBIRt0abkAnVE6dcVeLla/kaU3X30\nwWHNvR1+TpnHlywPFYde2CZB9PuUnqk2+RzPldieSRqSCZ73llKf0zQkdYdr\nHRI3Mq5ciJKxwMdkmE9z4qsIYpMNPuE2P2zESfnDVv8HT7v7z876c0bXCcNS\nIOmw95uDgsQvT39ikhSfIoVgnK6dLGT5stBUeRiIXv3D20qFyc9PsipptVXE\nB3hr\r\n=QCBO\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"533f28d31ceee3f93d9c7695d4f394323e37af4e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_6.0.0-canary.bdfd52632.0_1582143707306_0.5371417768490894","host":"s3://npm-registry-packages"}},"6.0.0-canary.ad2e4376a.0":{"name":"@material/density","version":"6.0.0-canary.ad2e4376a.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@6.0.0-canary.ad2e4376a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2ec2a11b07149d74bcab8917725eb50dc5deb1d8","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-6.0.0-canary.ad2e4376a.0.tgz","fileCount":9,"integrity":"sha512-ip+vp9VFJRy6UbqhozHBbKAK24C8Am1Jss9N1PNd5v1w/rv+hv0UmkIQzV06PK4ajV9wv4YxypGV/gSS3YYXoQ==","signatures":[{"sig":"MEYCIQCmsfBaS/Mc4/62Qe4gj6gIWpSKP2R0/wl2yrrWxqhohgIhAKbXTtnkdS6SEh6mo/SB5H/4EsPZ15tjfmJ1UsDIw8od","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeTxMQCRA9TVsSAnZWagAAfnQP/RKRITAPJkLwjbH01lCK\nF7oFjGqvTbxy+gxj/tm15dLx17ODczqGvi+0nL0l+BthCx5WPFFc28Jb5OuW\nH7KtYa+EHMj7gPNJevUSZlwUVtdvM2nnTk8qXZIGQkLY4pya/aCPTxIlOHo7\nzB4rNyKARsya8GzehGExTUPQuVFwisXLi7jIiR/KoyvEr1pQEoG03JOkSHpo\nH7QfGOCqsfZOy5fy4jlyTSnBOYBHaPWtDBlTxtnV36T83NaSa3JptivJ/nZM\nO4DWe/Qjs1+okKXQJNYyQYC2jGr48jUIxACiyiXp2E/driCi/4y+8CXkiilH\nFxVfEoaaCFP/9LLYmTSnVV3u9Ehzv630R32DzPCENt0KmDESwWg0p5wFvpw5\nyyVIH2simvUGYPT8EHCOLVNdaxFx3S217az2MiIHYnErac53Fo+SY/sYQEfZ\nEVXGEiZs8TVvQIAm1Fe/MqP9+MexT0uVYsgzawZIpjfPR9iMJmRCbH94VIbX\nDP07F8RgJ7xAvpBg+Qu6de6TNsYq/ek26Zwu6TbXjgtk6k/6i21EscNyIKT4\nbf3t2mj+Zu+Ekjj3MWBai9W/6UDp1i12WNSzSx5ezq3Ngl9/Ufdm9rdvAkdN\nyD4NNjNMgnITveh3kLucUH9F7AiqEGdYFmgUFugZJ9GMAwDFFG+KOAcFybIp\n/iOK\r\n=zB9n\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"a91629ff788e0ccd5049a85d588ddf65efe5899d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_6.0.0-canary.ad2e4376a.0_1582240527742_0.8421845746705361","host":"s3://npm-registry-packages"}},"6.0.0-canary.765caef18.0":{"name":"@material/density","version":"6.0.0-canary.765caef18.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@6.0.0-canary.765caef18.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d5df9aa0058c475d6ecd6a09d847ae4de30f9746","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-6.0.0-canary.765caef18.0.tgz","fileCount":9,"integrity":"sha512-NXWimJehs7y/jjaCVjdhKOyF1HXIYsGtgXcvTwq8wOrjjxe2XwZk3637S0Exu4z40g5MP5DGymRWRU49J7tK1A==","signatures":[{"sig":"MEUCIQC+zN+w9nptGvYmPjSPTvgthsE4F69LZZZQ0UvfLR9K5QIgcY6/hlZ+sSIrC1UUwm2OERdy2CDgrLhmkQogcyiD/H0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeUBQSCRA9TVsSAnZWagAAkzYP+wf/9xprm7isBAIL630f\nFItbIbzWmCOL+kPxkr6OUHs3LALWFMmJpXBwJqnD0HY4yY+BHFKZbVRzQpPr\n2Zgib/NBMkBF2226a4RFvyvRnlHQDBAP97XjhSdNy7CvHpcwGOq5c6riT+6Y\nywe1Dz5XbOaznPOscBu+o72sWDNm6H33t7GeJqrMx2mtPXcn55TNfz7D8hcH\nh1UbXWTmVRYn9y+O1QF4AFbvJ12gDA4SZ+QpKiDmsx2ZtIfFiS7r8IrwmRJ6\n1YFit8vqXi+TAtoQu2waxTfCyCaJnAtttGjTJSspbSXQFoCT3/9T8UVXP8iE\nmjmOY4mCa7D5KbwugxudtmfGCfFCJCm77ZiB+YE4XgRQNmnqn83YyQ2FdTGB\nC1ikVsCesqDVM8ZRb6cB3gFkar7U9K5mm/Rof6s9LZkGI65iJSjoT4rGrGIl\nnq9g4xcdxYqNIEL7wRNwIlmNsgkPmM4d/3JpzHo8H8/TAen2/1B0C2p1JOop\nfS58tBMUgQvDjnZbF91nQPU+abtvtX9UMWt6X+DIN2eMiMHPsZXM3zQU2OHX\n/HX9Sc/R+thnXSSOjVAQF9mCkmgRPmSownNtF0cj9zTT4AMiK6lAaBdu5tyv\nGWpbNf9d0+3f51iOtlQ8bGI0mTJ/qdY1n3UJ91I0Ojh7gAJalFqaPWtLYHVl\nzh50\r\n=UR4F\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"e18ae69dc972686bd9fa70c34bbdda38c5caaf0a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_6.0.0-canary.765caef18.0_1582306321607_0.4228927354717018","host":"s3://npm-registry-packages"}},"6.0.0-canary.949562303.0":{"name":"@material/density","version":"6.0.0-canary.949562303.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@6.0.0-canary.949562303.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1f9bb02fb1b14c06c7b697570d6e0668e93dc5b3","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-6.0.0-canary.949562303.0.tgz","fileCount":9,"integrity":"sha512-Y3qWsoNQvxPjS2J0O8Id3xXKiGHIl1FNcUK2nmVL3q0MbBOFcmwkxDw5S5aMBZSTWGAoO4cj/Z70elXehl2l/A==","signatures":[{"sig":"MEUCIQDMHvWxwplVJnqmwXmiMsQDVpIr/JlqDFlInMJmBam4kwIgTMIPRv1y40fGI/CdG3ZOexQkVXs3X3qdyHuONGy700I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeUD9QCRA9TVsSAnZWagAA3AQP/iLy+7X0+pVnEpaR2L4S\n+YHJmn4jF9V5E6Q6HOk5LBYBf/ME8SzuyqNNb9gT4CAo/FpFp5jMNwRIRHxt\nyWpHZNwXLN4Q+oR0q5k0FJURHuM3YJJyuApbpT2U6U5eeJYsw7NPNXFW5OBD\nZBZPsegYvk6ehsFLzRGmZdjZLRfX5GCNgJK02ac9NDeIhU81S4NGvKqIyV9f\nPL6LwvOa6rXD0nLvqGkTzdrIX19YhzQ9IGlVRo9td2c2piPmKJ+wPrwdcHkE\nb5FAtixBalUBJEckUBOjv6mjtU0mowlwuTKT/q7XUwe0nUusNMbZsuhNf8s6\n0dBxyFAarLCtgGU81EGVg0hTAfYMUWeaPpQHMWGUxEh3RgBePFNPxvJyPaDJ\nTyzrh2Ft5DnzXuxmov1SNY6K1RDslmwHkK4fCztDwswOg5TUTBgXtyPE78fT\nbQJUtOJ2tbt9+XrceGwS0oimBrnyXy2jCwSxGkW08d80TI5diXmXv8+Y9/KQ\noKaT0B66goRe9+VkaOVmNgjSdats8qqOgiIIbA/VzKAfRYQFYHIGxOOlifeK\naHtW8b86CFVkgLKhmhSnUnPZ2YP+nvFdIHK2PdJBgTssYplB1j2sAKHk14Bv\nnLX0CSoHmSRFT9jyO1Cw+Zxfg6DcIAZeCkEUShuO7S8beII8bUNplK7ZELdW\nrSCC\r\n=7Yvr\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"b23ce78ac58e49e4a566fa22d5a4001cffa160f9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_6.0.0-canary.949562303.0_1582317391767_0.18356091461219037","host":"s3://npm-registry-packages"}},"6.0.0-canary.7ec96974e.0":{"name":"@material/density","version":"6.0.0-canary.7ec96974e.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@6.0.0-canary.7ec96974e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1ae4ff46e93a4bf2956fa17ee8d8fa8e3641b5c1","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-6.0.0-canary.7ec96974e.0.tgz","fileCount":9,"integrity":"sha512-bDc9141vgqDkPXpbbHwGcUl+p3+IFA/KtDdg4GYvOQQtQvl3A2tzhPH4k5Ay4kHcZU1pStoB/WU93eu88uU5MQ==","signatures":[{"sig":"MEYCIQD08XzrenVDBEYeMqXe8ojh4NEWx4PeEi/T9zcrHCu60QIhAJiPd4ecgrra/ue1bkntAKYL3gZkNYN/rjxJAG2yp4jJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVByPCRA9TVsSAnZWagAASQ4P+QEwtxWdtkoSbEoIXVpe\naxi/Skfr0TsUUN8KRHHXn+PfBbjfzJvPZsureHy/GnrT1cCHs+GjIoSq3F+d\nBFd2sGmY0Xw+7fTAxCY3Lx2iqXNoEfj/go8mij+Wp+Esp1X2iACxXttS1dnn\nxQ8SBekH3mJNNS1MtUJtajrDxCuNECQ6Fnf2ml5cYx1sdp5BOlD/wkmxpM7l\nN8oQjzIC7IXSWx9UFF1H5sK33axnhwhMxCKIW2KArIFFlvv57J3scnY6u9C4\nd687WoVvh/mPQTFnyX91qM3vAlSSC7FbxBiNl6h8WVJEDGWkh0UkB82wHH88\nlYPS0tSwfj4oS5tvca8W7DEXD212RdP3qfINbwokeiVRgcio4QGMMIs7qHPd\nWejb9oc//kmO1cc+cMZsJXzHdkc1SMdtpB1pVChXw1GuLcNmcRniVXBuFUbt\nz9+nawBG51PtL4NUoS7vGXFbLGCfdItjFWDUcvFcZR0IdCSMJiyKqqd7VYKo\n8ag8sT8sqHqccfQ+tPvD+4LGdAJAH+nIvqs/R0RccmxDUE8WUDguf+XMQbeG\n0qzZ6fxf5QxfTFxVJqRaX0eGmKE4ZAnu6yHampDWhkTM/yR44GRFwoYq6cnN\nuUu+JFXnP0XpNZOukfUhzn4Jx2ej5iQ6QJ4p22KGid1GbylaEaRUNEGAFJnL\nUyTC\r\n=kHAk\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"79d3bd54f6272eb54a09e4cbd6a0e62f64e30a98","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_6.0.0-canary.7ec96974e.0_1582570639405_0.6175121406555972","host":"s3://npm-registry-packages"}},"6.0.0-canary.265ecbad5.0":{"name":"@material/density","version":"6.0.0-canary.265ecbad5.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@6.0.0-canary.265ecbad5.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cbbe9e34ab7300bb7cd2e0de433661decebb111b","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-6.0.0-canary.265ecbad5.0.tgz","fileCount":9,"integrity":"sha512-tTysrXjiN+uE/BEWKVfJJTi+8jHPN8ng65NHRUkbzgi7LxciRQb1/MydAUODTfk7J/KOZAPjXzxGW9bdEL7h4w==","signatures":[{"sig":"MEUCIQC3U8JO9UBeXw6DFE2sYafNmtMlDzC86xDbdrWVmzhIsAIgDTGzXfzaJN6V3m9uiUJL0gOEbM27nduXxfpOVh74z10=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVYrLCRA9TVsSAnZWagAAYPAP/RzeqGks1qRzwIXXv3rt\nH8YXUUMHQ9ngDJrT+YI/TWnb2H91tS6v/AC8ocPs3JtW0rG3y9MYxylE7xfz\newQHw3/ojNK/Dfj1BLWZAJcO1pmytom+F8dpU9gTXibwRANYwDuSTtKqzZhW\npJx/z8hc9buvLQ5TpRAYcAarUfW6LRuxfgLZy36kpA/T2/d/5pYB7OYICkoH\nMlWRyqfx1vBCzrnLrEJrX4sJKU+76tLqV+YfaSgMVnz9HFaRzfz4JBdP8Uuk\n17ZzZfWQvMKggSsTHLdg162YaJjfOjbSejO29xAEUwu76lmEDth+HFFOv1Ck\ncI/6MCQk9gvMLfAx9ypp/Aj93rqd/KjFuV7yB4moHiwM+RfyxjYMVx6sHGGh\nKz7xuAexmJPmLDxsrIiMmJgmM6kP7u/8GFIEco25EnFdWeXn/dv27Eu8PEO4\ns2Gd96n6oYEewy2UoEIFpoeQuLWrs84tAjuyYFHB1OhRvXuaD6f5avOpKxwd\nFMgvr1KrVkv2sfbmjNKmxBezANGLc1VHTsfuExuJjgyBD7bUwpSznV+ClVfr\nTfeGfSWTJIm7W832yuvpqUq7PoiwKnMeaqeDpdHMAiBZQwLyEJ5VNtmZ8Srp\nYnxtv7NH5uSKpXGwyY6tyD3TK9pNUx2lnRZeQNMVdnHSlGH8cC3roLS7wy9s\nTAuk\r\n=Oj7H\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"1600f4154da0a0943fa8aaa13dfa15c79b0ef89f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_6.0.0-canary.265ecbad5.0_1582664395190_0.8208920270215889","host":"s3://npm-registry-packages"}},"5.1.0":{"name":"@material/density","version":"5.1.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@5.1.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d36512d413a00595122f98303766dae6b9e9fabe","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-5.1.0.tgz","fileCount":8,"integrity":"sha512-jmp6AgiNYosl+HicxWCa8vib9pg9tNxRcf+6f9LDkDYJ9jtO90PXuypyd0hO64JZ9Df7BywFj5hTWPERG1FBbw==","signatures":[{"sig":"MEUCICnF46h4bDEUlcYKtGxsi+KRmpOfuLETZDkDofr7eeOLAiEAmM7wMwXTTWYEDVDPdTghviclMN1PLpYZPpdE85M2Tsk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":11975,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVZODCRA9TVsSAnZWagAAhsQP/ir1alI2Eq/yLuFwaT0L\nqdsquCSNO2hYcU3noJPF8TpMQPbPrUuYq6CiV7M0RiaV41EF9IzeQswgKmxt\nx+QzmIPdManQApnuN+ctM7DFsAmv3Cy2kM3YUCOPcmnPVN0zHaDISQkjv6u9\nyhWPyzN3svmNhRhVXxI/+ShSivmlNVfQMokpSJJS+RGwXQw72MimHeyKhP2S\nsDfvg47H4TERTP4TvZlMdUe6aQui1jOhLO+akvXAj3SFPgT4PxMEbSd13u7S\n2h04McyC2zvoGOILEPGJ3Uh51ZddlOgJrmrfcpxbUnsFkAxxARVb+5Gx1x/x\n4R/jHQdLaUIkhvdkHmH2pion86g02L/jHepbobkLGVFDLU4+v+h902NPqvLm\nK6T5H9T3BK5XK15j7Yb5/KJ04bfzW1yciyUj2escMK08e16ANui6RPhwuKBn\n99/Ocj3/ox9uD0SAgRJYDaV52s76JuUDXTekeZE2GGBu3vfKSsYRziZ0b6Mr\n0WWJzH0P4vvx46tnns03QPfFsu/T+RiXOPwKkoyTWLlEA356rZZWhv+UbJgH\n255WDC0wlSHwCnfkAQ3gBU8Z1xO6JSSpJtWZzm6VpGA1UeZdS1lUUKuLmBnl\n58WR0VCwaoeH1gewI2kRMJdQQfDpKd2SEWuvTd+q5MOfJRzCYxebs83csB/6\n5Y6w\r\n=zrS1\r\n-----END PGP SIGNATURE-----\r\n"},"gitHead":"2cf87456f7b6bb4803ed5f1b18a06320c301a1b6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/density_5.1.0_1582666627090_0.3868536763796815","host":"s3://npm-registry-packages"}},"6.0.0-canary.2cf87456f.0":{"name":"@material/density","version":"6.0.0-canary.2cf87456f.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@6.0.0-canary.2cf87456f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"44672db6482ad4e76eebe0aee4fe08eae7ad804c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-6.0.0-canary.2cf87456f.0.tgz","fileCount":9,"integrity":"sha512-GUz3wspA+aFO3WBMFiQIf6l0yKel+XlMl9prJ8vxoqLCvlQoH3zIoV0VtwOEHb8kA7Lm5pui8kuvbtCGiTN+jg==","signatures":[{"sig":"MEQCIFEK3gpdQRWEEMD7sdG7hevSzOWB1s3v+xflNPXvGL2IAiAipLKM7CHo09mjOv9RlvT3uU2gTNNYsmqOSqaxigucEA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVZOtCRA9TVsSAnZWagAAFroP+gJ/Eu3XuaeW+BcxFUaw\nA1Sax9ci/nZFEEE3z7XIQDTfNBRuk1zez+yalcwbmcOVMtPDm3BWvA+rHH1w\nkf/i6a+1+Zyz0o/4yxln5Kbi7r795D+iCwzhdmVmv7N3+WXdSC7t3XK7R+Zb\ng9jhHNYI2uT2VeyuPyL3A8M9apAlbzMFTD6X8hyCnS6cgteIxpPpJYuNXJf2\neIg5EzMz38Aeu7O03PFKtP7nOvTtjxLAgTqD80mZrjtGQfSPCqj38ZIqTNAw\nzHXa71clsrR+ftzJSNgED23Ude1V7CIXbl8wJGmQymrObsNoJ6VkTHUzZhhb\n+8NPf9moA++XyvaL0ekQWxPvqYVtPaTfJzxLy3/bA5g8XvfsbGg/B2lBh8TP\nxXmXVhDk/jxHLSmouJ9RuAswm9g8ghRjxYuYvK30W5o5wZLEl5ST+fGXu854\nHpXJGJ/lxzjM+mNq0mNQuy4azFOSQeXRkhmxK5iE538jBJJlBp8fFy/3yLtl\nvldl7KfVh/IkvPV0xRrXqurmLlfbWu8cfBU3P7+ScL6hrNCJgnwXJuMgunVk\nPmIj7Ntd0qbgtq5L2F8emRPhTDZMtew7V+aanQHzFXqJp3v+wVizQT0JVyWW\ngV9o9liz2Dx5/Qw6GCZZ9evlHBEeeXgcZ0rWG/5xoX7hzJA5HeFlMqvVh695\nkHcr\r\n=F9hM\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"f8e328b58b1986d1b2e248ebeef472088137ffa9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_6.0.0-canary.2cf87456f.0_1582666669537_0.8057745368924736","host":"s3://npm-registry-packages"}},"6.0.0-canary.781434a92.0":{"name":"@material/density","version":"6.0.0-canary.781434a92.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@6.0.0-canary.781434a92.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dc17dabe1df27ff0fd47ffcaef39d90a55805996","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-6.0.0-canary.781434a92.0.tgz","fileCount":9,"integrity":"sha512-bCFIfckbD5/wT4jpK1gKqkcJFNEEmn1P8JlSSjC/QTm+in0pS/bgcK2Ce7sLNtDtNnvFw+WfSlwX3MphOvCP0Q==","signatures":[{"sig":"MEUCID1pqQbVAiKFGQLXQEgCHXW+HyNoty8gjIFTYuRRTQ/IAiEA5zW1xpHbStVBYkc1u9sXbpm1NVmZBAvGTRrNsM0C88Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVa1VCRA9TVsSAnZWagAAmQcP/Rctyw/S2BPYXVWz4pLx\n8RIbS7oV01B25SYK+feHrBXk+Vy1brBF5u1bfSdTt4KSJhvGTl7PbWcoPBEX\nRguDq/uc7oRwdbd/OA8MSs61njnvi3w+bqonmdklIoSdV29k/003jP3rYbpd\nTHat7pli8J9iiLBLiG5TmChqi7mZt8vQekHdP5g6CnCm+mDSS2Fx6vW2Vd+3\ngo02bacFjZ4m16oAwgEohLSMGG55H9KFsKbou11VcXmFnauvsXCg8LXZzgJt\nwt0QLLMky3LIoiTfCr8q3UtPWcbn61i9XH0BAWwaPRhnnVtPKxKN5gjX8v18\ntPtlm1ktPstj6wOtRq7CVCukriifW9V05a8cc0tb4IrW1h0v+U0Thm1jCNF6\nRn5SJlf4Ad6EGyD3Wl4G0Fs/02xAov6vKyOkWuBtqwYnW9DA2uz2aar+3fKy\nr+4tAjKK3LbuP5R99KiXYGIvs4ruCtjZdDKnX7jxU5yhsx5PM4Z6pbbPBMwa\nS5SwhIEurfi41aXjkue/V8GpMmU9bkWu7NKdLrQegy2KNemBdipgiRZsjjhF\ne9qrylK/H9538YPfCOPxY7OzaPuH8z7/hv+1AqWRZ+Mh9Me+58a5x5QxFhqy\n5FP636Bf8PhOruao+VAla7ddKZX9TXHTx7CXNBXwN8imbxbdnLE1TPbpsLF7\nGu/d\r\n=Ohv7\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"550f1e0ff50e94ece83c72bc45536fa64683d7fc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_6.0.0-canary.781434a92.0_1582673236968_0.8067452926250938","host":"s3://npm-registry-packages"}},"6.0.0-canary.d6f60c98b.0":{"name":"@material/density","version":"6.0.0-canary.d6f60c98b.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@6.0.0-canary.d6f60c98b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1739304595e327cbcf490a0a5298be5fed652687","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-6.0.0-canary.d6f60c98b.0.tgz","fileCount":9,"integrity":"sha512-MD9ZEFessJZsfCMokLWo0kreDIkNyh+tbwNwL4dk8YjF7biMkcz+GXbdpqrqpWppXxh6KsdB9fYB1K3ysFGFKQ==","signatures":[{"sig":"MEQCIGJrhnSl60pCX1wNST/tt2l54PtD2qYrQ7MvxTgo4TAcAiAkGpJcJzlYxZE3nuvmzId3aJlmQrp/cHHztsskppHQhQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWY4ECRA9TVsSAnZWagAAbpsQAJcyE9gS4uAjHQVyLOs6\nFiU44femC/CugDg83GnLFqomOwmQS8ub+TFYbDyhCiQFBLMdN/O00xOOrs1W\n5+CGIKsE6vEtNr0x5AghG9XgC0qXAMlFV6cfq/wmx5Cvg7ggvVDtQwNnjIEM\nVFJcCzZhhFa+aPI1i0goEfAydGVRwdI8op3yiTcZ5Dr6wk3PIRj7Cj5Jp1cY\nyjBjhWRWxJYSrja64PEn4MtIF07qjOgZX7HJzqQlbIecnm+oUjaQzDGG1Uvg\nD8vf0+DO4Tx2mnW3y9NdGScEjW7sFZrqmBjST2q4xOl2tNLCHRj51VcqB8bB\nFgL/YJOeUQwSuieEODLn9En0yGlxzk7BlThwjVLpP2nywQdWev5xjInmHHdW\n2GLdTptSqTnjGe4VHE/8GuTfy6wUqkNngdb4rIZUKNJSskeVhSMMJtgaWLWY\nk9diAi7uE8uXkCM0pBrT9Td1KJ1NZ2KIaa3FRshsJ3q+6W+9IQnVyRdOB0Ch\nNGnS9LOrZpk1BymTVUPOmCRiq5ib1LdQJc3F2t+G14Y+pqkmZe460a4wJz+k\n8UaDZoku5VHgX2S9sXhjxoV8ATRkbP9dNcZ+egGZZ8AD/Fh4ofXvKuUqqgBi\nKnuQ5uxadUZN//yw7mh8O81BspqP6hRWE7S8sm0Ak8a0PdA8K7SXro0L+kEm\n+f0+\r\n=+S8c\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"51319f628dc2d5447017b393bcdda8ea48a93896","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_6.0.0-canary.d6f60c98b.0_1582927363930_0.9863701222756194","host":"s3://npm-registry-packages"}},"6.0.0-canary.69edc6e28.0":{"name":"@material/density","version":"6.0.0-canary.69edc6e28.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@6.0.0-canary.69edc6e28.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"79824030a12c2af427258f2d92bc68f214f2d9fd","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-6.0.0-canary.69edc6e28.0.tgz","fileCount":9,"integrity":"sha512-pyY9k3bBo8vX9kwqEYzEOafm9J0ljB469d4/H4/9gU1kDsbKbI0w3qL9a6auBIzVM7JXu2LsIiaxpFEnC5b3vA==","signatures":[{"sig":"MEQCIAhRp+Tck6H+YyCU7uy/zSe3LUIYVJz5pZV96BlWBRfoAiAQKRkwhLu8jwO4eYkZZtRo8DTHC9oNRlsNbjTt/XswbA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWZAFCRA9TVsSAnZWagAA4yoQAJkKM2mIeaKEwANsQPgQ\nKSJzh57TXWM07dz/GxhqXDC7wdU+659gPwlBRNIFGCWHWlMOERp9lUbBqv2I\nYhJjGMSzIJVmhZLJP8whgMWrnBU/L5wCsE9JfV3J3r1+Tifwuj79aljtlVsV\n/V6x0dUUj4NRMKS3UIOofuyZdLIU3XotXTlo+7aoVj/Lagc21va5dAfWlmpS\n7tscbRWb1NUL7/PZ/fFpn0+5ToVeW8ePpO3x/zBBzQFfypgR2ZfFw2hzcqnD\nVJ9ABWXgcHXSf695ftUNvHoTugc5kaIwvrW3Ix1iFKRB0/jSFL60JBTDPB5r\noN/BGnrMPFSKcPKNRjm1fERc20RRfB/VWSoYVNbTm693bOW28hx0DbPfXQtU\n8tUUBbSYLJ1jofIW3QYJCkVK0MxVkhpgUw9ye25UXcSWB62U1zjXVDtFgTZ0\n38baBKpYeUMyWVJ4HQn8uYLIS97yNyFhm4AfDFWl8ztTIA5YqN89K9bEK2Z0\nG2w8KJtOWX5NZSJOJ61+bm8rVlRQ9L9l59uWOX2JyLGr9Q+vS3TFKDjAZa/k\n4Gc7jeoJuBeAOtq3LJVNV6w1fvcRGTzXKMBqUCAqToyOcH+WI6SRlgJp0IH8\ntlUhjuCqBKZaVla+5+RTxqLbQnJmNvbofj+0mX5NFegMqvL8Z7korNqFRAL/\ntznD\r\n=l0Eo\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"7394312b46cecfacb3ac97cf147ed16fcc42e538","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_6.0.0-canary.69edc6e28.0_1582927876602_0.8216861005580807","host":"s3://npm-registry-packages"}},"6.0.0-canary.9372e4939.0":{"name":"@material/density","version":"6.0.0-canary.9372e4939.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@6.0.0-canary.9372e4939.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"86a87afa9d052eb86b5901e4c1dc559d84a84ec0","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-6.0.0-canary.9372e4939.0.tgz","fileCount":9,"integrity":"sha512-ghuqlt7SRUJewNUwjG1eO+wIbW88X9RtEwNkLwWI3v++wZcCMujZZje0ot5NRWhGaZJUb9ctBBKmkJBnDGTktw==","signatures":[{"sig":"MEQCIFNoliF0OL6tyT9ZZ3KnRVpC/X8OPI/uMO2jp4XeYoVvAiA3u+AAYyCudU70ogrTyP0UoxZ3TEu0phShcmQipSrOFg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXqtCCRA9TVsSAnZWagAAi/8QAJOUrlSW654kHaSZly5e\nMQKZw2llIn5VEXUnMswJ63T9jgCujn3SEvUGGXM0qwwauVJu5T9TdmzWUuMa\n7/uSWIJMfmujAVe9SAb0E/0V7RhIK13vyaxek9Fg02HcLSAURRRii3EJcT6+\nks6yjbiSrFVHQll7dNM8Qgnia4pFeDbNl0tDXg0dz3IReqvEbmISfawKB8W5\n7qGuA66sKlWUtVvVIu5ZAoPH9UysWqLRStaL42IQg7zVuyIyvHS2YN2ZD8gD\nAbxfjzqHIPYS1cdBiay4g0/eMCNFBKTXISEKHJY9Pu2W52wyezg1xI9UUsVQ\nvE2o/c3O1/O/MxufmF07uPlMPK32HcEU2hBTK9InFJmaaTiDrcZMiS6Ffcek\n4Wqr0NJcZYMRf3b9XckR09AF91Pu9Y5u+Y9MumMNQfPupNivhxQBCfmsWI5+\nqg76bTuHQzO/ghf94q5PvxwnHaJzxGg0gROjOD/8lVBFIqi0v/++sGiUBNNF\nnWMA3Hli7gbzqss2J1lGU+clMQ03rMP1W4MaaBx0vL1NbDCL6VMllsSC+HRE\nZxQvM44uQsObA/VLQFOtD2bOGGrNIraJMgoBpBFN0+BZ5iSagGoqMnH3UF0t\nBydcPxY3zu6kYpkYjXyg3K7UmeWmF3pu1/AnHRsYDGH6u2XHYTQkzRNhh805\ncjvK\r\n=vDmx\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"e54df7e88218f93cffe81e63d7e28371126d5611","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_6.0.0-canary.9372e4939.0_1583262529604_0.8848921713023283","host":"s3://npm-registry-packages"}},"6.0.0-canary.9cf5e9842.0":{"name":"@material/density","version":"6.0.0-canary.9cf5e9842.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@6.0.0-canary.9cf5e9842.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e139b377f91c8fb779035765be65afdc0e597df0","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-6.0.0-canary.9cf5e9842.0.tgz","fileCount":9,"integrity":"sha512-PZkiTjrZ1oLLX39ln5pp2NKywSqxpiiB7VfooPPkdNi/gEKKBwHTdafhex0w4waCzvo2ft1lUina7rznvY9iTQ==","signatures":[{"sig":"MEYCIQCpbOJKbzGiknuMpLMqNdAJLm1fkk3fzSnBuN2IQeG+LwIhAPBE40nfHTAFE/ch0MmWwnZSys8WjjXhZqYAHqqm1cn0","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXudDCRA9TVsSAnZWagAAOMIQAIvDx53RxyhJaoPTdr83\nj6tngNLdfPXf2xTT5ke5vVRclQnOikTSFjNIyT7E2j+rtVX0Cy/UDeQdKNtj\n6ZpzJ9jDitA+6xwWvfR9sRmHFKqzaQPQZHZks+lQ7l/WdBfL0dKfQzcodimf\nuUqISuGaIWTihd8hGrfWRijk1PteHwpNjMQ4Gbuu0xzd56KEl1buv+BXbPTu\nyimOaFUBOZTF/4FurLupTtr42QzXYLV7HH1CMhTly718KaPzdZ1pMM0wByVH\n+bkAElOIBY3YekSNFQb0CTbk94yIUhycz4nV79efypUvXlh/EVYqcYsX/Cdy\nhpU1V9QKqFXwVbdVfhdHGSa6nZ2oe+SITn6s5VOMcARUBaWDVZ24UWOFoNMJ\nvW1ejENlNm4qctT/vCE5hvYz2fueg64vRnwimNAkXCRNFW7/GRid2O83ltMz\nxfpQ+ZctCQC5sBEMuVryGG4oddmx3kDQcHhkS0Krdn30fBEMpdea/0EYaWh1\nbM5qxk0wvO54cT8bsIGk/JUFeGW5ZyaGnrEkatEnnUJnrRrROwA34Rnvl24g\nNkspkg2kMZf+ZP92eJoHN7qx9YnR4+aoEK9XwggCgl7i+DGePUjuoDDLbaHC\nneuGkce0w5aXx0gz4O1+SDt12AoKHU2lfgUQrn+QqC9nl5F/kWbyvYXe0tjm\nY23x\r\n=GDrc\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"9ae3d1faf8362261d4cadb5f9386265501b7f143","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_6.0.0-canary.9cf5e9842.0_1583277891110_0.05243727781555174","host":"s3://npm-registry-packages"}},"6.0.0-canary.3657f8863.0":{"name":"@material/density","version":"6.0.0-canary.3657f8863.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@6.0.0-canary.3657f8863.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6b1102419f0ce4247a9b4ea697b85eba0e9df195","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-6.0.0-canary.3657f8863.0.tgz","fileCount":9,"integrity":"sha512-KpKKWlRwwcZ5hryYx8Yib7yP/BhMVR7taYCzskEjiHnwIkHMVtiYUWv79QGrkcjUpuD4FMKs+F8nkXPz30btvw==","signatures":[{"sig":"MEUCICgEmWEX/SFkA9LtgIOpQHMI8Z+SMMFl+EZdOg2ZDU2KAiEA0fD5JSEvmD4g407qcYAKtXj+0L5IvaAnfoKrYv0CH4U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeX+i3CRA9TVsSAnZWagAAw8gP/Ax/2qRgXAUbDTnhuDCK\nWkH1iK64FRMTlTnS34IZe2gcdIyJlP6QbJZ2VOQZ6IVHJV9U8QwJPfwl6Ia4\ngH6fwmI29eo9g8AUEV+h8MUaIgH9yT3OMQ6tk6CfQhm1VIQ6UU63J+difEvI\nk/qZ2BRVeLXOI+yqWl8/iNtvlvRi4WrwEeUhGeUKuZTODJYYFqWKtgCict6n\nP4vZ6mPcCt9YQCi31bIth0bWqhEtX9IBW8kVaA7pSRAnqMURp9HzNVpNVTYF\nwc+WgIlGUpEUUrcmF5y3MaAHvfTV1JKAKn1+fyZn+UR6CEDESSP0ihL1zX1R\n2N1EWfwff9IdUSYgSdhifu4muR31edju2w1qRqnS2Q1BrQXZgi+E3ET7P00c\nuHQ9Y8v+m4epP68lg3o7XQQcjxR1sn9YrH7nn08Bo2nZFNlF6g4WYAUtfLCa\n/xp86+dodDdTgdAR2bIjuDQjEw6vP13iIXUAmJXaD7FkMH/0vimAwFyCHwxW\nl6iREg96YC4dnb24wl1nnlJK/Upk8IOZe5owtq9RcekTUSTl6UaWG81sVq5c\n9WMIMaYywJZFNzcFCax9J2aOmMVAgVULwDQ0DJ2CxfRqCiWBMxc1+FvfN5tm\nutzfTOdDd2eKJRugRUZINUCCF1Lqi21jk3IiW9GqtUm34Z5yg3PKLuGTq6v/\n/a2p\r\n=QaU2\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"4075a5619b546f352f6366e5e90c61777ee28f5d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_6.0.0-canary.3657f8863.0_1583343798956_0.6077159131449901","host":"s3://npm-registry-packages"}},"6.0.0-canary.98b843417.0":{"name":"@material/density","version":"6.0.0-canary.98b843417.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@6.0.0-canary.98b843417.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e88dc094dd1311a1ffc64b474eb4492790336b18","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-6.0.0-canary.98b843417.0.tgz","fileCount":9,"integrity":"sha512-6aX4/Sj+EIBsJThcMyo6k2SNzhCS2rVsp1Qca3RZZpsVEjnxw6ozgv4FRJ0q9+CHlKjQ2RsDnvrrGxfZSzf6Jg==","signatures":[{"sig":"MEUCIQC85LBxrCvRfN7vEW420HP8UPOSLwRdrcyj6nYuqMVaiQIgZQmZzwKwyKvcxE7F8drweqUnKt9FsWwjvIXdNLnaxJY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeYUU0CRA9TVsSAnZWagAAMXEP/0PjojztJH9xdg1QxvKt\nSuWJFSOWA0tbbujZXHgyJF1msHxbNFRSNiLJC8KquVty4HdxSTyUW57M0YCv\noTEl66LoMlcredj1655EdAYt0t3cjjSTrMdGxOx3FkQx7YsDPeQtEDSGmm5L\nbOWa2ACmGy44GNH67gzGUGfX9pUvXieeGcDP3uSsT6ZUJqUZ6wNbqulqjPom\nVNMoreq0sjbUJVl06N0kd6Zwq6C/DErdc/gBBTrN9bmytCda7ww9vaUXdVIS\n++3timsH/xBTEIwVG3y1D/uTHAMXKxviLOMChWtkJnhNIUqvWT7zVAs+4hJ9\nklaaydc/XYrnRsPxgMTNrvGPl307vpD0L0Y+A8eClbdHymuV+RhLCGfjTB2T\nqoPqHd4Ylk3/TG7mS+t+UijVn30wb0N3RBHV0WrrVA1HKyfBRFt+/wXre2p4\nINsS+SDdSnDs4AHtLqVcrWC5fgTKmCoWP7b3jHoEK+xWYbo1mHq2nSsgkncW\nxwHAOullLJ0Nx74daOp3dsJYGQN8J1NTyFMntXSNMRU1j6gommLLQZAIPb4C\nGhpElERUZ5jtTsuDy8faJvpyU8AxZ/FmmsSPawXRcifpqzUBXO7l/NmZuj2c\nkE+wSpGg9ebS/QrrcRZONmlSE28uvNl+zo9iE9WqtrBYTCa1q9NoUSZRTz0P\ne9UH\r\n=iFHC\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"68f2aa7dce5bfe926cedccaedf1c0c98166d0bc1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_6.0.0-canary.98b843417.0_1583433011958_0.19021651069100098","host":"s3://npm-registry-packages"}},"6.0.0-canary.17b9699c4.0":{"name":"@material/density","version":"6.0.0-canary.17b9699c4.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@6.0.0-canary.17b9699c4.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4f168756026b43574ec386bda62152f7d6002fca","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-6.0.0-canary.17b9699c4.0.tgz","fileCount":9,"integrity":"sha512-jRxsJm9h9oopP0zIn1h71kiYM+z0Hi1foSvXAXQR8ZcHgvG4hxnJD29X51ZdreTyL1MqsFkoSXme9ReKR2o7Aw==","signatures":[{"sig":"MEUCIQCBPWCH3o5lff9mipnII5fTN9T9dDcIXYYXhM0nXWWmqgIgMFlbx38gsGUDic9riVpPjumd2Xd8r60dZ/7BB0VZ73I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeYVE7CRA9TVsSAnZWagAAZ+UQAKQjzjQyEhKkfF99Hft0\n1+SEYW8NwWIVqxxxSmsQg1D5jjdoqIXWjnb+F13Brtdjj9AuIMioHaAZxZPj\nouH4v3VdJl38ZVpX8PMuYCQCPApcgnD85X+mo8f5KPzSJdyBbZ6RdzPmS5iY\nrY14EaMYTGwOIWSmhK/fZa6boNky8GkR09i6VIeKwuGFzOgVcm/Wwv1jyJV7\n52yif3sASoeMkhzobYFanCqto4KiVTh2YyGJ/v5TZjVymZoH0r2zHaz0WTLO\nmnlhVoFR437KTlGiDJe6GFpkoQOo53d5vSVbIRePeW2VYD59tt3a2gwnk8TR\njBxZESkKZCux8JVueAKI/ECT4rA9z97+qJroGSrDWhLukuYEsZjbTpV5ipSh\n2z6XsYzdChH5MxE9MrJ7Op13uzdZwHMXUhOM27MnLD1hPMKjDUtW4XIfJL73\nmgtETwj9i5kKKLWqoBmJXH7qi3/gljFsvTEk9IPN88+0irH+amCmGrSNV+Qi\nbzwq5ppAr+qK/LY1GbfeoVDbO4G0VKwN/uG09JQgjvzjxLO23v6SjkiWMK2A\nepc59g6AnXANCoQ4M2HHPhaVoCGVAAChMSuWEL0om/qPqiwTFEdFoaq7EG6U\nDb7thvRAa0f59s+tOcx1QuqYccH7RvIbx2xA66TWitA5C+xLXiJ6l7GoBfIy\nIIpN\r\n=F8D8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"5cc71188279f7fb4c0eb3b0b6b98b59815539374","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_6.0.0-canary.17b9699c4.0_1583436091080_0.017559129745269964","host":"s3://npm-registry-packages"}},"6.0.0-canary.6ee035572.0":{"name":"@material/density","version":"6.0.0-canary.6ee035572.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@6.0.0-canary.6ee035572.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"16e7bce1c5e2a6730ac03abb12853d144e00e776","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-6.0.0-canary.6ee035572.0.tgz","fileCount":9,"integrity":"sha512-SVrWyM5QJU+c5nXn3a4/GNzNrA3tsS5DW0Oj0YbeFCn87dFzwf1A11up4JrpOO1MWkXkqsLgK2FYqjYPl8YhXw==","signatures":[{"sig":"MEQCIH5wicQiUAXV4ro54sa+W1dD4Gv/kgbcGrS3FE/jyOstAiASQ5cTGnswcoRWaj/BIsFOLCaQTGcnrnk+N/y5TYnN7w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZnK0CRA9TVsSAnZWagAAi84P+wSl8/hANV3kMrD+KqhI\nJmSTkoR81lCupuKnDj3sYsmAVMhZvbcW/KV9fIyAln8DLnJwfaVCifDTa59D\nV9SWYleJQpb7bup1zj5OiZBIWA/yhlJWD6yVALZouDqbkla3SGiVsgDc5t2e\ntYqE8pqghJpr+i+yL5EfKtWqi7SHapDCUTx0lhjCdlQ0cecT0cKL6G1rlJfW\nc/8Vp+zUNGCEoD/h8/+lKxdBvmgujKy9ItO3Zx1suWOkX3Y0LKkAvUknJ/er\nAATh5DHqOc0IBOh1iRZLck5GdUCSmO0+jZDs6EzQ+W4k5FEUikj1QD5Af6tC\nKqFmE1J3ibCrXbm3Ays9LJEYBtWY6r4uSpwG3Vq4BYTNXFawcqd4C+9uQbZ4\nCJH1jlDPEqs06iJkQV7ymKOGB8K2KBB7Ep6g8VGu9WV/MPf0qqVgVKHxO6IX\nl24JWkn1y2rsMAkFwIPzv7CRWsqiXib1wrNRV8+adkHH3DGABxMfakVIbkRA\nCDc50hY4qhRfTiD/OBkq5wIUU/NQo9oJjaeIYOR0kuIcItuUMquPPNvLB7pg\nTlP1TzJ7yzKFvyKzXIxoLkIVB9lT6DMNn7KXP0aQcT6qwQo9ccrlZt7Qd/dy\nWhdbGjVo3pYX6JRBJeRBBdu+z3Xj36HqcAp4cfny4Jh6unS9SimMjEUBFC16\nokk7\r\n=1RRc\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"f7d234455251ae34ac1d568b4654bba0bcadc57d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_6.0.0-canary.6ee035572.0_1583772340181_0.7914542191547742","host":"s3://npm-registry-packages"}},"6.0.0-canary.bd33cb56b.0":{"name":"@material/density","version":"6.0.0-canary.bd33cb56b.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@6.0.0-canary.bd33cb56b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a840145d30e869eceb497606230d21a3e7e7f6e8","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-6.0.0-canary.bd33cb56b.0.tgz","fileCount":9,"integrity":"sha512-Jy0hnQ2Xn4pl0GXoWZ7DTXsJAjf2P98OOjCHA6UKIe8fRJ+zlB0DzjcPvQLlzwCqV9nwS6YkvVngZRXoEOXFkg==","signatures":[{"sig":"MEQCIDbjI/RLx2q1KHs8iKyJUIMH75ZJ7OKEKKHSvPWTY1MUAiB/xc3IMULIxPBtd4oS1GA3kFFllHODZ5KWWBSawtA4aw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZnr9CRA9TVsSAnZWagAA5twQAIPyunDbuQOqtkpRLXR0\nTDsEusEmVxIpooBOmJ7ZdKdf630iQT6GS4DobJh67B46UYn9aNPZigk1F6/E\n7wPq7wkeXr834/di//0HBywZ40JhOKm940uV7Xo1k6eJaVMWau1i1QgwSctL\nJziy8CxSbh4WrKE+NjKx2bq7namiG/j8iMtxH5NvzJ1kMTuAxr5KENO3Pa4q\nFa0gTTtvmNgjdXfyvkd7GW4EGAxve1HX89I+WDK0whrLlzGURRDlNXoTaB4M\n4iCZuJ9UgO8cZC85LQOmxnoaJxa0irHkyi/0yJzLmYnXezWcpRD2zwRW+30T\nxO+rJpp4+O1xXZtG9D2sUwmJTB1NR77ty5RmeNf7qHt8QUg2IQrDAAik+nUW\nF/mCUYNHmxG5xp/RcNjUUwJBIWULW2yTDz+yYLtKfEB+n7/JfqGK+f4Ph38P\nRFw3GNwZFtmJAGFLOynm1PnwYTqQTHahAOL5+AtaWoiQmGwEFb2GTJ8BTNfa\n2aNRKxSqV5PEYuVSpRZc5hpuotHjS/+Cywh2t6BgSpt0Z/XyVpfchIst8az0\nRf8AaOPqoQ+CYkEwgIwIniOGIBLI4j4Lu3lqsa/6u93wJ4/tJIZEsq8bgXgz\nnF5XU5e3WmBaLTY7okqRmKwJ2b22MSO5Md2eOVfnnwfafyv/kSsSuBHRG39s\nX+UF\r\n=6o3o\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"8829857459a9b7c92653d2bed2a8ad63b58b672d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_6.0.0-canary.bd33cb56b.0_1583774461242_0.2640998279968403","host":"s3://npm-registry-packages"}},"6.0.0-canary.9ebee4ceb.0":{"name":"@material/density","version":"6.0.0-canary.9ebee4ceb.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@6.0.0-canary.9ebee4ceb.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"23d3a321612b4bbb98f9f640288ba84f3112289b","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-6.0.0-canary.9ebee4ceb.0.tgz","fileCount":9,"integrity":"sha512-GXZi3WXnIZZHbFIFW7HjnpxaRIpgqE8ERmMV4MET+2x6HUPRXAIx5uavbMLSmuKqomw3SuJtK3JwhTqx2ekoHA==","signatures":[{"sig":"MEUCIQDwOzOKll1UMcuwPbemaZxMqssKzD9BL1BLCfIFEU1FrwIgP0qyGjxkqfFAHf2MVPnzvZvQXYiWYte9gXNF1v7Hmjc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZrFOCRA9TVsSAnZWagAABB8P/3dGPJiqwo+FJpN4sQ3Z\njRZjCfDgDCZC8zDuRhK9Og1bhebNBf/gpQxE0ksOK7BmfXM/tSfeUj0H2257\nvEjZRqC6c+LXY/jTHDpuysdLhpgu7+bhOdlpz8QABEHrXlKKu1+ZM1klmmS5\nfDrzZeLbVev/o5RSLMnhXiRT6zU7EhYXa/b6t4yiXWpDNHkPDWn75RRMsObB\nyZAKL2lZCvUZX6gh3C5MvxcYkqqLcccx0KHrNfqQBD243V8fevFRFIdTgd98\nMoN9Iwgek8PkYbisOaGG8sNRc0zXO7EGVldXNyzQIsZltG25ZGozzn6eoIGC\ndF37bY9cWJVgENwMCapqLPs/yN20fM2WoJOtu1CoSpeiSrPzTrebmGGadPxQ\nmMqpUku3kFmRA8atk9kLzGFTrevmPwLcSwpOyDmLP16f+1P/zGjPEWpsG/1V\nD4cSNjT27hmF39gaiHzd92nNuevkntIN/N96JgtCzggnkLbAXL6X/e8o27z1\n5RMgywFbXS2JKQwg2lG97HaSKmb2UBUpEQYoQvJ/KD4SjYZS4VAJa9lyPKzy\nsO5koIZFcL6kaB8pDhiXjaSSoSBmO9/BfKoMkqONQHQc2a9kINJO3J6BJcKK\nxOmhlduWcWSpLHFTES6RkNhtIw9JQBEMbCDAceKnSMicavVlLgWsN1sQ/I0r\nPdkh\r\n=TqEU\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"dfb57a81f5ec017319a5b83b6acaaad397e95839","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_6.0.0-canary.9ebee4ceb.0_1583788366389_0.8800587604351033","host":"s3://npm-registry-packages"}},"6.0.0-canary.26c049afa.0":{"name":"@material/density","version":"6.0.0-canary.26c049afa.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@6.0.0-canary.26c049afa.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"db5c65e42d3504bc22d4805d2707e6cc9d3e2f69","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-6.0.0-canary.26c049afa.0.tgz","fileCount":9,"integrity":"sha512-GGSTmTIikA97JeV6UsEjJVrMf7QgYtJFZWnanaBAE7OKdxYGdqe4ZuG0dUOLYdShJcU1Upy2E0IVXw2GHiN/Sw==","signatures":[{"sig":"MEUCIQDW7MSYlhXYXvqiLJ6MvykywHtTwaVPG9lPWGpAh5FZiAIgOr7tgHwbsYxOaN4aTn0TMm3/Hhkh4LAMv+SaDEOX3I8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZ8fzCRA9TVsSAnZWagAAQOgP/2y0tD7ez7o3EOEbWbiu\ne/q1Mh5+FuI5SXzV5Aq44IUoZKVkZqr5DqiyNItvLAevobnZNL6LD/n5dsuP\nYN51QiwsQOyeQfPg4ub6f+wi3bbWPzD7vO5k7V1Z5ZK1J2scLBWHc1lFSC5W\naZZTjgjBiGp9/ouICdITkPgA1wpp01GVFi4QfRZsGO+aU0KliOPSVGEMlCaJ\navj7x9b4lwXYwQkGHmhP2fV9nDuEnbUO97chvNytVR9u2c7Djqm3nYtV0Ts1\nZd0Hf5VB5IVNo+JHIcjcDVJzFXExB3KCEg+68/s04r1zOqmrdydOxEoWti+E\ndC1KEYkPKepheGhIMGGl0GpXgsbOEkQL3rRv8T2yXk9N6Dj3xY5Lm0SFZaaB\nwAXGqtSe3HvQMCv/KdxIo4rXJd8AlPW0EUVak1hugVu1SLkPMKrvLqg6qRXd\nH/OYBMcUyDsAqgMW+nXwtz3BnMOrHl+DG9Wi9KkawW+OGpreVxNHLA2lOXhS\njtpO0URvhKmX4abc9zDWYkVxAPtf3K2mC8mHM96AWmg9NMYx7XmBBiENa+Lj\nAF28rZd0HJ3PpLKIC3kgUWfP1M5fTqK1Qtpz1AuWsg1QMhlEK8SYnZu139ec\nWHeeIZA0gTM6VHUw4swIiFaFb6FgAzet0lZNMvP5tIGw1ijaFRwAsBKT1c+p\nGgSU\r\n=svOw\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"042ad06994baa2c42398713e57185e4bafc82a3a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_6.0.0-canary.26c049afa.0_1583859698709_0.5080291456730883","host":"s3://npm-registry-packages"}},"6.0.0-canary.1db5c9fc8.0":{"name":"@material/density","version":"6.0.0-canary.1db5c9fc8.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@6.0.0-canary.1db5c9fc8.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"34e2ee7519d39c5a4ad01db4e668b78518117ef4","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-6.0.0-canary.1db5c9fc8.0.tgz","fileCount":9,"integrity":"sha512-N8IK7w3AYPtPyne6Wat8vkJpy/dE+wewDOVApmqdTKlm7zent2XZSUzOniLI+EcckZq6ZXB3Q2O3Nks5gemn4A==","signatures":[{"sig":"MEUCIDhFyOVkdd380GS+gs8R5Ah7nkY1OyWc6eDVaP9/yEdbAiEAgMhgmESCfBlp6SGzlVab/MvhoxD5VxL7nRFQDLJpilk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZ/oSCRA9TVsSAnZWagAAH5YP/0R/yfJkVQ08UAo9SFhW\nOl6tZouqQy1gsGloZ3G6PeY1hScJdm1oV2uO0Rti1BGpBlk+2ip4FPati7Q6\nGYIAXT8AMxb6WqQEllTiS7yNwh6QnJpjQwOE823MHr72H0P1pFzF5YTSLh6f\n+K5J++AKu1fsHAKxxgFSBvKT5VD+5Hw1GmJy2maCjPD9AjZJg5lkRoY3yfwc\nPO7nXnON1gdk3F/A/NI+ov5Ap6mrqB7UlW+Xvo6pXKLHnXx3reLr1kwPAkZ3\nrFi8cEJqSINtV5PL02sFrfBuPIGLBuCmN8BXyep0VZ5qrQlU/1Bdl4+Lrj7b\nUMDN03og/bDT2XtIwwcwocUmTjT6xoWKaVvUE+QgoDTajCE9jiZvGef5rxZG\nmcBLfBylm55CnUMGAWdgnEZbBWizVMfl30Nzbge+okSGardS3nz9ygM25xcY\ndIrDmuV1MppVZ0tIHsTZeCHwT87qy43BiaDPPPf6mfJe/A0O8S5DKVYSXgSF\nZPYp5vEg8rt3qcy5VrFoztMmGcUnTYk651IHN7QhjaXRGGsPwDmKun8ErQV5\nowpG00HGKICo5gKu5VpfCr8ccKLhURt1jj/W4hJJi8npATTRBUHdRCndRchH\n67bz3QyYdBHgaNjDaIcxgeq0cHlHJDJWpA/Nf1IacVsnSShpDIicClulo5X6\nOkyG\r\n=sKHg\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"cc90b13bf23ae60f937a981d548d55e3641c74ed","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_6.0.0-canary.1db5c9fc8.0_1583872530485_0.316187845277778","host":"s3://npm-registry-packages"}},"6.0.0-canary.4971637f4.0":{"name":"@material/density","version":"6.0.0-canary.4971637f4.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@6.0.0-canary.4971637f4.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"68af6ed20b32de86e58ac5396afadabd14e2485c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-6.0.0-canary.4971637f4.0.tgz","fileCount":9,"integrity":"sha512-1B03xZHvn5SfPIo9CCuS0w8zmhlCuUvsrrkHInQj85Z4Ut0mhHsHtrI3mo9tJgxMBGmZMlP7nHbHVGd06xYYgg==","signatures":[{"sig":"MEUCIQDbf6/ej0y4IwPVPZ8Nk1ucTf6rCy+2KLip3B8QTyHXFwIgKh1Yx981cUP0Qel78TIFdXTlmBUPTsHBVoUpseBt2uA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaBtACRA9TVsSAnZWagAAKAsP/08KDZN4Q/mGtvdgz5eU\nGTJqdMS9Xy6hFj83kQiRiflz3YApVr2AdtL4akaPtZAeVxJZKts+xZE7HbcH\nReBVWN9s+zih6I5W3CbtWyY8zEmVRRnbh7CcfnmoEBJ4Pf8VTLTp5mB43SY5\nq6ICMkHlIutYkiwB5wtYrN14F9ShI41HNXtHh4GWAxcL5E4GiElj6ca+HNnS\nqKF0/6A92yAJ58/3qD5VpzIGEnc2Na1VqoJBaVAhR2Q6ZZ1gE7lcm59WavZ0\nSbx7KVunm/ZWXTZQlIAKOv6EI3krYjBh40zFl+BaU+jgBXVbMZsoHqAX+uXv\nnxvTOEquIIkKq8jkf18mTXuCaXWeE9bT92fni6EhGVGY/QjGgHs1C+VuHt+2\ndscPTY/e+0Lrs8SkSmS4ZPyThaPP/+FehlEiOxdhYD7Y7SfuTPOU9LHZjhFq\nLnxkMNgstNhQsoJSDH8npcFH681YcqFXMTDOh8UPKF/adqReJw5jEktHAbqo\nDBUy1ZmMuI1SKKC+I0VBGK07hdB29WMWpSsoFKdSCEZhHWCJb53JzIISr1US\nENKXqhIC5pQ5kRJ51gjdogXxU6b8UhvfcxWNQ7RsO+ZH+Z5Y5CCzKSfBrOVy\nif2lVwK2kJMgarARAaxlJKn2b0Lb7zMnwDjpChShqAIM7r1V8eJiHjmVh6f6\nlJWT\r\n=FXJW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"4a67187585998b5863a9eb407a3ac0a7e550061d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_6.0.0-canary.4971637f4.0_1583881024375_0.20466491906778073","host":"s3://npm-registry-packages"}},"6.0.0-canary.1ae8130ce.0":{"name":"@material/density","version":"6.0.0-canary.1ae8130ce.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@6.0.0-canary.1ae8130ce.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e93e74dffc7bb6ca8802e859571ee9cf204bd7e3","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-6.0.0-canary.1ae8130ce.0.tgz","fileCount":9,"integrity":"sha512-bxpnJ+QvoYvsum2YMf+rHeNooJQ0D+80fz5nTS/DdgTea8wuVHf2jo/VclqbaTeEnn7RmAfjFchhVfrejBsKxw==","signatures":[{"sig":"MEYCIQCWZGioHs/fKnsp13d8opdWqPjX9wjLDzoBqg6x8IELVwIhAPLPwStFAr1xRHUvb0fHrt7W5bU6xODtJ0/Z5tRZmd8i","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaB0KCRA9TVsSAnZWagAA4o4QAJ+Qz3WBY9N83QtUsRdP\nKvN2lDKxEY7NW16NKUmgSHpBzsmMobHKjAZF+wcuB5jdFlsjb0nB1Ygn/5gh\nNLsAxDpM0AdOMwhdFFk0f3PWlFCkqm9qhrtMbOoXDgezVW3eyrHO1eKpPPqG\n5rTNJIGfXERr+eCFnM+/mIq/gIUsjneiHBdMO3yfWbEzUz/WDhYqwXmjr9Bh\nvQsEDswu6X0+9woUR9vcMcQCbHdXq0kn8D/oTWEYXXY0kA/ePGFaCMpRH13i\n0k2qM7uiVzVuP/uzrHgBLdkTAIc5u5oNtJuox2NSN/GdttdEOth4qCtS+dd1\nYvU7LGzwaX7AbcCazWnTklZ1mvMShRe7WWlseq95P/x3npAh275A1O54yFt3\nv3tpTh4+ctPHhXyj2zwgBauRwlE4dQy7l99WpvO5ZXhfU9CqtlkfbjsDP341\n47XGl1cNNSbDrQZxK7h7UjNpWHBTUS2UV+MW3tMKkhAPWxDtsPjeq4Ftqkf+\nkZ8BYipI5muFNgyZXBJsFogBXE+pFTk90QPEmbAreUe+gSGN1q/RKuQaLCqP\nJUuWYhMXd06EZK0H32ChtNaT7Glss2MNyLG3+LRdLCbjuA1kXX93kMmipqKY\ndegi/xY2h7WL3ZhSpdLh4j9iJbWPlbCT/BXnWiTlJzLUOeFG9vV2ISC6G3l1\nJqzP\r\n=JTUP\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"e5b4831aec2400bcd99b87f3537adb62cf047dc2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_6.0.0-canary.1ae8130ce.0_1583881481889_0.9842192830937724","host":"s3://npm-registry-packages"}},"6.0.0-canary.8639c2690.0":{"name":"@material/density","version":"6.0.0-canary.8639c2690.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@6.0.0-canary.8639c2690.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"478255b9f6ed66c62eef7a7e6dcafb48a19fe69f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-6.0.0-canary.8639c2690.0.tgz","fileCount":9,"integrity":"sha512-mOB+3Q3q/vMQDmQ5Ds2oHOzDGsv7m8ENX9llljpm/ZEhou1L+dX6LD6uT/NuXkHNVE7YaXzlpwPudk6taQ7D4Q==","signatures":[{"sig":"MEUCIQCVZ6wpPOMGwbdlzg6nc5LP+MYp6mVF7x2cjvzB7CKFAwIgXS8Ob5XKYvJfPkFSW1qB/1A6uQYlgRw324qLGQ1LaDw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaIX+CRA9TVsSAnZWagAAGo8QAKTMZlHdxYtV0j3b0RvI\nfGNvDaTVmA1pZfs+/7BwM4LuScZY6CNZKxRtDyleV5PEnMFEsuI5h9OMzRYP\ny11CDoshIGUdytOlmJMQOoyVRCs8WeIcbo911MylFpZJ1cIcP7HV9ZnuK8KF\nqknv4QLSrXIQ/AFPuxH/LNyAr5UyXPQbxm3zB7ktvwciF5FiO/feRlitF1QM\ng7BqdbGv+9mTq9wlrOzcqSploGbr1Awwls6FwkvZEKSU3KmzO3t6vJweViSz\nSW77fY4uLupoNaaTIn3cBociG3V2tQSYu00qyOHdRSftKdScGRTanrNWQvmf\nT2c3Dn8xwH9l8GEGPV1keW8YAPa+WHMiRI2ctZo3Ydd+s0k53HCGdKnf6R+N\nltET2d0vOz4SMb+9BeyLUjrCIi/ZjaWSaxncZR2or9SNnQ9SZ/pTJtVon5jV\nIoD1FGCktIBsz4orEGoM8vWeSQVGy+vsn4VaeeAYpfZdbprEDTQNqqiz7cti\nIIlPEXCxwKinL8wmt/K6jq9NoHVVU7b2O4QE/FtYAJVgbgeDHX1K3yNh1Z/9\nnq+xdIZLKktZ8/abb4fVmmA+Gqaswr4+nq0sN061KQXq+yl2CneT21DzgWx/\n3kRxT1jkkrpvkO2HJycKitjkW7i9uVEwmIMktQi4oaAJ5sp40Sed50gppHH6\no2mi\r\n=lsoD\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"3834dd0603f05e8710f74b00560d4aeb887e5b82","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_6.0.0-canary.8639c2690.0_1583908349847_0.6007410768613437","host":"s3://npm-registry-packages"}},"6.0.0-canary.d5808057f.0":{"name":"@material/density","version":"6.0.0-canary.d5808057f.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@6.0.0-canary.d5808057f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"65cbf6e01e37dc1dc33632e266d1d65516faa8ed","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-6.0.0-canary.d5808057f.0.tgz","fileCount":9,"integrity":"sha512-TlE5CzzH87FSQ0I3IWKlcUeLQnSUKqykit+o5/ir0wtgyQvaB1Px11xhLp794DpZKmYA5Y7JY3af9bCaNGG/Cg==","signatures":[{"sig":"MEUCIQD3x/a/KlQoAN9jkv+KsFa5L0nAXBjHE4CeAgKg0mI9LwIgYe+vNUzuAHKbUXQz8Mi5eTQs2vUdTppUo9Jg0kQahE0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaRDOCRA9TVsSAnZWagAAmyEQAITvwpJ4g9V6yOlqr0uH\nExNdCr6n8l2cwVxk3GEfuAWLuYkC0CcmFYNpv4v46MPU3STHlKCu2TyXMa3L\nDR8sOOEPIHFb7JGRudQjebyuxKeypylPU6OX5k5pfXdRJZevwVJzMrWIr11O\nfW2GSKTG8BK+0OsHS4+FpOfjSEAFmKFOwosWcCbedWBf0DFCjR3nZ82qMLCj\nWWis02JIId8mbWPoIt+BzCjYGLsCfsVX3dV6NVoQOjmZ5GfSESzP5/fq+Ome\n3aTuTqsTV/cjikruQB4gV6GiagHbNZVBhuKTUMuPfOy5TNBr4J6iGU/Sb+cT\naLKKV/kJvDHZTc4awWXg/Sy9b5fIg5r9GxA6La4snkD2iP1aj5iIw/KY5eLg\n+Yrnj32F5fDl3evGh885Mo5NqZEqNHfGx8Pqf34qTmaCqC291iFpBrAeBPO+\n1bRYY7T8mHf+qg8kIVGB2ItP0fb9isFAzA1BxYkqU9awr183WSB1LOycw6zf\nbSYgfFcEwDtLm4sDRVr620x8UWZJICDr7DIC5XPTDSiHKScCs4Ch78aO5684\nM8E1kKi0JPG2DuZ+F9M7FGOMlHJC2F9Oo5cOHTNH8dsZa0u8bc00SLYPJ3aE\n7gLmByWonNPOM32ePXdt9wo8y8ZG6N/cx7/tV/tq7wZtV6wZgSyTfSiai6zW\n70iY\r\n=re8c\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"00a6ffbbceea71ed3f3126dbce724119ddc06379","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_6.0.0-canary.d5808057f.0_1583943885833_0.6303209158352479","host":"s3://npm-registry-packages"}},"6.0.0-canary.b3f58203d.0":{"name":"@material/density","version":"6.0.0-canary.b3f58203d.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@6.0.0-canary.b3f58203d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2a55038f53c9be85cba4758e3eeb88a3a6090261","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-6.0.0-canary.b3f58203d.0.tgz","fileCount":9,"integrity":"sha512-VQmM+iX1ZQxMmXyZa1yW6l7d55Ffu7y7uC1pwSQ04PHdNycq97xf/v3Ea0svAT2zv7b+r/jTgttzOMm/soY4Kg==","signatures":[{"sig":"MEUCIQDMRYluVNMGZlQZkZLvR/UglgM7dPk5kpbFCDs30PPbqAIgcuycrofg1Dr/NbrCewD/rx5hP22Y0mmVNaoZKkVrLUk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaT3pCRA9TVsSAnZWagAACk8P/iAt9kiLJWUlvsYjLcAA\nHE4Gsw6SWwVkz1qJK3smyVHBdcX6Yxx0SVU5QcONphxQQ3C6M6HJ4FATAzGf\nzN5bJBOKPBcNDdZmjedSM0Dr1DOhcpYjuRviDvm2lv5uIEPNYVJFSQnToF1g\ncJUSz2znwg65Dk/o8YFFAetYbZ8ePq7FxkGwKpl9i78VArvo1nIpSgF3rBlb\nLT+APwbBi+dTBGfMMMG2n3jNf1sJR9p8Y85oHWPorkauLvxCTCQU6SeixhAx\n+Q7T6s34qmqffK39G8Tg+iulp+KFTthdb+BEDmUrmsSb2IPRjjoqla18b/lV\n++DcAUP/wPuwGXTevyB7BvEsXtdrkvsaZxx5pC712c1Vtlzo9JgTqtsWAJCr\nVo8biVpqia2M5U+yIx/BgulvA889E0r0wB2eXKVTvriY0MB61AJojP13+A1R\n8GSCok+2K8ZYZllqRWTmBQEfJbmdXRtw7pcuuTeMBIRGnUZHeWaBwI93e8Nt\ncyf2XBXEMCOUXA1A+I65LrDB64u0SZpfQNwv2UWodhoiK4HR7P38i1YSDjMy\n1UaYfrJ9zefmK0C3CUP267Iay+/4ltSAk/lZS+p8HvhpozzAfY8lUJIlsFrT\nXgSEvQE4O8v7RSbm3oHsB4xqBDjgpJfDDkmmGVeyOY/8MO9TdBUQczMQFUiq\niSAS\r\n=G4xu\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"b9ad376b2ebba49982e9b605c903e752e4fb28cc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_6.0.0-canary.b3f58203d.0_1583955432819_0.1646215603465211","host":"s3://npm-registry-packages"}},"6.0.0-canary.bec065920.0":{"name":"@material/density","version":"6.0.0-canary.bec065920.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@6.0.0-canary.bec065920.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7d75d239c200b8cffe5b5f081e9fb2c39d623b11","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-6.0.0-canary.bec065920.0.tgz","fileCount":9,"integrity":"sha512-5I8uN5188TB41cIJDuoxRspQP8ZJ70eOy7qPzpfUMgzSf5ibDh5ev7xM8Ok0d0b92LsZLMdtgXrzV916fKOg6g==","signatures":[{"sig":"MEUCIQCORSAfDp9xdp1QHYlRPaTZgQqF4Q7KXloo+IKG71Q1GgIgV6oEDBkxkjCviAG10ybkr00sLCLjFHNuymIYJaF0xz4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaplHCRA9TVsSAnZWagAAQGYP/AppUOM38HqXEKdIKaYz\njVVLCFDyyFArM8BfcHmBvRCIGaAfVVZRvstblhFUVYg6+KkanT3osZpWQzCa\nrCc4YVN5ReZ6+upJ4d6AofGkCbDmbp0v5px1ICXGUAUAxXIbyZuD3QfQP6zF\nMjkDiq3mt3+887bl2CwS4zSBbQCdE8pBp6NjamS83QosPInub/yUyfTLDZ4j\nl4277e3DLgQotRypKqKPimQbii82Keb07JPqFb1caHbXEvKLr1rlnIP+6rGk\ngnppyF3PtAzGK2FpDC+8OIZIrzYB9SHV0Uw26CjE6kUQ/rbSZ1oHYDa/5ekC\nHwx8rbgqQBECkaJEwTWPglQCESUUC3ou9yOsbxrqE8P7Yn7Hb7u7+wLN4AXg\nx2sI5fSndr8Ydo+LbsVp1RfgNxjyTdeFluJfgGbrCVKYkgMcAVw0LwGVQr/Y\nJc8DQRjSUhuPsyfNgNdODlQn2CUk8O8AQPDbzDDtZl8R58TzUB9W6jIQ4xQb\nKm9oebbzJ7s8Io5OIJa+iptLaNbNl5V3uVTOJ/eoYphfHWFosLlFhsNIYSKe\nhTkzfyj9OZSue6abJJog/r8SLSWwBBshmnEP+WG5g0j028FzyNxlpeBl23Eu\nL22ULc3F1wJs9ujW7zw9Pky2AB1mBISLnEWKsrq+U0EgPHsNLHiWMkRZYv9y\n/7I9\r\n=uIRN\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"ff203cc1a864067909d369c1408fa7ce64954660","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_6.0.0-canary.bec065920.0_1584044358513_0.7319268576768416","host":"s3://npm-registry-packages"}},"6.0.0-canary.776291ef0.0":{"name":"@material/density","version":"6.0.0-canary.776291ef0.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@6.0.0-canary.776291ef0.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e2a80c6596eaacc6ea8e136c26c8af3562f055ef","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-6.0.0-canary.776291ef0.0.tgz","fileCount":9,"integrity":"sha512-6m+pFl46lsW+zn3g5v0FENY1vpSimylxqZd9f+ZFn5a6wjyyuGyRrxTilSXjfJAa4/3128Iod/2m7yuDbCVClg==","signatures":[{"sig":"MEYCIQDo2xeM0ojFL/OAJIBb/SuXWOrdKjqjkJIJRGuFVYgfVgIhAOCxYkQfWWH4Vug0jIFH/TwvSlNd23mfmB/1u2psd4Qx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecSLcCRA9TVsSAnZWagAA0pUQAIPnR6lmcV5iUfvuBL1p\n6CEdGOdd4/x5n0zbEpoMiHJMDflQgboy0TLtriGt+w4FcY5LiAScpDu5434/\nPwvGCO5WWwIjkUavyQgD0GVOvI0GHbr8j26NhWmlArQEIS5d8DUX/NZjakNA\nLWtdusDUz/Dnke6KCOuB7vS9pXnVUodprFohGugmSgvkahcWk0PvLdciSsOa\nBy3rWERsLe3T+1T2JLYdNDKsJcY8O+u8c1MM4dL7kruLWKg8IV6Qeusasl2j\nnL2CQPMJP/LhHxJ/qQD4L2TevuzGZ4BE7L6Uor9jvbTMtxypivhTbVVYfmxY\nw4iEycv3rBob6kZ072Oku+4hm+01gbd4wYtpOZgc0pG4jppMZme54HUQSBoa\nOeW4i6gkbvfEsdflfntU2WXJe76Ha+v5B4abYlvH6i7SvPZblEqRXrMLoJjx\nQ4LfxaUU8yHZNmA0cdGxzftifcM8Vz4SslrsiGW5IxMq0AHkGuZgLX4yy5NH\nlXHuku99Our0mzZ1DNNiWm/www2pbs/Jqup/uL/qLgDU2LqFHOBq6XCoTiOp\ni+cWn0+vsx+yv+c8GcSdGgMa1rH338PpadDY5ApkAqkr0L05TXejsui/U8pv\nbLhLsDVbWmPV5hEyJgB5WKyzeM42K4iXhXKux3g3R1TrJmS8ghdpIMkYkDJC\n4v4O\r\n=fQ7v\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"32f95102d2dd047c662697060685989ec64bb05a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_6.0.0-canary.776291ef0.0_1584472796447_0.9808335562973638","host":"s3://npm-registry-packages"}},"6.0.0-canary.ece19f3dd.0":{"name":"@material/density","version":"6.0.0-canary.ece19f3dd.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@6.0.0-canary.ece19f3dd.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a29ea16bae7a9e75c4b46ac14a401ab1a9f723de","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-6.0.0-canary.ece19f3dd.0.tgz","fileCount":9,"integrity":"sha512-0C5DQH8Psr+WmbpRnIAwFJvl2Q2fie/LHqXqU1Ecdjezq0q3xSRh5olCphOmYhs3YnUiOffj3dWgxAenx7YYDA==","signatures":[{"sig":"MEQCIHMFD0ps9pmV1pjhdDSLyKMzwoPIb0M4h6Wy9GeiCLySAiBa5Fzhm+t5jppIZO+Cnqp1QDWuHoBMzJPnxqaYtKODdQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecUiBCRA9TVsSAnZWagAA4JoP/3wj/X8qxT/F6LhQB18F\nMbPkG5m9h+DwGv4fQc+P5jmUQShYKfyOiqQj1ngq7R1hi7Smbid2NfXhbSdt\nDpJ/QtMOU10AO4r41SP+PL02wb9TvokL7B/PwmWDMPcuSvehyJydke/CMPPU\nbEysEeDesJrZzoPR3aPxqAN5waqVxM+DjxtCafotr1BiPSwjjF29pG/FZBrM\n6f2nsDTr2pL/Fot41r3/SJHAcM0I3CPlHiSQfC2dTQ4NjdCqTdWOkXH0KBs1\nFkHpKVne/66kG62P+Tr+mMyLbK/i06BbbTIHv0ZDMM49fvU0nxnZH64/JzUu\n7ecs9sy8K7lBUPNL79NxUAq5fpWq09rHuN5oroWr7vFvzOxNT+1f8oAQeWjR\nJFWzbSxeOKEBv4wdc9L20FurPAMtk73X6s1YcShtnqzzdCGm3KDMWxNS9Hzc\nX9wiygfI3WKOQZRzwwR3TAOLLKRCCE7XvItq6cP9JJqjI4nYp1sqfkiYyD+C\nnVoVIZr8dCIwGwL/S5PQHHOxk8/L0V76IDMccncq4QryguVMhEVRYqC5/Z5I\nIpo83FBj1BpXGH7MaVhsyC5ornO+y0qquuk5zo+WeURxC4bGyO+ONyx9NDTQ\n7+07AzBs9PDkB1Y6QqVoVOL2lAfbzXy5IhbcuYNn/FhbbkHwGKEDw+5ijtrR\nWFUk\r\n=V+cM\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"41a07e9906ac09ddaefa5cbf8327260df4eacd59","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_6.0.0-canary.ece19f3dd.0_1584482433016_0.22754722151690143","host":"s3://npm-registry-packages"}},"6.0.0-canary.4dc45af6c.0":{"name":"@material/density","version":"6.0.0-canary.4dc45af6c.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@6.0.0-canary.4dc45af6c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b2f02245a3afe9aedf82459289411798a42e305c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-6.0.0-canary.4dc45af6c.0.tgz","fileCount":9,"integrity":"sha512-1yLJPJbSfgrpxWzg9M5BFo5QzPcKq76f0/1Ol3lmS5dMfDDc/uTlaPlfYnI+MtkrXvwetST9eEK2J8BKaTSf7A==","signatures":[{"sig":"MEUCIQCFCp2ypZqupD7kzIyqJKFH6pUUrTxuckspWeE+5esAGAIgFTO8sMwo1k/8Kwo/Nc6NsQQ5LricFnpjvL/EfwHXse0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecX2pCRA9TVsSAnZWagAAEu0P/25rQza9wCajNeasUFX3\n8JBvdGP1kxVdCGaLPjs8ItIylCtsCYVhpoql+LxKwPD689MN+taqNXa4uRff\nGpJDAVlEWinwwncm/nfOHTL3Rw434qJUM6olUDilfONweiy2O4RmspaOyJ8G\n35gpUGmlr3Zobu/9elmxWS9DRQwRK0XXEznrthDonQMy57bkXksGDTOzDRsT\nlmZ0+8bOh2J0fv6tMMPhSonv04opG10q0bkdYzQmkreqf3TJ+isvr8lhrAkK\nccNWNmQ2LbwaheeDfuhD6q5moUjUvopCMT9XdAzNvtB8wgfLKeXghzkUFAqs\nuCWrNC6D9zHqtI31llWBD5WcQ+DXeaukO2J6bFn+n7Y0y7OnQ8tR3E1FQwde\nVY1/Y7lrnK3C/n551gXF48g8rco5U/G0lxIApT+4HqlhF/WNBKPUxJiT7uEa\nDo+g0rHzU3uZpA475q1TMP8D4MeIxoCAUCdpr6RvWAkX4Q1mSby63oJ+mPih\ndtWuOb9Jds7ze2x9OCJcx4firajJubSVExCT3iHKvkSYhTmQgAnKsri/pL1N\n4eLUsusb0I2fZ5h60Jc/u9GHLgt+qU99BvYLdLSuA06F36+lGXweHlGAUfEa\nKl5iwziOLcpO2x31A8A6vdSJgr/0oFeF24lRcCrXyH6D2leiQoAOUui/hBpO\n1OO0\r\n=S0qo\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"a2b97fbd4b046de86f7e8aac6b54c5a6d31583b0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_6.0.0-canary.4dc45af6c.0_1584496040409_0.7194619240623279","host":"s3://npm-registry-packages"}},"6.0.0-canary.6b48781bf.0":{"name":"@material/density","version":"6.0.0-canary.6b48781bf.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@6.0.0-canary.6b48781bf.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0f910ee93bba869cc1cd52e64d412b5f40ca794c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-6.0.0-canary.6b48781bf.0.tgz","fileCount":9,"integrity":"sha512-34KycxN7FmMteF0ZP8VmqYuqJdEdQqHQK78lxlnqtWSQNbnUZHO/vaHn0L2bbeZQlICm8Tzw5bJ7P7IJhtd8zw==","signatures":[{"sig":"MEUCIAVmKvy1XiVKnwTekufG/jjI/qOf0ZxyjOfQHIMIOTjzAiEA96p58C9O3pll6d5bdphp9szqQQ6LHhgwTc6N2JArNIg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecj9TCRA9TVsSAnZWagAAg6IP/Aka0LvLtYDGr5BrpPjb\n5l1vhRV86CWUz7dMxdFOjDk9zX2/hxeVg28HGLf8GpH4y1eQWGoGVGU66onK\nszWrk5Y6y/0U1DM2LDT0b1hgULKhlgLPFS6+NoU9poBwOIezzcu7F0VSueBt\nxnx8RIEdjKqDrL2sgLrD3P8yBFOXL8DdMapECAwdh0auQtqGW2gT0iEXRE5L\nyGo87TEdNv72GtOVjVTcp4WG36NimviOM3w0DPJmiZUtbWm8ctTR43gEQXgI\n1vUbtkqUA1tHUn6q+xgBXQ5e7I977NAxrB0fcKRG2/4xefO+m4iTbh0De+7G\nwtpPVsUbXnATZeV8SmQJHyApA2GjrMzN9a/Dpi11JtTMiIP8NqijmzZBydWJ\nHgPTZQ8XjXvQZGiKQZg4SJSlkDXuv3uKC7WXv1SwndyI2MtHLZlbIXMAcPii\noac6+ZMCL24RlhWA1+c3HMa/Rz+PBSAzKaOpIB4h2l4JDpFnaa9iHNYHPJ7M\n4o/cIh0wWbKP0xzc/8vXlyS93JenLoMi/Qbs5DBpg1Vt/BNnar85QLrKW4Wy\niP++TIrFl3UsQ8AX2nDrOwiCunRFS+qDweAa+yYhfATeZamO1opTEKXB5V/0\n6dCN5tvsG2nF5fAo/+m195GIl/81Mntzllzy6qqFtvDLCZ2U6wW51sxzuYv3\n6nXe\r\n=BBqW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"1da9fc619190678090689bcdcd73eb5885c8a35b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_6.0.0-canary.6b48781bf.0_1584545618817_0.1897881837999913","host":"s3://npm-registry-packages"}},"6.0.0-canary.a88c8e4dc.0":{"name":"@material/density","version":"6.0.0-canary.a88c8e4dc.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@6.0.0-canary.a88c8e4dc.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"557d59f098d61c7990bf7b70dc7c83abcde615ff","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-6.0.0-canary.a88c8e4dc.0.tgz","fileCount":9,"integrity":"sha512-fJD2qVyJ4jIStav5L1sXmzgP9k49my6NMj+jDWzjgezLsK2ZzkHCEhD2IUJH9VH1F0+xOMFu78sB53ECvJjDww==","signatures":[{"sig":"MEYCIQDYr+SRXXDZ/NSrfWYF240yI8vmkIw5HNTMAwDTdenccwIhAIuloklS0jED7ktbGtcX2jdCOB1wvn+GY3dTzl27EF5E","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJec61LCRA9TVsSAnZWagAAqM0P/RnH80PiDpHCi4c+vVKf\nFdp+wMSoK2Fu4YpiBc1jTdqdQAS2Q4fpvLDEZXz188asEltZdolSJXhWyC/l\nPY8ehYftn8YE0LddtVF3U6YlmFqf0Wdr7m2cPEUg01e/XPzCVvdhtebpFdUO\n3AwlMKa6vSxippE46Wu6ZXnfIGG2M2kXid0CbcYNRnmtpShBWiJibch4tJ0K\nu/KtGn9bIk1v6w5LKddRnpopYkD4sUDU6MzA75qHTo5SBJ4dQ7aU21G6FzDc\nBTT5N/vC0fqJs+7FYHyCwgcT1Vhrftuc18Q51n/+x4tlzHwQ/mec8NqYDo4b\nr0fPQnfyaRyw8sVoIrjQoV/FRj5LwzaHqDQYzvgTpEFHxLnb6+ul2gkPoVzx\nc8I2tpjAgyTRupSvQu4NPrR0Veo6X8Q6Rpg8NyP2gR8JjAXr9JsAABPCa8i8\n3nN5d8Uh3U8CD48ycCU25BAIYfZryr9uTFwJCUybOiAz2lyHBrHDUlzE3wRx\n10T/Vs5ertpn0lc0jF4uwSceLILNNx1OLcqpZO3IfCY8I7i+U35kWnivQF28\ncd51CXeuZdv1ntY9dZz+/ISUbPGejhZ1m2o0txDCm6fBrOzO2t3K0UnkcrJX\nhZmVTTV4jQssaSKMllhhDsan9S4sgx0CloxmGDUPfHrZBksQnw9hYnUp/98U\nX5uf\r\n=jvmc\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"3d8bc73a5f46456d2ada622785f02cbd3b81c6a9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_6.0.0-canary.a88c8e4dc.0_1584639307075_0.6415665865649034","host":"s3://npm-registry-packages"}},"6.0.0-canary.cafe18860.0":{"name":"@material/density","version":"6.0.0-canary.cafe18860.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@6.0.0-canary.cafe18860.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ca7f815232c2f88d8811146f0a16b87e0fa813d9","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-6.0.0-canary.cafe18860.0.tgz","fileCount":9,"integrity":"sha512-skyTy4mJMTkH7t/EIaPSMzwCGlE5hZ/R20GBxSxJPUQY+dnM7CiKqBzQRsb8S6ES/HWxWypPb7f11kXUXDqpPA==","signatures":[{"sig":"MEUCIGhSjgxDbwBWxZCVfWILz25xDiOQuiIMyWiofvc+vwgrAiEA2N+0fPrNPeEORAdJptl5zCy6j+oujIS11tRF/jlnYbs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJedNi+CRA9TVsSAnZWagAAkXwP/jn3+HAYCI7yW/0CvPKH\nh9sloyZiH0c43TCU8vIdLx26yS9hFCAsudJz97RzhqTL05iTmtG891q0gxUC\n6H23w6ekHS9ZXF7UKm6r0BPMPWURhJhn/6B/XGeJwGPNAzdM98ww+yAPOwWW\nGA3WgO87heInFeJepqEfEZv6ekpszNHnMsglIvpjMRpjnSJcn+lxBoPHyHVr\npt8wrexMWbzTfPuKicSPcoxbuBCEjHGzr6TYATkLPf/ihLSNH6myfSxTv9GI\nzioaH9lExFfv+SlxkG50M0DA39lbwCz7lN/rRJzOfmenZFuE6Njx7Jta5aKr\nvdOIMU6PMXlLoB1wsgYj7EsH6qRG9i+fokYlgPPaufkuMolmoj/qWI83L5S2\n/xwj/LKrPCdNt43BGNa41DWY6M7W0ldjHvZeH7KDhjGUygBg1VNl+mAcuCT3\nWf+qH5lQCHoY0/j8oF+tvnGfde6ViMywjLANwbdtXRXAv0QNuhUxR1FES8Ve\nOUqA0m7Or3rRfJorGYwcLDq+aNjVv87tlUem5w1SYlxnahBReyaZWILxJAx2\nE5XgvGr5kDeKENjPFxGthvjuYaHqRkjbF/sVAE5qR5mika1aWd9s1vYcb40J\nCBYhQ2xmPNOUCc39lkM7q65ZXtx5GL5JQElv0n98g09sisyTOZVC/8G6OKr/\n/LVl\r\n=8WXS\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"51706b933143947baefab6db8cd069a22ed080ae","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_6.0.0-canary.cafe18860.0_1584715966241_0.0585830957522675","host":"s3://npm-registry-packages"}},"6.0.0-canary.35a32aaea.0":{"name":"@material/density","version":"6.0.0-canary.35a32aaea.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@6.0.0-canary.35a32aaea.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f7a09c73d2ce000728ea3bc0d819060caac622d4","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-6.0.0-canary.35a32aaea.0.tgz","fileCount":9,"integrity":"sha512-r5g1abpF1qOWhSawbv6K7PfqYsGkb4zH+EEB4Cu4B8ztwCJermz1mgMF5GftvSHBovv5zLnHLu7/kVrE/VbL7g==","signatures":[{"sig":"MEUCIDCSQrX7GMwGJ7IY5ANtusOImrSDEZ/kv5iup005kskxAiEAo3ReuXdG/KaypbGwealWEfxi9rnbBfkmP+gJYtBO3Jc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJedSBeCRA9TVsSAnZWagAAwmAP/AlihLklEFhaInNbDjKD\niSnRQS/P+JWro8oSBtpY8FlpRTXbsQDTst4Yo6Myj+HZWDDNBwF4eFUb1fd2\nvGfnNrDwTmfZ1abtgzTW+7ntWQo9A9uQez0hrq/fNyK+wTTJSo0POgAWS7Q5\nhK3z9lO90asT0ZPP1LAoJ94XMU3K5iP5ABmQuUohd70p3UK7EBAcF5nKyxEs\nMje0xY6d9gaYsewzIXikLypTRNn9mNGjlgFWT52RDCaPh2WIDGdg/vNHore7\nsyZAvwYYL7f0QLfGd+hdzXtIA5tepRHrf+zbYoLbCQphhQDJFrMr+86jDmyd\npfJ+9rYz4/7hvVZLazvJDH3LMUpwfsyKokNUKwHguTI3o0mpZcZ8IyyixO04\njhACEF3jJgsKSLyCXqutBfkUsnlaCVvVc3O6tiA8NYWA4UMP4FnLv+zM/OKa\nrFMWFn9Kx91IPx3mxS1WGO5pGIgFKb8DPRs1QxWrSinpYbHXZmzj9/2iJOHY\nOGWMUDSESMdFKAzMjmsHc8+nFwJMX+EwBacFvllfiNnbZVQcwGD2vUfbqLfy\nHyZ+yxCOKulK9LusiXTYexyRcdr4sNH3+ju/x5byeGN9umtqTssTNLYk5zz0\n2+PRR+2sBMHDk6uM0Y3d8O1HxY6nazagJhkwLuFz5vTtLeK+RAEzelApcoO2\nrdbp\r\n=YfUv\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"09df3d66223ea8f4d4a6ee61b9e34bfe08387774","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_6.0.0-canary.35a32aaea.0_1584734302118_0.6413411440173724","host":"s3://npm-registry-packages"}},"6.0.0-canary.e75deb854.0":{"name":"@material/density","version":"6.0.0-canary.e75deb854.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@6.0.0-canary.e75deb854.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5da67eb1efaf4b217365453db51e1f2fd7fe9e7a","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-6.0.0-canary.e75deb854.0.tgz","fileCount":9,"integrity":"sha512-y3cr47ZVTNDJZoiLyyfTkBYSSS/1WuNC2zVr6MrF7SVSc7JDh63UWW3wTSIvBrh/mWYbvC02ydbBsk4UG2JB1Q==","signatures":[{"sig":"MEYCIQCmnup74LQ4EZ0iRZbe5dOu7Xp22r7ah5M8zdjvaguInAIhAPq/VADzSvLOgY0BV926PII02ws0W5W3KnbeQwBmu47k","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJedUBGCRA9TVsSAnZWagAAbpAP/jiWobH9rnqmlSsyyIw2\nqrU6t0OcVM9/XBwjSqrFZW0kfEhAb7gLZjBkbPFI0BdGmDFNrWPm/K91Hk8Z\n05lYKTEjYeiiceDHOECVxNbduROS2LVDyzxNBwgBNVdzYjXcQ0KpJuW7ZbUn\nWYg29CJpMi8qlX5T4VYUnRKTAyUc7FkoB4ra8cHIafZVQVqvZqCPfDB//Mdr\nzzG+dNWX8y3teRvCsDucohnFttwhrxUpCOXNOkK8pbLwpB+e4MP+vS3vVAy3\nyfwf5f5+fk1f+2a3UcIIso9KE0QF0imDqdWaye1Sc6dj4ogYsyAWbEF3AD+7\nQssph/iJyb9KyiwWJglW3kgpN6IIISfJ8p18QUFrAecDb13OLGI6a8sGXs19\nYvI8zZpsWAKqrNmlgacPB1g8/071EXJ8AQQu3CKQaqfQfpT1j6/sESJN4cjJ\nB4B86mjZXSP2waAX8x3OsAH5JAxCdsA5GlVf/SbJIu4erkQ6+7B1KknZ29pm\nW6+MJOwyBzIb/C0ZQ9dFdYLB51OwlXaAq2I1wqa19kbBARxAt/vmyNldgGwe\nLGWyvTWoOmVZHtENUcAx4LtOqwilyjqPHXtgE25mW+wtthf9moNge9ja/N3n\nGC3G9lzRYF9uqQmjVl+OM7Mq0UtkPg8OVACLlpy5Dw4tQOXuw8DWec13Xr6O\nDuU4\r\n=JZVk\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"a461f6b9120827a65ed980dcaae3ff77d0581d82","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_6.0.0-canary.e75deb854.0_1584742469265_0.6314719731076541","host":"s3://npm-registry-packages"}},"6.0.0-canary.2cc6966f6.0":{"name":"@material/density","version":"6.0.0-canary.2cc6966f6.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@6.0.0-canary.2cc6966f6.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"36154e6b06fc02855e633d7495ac57d6b99c513e","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-6.0.0-canary.2cc6966f6.0.tgz","fileCount":9,"integrity":"sha512-2bAFUv+hH8AFEedQqngKPLyDa8DROW4iEgeyBjehRryeq2N21ViIEdrTJLPJgJ/vPYlUYoDjHDfsUYitTuOAZw==","signatures":[{"sig":"MEUCIQCJBy6mHaF3U4SsE/xa7qfDl4bZioqsCZWo1Iamv98IzAIgcD3Cxrb6MVMLXEtH9r0XSKxr4l14NN2lQJ32/xYKScc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeelSfCRA9TVsSAnZWagAAtWQP/38yd3j2blwwTlZ3IIbQ\ngO0sQ7GoHsJnqb03poQYQTK39UYCMq6TjHjqxuR4wbtBng0UOJk0mb6dFgI/\nZ0VXayB4OgcBXtZJWeoVjwFLeGs89db0EuHnR4/DKRF2tU+KYXq/wCLLc6Gq\n9hvqD4FHe+9VlLZ8IAeC+/5sw3+St2rylYID1qYyFQwidiW6jtNwBeUTjVbW\n0vlPekNs07uJ3P/SrELkLcflld7gZFTluuXJFxkusuXUk4txwcvmqXMIsDVp\nd0USAY/egFLc6Pqe/dW9YcTVNMXG9E3B1Wro3HooEmTxG/RWB1FePkr2qSO2\n3N1wrNa05Je0Vs7xSkCvtgNFBTwde01JGz2n6ABBTp76i26I00lQ+bYKzp6N\nE3m+2GxFNYTclPU0jKsBzk/vQD9S2RqhlNqhCmavkk6EnR3x8pyAKHWT819c\nmjHPPhLvscQJ/pkXh/C8X+pEzhGOin9Btkf/LSHg+dKrTPL0C9b4jOjUaqwN\nMOb7cvPtbxImN6QynEdIQ3qaXmy/uG4BT4vDtCR6am6rE4X3B1w/IzAIQdaE\nEJhakruaJcoG6MvaZnIPZqzDYaPeZ7OtKJZJrmQkTYHayT/VTHwP8L3qAvQI\nwZ1PZUuBwIZAGotVsyPT8tOyinKzs1s+gemMIOAY8irffAqyNa//ZCnjWTJV\nJOLG\r\n=TO6p\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"4af7a6e31c561afa46ba7b74cb35de52099583ed","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_6.0.0-canary.2cc6966f6.0_1585075358568_0.4343576875326265","host":"s3://npm-registry-packages"}},"6.0.0-canary.8707953b6.0":{"name":"@material/density","version":"6.0.0-canary.8707953b6.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@6.0.0-canary.8707953b6.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ded3b21a05f12bec72b82a945ef6c7856d6ba3c0","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-6.0.0-canary.8707953b6.0.tgz","fileCount":9,"integrity":"sha512-rP3OV78Gfm9DSnhGf/6zcaferKOQg+TVkf1WTPPxGpf5YWJzclo+GStE1oIT68JfFCBYT6d2a+cd943EThbmwA==","signatures":[{"sig":"MEQCICmVfgEoWrEVCBiQbeO1f5i3DtZz7XhIiQ51sCWAOGxEAiABkAwszqN3XDBMX7McDvMuiYBKs0KfIw05l/toPhqGGw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeelV/CRA9TVsSAnZWagAAZwAP/R6VLDyZaOumZKFLN2pt\nGMt5b6v4O+8yji2Jq0JeFVpJk48mKeaUoMW6+YbCp7sdEd1Vse3tAng2f7gl\niubsd5hm6WqLbflZ6T0TJVSdoqAIGmjpMzC59VzVrlnSkqCAUrJmGZ/myqSK\nwgl5UmQd0EvpoVbi2cv0/uNYO5Hyf6rZqjXHa2vsowWDAF+ut/ZYTTaGCoT0\nEAEfS9PMjFd9iiwqiU6wqfQ7EN4j2MEHUaJ2bMwU8xw5NS4hA+dQvpTEjUhG\nKa6dxRVkmykWTn1ko4cyn2sxNcM5YZcycn2eNePzpJUnbtsluvhKbsN0zfNk\nPPkFQHybTCNDu9mGsfAOFoc2aroiHTMJC0CZbaeDRYa/AZ6/Nc/JkXWtOWpA\njTo0iX8m7t8CJ3h3W9JyWAjrnKwzUAFVBMN2egv4mRVPjzKKdIKLvp1HSjQg\nXV4trnMyCMnbmjWVF3bXdhYCGBYPJa5+qkYgsaSHqlJE6G+2aQOC9R9X7yHt\n4dBmsq/4o8AX7mQZ25GflR5Ajj+ozbG0v8NuhQs4+MhbdUlXEXbww6pELCT/\nOvHBu5l6s3fAug/3u6Txshjc4Via3+tO417u2quASR4/kCHvgiqWQ++OhOxC\nYF9rISabIUM4odEbp1Lj+1Z9PGPgNdz/5BVEDG3JXj4bh3asIFCzSh3N4bFT\n9VFt\r\n=Hjx1\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"595709807214943e737834107d12d3318e69112f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_6.0.0-canary.8707953b6.0_1585075583282_0.9045573519018917","host":"s3://npm-registry-packages"}},"6.0.0-canary.10af6cf39.0":{"name":"@material/density","version":"6.0.0-canary.10af6cf39.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@6.0.0-canary.10af6cf39.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5bf3af5103bad9d4e67a2b9c8932e70dbe4d8575","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-6.0.0-canary.10af6cf39.0.tgz","fileCount":9,"integrity":"sha512-G2naupVA6UWgEdg3xqTX9ntjn2V6pBxIcnOq4B5FybEMfOYcsYNjJf1QMbXRiHPNwOccdIrY14FSqbpM1BaZHg==","signatures":[{"sig":"MEUCIQCR7SpNOzR2fGPY2xLE0S1AEzJFkhONPO3naIAc2mzP8AIgGgKl4eUThdXqeyh9EHvgF4coZCw33+o6tCqWpDndCiU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJee6A8CRA9TVsSAnZWagAAuvIQAKKBNmgpXAiGIE79GBv/\n8Ap/4hqIC/kEkqxJIF7IuApMlEF0VNRKYzyMe4wgki4LUJmWLQLjBySAQSqg\nosh/6Wn/uQpooyArZZ8zJZYzMRzFXQXqjRrvGXRDzK/AjBqm087Xtzww1F8m\na/BjozBhSBwslMIfAveYMHssB6pw/Dz2OGBYzTN6DcJX3K3+dzPAdiD39ZjA\ng3Rn5IWRGrNS+zxXRX5PbIxqcPBv8VuU19c3U1mWPFfHShWCM3LpeuMJaK2p\niRXS4gPBxn3yeYC3AOl00kc08Msv33CvHDU8fQRk5lmFb1owEjVm0DZMdtWc\nHJZZn7VOPFD64qG+5vt/c6+9SewHEPtG7V+qoHOymKp/82HzA1KDxXcX+8N2\nn1aL0s/br4WwKQ9AvG8AMf5/aKF3YLMQ5O09fQ1rqtawlYvUoC0cAHfALF6m\ncFneEjxqF769Hx3yPbJTcnQUhr7rLwUR0pCbHqcox19MpLW6hroLKrAv+sik\nnwLgWKLYeJgESyNBZMEOHIbfQq0LTTELLEuZyM0j06phFVOq3tj3fvHaPR3f\ns11YxImqZK5kyha8I+ksk3l7f6SwPceAl0s5BcbZLVv11MSDcttaWEH+WDV9\njPt+h5XuQ/99IeGAp89MNRlf1ghnCDj6lj2/G9QuT2i7DdcLQPTT334Wnpsl\nxRaM\r\n=H+QR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"d618b0c9ce2ac312ce4b887450bb947ed367e100","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_6.0.0-canary.10af6cf39.0_1585160252314_0.2735699699368157","host":"s3://npm-registry-packages"}},"6.0.0-canary.7d8f9c8d7.0":{"name":"@material/density","version":"6.0.0-canary.7d8f9c8d7.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@6.0.0-canary.7d8f9c8d7.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"53a7e2dc50ed2225fbf940453a80bb409ed76ca6","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-6.0.0-canary.7d8f9c8d7.0.tgz","fileCount":9,"integrity":"sha512-cK/B6ZtMXQQP1n0J2ET0o7qe2M7mJ1VSnQpBogTA9HSSrhlba9xruJ2XIG1rcVVN2ZQPxld3J/fANC6fNOMnVA==","signatures":[{"sig":"MEYCIQDyNhKOzyIRjYOwf6iNcxHTyU0JNfal4env5vXsUx9OHwIhALbwH4MvBHuv0vZ7U7PtGQXGCaHhCu/HYwrSWObrnvOn","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJefkASCRA9TVsSAnZWagAAvFEQAIhQNgXMHfDU3ZFSxr8b\n9S9DZl3+eQBEgESgE+qy4w2WMSgkIYpyTi4GercNrJCmdOlDwV8Ht9pjqcZP\ngi/Bhv6mRjhv7M78AddIjDPLx5xTcs93JQym+2VxafrLLmsEkHygwvJfxa2/\n719vRSSrF20dAX5dOYQX43UozeaViBA/BsvOevgC/JOY+OWoIT1E+QYoPTD6\nANU+cNQ3jciEFALXpRRDGYDAWDOLJ+ddPamtCRAyqppohKLHy8DWXW+SeckS\nVG96ZhnfoeBWpKFO/QCuDXgT2iDUckd+avqqxANKg9gfUZaknxvtiaWEK/2Z\nLheJ/djNfVWkilVEYQ9r8XsNn56qzn4BRkWDNA10bqWbxfYCL3TgMlwlPKhE\no5xGxP6VpsqR5NMt9EpGgwTnLLSLdrItzQ5x60d5MrF2Clp1FmrcBcrxmwqs\n1lA9BpnIqLnCNy4o811nwDIEQigPRnVEZhFUk78LG9h973+6LtjYRTu46jXe\ndBVOv2inhCR15oh5tgRYdWdK277WTyd04v2dGVbduaMaz/00AByyJ1cXT/mt\nBJ/hKgZboPSGONxai9iRjWCgRU9CLv3mEJkAeDnEYlpAv7r+z2BdolOv+2Yr\nupoNcUCWD2EeZ35BIjnZOOG09P1mtkHJdGfsfT8s8paIuNnzl16KIxklNsdI\niZOq\r\n=V/az\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"764519b823414bee993cab6845b42f5b60f03c1d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_6.0.0-canary.7d8f9c8d7.0_1585332241706_0.5175952310738774","host":"s3://npm-registry-packages"}},"6.0.0-canary.d6315efe2.0":{"name":"@material/density","version":"6.0.0-canary.d6315efe2.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@6.0.0-canary.d6315efe2.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"de7c30ceeb5022d7c16ab29711d26b0058ea419a","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-6.0.0-canary.d6315efe2.0.tgz","fileCount":9,"integrity":"sha512-4xe0MemKYQTrvzuPejsSs7boK1bOeD4YnKmghJzLKLSF0cUjoq18pR0fQfyWGWicJMFnflfEsgd4IZ21+5F1OQ==","signatures":[{"sig":"MEQCIDpYMiciB0Y/OsbGhREGewVt5zymUu0bdVbAeJmN4KnHAiAWLBqdLg01Q3iya3tewlYPEaQFkvSNnN/tlP9rbTwq5g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJefloxCRA9TVsSAnZWagAAZ3EP/AvGMTYwsHp5httgqUZ9\n1iQsGSIw3jsITKJ47PZnGdFzQjBmxTO53mECmEijcQREsDiwWCBvTvP/EsUL\noVgbo/ZrE8/Flvzo5HF8tUJfqRigWo1HTWmOVXAj3roIEm1BLP3P+eeBZo8u\nhRoRpRjynFtWUacL9nSCHbkfybZLx7YvXn9tJA9S7lxRnHVw7k0egsvVclkq\neV7wxIrnqTBy9FuR4Ui+6Hsn3bhxWacT991Lw4fUJEoPO4O3380FmPamiIJ0\n9q1FYtR0TMBVAE8UnzU1zOoBABfMw9zMXEaTK2M9obAYPxha3vS69+MhJ5nM\n/FK2fCCf8j9b1z7SOELbvInvhgvIW+KtIdWjyTUnXwXNUjzFqAKFESAtbC+f\nv/nOtm9QqsGc7uPJQyVOqHy6B4iMPrtU9NYnyjClFcRp27buj4TH68u6H3Fw\nMjo/j1CYZoI9xsTfyBiWXIqU5ErwimnkAy+sW2w2LFkg5CWyhDLDAET2Fqbk\nu6Ys5yyxolRcSaS6CioFM9U+AgFaWcM9PJcrsu6CgcM5ttWEOTGPIKJiCQLu\nmRNO9rI5FArdc2BJy8kT3sXB796IIGHXbhjZyVq9St+4p7McSKxlOK/FmxSq\nwYVX446XT2UB0I8g6GGj8o+56w2gKg/yslX6GcWBE0zlFb/hUXAI+xriwMvs\nvd5K\r\n=S4Lz\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"87fcfa262498dee051bef9a0a8e8b8f39869e6a0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_6.0.0-canary.d6315efe2.0_1585338928781_0.7944833430147358","host":"s3://npm-registry-packages"}},"6.0.0-canary.a3016368d.0":{"name":"@material/density","version":"6.0.0-canary.a3016368d.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@6.0.0-canary.a3016368d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fdea91d36b08041e374f9b4d867ea6ae5a12cc15","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-6.0.0-canary.a3016368d.0.tgz","fileCount":9,"integrity":"sha512-Ncfkc8vbtD7XgfYlBAagVvdfMs8vSmyqdl8bRXthjOk9ZyW+d2oQ8SB3I047WTEuR258FWOQWoMhhdhYkxTy0A==","signatures":[{"sig":"MEYCIQD323+Lk9ZU5jK5rdtcWd5BBto+1r3dImHyu1wx6z0POQIhALPXB9FF33Mcw1w9JgpSk3imiLUu9gLrRMNE0aslSRug","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJefm27CRA9TVsSAnZWagAAfogP/3l11oNNtTRrQdWqmwrW\n0J8xpBIpntbdq/fpX0A84y3T9mD4tFdM9VOj7N4tNgzpeas0ca0zs2pNVksX\nddg/UwqpoCsb8l0nTe9hBsixRk3541kmDMtfIPjO2fjxxWRRmuBlMKiJk5N5\nTbpBmk8xgwNtmAFh9FPmeFNY+j7vISfJsFWDZ8OghzOCa58whO4WpQzs/WYb\n0UlxEUePqRKhAyKOEPO7GDUvT6auTU4pNjbDACQ8vFBbuHxIp9c/2x0Qb17y\npV8bX/aZJLy/xPnXwVyv3QT1ErCADSOHHIGHhJG15tHrU/iMIUSdhE7uI+QW\n1V30Cxz9yOiumKK2j54r6jD0C4mForoTep8UAyEKRrd9eF4AlePrXaLvNvaE\n1HlHlFpwSDvHkJ/E9pK3sZaT6lIBU/zoxz1k3vj+PhdYEtxgw212xu2i6c5/\n00ZV3SVspEA5GvgwJwRVQCrFcnehvejgASCL3eVbu4aXH0gPpGzLCDKxU/vg\nqTwMtisZA7jLc7DB6B7Eia/E8NlXv69MKj7TtNiOcYJZCHPfFDtiV5D0cXer\nNC3iHTo5vTS/AMVsIlG2aF1x5aJdq9Bfh4fTbHmIY6Vphv94bwkrYY5AUwIU\n54x8ssJO/bSIqYi2vUko2DJyUgR0fTZPcPVe63SpmUqRri0UhIZfBU1Zen7j\n9cVL\r\n=N0Tb\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"e41b28d8c25aa5e36e88910a1404e7a0730c5d2d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_6.0.0-canary.a3016368d.0_1585343930745_0.20874560418143573","host":"s3://npm-registry-packages"}},"6.0.0-canary.4b45b6620.0":{"name":"@material/density","version":"6.0.0-canary.4b45b6620.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@6.0.0-canary.4b45b6620.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d88308e86293c898e5f588466a3b770e20bc67c0","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-6.0.0-canary.4b45b6620.0.tgz","fileCount":9,"integrity":"sha512-GMITU3BcjFRmKN+FZhtl1NqKzAc4TrXvIxUb/lj2IO8K49uxYwcwP8NmoHyD0aKbnwxw8W7lpq0kDYFGZjqYyQ==","signatures":[{"sig":"MEYCIQChfKucHDhWoa+LV7PspMmJkWNp1Dt0ANp4OrV/MzCYuwIhAOHyE/iqfA63Fz9PoQUWfoFvM9N5UfYp6V3YO4fbgU+r","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeg2fzCRA9TVsSAnZWagAAsNIQAKCptxdj2kccLxkCNcL+\nVb1vGbpG+OfE3WXyhm0rQTY+F+RVJ4HglFdkFW+u77+cX9j6V9H/JrAkUt1l\ng+rzmLLeR6VOBaesAVtMzKbTbLeWWxXUcptZVYRYw5YEczZ57RI9kdN2OGia\nxUP2Mv7T67MESXe36xHkOvqeYBpxLtJRtGxq1y0fDOyxNI/hZdONwP/RbGI/\nHrEf+Q2TXulbKx80DCqnKSmOeGXRRUhMWko5HvmOM2fd4deOs2ataojnxVDJ\nxRtqs0Y53p/HW0te77uoGBugLeWg6qAYCmlq6XwMY+sJfQGup6PVBblhY2As\nOqw76jek4TGiIBPUc9gqFfST4DqxifvTeQZ8VKs9WRFRbS3q1tEczQF5jYXO\nIRZ5+cUxu8HGm5A+8IYHGTHUom5btXiK5ddiarP5FA5pXhX/QKSoD3e78Q8/\n0wR5JKOjOvDccK2uvc6g1qnjxhSo5eU+oFNNZpR1Qi90z+2GSyJ9NRO+sIl7\n3h36K4D1t7Ur0GRSHlpbUqCu6wHr8hQa3Deg1ptsGDSQG1YTf2fF1tD75MsP\nSGet2KYDB6V8JQz6XUwBvkzNH8SBDcBv/wC7yxAtiEL8HRpRtW0n2xpcqwAz\n6Kma163OXUgvu3FQtKIN/kFRpwI4H34/dbxGvijkUz6MTrl1nOuKYGFsVx+l\nkNNG\r\n=feN1\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"9d49d0fd4e563f312e9b2a25d111cf5753591eac","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_6.0.0-canary.4b45b6620.0_1585670131479_0.7893015612067882","host":"s3://npm-registry-packages"}},"6.0.0-canary.e84b9c8.0":{"name":"@material/density","version":"6.0.0-canary.e84b9c8.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@6.0.0-canary.e84b9c8.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d193f3ffef838d6338892fb9cff72a01667f77e0","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-6.0.0-canary.e84b9c8.0.tgz","fileCount":9,"integrity":"sha512-Y9i3Dc/ZBwGCKnCNNgiSXWG4GRk6LrQpoeFHWXGNMbcrIP+NACPU+DSjsdhVes+Y9G1NeyuS/jUFCiODT91lfA==","signatures":[{"sig":"MEQCIGYkXJ2f0YAg0KTDnC2RBL6KolwtURQT94gMHuA4bjluAiBM4OsamfG6kKljiwmQMGNaYiMHSKeMbsIIjHXxT92sRQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12477,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJehMdsCRA9TVsSAnZWagAAT40QAJJpl1Ga7nPxXqp2+C2o\noMBi29rr3bVYbpI+FNY8yWWzKAwVOvGjUocXWHrcJhQUn4sypOfBATYmvPn4\nLwFi+zkLSXFs0b4MLRnuZH9qG1cE5hFbwJkbCRsoH1dpkpVwX2yWlpiQNV9S\nNOay97IuOiP6IE1pYLTAnJfxg9oIsjaGGDP4gUFAL+IHWNKr8LCyW9DjDm1v\nfuZIihwSPOXqXL52+ADZIqd/s5h4LWPjeziIwdMzVVIF6tY1iRTbF/1e4Oig\nEaRc4VOE53irPj3JZVk2C2tjZ6tiT7t40v5z5TLzgPqjrsWn2sFaBc3w7KjF\ni6rmcoSEtTtPzR+MMZ5z3GIE2xYoXOCdd6Ihj0SR7i9piXPzgOvuIdkEhfiQ\nT3fERsV2qiHBPEiSbdsuVKdTm2eDaUpKRSIak9e7TdQINO7ShHVEowOLnkOc\nbslMy8puLL91TidZw5iK9Hd2u7wuHGTxWrLme+R+mb0yoJNMWKZxjyw6RKCz\nMuvnsn5L37ymrkPg1gpaYqzJBPG9RK/ZXdQRf7wu1O2F/OsSvy/w5zzGvi0P\n+bNSzV5b9wLAOChN5+mO5Sr4UNCBstQBzxUS9HFbyuxwt3MQNdYmFdHCQnq5\nbvWuqlrhHLArLcNLt/Mg76Iyujxf/lXVqbbVZmGimX5rgVvGaTrkCtqc+dS1\nO3Y9\r\n=zckQ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"8c119e9b02d2718e7b4df7fb72c1724650583b0c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_6.0.0-canary.e84b9c8.0_1585760107626_0.21695399789110392","host":"s3://npm-registry-packages"}},"6.0.0-canary.e33c49e.0":{"name":"@material/density","version":"6.0.0-canary.e33c49e.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@6.0.0-canary.e33c49e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"26f89d94e1ef9af114eb7fa1a8e983d2ad7291dc","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-6.0.0-canary.e33c49e.0.tgz","fileCount":9,"integrity":"sha512-7H3kAx0n4AxELwX7TAOGqFA2XPu3wmInaU2tkVBzP+YPjCMx3zNdQLNo2gGbWXaj6LYK6ZZkstnS13G1WKJpSg==","signatures":[{"sig":"MEUCIEeMrw3JhPPZhLfahx7zirylfWdXc0x2qNs43H5l4NClAiEAoHjjB6U2qyAUyU1g+k03jTe2yBqYri8UomAz1YrKksA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12416,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJehS0LCRA9TVsSAnZWagAA9+QP/AiGzSztNH3PbIOBF7mj\n3XNx9d9hlJKjNQIuS4E5z7eTDBhJrPARdMWF2sV5eFFcoEXQnuqPCg0rjI4g\nHNfNEzRWpoPoqT3GZeCSEP6Lw0ure/OXkQRp8HhiinrAWjNlg1ImcUh51MHY\nfm0v/oMfKoXBuqN6DhuOnBoUN8yLRzaT6jrG94nKpJ9CqNojQAJ5jaej7nzR\nW389NbQ1PV7lRqyh0HRSdXgHFnMi09VnmHR8tDALfXHm75K8rqVIpIW3QBoA\nYILpVZoRGEfLIT4tXNkVMWSzJ9JoHS8YDg5e04wJXFWDNabu1Xl0u4wQYVfr\nqdgUOoTRYPBsaPDnmRSfI9ypk3zQvcsNkv5hfYRSRWO6JFAjqcvHZo+yJnzr\nPpaeQOkRIFd1DCbcfasocHZokC64OhepzgMUVV+N1aSDrNlw8aoNrOt+Z/yo\nXPg4xbhCcMFdpvU2QSxiueVM7rpsW/CSYbK/iRxYXDq/jyQbAHtyv5Ar6iUL\nkS4gily1GTZyEBNdM6XevT60LZY8633l2aspsEISJ33WIrFKi2BGycNNDcDY\nN2xskhBx491NDIn5W1y2aP/ZJycwIawxzWZ35c3M4obw7WwgRmAhaagrfiuO\nnTiyMW/GDHy0cQS/Z47YGasesZbRKz0D3NOp4HQEl/1fYR/fo1JTJydhZxNr\nTCO/\r\n=1HZ4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"e369357845cadf1687509d31fac95d3131a90718","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_6.0.0-canary.e33c49e.0_1585786123295_0.8246059957786356","host":"s3://npm-registry-packages"}},"6.0.0-canary.f1f8e60.0":{"name":"@material/density","version":"6.0.0-canary.f1f8e60.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@6.0.0-canary.f1f8e60.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ad6fed085e6ea56f60af095ed2f2b58d13b4c2f0","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-6.0.0-canary.f1f8e60.0.tgz","fileCount":9,"integrity":"sha512-rsYpcZ17J7YhsxJFLkTanAtI7AdA82J7SFMYQ2urmJo0ID8QHmFcAyJq9/3n8an6j2CIzyMGjHXs/9PJcdZ5Rg==","signatures":[{"sig":"MEUCIFVJEOeVbgq1j5VLe35p8Q0NinNlzC2aBhVgTOp3S9s5AiEA5MMuo/5M4O/zbzze3dSyL2TyJtHYODfwWLOptlPJ2b0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12256,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJehjk9CRA9TVsSAnZWagAAAiYP/0a8t8xzkGj2zH+FSkcc\nEHgkF9G59ezawqLzknCLkukSN6K/FxEW7cKX7yjlleYhIBOwA/3/35grqBkW\ntGtpWXo9cWeDYzMaFjEG3qtBAsshtBK6LmNBaVV8p8ZIZw1fuH8U0TZWzeQb\nUfbWyBSs/v1/ieKIKnhETFbDK1omVOGujIFEZEhfO9OyNmyKluwigy+CQ8xb\nYWOPn2cWuIU9DELCwQnER43CG78vtdrD5330jp2OifrMsMOu6YWli3x/jgn9\n+5op1tF5JMMMVqgLjf/xUlwBoIXsr677Ne8Dy60HvvRJHf1qGhfGpg4x94Vo\npcSYHBf7ENPFKPLT6Cw3lpbkO70a3fLL3ifxZje2eHGjQgnqddBbzs/99/Ye\nBN/Igl4aoQwolAUA74BFqgiBUtEFVPuQORpHKnZ2+RdmcDyNcjIlWypODZlr\nbbEdDnDhSL8cj/8YFX+V6QDQ3mCUZpVPHIdhx8qKItB7ilUhraF1y6LUgGA2\nby98RsYhT+zL4Mfj7W06oH/Ipk8Sq7MMPCL5dHyrjSi0JmuxIUkVitALSozY\n9Tk/QLhltxMV8dQXqedt7iVB5XOb1PcqesAs6AvrEHk4oQdAOPIhWXu7sdtR\nMahseJZED6pb7hHl6pnRAJiU75wvGHI9/qIJktXS/Y8v425bsGhCa0+c8qXW\nczeM\r\n=f/v+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"aa365c532331b10b868579dbf1fa4335e9499185","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_6.0.0-canary.f1f8e60.0_1585854780675_0.9786254085267112","host":"s3://npm-registry-packages"}},"6.0.0-canary.1e17c49b3.0":{"name":"@material/density","version":"6.0.0-canary.1e17c49b3.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@6.0.0-canary.1e17c49b3.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7bba3cdd9d8ab206634fc1b8eedc4186473a9ed1","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-6.0.0-canary.1e17c49b3.0.tgz","fileCount":9,"integrity":"sha512-rJ5XGhIewi/O99LbpOdo3Sx6asZxXy/9HoP9D5o67GTx6YKDM9nqQiwjtTxCEKquNB+kvR6K/IURbzL7NIAAag==","signatures":[{"sig":"MEUCIHOdpS8X4gSMS4uZ2RyKK3QK6QqP0CK8jLwRcrvPz5YeAiEAwjj5gViLZo79WgYkiyISMcPWNAXZRbYg8t+3H3hNQGU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeh3piCRA9TVsSAnZWagAAvfAQAJLhnztRPQbadBxmN1WA\nzmfRIkCWgn4IiJ53rLLBXX3QCwH8EqwdRv35AD54NMI3T8j0h+9/v4DoTvAW\nueYEVawYqz4mS1uFM4qp0UkftLkXFaAtFiVopbExm9l/uPM1gaJA58JQ6Vwt\nTce5aYDE2BKtY9rVbMmHY7SDhtj0yqzcFcjmG/MtCKX/mvpQXbxMIECBOQFM\nehhQe8PdkVw7qkYyAKKD3kmPwrXtK4CieWRUROEHLxH6BKH+6WM/rwexe+UU\nYaylkcKEzqFiSorAvXx6u9ruCD+TgLhYUc2N3jZrY2CjOLL5K+a5t+Yj2L1m\nD/ZMCCu46vB4gxzOzorqR1aMRNrErp0hc4zn6LVBgJuyQn+hdc2gGGo7IK9l\nIwNzyQ4FSh9J6kRJZlx4xL9CxYN2lKYWBw1zRFk8kGSaAA4JkcKu0P5MCBl+\nQGW9w03EQ4+UPX0yBp4SzAAXOHvPo/ZUj24OeF0ItOuLLz0t9WfWd7uV97yF\nivUn+8SD6nr+oSxwD9mPhbRdtpmBggZE6uQqJnLe40sUils777Dvp/OnfTC2\nc6nh6EoXy+JZEyScmxxwtH92wGaGy55jku8Oh7ENlQzc8Oc0GKumRXcXwfpe\nM++yVfV/pglwAvjysSbGxDyFbLXIeOXnRLId012pJYAqk9AIKizbkrxcMkz4\ngMa9\r\n=H8gF\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"08bf363eac26d705e8c4b0bcda91042b9c73f82e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_6.0.0-canary.1e17c49b3.0_1585936994002_0.34317701610593243","host":"s3://npm-registry-packages"}},"6.0.0-canary.6a40ef217.0":{"name":"@material/density","version":"6.0.0-canary.6a40ef217.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@6.0.0-canary.6a40ef217.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d15c9f52b1be11667422763b5e06b35325a1cf87","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-6.0.0-canary.6a40ef217.0.tgz","fileCount":9,"integrity":"sha512-szL4tneG9XteQpZ/WupbY3RahCLJftprAHrswVsqieZ7BcaKWrrcr+lwW7zqu4nPhd7oR/Y0CLD+2gStXtyxYA==","signatures":[{"sig":"MEQCIAkqLhrNxSj9wSl51RYRTDLhQGWbPXCqJAdkcWB7YG/CAiA5LsDt/XpQZGfzQR+GOze75INGR81sYq+lT590EddcOw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeh41ICRA9TVsSAnZWagAA0GkP/1AupaSIP3RflM35Jb7w\nsZ4XWpcvWOPp9cwNsNQya5I7mmg58Q1851IrahJIsjGv0iVDkLOcCTgPWe9C\nzvMcp8Uun/FRpxOV5FlPnRCkyzQjG12jHG1whXvxJ5tSNUu+h12W5ag74dFz\nErneWT+wVbgOSG5DVRGjH+RgrnSpjaNyp2ee+l9My1Ep62hRYSScxbv7Sb92\nOWSsN/GCWvHB5lzwNryK2cJc+2m7bgM5ajpMMEE0uYqIwGG+bh+Vpvqe0QNE\nXOgevPZeH5SCm5P3lL3MmclkLKLHD+uegilcgS6xYCywYPpG/F8EGOl8mbam\nZ+MRsKt2QTVgYpaccJUDnpp8SJJyb1tYJxvUqt62T+g4OgBImTg+nmg79u3k\n2RHl7jHsmSwl6aZTS7N1T4uXY+y4d1ispIMLf+PnuhZfbafUap0qkVE49Fq0\nFnaZ8x7C85pYNrlXEDGZrZljdsjl54G+LA8I1n+s/U8pRXJDssQ1L288Mbf6\ntoIlqMItM0xhcyMRmmtvASsGlpVLbSoGgYn8VmT46Y3ms1PINf5BEw8faXtE\na9saCpcthC60exq5tg2pXKlkbNSV+Ax/NBCqoWpyVuEIy55R9adqG8GoACK9\nOdmdBOigpTUVnoVIdm6tf7pZjbInxoJL46eDF9ZVDrUOZPiAa/kQk15SS5sW\n0quz\r\n=UEPJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"94e553cfa7e3fa8977ae7bd2ff7df4021f815787","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_6.0.0-canary.6a40ef217.0_1585941832254_0.17152684972623655","host":"s3://npm-registry-packages"}},"6.0.0-canary.5f24faacb.0":{"name":"@material/density","version":"6.0.0-canary.5f24faacb.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@6.0.0-canary.5f24faacb.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dd2855faf17537ea94b2260127d8cbceff01ab3b","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-6.0.0-canary.5f24faacb.0.tgz","fileCount":9,"integrity":"sha512-xQAtGhDT+lH3yfuhuritZNSB0nVXD/aElBn2O+gscexLiazmTqm1a645PN2407CLI5XcFHN8PDhTIL/F9KXHCg==","signatures":[{"sig":"MEUCIBxlB4HSAZsAyTR/k5JzFSz4Dl/J+QBAqB0pP5h3hcprAiEAwntVNmmtQ27h9R35xY6Z7EtfdhciGptyey2g9CllbsQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeje84CRA9TVsSAnZWagAAyoMP/jnmJL0z5tP08A0jBljS\nfwWKbnbglrr6+mTbR6cyFpi9wupnLoGUZ1UutLcHTRNdeD9pdhNv4WZyorBc\nQo3lShVUcgeRFXNLA87ifehJknMaYZVXkyq/RWhUl7Q++K8UxwtlTnNpbzVb\nN4rohAZ9mq4Wro7l0v+HbtIfPXg76+CQ2KKQfY7bhA2xnFLFoTBn8ZfKcY0l\nYcddb9oNrw/LRF3bh3r9KGPdMVEOTKEfPbhNExc+L+UDAFgrWlyhNgnty8Vk\nIuoBRohuv7Bpmxe5dS2m5zgu/m6GUfEZHnoPc5gMGst7/mz0EDEiLag/cUvV\n1Rcv3r8G/Z+YJRrbupqeD3QyWIdxZUug8u/6BCteNbE6Ybeo7kQcPfed6ozI\n1VtmlLjpjHPZrIGPftwWkEAPVZXnaCDm50Hbr25bFZ1RNvg8IA9TYRwP6ciZ\ne7RtDgC/PmC7YB/UOpLXvWsS2Jv3oUvYVieoICfs+FZCR9AUtoL7DvRzf810\nfuaIaUaQdT0EbbMPnrAZ6Ge/8qWD0sqZKWVJ1WuSq1Po58IvGGe3AiljQhfG\nDqyssiz2HVUTIX2CQAhjfStUcPX4K31Sy311y1xrNwf8OvhmJZ9cz8bAHVvm\n7FOrXtDJjmKBTy3r1vLkcFKPuY89ERmAov9h/kEw1V9qoZS4vgtASA9r5aY9\nkxvM\r\n=2hl8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"2c7c3d8feb6b7bb5281c1144c43a06f3ca963316","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_6.0.0-canary.5f24faacb.0_1586360120483_0.4287431635628154","host":"s3://npm-registry-packages"}},"6.0.0-canary.82fa986b9.0":{"name":"@material/density","version":"6.0.0-canary.82fa986b9.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@6.0.0-canary.82fa986b9.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7eabfe6b8aa2f3e1cade973295d8dcaed4fa5541","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-6.0.0-canary.82fa986b9.0.tgz","fileCount":9,"integrity":"sha512-bqmsETuuwvqqj+xy5kxQ1LmucLxshVHYC4+mg61iS5uZsmDsLXYhyWMYfz84OdcRvyMBwDPtxFrXOKcI6OgRDg==","signatures":[{"sig":"MEUCIQC4Qvx1qB2NN6MNvB/EO1HObRQQ5KWipjyEoI4dEHmHeAIgchQ4lGUmvx78m3byH+vFjTpY2l6xRTk9e37gX+TeaHU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejfCHCRA9TVsSAnZWagAA/yMP+wda1LJS3UzTbIRj4fwT\nXlzIVfAaae4q9DSPVCOW7jfoEwY3c34jPAPAyAVEXYYnhSqtwA7S78a5D1CG\nnQ28xC45kYylH8XESEN47es/zq8pzi2wCr5e1BLtW9VD4UxNodu0ojkP6+xf\nkqN+L+iAyjvhxEh/YOtcy6vk3Up+cJ5g0RqgXbezFoFdb7pXTRe1ZXl73Lqj\nFUFSIN/JIDI0nERX59syM+x56d9/F4XDpcgAFHvFH77bfi+VxHfPXYuqIaNp\ny2IiOQ65hbFMHFlC6fMlwCUuhDqikgCFiFKxbhsMtOKq/GXHjLj5QB5j+sdt\nCXfNDSKpuKJ4hEAcOVXnef67CkJE388wb5Oexcp6TJov5zefuLtBkNmBEBlZ\n79ASMXOYTq3t7kN5OWtvoD81RMUvHbUEOs+jV/UdOi80nDPLjaWV4XFWcgky\njbaTUhkJhTCWEpyoKbEFGp7NOicMm7hLiS2hPK5BHxdgf+C4HEnGBoAKWOoK\nf6h6S71TF0Hd0ltM80YlKdcQbRbtj39bxQTNHh1k6qPvaLfJ+KkKSmWstThG\ntqBB67ROivtd7Y/PSE8XYN70kl5TyYLU/fHO6tfmtQUOlP/79dkV0QMsPnbs\nqBGvi/cRcgLzISN1G5hvjtcHJszpBK/5dztp3O+1pkyTlW+WTNlV6iQnLk6/\nmaz7\r\n=tQu/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"4fd9bd21072735eb447e594a5fade5eb1e846831","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_6.0.0-canary.82fa986b9.0_1586360454692_0.7868100477082951","host":"s3://npm-registry-packages"}},"6.0.0-canary.9930d9cc5.0":{"name":"@material/density","version":"6.0.0-canary.9930d9cc5.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@6.0.0-canary.9930d9cc5.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3abd64b5dc76fdf927911afb11beec8165d5e792","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-6.0.0-canary.9930d9cc5.0.tgz","fileCount":9,"integrity":"sha512-nZrv0eCuY/dvtILDcjmk6cMdRpxWRPEB9WuJNplXKTX1/Cn+s1xW9LVqBW5r8tEmI3NbxOQY3i4kHjilDVfB2A==","signatures":[{"sig":"MEUCIQDk4NtRRcY7/w94lAMQbWWdEj4/BPKnFWEOk8CXHD/LoQIgXwLGe3sZVcRhHoQy70y9l6ruQ23qyY/I/VzhSWqZ1Ko=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejiatCRA9TVsSAnZWagAAZisP/Ro2FOh9zm8vAJ5Q+AOo\nk1WjDAn0ukbgF1ho4ekYDivy/2QZYlp26EgNXZKRhQs18MuDzajHvQLGYvGx\nX/ZoqDguBuiHI/DQw5HSrn5cSvtjxMuyNXSZjdHw+TBmyfh8eDYRUWV6RWiv\ny0WM71GsM7kIpV5h1f+vrtQznNCmXt7CMjfIHVQuifTpSF9dnjfeZ0Ccs9gd\nKtjx4jnohwhnJjapwFelBYCNYw4BkrQZDMAxdoeaQw3v79Kd44Hwf12UQG4l\nmD/w2+9EW2cwpw+6ODmcKbCcj2G6HP1pNfSpqVgE0Yl67VlZ4dAlRfWAOS/q\nZ6BX4ybKYn0JQr0IYWOc8VeAvNIEnJclZZEF2IoMfyEBWL7eoL2ca2Yz5Nje\nk7BGuu0Z/qvxsrEomwlNmLrf+K7XRZhENpfu3kuaitc29WG4lMpMuThtiWlt\nO5Z4cliIlgOd0aBS530FpL7KES8Et5btSmaZH9KoIvVtx8o5pIHyfYP4FQdp\nJ0F5F9zVbe8hji/4BMgZ7Jh8UNB/+AmomJcu/HP5dl/0shEeG3QpqyCrkB31\nhWwOP8YtHp4dmFSslcEb9oEZm+OxFH5M0pp8M2zpYgXAzm6X51w/bufRGyOe\nVYDJ+bg5Giv0iC7w9RkttpiFfhVC8PLtARr2n7qbeHvIX3ckknR6cv+kt5+K\ngWRb\r\n=Qi+D\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"a0382987a27373aa348015a5e2529f301f638d57","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_6.0.0-canary.9930d9cc5.0_1586374295653_0.7219165598059325","host":"s3://npm-registry-packages"}},"6.0.0-canary.6601d24af.0":{"name":"@material/density","version":"6.0.0-canary.6601d24af.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@6.0.0-canary.6601d24af.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5ef70b452999113a5438cb2b53b3e5331371038c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-6.0.0-canary.6601d24af.0.tgz","fileCount":9,"integrity":"sha512-0MTSMc2K+1NaJGAbFeslfKxvCPEaNsuGF8oyZ60N2OebEdI8n6y+QaYKG/lWpoJYYku1SBzqW2eRPh+0bFx7ig==","signatures":[{"sig":"MEUCIHGSbNV1h6wOKmDNBJvy1C+EtTsxFQAJDv3O9BEt7uWWAiEAjF8SAMy6L4jKTBp0UMkKIOGJ0+IHz8kiEnNbWcikLU4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejmxYCRA9TVsSAnZWagAAfdMP/A/5+FDZc3J1vxSxqcVP\nikpCaB7/BiQgsufIRSU1I8divOXzJHyUWNe2xpMg1LTl7lmnFEkeyHntdZWc\nwwwCEDyoI+xIQADov0iA52xaGOPAfXoxSKcn9nRbVlKV8LRJ7LWsg7hBuvDm\nWK3ypqf7V0RUlu51wQlDqbXZ4p1d7vrUjdmAaNWugEcBMyoVOWL3PfHZK1od\nwzQuW3hdSeweCeXdx0+zPwn5UlNvIZN0tPsT4GnmkrwqgRAHFewYih8faKF2\nLXwfTYtoUdJ1VWAEZ8sniv6WVpgee8mWtoIYjgNy3v2PRf/TcBCyRlsYriat\noT6PZcbuV/xYVCYqadrs8fQCd6/KDQPl8nK6Z06qyBd5MPO7EkvcnsdAydEW\nnftF574r0dl4k/wmqb1/rpD38AJOvXw2YvtY6/1aVZPjPy+KTJ6TMcmGCSIy\ngs4MluldtOjnxPEx4V8vTLsCGDpkJc1/z/JTRMPdt63Ja2rXKh/tB2gXL1uZ\n1rCVOQc0ZH7/hHK8OaVgeCBf7ebe7hRMUjrEr4NtNWtY2RTFOD6PT/PipvkO\nyy+WeO25d5LOE4mzEMnAEm4vFh+T1eS8QGdKKVIorDG7zTTCeBPR1HUGSAdQ\nBVNYEzQcO02Wtvds5DHO9utWstUmktEKUlSsuR9k8vcgxN0wTUn/AjdnzO4/\n00Jx\r\n=0AqR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"f22a45db8a22981a17395184998a94e6a32944c9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_6.0.0-canary.6601d24af.0_1586392151622_0.4999863468348109","host":"s3://npm-registry-packages"}},"6.0.0-canary.05f5e1583.0":{"name":"@material/density","version":"6.0.0-canary.05f5e1583.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@6.0.0-canary.05f5e1583.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7fe9bdfe8581fdc89ee8df0d10166548adedf9af","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-6.0.0-canary.05f5e1583.0.tgz","fileCount":9,"integrity":"sha512-pT56y9Ujtj7FWaLF3ga+e7foi3Rat+VcMyxU1895xbqiiJ1VnklnSuOB2DEOBl4Imlv3ZHtHlNjFpCfMrgVydw==","signatures":[{"sig":"MEQCIHfY2/dJ2+gvvuvAiUQZAegPPFLgPJQ7VIEMxOmlLQgJAiBu5rhnmP8RUidH6rVcz/k39n7+nyhOTgItgXPCM3d5sg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejnBgCRA9TVsSAnZWagAAQpEQAJRsi+v0GSgdV9gV34IZ\ngN2sWpUZVt5rikA2wiTrxKzNxyg4EUqDcwvq6V4myya2xKSyEu4piVqUChEN\nHF+JLxGGO23mnKqwTUfsW2St8ZkU32pyeVuNFJ1N4uMx8V0jSHhxO2HIX1Uc\n/3XRH+7SEJ84r/5encsYOuuI13S0WELItjhambAASSkK2P+scFuOvAz6zZJA\n0vbQYnf+mTJ+rLt9TcmQRPXaq7LHwgaAKzfddrPxg3UINKIAGWotAVy32o9N\nN4DpVpVpq16OObnCPJpmr5Bl/iVOA5KsFpnZk4ol+QgpJmGPG1QPnkkTCxrD\nikZIjalv7isSBh2bW68znHwYg/ye/VhaIYts0NMpNNAXQlB0uWWIznIHmBJ5\nfFEUeB4yDZVlM4EaBJlCMrzp7FwhPgU9ZUEgSDZ3TbCPV7oCLt9eRrlXQRE+\nS0qH1nXXQJHvYcSgc6V8yXy8323IeiPWeit/OUwTIJNIuDJk1Upu2kDzp413\npphi6THtD1mdZPGVzpqSY0a5vQ0JWWfDDcflyrZuYWUykB5IF4w9Nd5jlC/O\n0wEQjS0zzL3Vd2b+HOYXyGET0D5P7X3r6QKoqEvCyxgLQLVMvGXNI6lthDy3\nOxTxXzypRzbReV/zLdZqKbUrCsWs20LiHdcv/G1uFwgapu0OcphirN4DU1n/\nod9Y\r\n=k095\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"413c1908165c032ac95dc5456e70978d3994b6d5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_6.0.0-canary.05f5e1583.0_1586393184514_0.6104985494220732","host":"s3://npm-registry-packages"}},"6.0.0-canary.bce00e186.0":{"name":"@material/density","version":"6.0.0-canary.bce00e186.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@6.0.0-canary.bce00e186.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"16e73da5607f80ddececee5909ba7871014678c7","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-6.0.0-canary.bce00e186.0.tgz","fileCount":9,"integrity":"sha512-woD1oUbXDoKH6WSUxG54pi5j4kIyGN/MZLA4ZAc/HtMjDMJsnDSmkROminoWt4ZZkVWlZFf7hVnDe4U66wmw+w==","signatures":[{"sig":"MEYCIQDIXtHil/gkeuDPYzfc/Eb3LSa3P+iVpNfPbKfcsjhIOgIhAPqjBdTvWvUemC/ndgwt8/dPwKWRxMV3/OvT2jAXlxd9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejz2QCRA9TVsSAnZWagAApZwP/R0q5m2oxiswvxYdYhNS\nEBVFb68T3Uj+2WWipQ1A/AzWTyC/K5jMCRjfN0k2nrfIEalXW6RdN+IHUrky\nswZ0ICqj97/xBH5P7yrnMgoxtnk9UZqnHmlQ04gW2axDNSSvR6eKVNHDx0qR\nYbDXQQu5SXOo43Zxz4ybyguiMZa3MHu47E9kIWdro67ZxFby4Okz6L4HmVV/\nKMkfD3mYe3UPiGMPjjb+OJP3GnMjWrxCrd1Y8cfOyw4CNzsY18xAXVjCCqF1\nfydNG8Ez83x5GvlpJiv3+pE/lu/UtyZ4Wq1huyJWJa+/BEE+KJyTq4NcGeiL\nu0Szku6/79l1Imd/Fd7OC76tCKf+cNR0ZXmLbyewvIcefACJtz1ec0Oca5vD\n5oFtfCOIivfnqjUh6yuS+OdwLwe2GJhGk9BtVZB5AZvlAp7oAb3V+Qu4KE1K\nN1M0bydvP1LWrg48i1tTeHsDoviKBXSGGcq1b/Cxkar1h+CHairgSpEaSPO2\nTy1iOe11858fccc/lKCMC3ajm7waX6HK32cuPRczaA4EU+3I0ZkBOw/DBfU7\nsR0UcHDwPWLhNmBoZh/iJALVyOj366FzYUmxaWHEVRHnaNRRbAC3rxJvPuYk\nbZnQASushExlSorTHGetkezA2Jp1opvakB1Hb3SYw0FVi15ORJkMwpCyjbWR\nyKRE\r\n=kOTD\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"36e6ce5271637d131432d915870da208d16bef74","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_6.0.0-canary.bce00e186.0_1586445711559_0.015295046587032068","host":"s3://npm-registry-packages"}},"6.0.0-canary.927fa902c.0":{"name":"@material/density","version":"6.0.0-canary.927fa902c.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@6.0.0-canary.927fa902c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"69d343f2ac298d9dfdaae3d64423157054fcd859","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-6.0.0-canary.927fa902c.0.tgz","fileCount":9,"integrity":"sha512-66m3jFX4c6CzTVyWnQ0grBFjRqolgd4hmmQamDcyeIMVOOeYQ2dVq3xq3tKbidXGcDKiB9dwso2kSYExBgp0tw==","signatures":[{"sig":"MEUCIQDJXzxRo1lDNm3dAw2renEL+Gfkbk+f7ZHtwTaBj/ATpAIgRmWmjYPHhCy3Wp4UkYXPEIe2cb8GkdxGTBE6nGi9gLU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJej21cCRA9TVsSAnZWagAAbSYP/iZo5RwUCRLgbIZu6geY\nlD4H/nkVWDFQwT/uEk1U7J6+PVwdbdhPtl1ZQW561gnrQ0uWXF2ZrZaorbIZ\np0rAZ6gtcYuV/ibHOvGJcPN6zp0fu1xkv/SmIh7Ov2F1Ka4/WUM+41ajPdNX\n3f3EOeSo/tIZdlaz3MT+Ik2rVoUFh7xsIydVG66MrRWYb51StFTzWk7tXaK+\nbSCrEWzL4m2XDr0CsE7Lw9Hnud+kP5J9Y09me7FcrADW2+4Opnd9HpgiChgX\naS3N8fMXc5FXw6qip/k3MKFUXosOBi1hnpBlrBHgKUnxy6zhaGajnBDBO2C6\nIY1KKUZXHoWl3eskGxIviB5HAzpjo4Juv74LXUj3Gy4HWSZ/HttiTGD+hNdJ\nM8l9IRmfYqs9USZZRh9eBZIr9XtzTCI2AYSO/3bZattiYt/Qzisy/DIy2JOs\nhW9X2rwxTDhAMlV5I1LgV94POP+kLvyp5g1rzehztPlqi561cxom0mo84x5H\nyyNUv147zWWlCniVQqo259EYKMRRJT4oM9Xoh2YRtD2DSisfsC9IFZ19igWL\nHkwHAsnsszMhBJn2xxB9rgaYEFwZRZcPG14ULsxUXdujHGQ/pprIwEseevNh\nOy82yketPgT/jjqI5MxB0JJa9ByXS1uXdBWeBTlde8EFh9frXi2fslmxBkj3\nK8Hk\r\n=civ5\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"6993aa2a4786dba507ed6b641b4c059925b7ddfc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_6.0.0-canary.927fa902c.0_1586457947537_0.8428197537548721","host":"s3://npm-registry-packages"}},"6.0.0-canary.eb28b6ecc.0":{"name":"@material/density","version":"6.0.0-canary.eb28b6ecc.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@6.0.0-canary.eb28b6ecc.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"000a6f5454348d3ce67137bd8573de2613672059","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-6.0.0-canary.eb28b6ecc.0.tgz","fileCount":9,"integrity":"sha512-X5wasLlvZFO1NXlf16iI/DRfTN6UBxCaW8sur6MItnNcbRJDzRDfjDhgH5KaXyySIt4xYtsTS5B13bC5fysI8w==","signatures":[{"sig":"MEUCIQC1uwGHb/Sb2VPs49W0TZDzAHFdafwFArdhSeqSC2dIlwIgVjIaquu76my+J/Q3HgLH21b+ean+MZHzJO4bYYzca1A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJekMlMCRA9TVsSAnZWagAArfQP/AwIkUjCldD2u1En5c+l\n3PVi5bVlfaKqKITS8ZHQdMk/Gogn6elMNwLPxTZTXGgCsltrkwqUqRGXfT2p\ngpaJgwrayynblvr+7H45jz09n3ZzdyXuErTUcUqH8uyrEZAhOiw3aw00XXwC\nl5lJkM+zeyCpriAOYrDZU3mEa8sOusSYu42/XdB8qFLcjHNM7zyE51Nhf+em\nNeRqDNejY/sLvJvJQhmMzaCl3RMwk8On2EJ3tGuTjXUXp9mPmgCZ2xN7Kqb1\nGTlGQBRYe6CvDa+7FPfjxF92lzNeOVyBjtdoy3TmHA7qruFlMixDSmyI77c7\nntJeylGwTFFjndV8etDy1bksPPz4/VVIPQrVC67P4PLaMBir6jbWd3iBbGow\n3hqJ42Ik0EOhbYkwjj+m+0tg1zlFYU8RDtQLpEzZhF/eQkmBv3OUGKtKWInQ\n3bimTg6zNLab99Nr8l7o6RE4G8P06uXF16xq0sLAYHeMAkZah8F8/62jhRi4\nevqiBFTymqbaRfL1oeFIVR3jhdPfYQ3smnt3mF4HJkJSbXEmw3QnpSpAG/s6\npBVGBYPTxHqnGP/0soZDpU/rslHX4LdAv8UBsUcbtDoqm1xFv0LX0vi+leIS\n1G5bEafxZCxqLD1mmoaWaOdjkfSS6n8ulX7G+w1NhB3nKcH2PAz7mBz9w2mA\nMkGb\r\n=BdR0\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"14b97cf99132f4a85a978c1799a668eae031d75e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_6.0.0-canary.eb28b6ecc.0_1586547019940_0.7301953494521867","host":"s3://npm-registry-packages"}},"6.0.0-canary.816a43b42.0":{"name":"@material/density","version":"6.0.0-canary.816a43b42.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@6.0.0-canary.816a43b42.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b95b3bc2e11ce20827aed1e1508fe8555942a123","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-6.0.0-canary.816a43b42.0.tgz","fileCount":9,"integrity":"sha512-Q4adwfMeVx6zCmT9GafDWm4mhv9gvl61QhRphYGuzZVmjID8WyPJr6JQNpWlhlA4lhgWs8EJIBX8GCgawMY9Yw==","signatures":[{"sig":"MEYCIQD7jDvuDWtJdosfqP5agkVtqJhvVUlFWbi4MTcnxghLWAIhALmvYd4i+5tIyRit/f4y9eFVHk8G8iG0lFCOw/hqlQ35","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJekNxwCRA9TVsSAnZWagAAr84P/14JtdaeFIRUB8twOGm/\nnVRvNtwsXE3gjCuJChdd6Xert947Xz4mv2XXqDMq/kXr6T5+b9PcnUBBuoX0\nA9YiXbDOTCZmBrS1Xbxy1RUtWpcTL/w0jCevd5WODn2ntjvkSOfFbJC8PeB3\nfH5BBsebH0xgOENdfL6RqljgzfLmpYf98+7Rap5bSy0maaKb20bkr3RDgQaZ\npo8eSc/AZy9eONlK/rOHmhowUl3PG7atjcCmZzFLm0uW330+ozhyxoirJKnO\nW3aQjTq4R25S4XtnuTxxJeVVRk7nO5vzTik1Gpn86HAR+d/fvhWPjdGEVZkm\nHIlgt9UgHbdUet6IaeU/I7gZzkyDS8TNIoHZKhYDSHr9H0iA28yeiNq83EYn\nvmv/4BT2IKh6sNBRT8fKfSgsKGs8ot0Pky9eh1Sy+44bgy+J4AkXej05qg+q\nZalERT6AVIT+bhN8DJ+wdp7hHZPA1uJRZcNIKy3aMl1anJ9/dO12npBcxVrK\nxcc/v2jMoz38LMuZjFWLTi8Z/++xQvgBQlT8VCyFKEg+DMaVEEhqmbeC5yi2\nCzF+v8MWdTRV0HBgdDYwRz7GZDgsmn9wGzAZvg7fEQIYDMFjwP2U9KPc/uWt\npOWWqQfGg/El+8bgAjFHBNAucfD1d3LRwVMdadc+jVymO2uch3FFdUgrFDnm\naZmZ\r\n=eVDC\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"55d118d08a4432484dfc732189dae38773d1f437","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_6.0.0-canary.816a43b42.0_1586551920136_0.16928337332623844","host":"s3://npm-registry-packages"}},"6.0.0-canary.008c4d319.0":{"name":"@material/density","version":"6.0.0-canary.008c4d319.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@6.0.0-canary.008c4d319.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cc45f947d35c150ddb4e9aa2e7263cc8eb8aa957","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-6.0.0-canary.008c4d319.0.tgz","fileCount":9,"integrity":"sha512-m0cTZqTrzruYEhcPSx5p0rKLVd1ADgTUItx2uj8MgAMNNI8Qpvh5sNxd/hZZQioXjNTPCPvlF6+r+3wlPK3RUQ==","signatures":[{"sig":"MEYCIQCvG6744XYo/8CrjWQczjLiGksQnFmX5cWaQMK6G/GhzwIhAITFQABRKj0QCC9tXmN0ymViF3nkMjV89SHd4XzM7r1E","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJelJRICRA9TVsSAnZWagAArOEP/1572V989PeB9OhIXh4v\nt2EcKbqub/70bCc3MSR7xvq57EmvBVneEL8AkgYoGVG5kLRbYgARBm3fGUj/\n3zhueU21AIn1TC/qx5LG8TpBXGQmbGDCeTBPFbPgCtnG4XkSzbm+MYXVPR+5\nwFwZhwp5Ugil9ATubDuWpR66wiNjDsnbr0wDPGMvVSZNMUupa5YUqmID1NJn\nED40ZEUZV7qHc2SS/4gTq714XIBue6ET805TCWpptWG/X2wWJLyE6Hyt88SF\ngzoyKfNjrk7vd1ppVdLW8udWXO4240hWlFuVzz3JMqhmgNVuNVCOvsIR5koj\nUFSVe+3gIGwgWT7S1HzSsnuw4ffCJCUwezV+GQYfJLlyhHTviCB78tOuRe21\nenVSyfLUZRCKqk7T31IN8NMijWF6HrWGFeeBS8y9mCbmt+SmgUE/ijnafhrf\nwt/FaiaePoR9+ZFAu73VW2VuZoEGMaoqJ5+8CFEyp1r6EgJBx1RO0yPKh0Ni\nYQsK+hpRGYyDOD/3RKLngRtamAQ7oQ0wGZ+PDZ0qqRf0SzMVPh0akboc7aER\nCLz/b4fWbAyZURB1ZSug/mNRXRy6MRAyi8PwooTEEVEdp/cu8zj7cK08Hx9q\nFWafMk7kIYg80l5BQGNN+HfCTlvRL/OjOqe9Jj/Qc28/bJBrtGeO1LqHHRhd\nvqnZ\r\n=AU7E\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"cf7ff62c921da3167d96b5f7cc7f07ac2af41a19","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_6.0.0-canary.008c4d319.0_1586795592417_0.9888343006065281","host":"s3://npm-registry-packages"}},"6.0.0-canary.cbb3f28ca.0":{"name":"@material/density","version":"6.0.0-canary.cbb3f28ca.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@6.0.0-canary.cbb3f28ca.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d3aa3b9f647fc524f86511e8b8e134df9c68f22b","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-6.0.0-canary.cbb3f28ca.0.tgz","fileCount":9,"integrity":"sha512-vuFNulOMe0jT04tCdZi22bLyD7N2nCJJI9lHzzKYYS2oLDROTtXZIgt4dYrQRaHtwEyfLrVVQrANkDF/0CvAkw==","signatures":[{"sig":"MEUCIQCqopzHep16QXIsUScR74A1YUiBotYEVhAHwIr9AXUGBgIgLcCZYuQkrRTCWGsPaJP6K6SawYeb3yDq6YnDZ7gqO3g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJelUSQCRA9TVsSAnZWagAA5wUP/03rQsZWTtKxDc5Zx6jG\nRN6ftpJcyjOEcSa/y0M9Uki+pK/7h4hw+KjKLduOOdNpm2DiXBVAdTrQZbzk\nO5EIssWIW6uTpbAxggYUi2fWMrBguRAAKMM68Mu4CIg3UqZSz0lkxPLL/Lr8\nNayvmUYhqI+A7z8ypUE11gZhh/rv3RsTWxmRw/X4Z1CqeuQPHU2B+Vxq4Ycc\nDUNtrkwlIzzjjjnLp3dDLFxx70ZinIX0r7gy23c+81N50cbLBrCtwDVlrWOV\ntofHTHvFWm9nZ6z1kE98VZWGSldXr69MYzE/P5+1iVt69psvU1AM7n5Hsp/a\nu0lN1jNokM2HMZbn4K2DJHxRONOb8SUfItaO4eJ8ygXdU0ZcIqoK2R+Lb7XV\nE9pM1w37DglxmFRKqEnR4kNpskN+Rm7k8e7C9zjPvaLWpmq0YFQxgMyA2d+Q\noNVYJru94NEovTfx/4PwPcIyIS+MNzXpitdYw/cuKceO3TH4Sfn0/CAYSdiE\nQ1EzEdQTEsDVQmr0U0TidSbw1unl3sG+gdcc5U7OHFLFhMYP/BKbEPh9qacO\nJptLZpZkOnd+AKn86E/snANTWWw1nn585vF0K3lbVgtLz8nWOX4jYruCWC8S\ntXzpyU0TcJ9hvhQOJpXdA4lCZZAFT+rxZxz8ybegRI6rfj0Jl6nF01GyEXjC\n18Is\r\n=9XWd\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"b6cb89b18de9f28799535d82c5ebc759433a5307","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_6.0.0-canary.cbb3f28ca.0_1586840719939_0.5537637834890723","host":"s3://npm-registry-packages"}},"6.0.0-canary.f172b0f90.0":{"name":"@material/density","version":"6.0.0-canary.f172b0f90.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@6.0.0-canary.f172b0f90.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ecd375d1004c328d900e9752cb8f857e93866acb","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-6.0.0-canary.f172b0f90.0.tgz","fileCount":9,"integrity":"sha512-VyIzU7vQmFhURvgFVAP9ywxM49jBBUZ0po7zVdN8hume6q8LliIPO5aSsWjNxAuqaWstj5K/UIrzsWeVbAFjuA==","signatures":[{"sig":"MEUCIQC5hlG/fMAv0u8oGw9Sow8BTW9s2tJbsQRWHEyXGMWglwIgXqfXv7muJ/CQ8YgK0He4CVDVH/trnEzg/04csorT1c8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJelkK4CRA9TVsSAnZWagAAQ38P+gLvVLQUmYhQiFMGmoYJ\nBczOOw5KMHsbqRlKLf300XPL7Ciub2rSRm6tlGX38Uh7oNEw4RrM1T5GnVk2\nbs9mylH0mzAn/BMQA8D0KlHk0wDaZLwkq8Fo0PdjjhqU0seQw3uxc4PlRA2x\nWFDqJGQoC0ghK7t2qq2C+95RPKVvyOBJn7dUUm4JlyWHaw3fhTKxJ9Ns5wtt\nFq2dvvqQ/u5PRbYHyFMeOvv3tGtB5af6YHQvX/xnjaJ0QlHJF8uKNapQayxy\nyueQnFsM+3kwSJonbMeABI8F+DH//9XrAJiYIVwzaFoUiW8BMZckM7ZyfWmu\nmDIiCObdG09/8KmFufYU7QNoq50Hr0l72geVcEdUvcv6+BAfXXUIukZSoQpP\nZT6sC7EOTcAp/7HB+nJnqMHV6aQVqWPMW7YsIPjAGHs1ydEkNIQcDjkvAFdI\nSsZRWwKwsrr5Wkzj5wh/lnTraIKtCqoAmfzYOV2bGLFSqMkN0P3QHwl/0/jH\n51k6+x83BKNAsbZ3AQxvuhGzSL7ZKabZECpnAz14WKvzTlVEt1+L0GL4a+Sr\nCnzYtIeakgyX98Sz/TN2gD5cCYGNL+0b+5Q+Q2t+mPVNSLa7xNJit5jOQfiz\nSuiwE6ZSARWw/C/Znih5DV2uz1JPItZ3oiDZRZJ5FT2vrzpmZ1NZKtf88Omr\nBPze\r\n=N7sQ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"eaad6fe33949c536d515e1177cbadf504619cfda","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_6.0.0-canary.f172b0f90.0_1586905783532_0.837604146419306","host":"s3://npm-registry-packages"}},"6.0.0-canary.c02642273.0":{"name":"@material/density","version":"6.0.0-canary.c02642273.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@6.0.0-canary.c02642273.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e8c3102d8a25d53ab4230a34eb7af1b9b4e2ce45","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-6.0.0-canary.c02642273.0.tgz","fileCount":9,"integrity":"sha512-GlmAh0Ir58stsbjoliDwCWbwO0vNAP7t3z3dYKCmJfMdgXi+cGyUBcJmYBXwp5Y4AXSdR2MfqJSvgyv30rgb8g==","signatures":[{"sig":"MEQCID5XPglkqlr9nV5woz9J86Fq//hZNB3tOhm0SwVYD67EAiA+4j5h/RdHDw3aCYDE//z67nEBMS3Mprha0dYa+kLIsA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJelzNlCRA9TVsSAnZWagAA69AP/RxGCu9W3o25aQ5tK1Ia\nX4QqJ/onIGO1kDtTECuyO2bUk/Loh6DJu0iNOHtNAtl57IFxTbeHOvzLww/7\ni8dJ/ttNVx5vvziEfzLOYEbFpTof2q37FBfe8K6e+j7On2MPdtHadi4P7SOe\nyvmMmF48o2RQdnc36tYEEzkYvLoD7iFDtBDpqmcus0Q3RkOdmQGFZb6gH8TQ\ni7Ge/9MDwoQowd7CiyCfCP+NMCwYjIKt/YTYkKxsMZIdfDF9QgAWkyRwRCxh\nQPrI1Znr0RsOgEIkpWfEwX4K7SRDRZAb5nvKUHJY1MuUTPetSeZDdFjHS/2q\nCGvfjEl5seeDoTVkycPVPZCJqhUAebOxbHl37XjnuyfhzY4m/gVY+x0akaSa\n3JSgiOPYCvOwmb/a1JR8k5lRDiodu6G7/ITLclEwYSDBjw+ftOP/wHoTT5NU\nzSaTtKclS3fa45NU4IiD0Fwe8DFGd7sftyZ1E1PoIbzCDX8zaKkV3pHHEyur\nznvd5+wbYINNM9h+y3o9JtG7pMOylrE17wZA+e6phX5hmeNBXgKMtm5uaQx2\nLYqH1Jju0IZR/oE1eCT30be2pcYnnpbM0L5054mTRpJ8K1bIS9KNGBaqSkKu\ndZRNuwTe3vB/aKV1i5IOJnbZxy1Q01PF9Q72o1e92KluLQu+Q+EFFY7JEG0o\n0BOp\r\n=76pd\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"b648ba2f886a5d6cb78a9dbdb435d18b5f600bf5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_6.0.0-canary.c02642273.0_1586967396667_0.8352218232001734","host":"s3://npm-registry-packages"}},"6.0.0-canary.8a299b568.0":{"name":"@material/density","version":"6.0.0-canary.8a299b568.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@6.0.0-canary.8a299b568.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6bd23cef9df67d7c0e1610d8af9f8b685d0c3357","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-6.0.0-canary.8a299b568.0.tgz","fileCount":9,"integrity":"sha512-8f+z8D9XNu66VYO8Zvr7Iajp+ke7Y/U9ib9Mfrh2rSE0M9ye/kDlDX+W561RINNJkYv51rK8fuIcla8d8JxO/g==","signatures":[{"sig":"MEUCIQCZGBP5Su9pVDivgtjAYhtNbElD4zUHlnDcyXPOkclFigIgaxy1ws1itRjq28dhZAzp/HFFnxzpsemBi7BYraXx3xE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJel43iCRA9TVsSAnZWagAAgfEP/jcCBGsDTJnLUxVqSkQl\nUiYYWZjMImeBGRorL4DNdoF3KWZ0Bq+ZYTrL+j2noYFng1uWwOsaK0D0QH6n\nFv9QmnoezG2LQoY2nco+FDVssZyzvgTrjvRGYU5gdh3vl5N7ffC5TtgQeCFU\ndX0ZqhSgnaSV8QMD6rWblzXsZvkBT8fqzPth99cdEZ79OzPtv8h+w4nzDJC3\nLKeJcmkXSCWBxDB6zBmCGufYx34q4H91s5xADRkiNKvDv54vrQa2cFU8T6ih\nkflL0DZa6aDVXAnLXvWImTg/wFzYDuSuOo2w00cNX8AooEx0JuY8sflpZns1\n3NJPbXVJvHF81yWknDJU2VIRUyKc6u51SbawdlL/m28dd0hThSUuv3IrQpf6\nTW23cLFGH8OVoH3zF9l80XW1+brjeVT8G7Ytv0nXnOPtenkHRu7eBLfLmZoo\njgmB17/GDd3NolS1Vaz0TlK1iv6/gZv083OijsgsVVDwgAmYHfkdCu1fpnsQ\nYWG8wNnKQmWKtHPgUAQb4syaQ6XBi9JIDBGCBXXTAD6yLexK0QBNb3jCcY/l\njAu0v51Qt0DqtDoYJEBW83CRdNh4xVLfAkR2z5VekLyk9Dm6FuBsO0MxAwgM\nJ1qEfqNjb+MMEQcEgZpBzFve8+2DVfSCiMurIU/UEN3FqFgrhpPhKFLtak+S\nfKG7\r\n=A+ik\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"1cce57afe783f6d0ee960b6d55080fccc7424cb6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_6.0.0-canary.8a299b568.0_1586990561727_0.40854820963383687","host":"s3://npm-registry-packages"}},"6.0.0-canary.490fbdc09.0":{"name":"@material/density","version":"6.0.0-canary.490fbdc09.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@6.0.0-canary.490fbdc09.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c38efe8e244ce9184bb0a9dc84080bd3463a41d1","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-6.0.0-canary.490fbdc09.0.tgz","fileCount":9,"integrity":"sha512-1p91Dd6op1MWdwMJo1zUfvhPjWnVMVI3Ca4G7mxnGnDqeG/vLiShmHyKRgCMJceLN0f3INmmdi0k7o5ndRvUQw==","signatures":[{"sig":"MEQCIGY7xPH9KnCSQUUiSZG952NQBZHZN/rLasXQ145/UIZjAiBeX4P6PH/HWxDrW7FNY0k7F6fvqcqVhmD/aDicH6IHuA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJel/QrCRA9TVsSAnZWagAA0kQP/2Y8Qj/tjiBDj7f2bJJ/\n/cXfIkNQK0IWgK3fZf+qVssZyCbKYW9VA4FrtxFAnTMcEEPZXnQ2N1aj8nEi\nFidHBH/e0nA5aQKOisrnnFDyYb3e5FgHiYN2C2U37rC+jHLTYxDJoN5fN0eh\nYff8enMHGI6NJNBC0ULkoKboHNTchgnyRVVk7FDVRzm8KNayg8ZuHIAjFERr\nCuWslzPXpjks+sQ7IoJeHx3U9Yg4Dmokuh/mGIQ/2fLTrcaTYUsoSzIX8VEP\nFkK7802zQ7y8dt6JBlzDbpFemrSrdlBPVsynmkxzJfs/4xkovZDjpXqMw4h2\nINJgWY6aVHQPnB42NZUJcPfZ7Dn9zp1W4LggLKtmU3m4U1Q9fEpV5RpqB1x0\nyIQu3DUBJYFIBdjiifX+ECkFtosfUQSHStt3tZC4LuvcPW3gnrl5hbzaZdD3\nwZnXEyUimQpqNI3AdNqkn+MVFJzoq8dMDaTjouMhPPGbmJ74oUmnx77ozhvD\n2IbAEmHx27spvzTWSYt/jr9ZlErmd18SlGhL35c9yGrytVqg6mcpFC02+bFW\nloTqHKVa4QeMieprKpgVrhrp0Abd3Tm6YvCOTP9wUKFA+ztqL8FvykjCUZUS\nW9j+fo85D8NpeTwkIDAtAy5fTHgzPorMISQitiF/puwZmM+UKLAjHBa7bxrj\nHXj/\r\n=Yq3C\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"20bba7dcc3290528bf225184ac976a3b486ccc00","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_6.0.0-canary.490fbdc09.0_1587016747065_0.9568517649130173","host":"s3://npm-registry-packages"}},"6.0.0-canary.f838c6e55.0":{"name":"@material/density","version":"6.0.0-canary.f838c6e55.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@6.0.0-canary.f838c6e55.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"717a182ce27d823adebc791826d0150148c3f35f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-6.0.0-canary.f838c6e55.0.tgz","fileCount":9,"integrity":"sha512-kZvLkypfWSRQ+peLqgZwAaSpEMucxqUxnwPpVvCY3P4KxPKUZHRHmiEnAgcgpiObYaWKAEshbmPRjVMgeGC9SA==","signatures":[{"sig":"MEUCIQDAJQ6m8v/ucgjAnLEgfyelyq3mImEO4amIdEf7Enj4yQIgRiL+2rNXTd+nn4bOS1QMbi82Dva286o+G0mFjO7Ab2g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemGrqCRA9TVsSAnZWagAApD8P/0Yrd32NEzBqP9tT1tRP\noQxXFnymsUNcg/Pb+1Zj28Ijtd01kDc1mHpbzhI1JYcfahJJfmuv2xydaODg\n0ngo2a71hGFclm8pGGXV00ST4rqTAA0XJnxkOfW54wjVuZULcZfHk+DNznnF\n3n0f695KSc4Y4l2UMkoqo+A8Eo66iT3Vmpl5eS3kWtwnfsZUuK1NS+fjCn+k\nR/fdn3mibJuQ46pHtysTwQj/Qf6ZRExyi5+hZtviwYfmn1dAb+qcW4fBZcqp\nxjI/TYYji8RGjfP83DiyWRsvQofvjDtbYQZ9K1Ww0Z9tDWyPBBo6igJQednn\naYeifV25JmfgCFudh18HqHyQrPwGnpRyThkfvfgtziFr7PU5lmHz3ycm69cb\naRYKgpVaF06UbxhVS8+sssafaaMUniO6xionRtjogwIMJuW1pox2C149fkzk\n9AE2Ieu5oBZxjaH0VUEa1EH6Wdr/dnH3bGGju+fUqSTNYusuEYO5Mlh26sSd\nzoJsawGizOGdQDOaIbCxTmskJ/jRBOAqVVpxDpb9Q7CAY5HYL/gCuIxjGD+/\n+dfk8SoKtVxc7yppS6BmjvY+Hw9RjatAOsa13jCmDoAnfHRcmCLNl1GTvL5G\ntmqGbuxXJDTF16RLWLKztsO7/S0Z9OhlYEOmVYsARztK+Kt9CJQFt5163eek\nFOzV\r\n=rUpD\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"4088837a2a2d0b4af544090557a8266202e13a8c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_6.0.0-canary.f838c6e55.0_1587047146107_0.8943809078327929","host":"s3://npm-registry-packages"}},"6.0.0-canary.ce6cb7024.0":{"name":"@material/density","version":"6.0.0-canary.ce6cb7024.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@6.0.0-canary.ce6cb7024.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3038f90598b57099ab3a93d298f60cbf64b0a532","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-6.0.0-canary.ce6cb7024.0.tgz","fileCount":9,"integrity":"sha512-5Qr/vvWgz17zEa5mlXRbh9Usu0jEommYcMXd4gQcHHmyl2xA2bWaMdHqIcbe6S8i1Ph7PPnkvHu2lm8ievpaSg==","signatures":[{"sig":"MEUCIQDXOEf9gNCZ6DKREb33A05KsK8gFB0Xb5dYeSFw60kW9AIgMVffO5tlaOtyecCk4HFxZdxgKyT2ghm+5oATJalhw7Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemJNiCRA9TVsSAnZWagAAiwcP/2w4oNJLpFBkDYK++soL\nYc0q0eQPJTaM6yw817pxcNmPK1otZ2jhMBTt0WjVQOt+rNLWk7bakmEB9/zM\nUHBJCNBascYL3VUNb1Dd3RNgf4eVWVXskkUL6IhIcE/28ZqfmaYGPDkzUori\nbhPczVfcB+rY+HO/vJALIDY6Yy+ugnhVS8TBLx53hVzo3YnsxC4jGtienBs1\n0yJVeUL1700p6bi+6n5k/xsJOijTPxH+J9VEmoLVRzSHProrzhKBmDeewhAJ\n+5I7e+tqrnAJj6HAkUzsDsYfDtkEcjnmFBRzQAvQY+A/NfVNVJJYe50/ozYu\nNd6Og/a2DgGxca+U0PFBa4IEa8Efj2SLelTZPxFlF9UXu2EFYTPyN9cSMo7N\nQsKzSuNdqwC5kBGAo6V+RYPL108GE8+sQXq+3oS70AokItM8LswwsquC10w9\nqPpdwYpykMg2ZCGweKwrFybJ2pahe/IxRUQMVqdd3fWwyXOj4YiKRsFPrWxF\n0AqR5NBjiIqXAd2VmuoV7mpoCV0CmcM79oPZs1OgfpJHQrtMmd6cfBWmvuiX\npB51S6sIzKRYjssVa8yG1kKab4B8xCqp0RpwLvVjnO1W5xJry6haaaZlTB/b\n3o1pygXeLMGN3YGZBlCrMmYjaoVVKDIjYrzdcHyWdiS9P9oknpRT1RyqXore\nkhE6\r\n=RwBi\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"50c11d42dccdf93592bf97e9211f34d95983996a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_6.0.0-canary.ce6cb7024.0_1587057505830_0.532161924935153","host":"s3://npm-registry-packages"}},"6.0.0-canary.0ab62a65b.0":{"name":"@material/density","version":"6.0.0-canary.0ab62a65b.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@6.0.0-canary.0ab62a65b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1e613e83e8a0de5f2ff4a77090b7073b12220d8c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-6.0.0-canary.0ab62a65b.0.tgz","fileCount":9,"integrity":"sha512-8VS62qfcTLjhbAulk9n1GmrvmWgynfJRSDr6QHZ0MibrVD9vKvYR5s3alRBOgqHrthF5Mjo/h3IatE/w1qMHBQ==","signatures":[{"sig":"MEUCIQDXVRqFvkkNCq2gPSb/cr3lOPmPqMcGx7/L85mpDcAjVAIgY9CEIv1m5BLD0jkrNZ3wTUJUlNTG8zk9HpsOXU3AJ4w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemKmyCRA9TVsSAnZWagAA6WkP/R3hfP+p0Zt/13mHkioz\nXQOM1UgdMaw1rJJrEc32YswK+U4qD0yvbd2bj3vDSulgqd/Haj4XgyRlxzIX\n+rp4jjMAGARZDfHYrCyECqAMUInApEwf/yXwhDf88XnBHJcIu+MR002CXwXN\nD241namqlqa7erIiohqymmYbhOojPMLt7HLrGyWaAtyI4atwF0zG4yHv+6QZ\nuiAS7qUp1WAlXuM7ojRaQlvRusM2IW+qSEyId/UfJrb+1VxkVJ+bnzEqMsrG\naFlrAzh9082Gui8pD7MUeJ4ktD+PNR2rKMgz2PR9i8A25X8DJbfsqy2/2D21\n/SZvq4dox/GoujhRr7lDeYEpqQ08ZT/eQLluYFBJZuOT5bWZ7YRrDDgUvB+9\nZShY82Sl75SRG3rnFpy/TJQ9nA1E4R26P2HWB9kIVi4BlJAAEc7io9jIbIfo\nJxAdxIxyFWwVZXZzLHS+dJyDgx9nNa7sCgJEgno64WIzmnzKW299hVlov+Ar\nx8h0W8jlFukZMQ9Vjkbtjm0yaW/abQSTEExzs9nZuhWvK+6SaaTXMIgctoQX\ngSULtY7ChkxSW7+v3CnwkThPQhxIvGu2jlknzvTR762RHlsGw/AJsq5BXSNK\noz+bskupv3F6YA2fxATcs+RK4njIdGcHZjD5fVOH0BrSLfsJu2s5VdK1uPtF\nfQ7a\r\n=jSn0\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"f8890ca1119e1fc3b197f172b8273c05b5fba35d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_6.0.0-canary.0ab62a65b.0_1587063218154_0.6040872164679694","host":"s3://npm-registry-packages"}},"6.0.0-canary.ca61b656f.0":{"name":"@material/density","version":"6.0.0-canary.ca61b656f.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@6.0.0-canary.ca61b656f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8162cd9875fb5602cf8e13522ec739d3b637bc0e","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-6.0.0-canary.ca61b656f.0.tgz","fileCount":9,"integrity":"sha512-zXncrpFwQAS9s176UsvDLbe0KJQJLPQLmFMGLS5GPsX805zgLXDEigCOWRUylwgz2vesgTb8yOsaX/bhepfFNQ==","signatures":[{"sig":"MEYCIQC60IVkH7r5dypKCOsf73A0VjYn1+Zd4AaPxosRqd/erwIhAPGVuyy9uBOfFunFp1/Ewcqi2c6eQiPr/pMZL0uYWyTj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemLkbCRA9TVsSAnZWagAAXQAP/3SnsCB1vn9us86cu4Ne\nuiind2FOWOWvJKppYvi6hE0q+mBsOW/TX398ibs8UomsjbLv1X2FKvqkYGHQ\nA45EwPu2LK0nNSy+9a+p0xM7bz1j/nQqyRrSWsUG6hGiEtyrx0kZ0dzVXwpW\nWAOwCSOtthKy03P/IHidgA7tZQ9H/8EVXINbK+65CvJcyPZ4DKhtx6FQcObg\n5u4wy6v2FwDcykxe0fHyG4jZ96SG9b5EnRmtBGtgQRqTzARnzH7nMXKkA7B+\ndoA1NHsYcrSIZY39i8vtPgAMXCHTEF8xtkJUti2C6lCdKGxYDQxrT8mp6AOl\nVyzQ715VweoPZdbbRzGjV8v3zr3elykidJdLHTuHtaHCzKox/BJUDEEvT8jh\nafIC33xKiRJCQeRghTpcd0XqOSq+7KkZbvPxsmput4vTssrefWPh5xATlgYg\nuYk/lEy/boj5yMubgIRArj460q5lc5bL5Arpmja6JcxFMYHKvhz7mM6ltl53\ndbh/kGgam1zfr61HBBbpNCx/OCCFEOa/Jrtjnsjo+lbzvwR95Nrg8BgymrxX\nNO2XmN29mACwGsFsww2NAuHpaiEWLIhkAtNxGt+4Z6aXOU3gA3FL1zCrE6Fo\nqnQ8FJGIB3Ys5LnWMI78s453ASfd8MxTVAtFEg0/c/Vo/mODStELd8h8fc9f\neQ0w\r\n=JvAc\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"967c93bd4843f43b3821bebc6113ab9c73533ac0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_6.0.0-canary.ca61b656f.0_1587067162748_0.36676481938970196","host":"s3://npm-registry-packages"}},"6.0.0-canary.45a6615e3.0":{"name":"@material/density","version":"6.0.0-canary.45a6615e3.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@6.0.0-canary.45a6615e3.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5163273d2cea363ccec5ca1b2cf808bcbbdae875","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-6.0.0-canary.45a6615e3.0.tgz","fileCount":9,"integrity":"sha512-kkpHjTmys0wyMg0vbVHSAJN9FtEBSK1NRA/YjAOsSlhI1EEaJILSLls4G3TIniJwagkoH8KtuHMRNenflKvHDA==","signatures":[{"sig":"MEYCIQDZRU9hUXze3bBOIbyRae7MT0ivQikWOgcYd19QCPZsGQIhAIXVbNWMlUriqniJtClApV3WB5L1092JgrWrIV2juQ4T","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemMDPCRA9TVsSAnZWagAAadkP/1r60tunf2mXrqBjxk2J\non/cvPYej8PjVIt004xt/8o6z18CL3Ge5f5TkgB3zA0Sg+CclsqXC72UlZWY\nXTjs3ssFGXhWqjGjLigM8wLMQ8TV0nuoqGx9/timCpJGSSccfvr/GCbN1Y0n\nRIFvetqtiPMBbTNzrBTx/cyAkQjilF3POM8WXlV27ByFuBK9Tgs/zZ2yTuin\njI6uMQxbIYXphASSyvHZVUIZerrMsPe87h3DAtOnLosKJbP8NVMCxFynWMVe\nHJQJ0K94hpKPME5RQgNblsiTchgOWaEs+VicG9kvtRi5Z4iGB5vHAurCu+es\nFtwa9HSE6C2UfJ/ERQBL6u7UxcfwMYNm3nCf4xnc78Q+2+CTrqu0XaZ85K5T\nNmxg6rpMIr4c4WpQEkDDJpAlhTnIohlfjuCpJZ0npb6OO1/BsCk4X3LzX+HS\nvditbhn/2//IhehTCqgTpMOQkR+K8R8qEQbBrKK9gbXfq9Zu1z0m+BhP5z3W\n4QiKmcqoYSZLZ9pzjE2ixKjA8lRdCBC2TjJQj7HU40ndtqP6shLbbxlRxAFA\nP9SqcxKH9aFZS7n4nj4pgGU7dxLzqgygMp9SZJc521wnaaJ7MPqLx1arr+Lu\nwSXffQMAgfyjxyWbHZ6HXqUNac1g2lxMAJjNVrS7Vd8OwWj9neulWB1u84tU\nzBid\r\n=rwCa\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"0ad3ae693731b43b2c055b2fd649a42e03abd2a5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_6.0.0-canary.45a6615e3.0_1587069135108_0.34565399080505377","host":"s3://npm-registry-packages"}},"6.0.0-canary.4b04cdb0f.0":{"name":"@material/density","version":"6.0.0-canary.4b04cdb0f.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@6.0.0-canary.4b04cdb0f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5a0b91c1b64324932d2bc2df880749847f0994c2","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-6.0.0-canary.4b04cdb0f.0.tgz","fileCount":9,"integrity":"sha512-2b642pzJKHtHKOZ4WR3N/LK3Enz7CNGjmRnDmcsC2q5F8dC6GdozFn1QjQAGMVxYlLu2ZF+0gUMVJkofEr3FMQ==","signatures":[{"sig":"MEUCIAH/+1OyhdY/FcWBTN2fp4004wk7bWCOJOBox8smTDjlAiEA1ma9GTHDeyMcgxpAXIsNk44Y+BJLFav2qqoE6AKmvKE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemeoFCRA9TVsSAnZWagAACYYP/09utvrT2tYZqT0i5rl/\nUwBFoqv41hcS9bZ9q5ZEa5YuU21dUh5Vtp5kwiVvhRqouQlRCOc8rlHk7fEi\nc1bYJ/Zitpncfr7/aapHofcEnbKFZ12r3QVl6S6njp5GAmG92WB981XgJjU3\nHvZ5swoHEv/FW7otVEs37NEYywWHo/tXIM0SJnaoy2bac46CT0NpqXAQZaUI\nBGgSRJbOLYN9xnEJAsx1zFMYdmj0PRCaKpJm0KHKcUpP7yHXSsPC+fVdWzjD\njZOJ7Gludrt1HyBGgIwtwsVRhiQScRk1ErqsNk24GbaY3AXa0JjLPRG3Rj7n\nYtMY+4b9DjyMHtKMMzqo4P097mWptaE68551JOdjEo1RVDLepUSF/ZrCpeA3\nSok0rxL71SrbDvQOIARKuRV4AhPPZBSd+/044qqL9xV26VtV5QZnQ7tc/BWZ\nyONJ2IRpM562bECto5MCWJWUK6kIcCG+akQeZd4iz4T8jc6hFqdYb7jirYRv\nE8j8YKw4WihVdJJG1795tK/CwPIrWVtQcSax7yaFGkEwXobTrOZd87SSGHxu\n/6ZCBiHhN4GS3k2felOhom5/jBwv2if8str8WlJTdHQj4hDDAdICM0X6x4Sk\n6Y09WuCPUahtp/in82jgbeJNLfLv0NViwLvA5o+QOMBF2gZjDzkKH2uj3iei\n7usa\r\n=wLRu\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"bedcd48d2eb94c37211fc93847852f5261655559","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_6.0.0-canary.4b04cdb0f.0_1587145221175_0.09593323415679111","host":"s3://npm-registry-packages"}},"6.0.0-canary.b273afa93.0":{"name":"@material/density","version":"6.0.0-canary.b273afa93.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@6.0.0-canary.b273afa93.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"909a852a2dd44afd4160384955f6246ea4df176e","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-6.0.0-canary.b273afa93.0.tgz","fileCount":9,"integrity":"sha512-TBJnClz2EYcxySxq3qPb9Rao7XK1j/lCEy08bpo7SlBiw47N0JGeWjzT/0ykU1zmrk1I1FIMsGbPVb4kk4p/9Q==","signatures":[{"sig":"MEYCIQChKQqowTNAkxDv7tUwKesiGkcTmXikhNVGqbQBK59d6AIhAK+Em2nUBg6disu46TfWdAJujsxbh1rpSJtwRw4bztLk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemjV6CRA9TVsSAnZWagAAApwP/2Ie55PgFdpSm3fece8R\n/tm3NDlvHf7fQQgTuRDHH53+XMcMG4IL9qlKtF9GTSxV4OmjMusnwHq3O544\n/G0jn2EhNG/W2jHBEN88vp4Z3a5YAJnj1p0+FW+dQ7iZJeatsrr3EGqvl4EL\nrdzDpJmwWmKUqhaLjVRzg7RkoCu9LtlTcicQpIW373fDdt0Bah48f/QSfLeu\nzOG7YhgbNNW2YX/G4mSfKdvhKaV3gURY9Ivekezj0AAIW6CScAG/jKKkqrvC\nbCht0x0KW6hKKMK79baL6R3ilaQKDiMWNyxtI7WOD/nVX+uZjei6a8oKHCws\nVAq4itn15LzNdKhYL0xzkZfvxgWHQOHp+dMWE7kanksNkCq4O8bEaE8YFwQR\nCJ0t1leLfdp58xM+Nx9ce4HceYk7ZsZg7IP3MhnxFkChPgLbSZ3E+vd8QXCf\nN8H1nVrIAocnCPcJ67D1y4cC+d7yxIhbFzwhbIj1iPjy6OGXuwm5iTaLdkHc\nUZp9kwGLDUpg3bNbyQQZ8jQhw+ymMN0Ok8F793E7EjW/tOMpzz8SP6djwhhA\nx65LeZLU6YEvVbiMo/e+biQnml0iww5/BYGbsRwf/xBHcwoqPmPE+nHNvzr0\nltvpFwSinlmO88Ka0rmcN6aRJ0NYvk+OB/xAXvBk6drDlRmBWV6j7DZsL/gO\nwQ2c\r\n=HElY\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"446d7bb0e65fdc3259b7b9025c6c058731ff02c6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_6.0.0-canary.b273afa93.0_1587164538421_0.6486970851067881","host":"s3://npm-registry-packages"}},"6.0.0-canary.b70bc601e.0":{"name":"@material/density","version":"6.0.0-canary.b70bc601e.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@6.0.0-canary.b70bc601e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2dc77f32d1a76088f9e72db8b7675b3c4e22f15d","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-6.0.0-canary.b70bc601e.0.tgz","fileCount":9,"integrity":"sha512-SaIf4HI0KxI7Oj/glouAP8Xkyc2J0vOIdY/LDFNP4jufEcz6RqBT/kIqe1/a/t5dBk6ASkOOQNTLdwCEpykK5Q==","signatures":[{"sig":"MEUCIEadIqH9Phn+2ekbCUzfNRGHRLkdyWcF7NLnLQpySTaJAiEAqyudRY23Htll/wgthENvqfUyxHUjlLAZs005cTYgQRo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemjnWCRA9TVsSAnZWagAAgiAP/0+Ib2DQG3lYtgPaVK9h\nnk+YRM7md7w6pbemNUt0h3JynhPuWDKJI3X0ZWIuK2PuTwBQT/BOh3ownjCS\ni3NDhuZSoGtoGbzW1ze2dnN8pv7N8T+Y/q45JuFWhqmqAaKUiNAc3vH8SAcr\nnGFKX2GzFKR4qYVI9AeJY4bvWco/Di7MObkkfpLDy3GOXNeqyeRW2ds7/EiQ\n5mpFriZ0CI4CEzFld/g0apVGS33M/I1NB2N/eqQBp9QWLfC3ZpHExSznmHOp\nuapL4SbS+N/ybsnUUcXkMKoBgP6wnzXV/qwL1himSxo0V9i8rtFXAkM22x8h\nGluMfajDbUiiqc43R1AHJArSHWMkEB0EkJTIN2lgqVQ1mvFR0lvRomG7eWq0\nNvkMtyw1nqFluBSndw/Pw2Re7b0BB/lJ7imqzIZ4V1ALP4gtLJosv8PDhdEf\nK8DQE34IoDa4B5Hl2lCrIyAm0uiyf78acBEBM7uyZky9XBftHPwTbogFl6TA\n4uiYM4vOc3o2Dvepx5rlsQ48JeDnay87dnR2V+irGX+NmiZSPbb77BorQlZO\nsb/0VRWHuyRsGplUtQZz6079Ra5UwU4bnNjt6ezvF32eLZYwKeomEq0YlJGx\n3jnJ7KewsW46ZGmXja0BVp5bs1IUY/vBMuwRA5G+srrrngd5LQvN+dMAKItA\nSUgK\r\n=C+w1\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"90c3468e59a65aab424bb59d4e91a4d522fca3d3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_6.0.0-canary.b70bc601e.0_1587165654135_0.8027328829362734","host":"s3://npm-registry-packages"}},"6.0.0-canary.c4b4bba96.0":{"name":"@material/density","version":"6.0.0-canary.c4b4bba96.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@6.0.0-canary.c4b4bba96.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"70a894ca87396484481399bd5483902f2b04a594","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-6.0.0-canary.c4b4bba96.0.tgz","fileCount":9,"integrity":"sha512-ofa00Mm1ubCWZ8/CMNgt2c585M9fuYXPV0GImBV/WIMsKw6JmEjYzmD2Z2JmcUo2EBL8pOHWTHWUVxJX5S7jgg==","signatures":[{"sig":"MEQCIDv1f3DTK1qGXy1aIi/0jy8pv8Oz9zSxVZS6ktEuasKXAiA0IKYtQWSEoYS0TgmJ7WRrQ8WPNPXyLPRDJ4iEk/Luuw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemkcECRA9TVsSAnZWagAAhDIP/0kh5xbjCRgcuFw+UYbz\ndwpTPhq186Rg4puQTo0L9q76HQuPkKKb4JiZYz+LiJjtMejtdRmQsTcFw7h+\nf33zBy2OhfjqkzDr5B8qJhxktqHX0u6+u9QwWSzoA6Nxm+fKe2PDJ8WOtWkO\nqhVOR0T4KNG+enHRO7qCalTCpn7hAz5tTG6D9s9R548geDo/TKj3aDvnUCRz\nb+hcZDzrB5legIFqLN13JZQVNmEW2QHdw0WcIPrk7Cx6z0+i0+MvYiMgVZKn\ncT1Rh8rfcKG7Rbi8LJzEjQeWYF7sOp/DdVehD3yjpOOYeQFrYUjaYd24UfO5\nRUTn3UVcHlNIbQwFdJukXMfQWg74rfp5vYDJS7bAb8OtFa7QKofVIeUpEDO2\ntY85BC0Bs7pXlly+3+5SBM5lNKjkS5kzjlnzhvA/zP5QKnqB/yMqUeqUTRQx\nsoID8kE5s6WJAeJxzTckmdf1k/Vey1OnwxMThDWl/wr4s4Ao7VN5MB/TcMRv\nLn9fXOwOXClWGjmdgnED9HhX3n9KReHRnEOLP0Iob1BHiaMb5jIfXLuqjgd3\nyLfgY1bTBPlnlQgznQIvFEOMHaY2JYjWeFWUi6esuXK/b9RbgosiphnBuMLc\nllnLRjFEcJ27dN0hqdxbNpn9XNvYcAzOtOXgaB1JPrqHKO8iXRrO/Pl49WtN\nI+qd\r\n=/Foe\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"ee02a718dbd2e86f9ea056b6199c1664c5abe70c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_6.0.0-canary.c4b4bba96.0_1587169028363_0.4464457617983728","host":"s3://npm-registry-packages"}},"6.0.0-canary.6c1ebc721.0":{"name":"@material/density","version":"6.0.0-canary.6c1ebc721.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@6.0.0-canary.6c1ebc721.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0ad38f069fc6385ad3bee3de51a74d8bd430d8c5","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-6.0.0-canary.6c1ebc721.0.tgz","fileCount":9,"integrity":"sha512-p+0Pwt2qPGsS1xSk8lJeNawM2pIMpsDlS1qo19iJSAw0utCCjoi9ysJdqf2Q6OYytS77b5jpeut5Jskv/kSBcQ==","signatures":[{"sig":"MEQCIE4MR9kbRjvyvd9S4Nd0rS5IHOeRZNn2Y9NgKWnZkkKIAiBS9misXG6s5UBESS+JhRrcU38i0LhgWRqIh+rd2gKWGg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenf6xCRA9TVsSAnZWagAAbOwP/RArbFJy7cv8DnPlGk1R\nndnxx6pEVO9IXj6FC++oZ/80ERpsyfTCuFmZC7iSD8QK0AFde1uaE4yef3mC\nP6Ml8AxzGfw0HvqWwjcXGBvydvpb/XfiS3d/iwoPbuRgAAXkoVz/Px4r+8oh\nbA0dKs5s7FqiccFN24OwABaERqq6EEHtgb8zMCfrZG5wmSrHLCIQJagWFGuu\nVO1wHOpDNPAOe04MuIbInMGoVSJPX8boQhJjMZsYSaKm/cXY8Jo9LHnohRIb\nveCmmFkeVl64yzaUAGSbJIJBrBcVfnMtOHrUCrhNsu0CsF31+Q0EbM0//atJ\nKaJqXjSVPalYz6HeXHibURzTyREpg+onc23s5juN3Xl7mX0UnztOp4V9BeT4\ngvby+Rv8eVbIOXmvcEtAxGBSxivlj2oxASksypqtkJQnxxxOdIgxaqaYcovD\nP3OcWKjanb9Ba/uc3Ax7UbTZW7vcqxiQhwp6VozXr5LcLYP/C5ICpnD89qz4\nP6x2qzEKEc7BGVr6P4Ktc6CZAUqzwALLm2MclUEcMWahUqD7v1jIZEpuXji2\n2MNELeq2kZ8ckBP7gRU/PZ40C1Faz7GjS/bvYmBpKBaw19h2ei+3zAcqx0+g\nHkJ5lbutL0J4DRHUmWeA7Q14UTym260sZLa946paFjpNGUHbJYU+GAm5FOoa\nY3t7\r\n=Dxij\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"b1a71b1e525edb460d6fa48e392b09267db9d2a5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_6.0.0-canary.6c1ebc721.0_1587412656779_0.49303702175352404","host":"s3://npm-registry-packages"}},"6.0.0-canary.9cff4318f.0":{"name":"@material/density","version":"6.0.0-canary.9cff4318f.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@6.0.0-canary.9cff4318f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a28bb2ef0c85b55c8ae77af1ac8d3fa663119c86","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-6.0.0-canary.9cff4318f.0.tgz","fileCount":9,"integrity":"sha512-0nP7c1+3i3kwrBKkjKCimkhYr13E2caGf1xzkIEX3QtY5swkfs+VbOgLoATIicuPIzkRvelAfhvRxPk6pWbA0A==","signatures":[{"sig":"MEUCIHP4TC2qf8uH+u06fRU1TFlFsHySGTPOavt8wxukptmeAiEA6F2+YYK0W/Mw73XqMFVBD8JCsrEDblVM59dd26xFztw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJengwrCRA9TVsSAnZWagAAASwP/2vDDAvzzG5jPzc2QKHU\nmDYPdyBtocgv7GLmBsUzrnc3rJcVYgGc4wp3KG4ynpMcRyN6z7xKrJM3fgo4\n/xprcaFOcf5ubjV7JMRlj9K4VjNQ1hJZEUSgfeiZo4Lu8myZj3SR2oVFF8Nj\n380vS1SDiTkvaJTZwsfbNZMuGVduzg/vWVYtxtQqY0p7dQYsqwfiZcq/J/8O\nzMxG82fnHHYiUdH8m9qhX1YQdbfYCbIg5gsGzhxf8tCD8faIr7gMcT9FsBn+\npeLdE0hZQ4HKsnoVmR9jHS7y6H81rjSCsR00YJ8DiS2GOsQofwkvCL7UJDFp\n32Z8JNUrxozC9PmIXmxFMXLAoFNbwXOk8+zNFWiQuY+Oexbtqu3ig03vnsdu\nKvPqVFHDXoL1V8ifO3TOKVrnOlgXWoTAxdXt49Ap7SpCZVsxAKLePsambzEQ\n85NXODLPaq60DRbZSlev6kPgCMfVHrxu/pdPpbLX9Jyn9bGYSKVQOSwfV+XC\nHd/I/iqqpbZdUuwXxzciP4P0nPSp9QY9yxk0RxCzXqHryTpBd2APgsU3FG3S\n8xYugaez+555eLjEe3jseh88SuTX47uxBVdx7LsvrgsIRdJn5we5VdBecLKZ\njYb8EB1gCZ2K4S4LET8PYI/fVulN0bepw4aD/JcvNve8bGICCKOXD2cd9yL6\n4yE4\r\n=GZlS\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"0ff1f177754c259b5b0021494616e96f7b6e0d8d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_6.0.0-canary.9cff4318f.0_1587416107537_0.6308224601653512","host":"s3://npm-registry-packages"}},"6.0.0-canary.7b4482402.0":{"name":"@material/density","version":"6.0.0-canary.7b4482402.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@6.0.0-canary.7b4482402.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"31d98062a8257e58fa05c4b9b8e65bef61d4d636","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-6.0.0-canary.7b4482402.0.tgz","fileCount":9,"integrity":"sha512-SImMvzK6JW+0Z07xL6cQwpzETyifeTgiILlXE/FoZR2u0ME5uUye9jLO2/EFNla8GBbXCotIOP6wF2cFw6KPgw==","signatures":[{"sig":"MEQCIE80P8Vy30ldNthj8kdIDXEtD5t8K/UR87+t+o7j85pJAiBnAa4dpp7hrQcphlC+N+8q4c/wF78EXfU/4UH9ZTPmxg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenh/1CRA9TVsSAnZWagAANX0P/AzT3RPUE7r1uDPGBYPA\nfNsbUPES+oXOY3ZWLVKJFs15AUQvsA+yXAfGrADR04l0AA75mPheqgVDX8Cv\nDPVZ+dewH1CBVjlHehKlnBd9Wbh5ebPSQ5ZJiP87jfSbJQhE0jI3Uwb5Zc8e\nFtwXpqEV82APgdb6zdvj1zqTOj0O1yTQVQZLc8VwJqf09iiTKmrj0f1KD6UP\nRZECmPHuM5eLzKEmovAZTVm7a889UvPly3nDaMyim7nRtep4SDca3dapxJwi\niqKd2hFuXChhZGZzEOn/BqxRmLF/5a/dBRU8oWuDU+bOmjhrRWxTtLTH/S5t\nVvBQS3RBaTuPggcD01NWztjR2eVlBVdmMzt1LnJ29mrqgIpurDc7xXv0yUlF\ntVsWx3j+5Le2rzW3Iq84+2J0CrN5UamgOlUxUY4a7UgBZ2nzi9IAQB2pir+1\nsroT4wXeGSoKs4VXL3fiOwJ5SfL/gEj5mmC//qpuHVeledPOc8GfN8ugoRm1\n7cn2R3fk3lM7uYEdfVXeHhPqX6YLKnJ4YIQqvoZNXLSjSLT0s8JYuf8sq0Ys\n+bpt/mmowSuS5kIkuaF/AajWnmWnGCeVbQE+epNFmRqhSPRIglh+S/VHouRj\ne6DME7ZGRbpv1qwDk9lsq2g8kcLxvBjYHu3tITmmwqHMHCmPp/Hkh4OB3+Eh\nrb+w\r\n=JxrJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"c25f7586d29e2c5a6d3c289197d47b826d499cdf","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_6.0.0-canary.7b4482402.0_1587421172629_0.540396111590673","host":"s3://npm-registry-packages"}},"6.0.0-canary.deda86d8c.0":{"name":"@material/density","version":"6.0.0-canary.deda86d8c.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@6.0.0-canary.deda86d8c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"05693a2975d85c13ec4913edea6f86e0679b8e43","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-6.0.0-canary.deda86d8c.0.tgz","fileCount":9,"integrity":"sha512-nf/MLWDi4c/5jG+4TkOjbKRtQXTDlz+kCJH4rXAKJLjZI8GSJe6Pz6bcFjsFE2WPIASxM1vVFT+Ffyt2dLXhSQ==","signatures":[{"sig":"MEYCIQC82qY3FMjyNZomRAb+qNp8MlJmr1cMowi+6VTU37KkgAIhAP9uOb9SObIybeXwk8z9Sr+qF8vTfI62G9n8lrEGsJy0","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenkjjCRA9TVsSAnZWagAATtoQAIFaBjQ2f0CLmvTyoYFr\nKZ0G5+TlKNIkoSJQ9gPH/tcSgFvcqMhi0xqIPpUQk+GpP6pMQFajDHdnfw9q\nsE74jF/72R5xUsD5c4wXgagqdUmldrhwNFi72gUMN3MfXUuPdK9GssyUxLAj\nVBExYWXbM9d802/sGq0Rg/C5kfBQH5mR6XBcYTZV/azU+f1x2OZgJSmDvg1n\n8LIqoMpBuzmbsQoxumDfV/4sD+MZbTKTnxi+86p0cNLJEIEiVG3GvrLxRrMH\nCTOh45Tt9tICxlpqAxf+v96vMk1EUjnWh6xE7yjbY0ml/r6+Eo80oeoXf857\nRzeSbo5+sJDmMFMUS3eXZJbW5oBlcXw1562xpIZmFGA1la+YwXufusJcQxsY\n4xu5K9BnwkFdVmDOEFSSGBsoe9JwmCBom5d9+GVGJ4Af0fMVGBxMzd34o0LM\nCH3LTzb1AdWEpA7A8elI5pb0VaYUZkh6cujBFAZjQv1TGQB6e6CvVo6vj7YP\nZ4hrRJJK1QlLcjG5+9OLuFF4Q667L8nQq+IpCCPhtOLHBx/4H5Dreg6FBWJP\ns7cjflJ+aKg+rCxss/sf5pabQrRTdUSi8lM1RYTe+GNauBUvwi2v5mazipOj\nn/DfyVesNue54Jn4mziKk3diemo17yzvnfsWL/QT95vum5RoW9saC9RCSgW9\n5BJW\r\n=mZDc\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"7bea6ac56136246274e77c281cf8c66e2ef3e6ca","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_6.0.0-canary.deda86d8c.0_1587431650854_0.7187215077590832","host":"s3://npm-registry-packages"}},"6.0.0-canary.d10412cb2.0":{"name":"@material/density","version":"6.0.0-canary.d10412cb2.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@6.0.0-canary.d10412cb2.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0be477628b4e4ba2a64c9638a24cb7dffef056f2","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-6.0.0-canary.d10412cb2.0.tgz","fileCount":9,"integrity":"sha512-zIgiMmeB4slbGu+wxydZW7EuiweuQtFpxmH6sL+aCbhyfcNrLszw5B2aGFcr+fbSD0TB19T/TiqQ7mAC3RNmRQ==","signatures":[{"sig":"MEUCIQCV47hKtQ4Uo0ee9jzP/VGrfAt3bO34whJStCphu+94mgIgSs7v2P6rdlorMwOPNUtOxhM5E18COFQ9q5ev2zbKpsI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenzjHCRA9TVsSAnZWagAAgvoP/1FSzkn31Ny6npPTtkY8\nbMCJwwP9k6vyu9EHifMm7uPLGOy9JRiV7Rk6HSH7ge076i++ikza+/tyEMNx\nXnUDRj6Vt3HpRGcSuwjN7fg3Wv/DK+jCbP+euuLronUBTqWYLmNe7YdWo6Zk\n+Wrowhp1U7yOuzLXC9CioCZJnfFyzoZgwlIyxmUdZRk18RZRXgBcclNUjnI5\nqFoYqlcZdAVefPCEm0MSWZjzzcj5Ga55ViY3+jM/sF5ZrWOvuSu9rMfLY44G\nIuYZQiWyqxNYZbpXhi8Tcfhs99lljdIv4l6GAt5YW/EW8xhJqZjdhvamyP7C\nVvMlcWsuJemUOfdX4AKGhMWIFtU0UewdFp+mylGT1MxV2xLlk+O7kJW0Qy4a\nIKRRYR9N+6PF2SCIBEpnzV2qUGupFyenOPdNrBeGqGJ/ql4wBcgSQRqEvBgN\npZZjHgKq1jk8qyGjl4L8TWrikHGbeWCrue2j1ZRxXxxxXFAPyxSpgu0n5m1R\nlKasRYBcGks9m8NihOVDRsa3qJJuGN9frTG5wCYLIEofVS25Iz4H6hzUz3xR\nhx8e9CAf8nCZHpWsx2SJsSSoOQuIo0q5sYFWLWc5uC+oAgd+vYI0aQ/4b9se\nZOkeHscbfCiQ/rXsX3wfG5i3SGVhj6FPDANRzqirbAKwFZ0dN3hI1lNNsEvu\nnJXV\r\n=kxQR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"a2946b5762e597bce2d8e4e72f321bf4934e4543","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_6.0.0-canary.d10412cb2.0_1587493062543_0.14080712315982424","host":"s3://npm-registry-packages"}},"6.0.0-canary.c141801d5.0":{"name":"@material/density","version":"6.0.0-canary.c141801d5.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@6.0.0-canary.c141801d5.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e7dc0d3f49716b6040e4975d77c11f2db955575e","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-6.0.0-canary.c141801d5.0.tgz","fileCount":9,"integrity":"sha512-wGgI4eKU0DcdEG06ewluB/Z382YZ5akycI4PE/NuFdhUbeW4XiKXjNHsCkpdtMSLEGp+5E6Q5a6k97x3FX131A==","signatures":[{"sig":"MEUCIQCm3yZXNNfSig+nNeXfvUEJkvsHYP5FqHP+k95Ur3E2uwIgZym2Zw2XaTzu8W2+zTuQHGNPIC3KYtXk2U2ObHRAty0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJen0xfCRA9TVsSAnZWagAAHKkP/RKLP41YpD6A1VvPZVae\niaVTVOPzB/+1JMtVoGwwX1MXAWuDw5n5J/YBDwdxmXi+IxNc55SOJRJv0IMm\nr5kdMeDlKeHJoj46D7lI0L/PL/QirUK17RFhkemFyfnmKXdSHT7PBR2CLOVo\n1CMpNN9GwLo4nStX6O/xMgOlDJl/tbGnIUui/myke99Ju2AdUX565/1SPHHq\ncK3S3cW1Ia8QfhaRC1GxFHEdOAqoee4RrEuOve0xDS0WLGcA+NVxTdNNTt56\nr8r1zCWelu+nbysV9uGnsqWu0Apgs5se7rzE8qpLqhDv5GdIY/YS57zkc2dr\nwkFMcCfp57rZqogJk/yVzT5zJ99pzecZOiU5exLLfhaCUxsOGC6uyc6m5CFv\nQCRJIA05xK7xeOkVBMveoxpvoUrf+hcjuP494xupk2pkZmgfXuoU18SIXrZo\nu2Cakxd2QFWF3XTzb0OYXztQlbtOt5gw7pDpNc9GVXLS9lLpcJ4q1snjn4S/\nMZKlYLyCovYf8TJhBaHwik1mbVna3AZG+s4U8DoqJ69QmIL/DLFgt1v9MTve\neE54uHnIG/yWzePXj95wBe1nNdanOFMnI8WzteM3Ka3Imf+yCWol6UYU6jN4\nEr+hTEKBfHqckBE625ZV9f39ULplhoV3OBqkpKA2jPBUi05gVE0OmzAJzw35\nsRBy\r\n=m64K\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"d026173e9bf7440b69f1e3e7e4c1bd60dc5ce6b5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_6.0.0-canary.c141801d5.0_1587498078906_0.7219371001158599","host":"s3://npm-registry-packages"}},"6.0.0-canary.28d10a96e.0":{"name":"@material/density","version":"6.0.0-canary.28d10a96e.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@6.0.0-canary.28d10a96e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b73427f1488e9b56736dd42b4db17e7fe22e56cc","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-6.0.0-canary.28d10a96e.0.tgz","fileCount":9,"integrity":"sha512-zIomA0NIsS17MSwB3Gnvbtwn6NduUFqfDIrS3EJU4VOuBj9BZzkyWM3enB++mtiMzZAsAM6j+ih6RLgfyf1l9Q==","signatures":[{"sig":"MEQCIA/wZw2/36gEgR3rMu+V2mpYEYvvSxY7oJA0Imte31JdAiBEQHq32pZAACALtTkS0Y71mXnMrC+Q6cl6h/R6fw4f3A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeoL/oCRA9TVsSAnZWagAAvzQP/A/4a+gAsLHP8z5Gl3K4\nexYE3SX/oN8K0Ge+X5OKwr9jc5+W0JEbowovCeJXQodGA4+HJBoVEwNcSC2y\n1JooKChE/X3EZJG+axhawRSgrHWBR2sKVqyF58DLoTWIbaPXf6yr12GhQRLP\nFcOait8iT/eP2z1FigzBuCsUwVI802IJrb1C6yA5dBJd5E03MEmLoSRX+3ax\n/BrJ79QTSSx7+auAjmucRqTgYVfqQxAjLKTT8DrrcESwHkG+yEq+qBL+vNUQ\nViUycUKGN/WnqebSRMUKg1GsnBaCFafClaqtD1qI6NEuUdA742EM50PaLdlJ\nuXBMghX4fsxs+LqEXj8pODXM8jTyO4J6hV9cSymf+6hzoXQumGcOBP0jwt9y\nqI+YIBJfbgoIDZODWHN/+6if4U5tcGbG2krG48W7+elZynk6F9WAR82bSHbG\n6n/pZzFl8tDT4cQKl+IEhYpxalj/dEMTgbOI7NCU/+fCzmouyAcmjePGh7jH\nvVtNkTL5XVlv2rJiRzfxlBxqGomgLKFv1iwBtuyCeIqzO4o8nL5XT9V58Bjt\nxYYrXaAO25CdRjMnlAG19AL8MA0voJeX9AOVz76ZbK3XMcaIVVT4cd7GO1Nf\nRZqTxgU1ahFYlNLOpDOylJyDoBCpS9uuysxAUNcCNa/dP4HCumA5G2F6lNFX\nL6er\r\n=c5Yq\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"20feb77e4dc8d7c73f3549e0dfea4b381106b061","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_6.0.0-canary.28d10a96e.0_1587593191830_0.3182450565502546","host":"s3://npm-registry-packages"}},"7.0.0-canary.8540808be.0":{"name":"@material/density","version":"7.0.0-canary.8540808be.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.8540808be.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dff87192ff85a2df96f2bf4f720c0ef2f65def25","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.8540808be.0.tgz","fileCount":9,"integrity":"sha512-ez+7a54BC0BTmODXtzNAlE+cG2Tj2YS4iFVxubqaasC8JHHdpiYcEtcGCcvfOYJJ4ybr1wcCD69X9695yhsTdA==","signatures":[{"sig":"MEUCIHz/0VfiTElg9N6stjqTK7KgWSLFIxO4tRPeIjjkpyhaAiEA0xIh8oTeABoboIfpbM9Y5WVewU2zK1OgxlEe26vyql4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeoc91CRA9TVsSAnZWagAA2ZAP+QHy8NKNCrypYPg6VNFW\n5M3vUWkt+4Szr69gu2uo438z37r9QKvM6vT9U2H1Rfp3MOcqYrYrlIlO4g3O\neb5uCCW/JWbDC1vJ37K4a5GseqXSR9mUo4i4iZuiXnDjXKMDpo0KwwzwcO3z\nuUTqIrn737y8R5wvUjkdjSCfwJWQPayfXtZSXI5FBvFujSeNLiA1KUeEIj9r\n+RkWDgXZihQXX5Szr+Te3C4xyfb210PW1/a0mr1XrJS2sRVGPGw7py2+tJRi\nPfZ4570Ok53Y/UE+UKF0I1rmgdcEaXtNK8YYN7W66Iz44reeh1N/6xWeF2mC\nTn/PtarihW7neo+Z0yRdaAfRa7uNdUge3yC45DaZFILVnAN01+T19j5dj0ZM\nelUCK1uuhIKzKTIT46F+CrfQykjRnMykg4rY6/Hql7SfYwasEHW994r9ROvD\nzQnp6VL0mCGhCegQ+ph7CH57U4o57o15BZ0F6fTZZww6hLjM+GnLk/7egblb\n+P/3tQ1ZOtJMcchZykmg72BCdSnwy5Spfs2U3Rtv/Yd5In2oaD+htC74ZeOQ\nZeiSbx7bcoxtGHGTo8G0lNcDo6vXqXlVvv7RuGQTH73CFl8iEPEsJbKMT1K6\nODAd6RBTL0IWrDFhKTl1Tk6ylLu7besnbHC/K0yyjwRIYzM+GwNN1SKt76ZK\nJNEV\r\n=prdK\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"a99320a8e5b4b718dbbcaeee1ec4fc8feb72b592","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.8540808be.0_1587662708450_0.8496260911445377","host":"s3://npm-registry-packages"}},"6.0.0":{"name":"@material/density","version":"6.0.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@6.0.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9731d9b981f9b5fd92780812c8382f144ba2494d","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-6.0.0.tgz","fileCount":8,"integrity":"sha512-svKiq7XtUg89hf08XGFF46NdiQAZfey5CiatmNxD3WX7LUoCb5zc8K9BqPL63P1Sh6kty9R0AHj+6w4ASFetPA==","signatures":[{"sig":"MEUCIQDtCNaA/Zkd1ocFbtcRdGh6Xyqov29q3iInISdE+obxlgIgA4qibvi555VLJeSvV3llE4gYHfsmE9xoUuJre89U0Ck=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":11975,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeoc+SCRA9TVsSAnZWagAApF0P/RuHSfwnbfWm5yjdR2v2\nASSxvCWfIHQrZgjkY/yZqeIXAFvsQwCWwt/s1NhY/fBLw0TT++Fv3IzUP75F\nVMb5iZsYOzoNlp+gvnnJJiJ8zEQrHCt8XdnE2QrKHtg/OFW4tCndwm30OgJw\nNzVp8GSSl3hfLgpTmeRQGyGc/pGYxG6/FX08caropgHAMMg/cnh6E1+sa6LA\n1zsbtctTtcqLaQNL9z40Ok7+K5yPKRsX7mzWYB1yITtclmzOzw7NN3LX5UkM\nninkdVeqDop2FtEo2ma/x+nITNdz2xdsOLrRttxDX0CQS0whlsf7SDreTKhc\nSOXrXIQN9lrpFU4DTiaOuhcyc9/qFZ5S8hgetfuxeWcCcM/wlBlW7jMiX3R5\nvb4nO2W0ljbbu715IXe0Gz7lHSZ11I2G7tT3IJCvqPKM3kVgda+0p6ScCLqV\nBJwnksHqrsuAwf0wSK1rQlqgibmGoFZIGPJuXveISNY8/XlUcC9Zt0ntNbZw\nsUK4W9OQhYDxKgF6eYFadSOtC4uGj+EdTpx4DhoP3wBJRIUSEmIAtQr2jiA7\n5f1wHNmYHrs97INwJayCGXTL4UCBWe/NRfPXihyJa+VUmyLiKF88SX1mRtzw\ngWACVT3LEAjwbjFM2WTiuPCd/B6/CvIq3UEKfuHtIadEjzQp0Urp5uo9jv4q\nRT06\r\n=nvRy\r\n-----END PGP SIGNATURE-----\r\n"},"gitHead":"8540808be4296e60f1c1d3a637413e433ca7efaa","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/density_6.0.0_1587662737839_0.4608488505051951","host":"s3://npm-registry-packages"}},"7.0.0-canary.2673adb74.0":{"name":"@material/density","version":"7.0.0-canary.2673adb74.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.2673adb74.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8bb9bd2e9f5b5d35addfa978ed36721872ca98c6","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.2673adb74.0.tgz","fileCount":9,"integrity":"sha512-bYQQswjRJ0ldkPewUAMAIj6Dq8VhI0zoavsS/mK1tsnbwjtpmJybSzRsmkDdNj987C0TmtWU8xg7Q225bLOSdg==","signatures":[{"sig":"MEUCIB9GqN+D+6jjd5LdoYpfsjCh+l3/HLhY6KpGKCuCH4niAiEAler31ktLSf3IfAsgtMabRFb47qzc6HI14UT0k1zCSV8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeohpmCRA9TVsSAnZWagAAGywP+wWb+3xxLYv6TXG47bCv\nYijeZ6synOkB5R+lt3Hkp13YI0nxoEXmQv3U0Isd1/dkevST8iI/724HSe6k\nrUARucTn211ZFTjCsmvL06upVYSCR7dBIZwcW6TL/yPluBF3Q5k8mPvWBsoA\nQ6w2jsc04sNnGro178Vxhw1VQ9SYOH5g+612vQAn1ZWaoR7ptUnAovcZ3Q/t\nUsOxb/C361I5vijJEA2uEQhehfj/kOZM4YSwS3tLL6LSXQalZMexMCZdVRgo\n+0y88hI2cMJKsAAaDQWjMvDWwCiD7DN0xRH4ri6zTWsU/EaDx1cqBZcKmjwe\nTQDug3rXLMXMJEeRU7S53GK5Bfs1sgnVhZ/F1v+axWyz6hyDQPaQjFivuyjA\n2R7wGqLf5K3Sbt5+eW2343/6IvfaAAodjg7z270iF1fIsFfziL6pucsqwFsX\nLx6jRVv5VkdV5MFdyo5nBuiGVEqCIAP/fSF6/nB37vU59ftp1wdLJZWh+2Su\nO2jBhLPj6Q1jj0/uDE6oINV2Hlleah/VCpEO5UHj+Ck6SvYN3oqIM6UQroyY\nuzzF4izbwisaDaQYG5+2WQkG7Io2IMmJ8PaOpLiixg/Uuh4z+0uiFWL1idCc\n4BKCLcg2cDMmBZU6N5KBq4cxY9aUzLzrctAcswW7Urte1ZNKHD3+vvejhTC9\n3KY6\r\n=/Rnd\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"9cedd1d83d1c7d125a3ed38281072b6e50b57e9a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.2673adb74.0_1587681893813_0.42657362583107616","host":"s3://npm-registry-packages"}},"7.0.0-canary.b10d0d7f1.0":{"name":"@material/density","version":"7.0.0-canary.b10d0d7f1.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.b10d0d7f1.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d05e46e87bea7564c166a8d93472f28bd59c98df","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.b10d0d7f1.0.tgz","fileCount":9,"integrity":"sha512-MNGBHVVId6MiWRopK9mc0RHsDBQZRC2sHh4TBV13nG2iJX+M9/Z/MiThTonLa1GNU7xe7KPWR8w/RrD/sqMueQ==","signatures":[{"sig":"MEQCIHqPeNYnHMpFmh77+goNyQtmF4Nqc9rtd4epSS1FzBDzAiB92t9/okLhy8HEfEfJIzCr4iukGVFyiB0cXuj3TnDp/A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeojDLCRA9TVsSAnZWagAALZwP/iMCHJljafv0yAZM/qce\n9FhU6NpAS3D+jI1n1o4QT1KvpOxRo9Uq23P/oF+gvR3DD8jzr8d8QiP/IQ9f\nwb8kjbGRmN63mHnFkRT/aWShRT/T53SrcEDSkqkeUeOTtTqFajJq+W1S8vfG\n9grz6opEHnRtNmjDkNddPH+mkwNa1XehfX3pgeJVKhnqKjJk+JrSSKZi/OL3\nWSrfO0qn7eC4SWiO5Dn3ewB1d2Oe6od6z6S5Fd0INzZt49hG+0sRm1AoGEgx\nh1HI9Y1Yh5fov3Vn57osVEg1hLggI4TO8XmTKwF4V9gqGqTHY7BPo0+SPwUQ\nxYVn1F7V8TJQOxzSgDAMTPjqK7kde8QQ2ngVph2Ck+8IjUO17RN3PM0PF4bx\n+tqC+Zo9naePfx9O0n9O3JFE0RSpGnKtoAYmU7KSLgp5DdXpY1p+AEgP0/K9\nSXb8YqBA8wFZFKVOpwoh9Q/nHoWR8qn2yfeCuQjkvg/z07oqR5uu/T1rQGXi\nIqcDoRxnzSWbkK3+RW33MJSmNjRcbRDr0IdCD5y10g/wg1Rh3/xPzkAcPL9P\neuzNxrClGxeykjcQSbzwOML4qtXochtPCn/8nHlgGTBdNbuOcRDQg4BLos+6\n5mrihW16OwqjnNL5voSezonloHGihiY2y308ajfAAVLpUu/xL28aVrpoBq60\nwuAu\r\n=HyJR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"83fc566b3c065e01bf601ac65cd6d17b634b7872","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.b10d0d7f1.0_1587687627265_0.48770008237429074","host":"s3://npm-registry-packages"}},"7.0.0-canary.3bd8c1bac.0":{"name":"@material/density","version":"7.0.0-canary.3bd8c1bac.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.3bd8c1bac.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"06fbe17f90ab439fcd8c714ca464f8285cd07a81","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.3bd8c1bac.0.tgz","fileCount":9,"integrity":"sha512-9khRL0V31AUqXd0vVmRA6zK2JZ7pE1JRwGrRQOhanA4dsAbwFPGWTxiBhtfeTsOddflcJQFaJePtu7xLfesVsg==","signatures":[{"sig":"MEQCIHPkwJpISX6RMKJrkfycVYU/t9ETVgmVmRYWKd3T9toTAiA1NxqPCCxP7+cNpdgoqxuHo9XCXEPr+/rGBUAFqc6feg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeo1SUCRA9TVsSAnZWagAAH+8P/3t75aQBFBywRbTm4WJ8\n7bbJ83GP9n3shagAJEGCfI1fnzztto7Ttk3PwGlGdanTj1tJHB49hZksRE8v\nxptXOuxcuF6AeQX844ea16t8h4ihMvDI4GFA2ev3oNL+v8oQmCgpHtSBc0dQ\nH/eAdtT4bQddJDMgJToFr7huNoyMWd2uBNP5P1++UiaRdkbhRyzplebuSoKn\n7rAkQs1UOtFvW62Oy92E4VCc2+2h2Iv1uRe6q9OgCFAbVADAn4sV9MsiARLw\nlcG1EMaYmbM3fdKnIanwia1i7D5aNECJ1DMBflur3L+PMi/d/Ld/p/+q3bD4\niNPi42xSCAhGSDwZwDoqMvRaYHp1rWGu8ep6wUh6JDWGKeV3jJSNXZFpqLrg\nTw4/NU9ZJffqyAMp8GYXfsAqZ/5wP9QyTxyNphJh2vLF6VtcZSaZ6KEztKnG\nVm3heqAouDGeMzP7oy8bN9ZOcFap2bnV12MPruWi0l+sXd2dxSJ95aUpgIta\n6dkCzaBxEXTikbEzT+IHsujajmCOh/9QOiAZ7fSIQLyzMnEyY0tsisNaArK9\n71guFkaJYSDsMmOlk7fZjzxCKwyaUxO2N+gSdzm5SvH4UTPovNjiwPjqoUUO\nHn9dx/dHZ7qpZDVYfJKgC2BFN1gd8+N+VxUdmoox7MZGEmC9+biP+lq68z2u\nl2DV\r\n=PrsX\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"c6f324d1b107431694d9112a3e94b90e82718ccb","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.3bd8c1bac.0_1587762324273_0.39168008298427504","host":"s3://npm-registry-packages"}},"7.0.0-canary.b83c8dc22.0":{"name":"@material/density","version":"7.0.0-canary.b83c8dc22.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.b83c8dc22.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"36295a0bbde755bb26600fa1121e993f73405ba7","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.b83c8dc22.0.tgz","fileCount":9,"integrity":"sha512-XJaneYeqswF05HEsQ/Jz0YmYTYTm+IE7pQ18LY22dN61RFgcbZgpIN+NLkpCP6nSGVh1ooNjIk6gLdduJHH5Eg==","signatures":[{"sig":"MEUCIQDxdN7cWoP1vyhR6yE+KhFzcS9BVK94D1HRhaP8FW3orwIgXXBHAn0otOH5Zp0IdNt3BnURmW5/smk51n3dlyX0Io0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeo1eTCRA9TVsSAnZWagAAqqYQAJz6QjUE9P1gtkwLHCZk\nVLJkLQsGEwAP3hfbQ6ElpXVaVtB+u6IC9s1iT1EujewCB8i1QyfJnz6fK9Je\n0B/Fsh7MF58em6aLqpC0jl1bvH0D9skPGWS09nO19T/PBYXUC1VOrbtF+NRz\nNBcK/gPNG381OoTFtw5r6DobBVSv66AiAaTbVH4So8qPN2fG0Ki7YPlkiDIq\nOVKiAVGvY28lcfxRtm4EjC7gQ67TnRXjpb7o1Pm92Xfz9ue7NmIzy3eKGOxu\nHFekT8OggCA2VJ8b7+0xD2vzqZkyDIc/iZ5nhXcDJKWPDfTfoANr6o5K3YUW\nhqGcDlVCSTn7xAKqgf5L1TCDo++KQz78k0a6GIMD31B57esMGhHJ3xrwqLbJ\nWOjGfxoWcLXjjXgPDPP6ab2rvvm3r6SdNabQkPtC2Y8wIdqTmNk6mBUNZhYf\nEVP7JzHJBCDBoSRzaysTMHcmh8ATEETTO4rIxjuPUg6Q1+Bw1lbbXiyk9Wew\nLvHnEHXjVx5JnQBRF+OKos4OkTBgPNXUh4O1g5hhrqstWDIHe9dF4eVANLP9\nL4cEgvyNwQsSk8vhkVXWx0N/abeX/9do80mYjiG140865VtIgFSFlTO+LguO\ny+YmvnDN4PoZPLO9vS5gRvr/OlhPZmn4H3Uo4bbI5K7htOPQTnaI1Ibon8bj\nJ60C\r\n=Wd5i\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"92cfe3e927d76c82fa2d8a864bb852b8d19f30e3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.b83c8dc22.0_1587763091080_0.2641593728247811","host":"s3://npm-registry-packages"}},"7.0.0-canary.1b3dd846d.0":{"name":"@material/density","version":"7.0.0-canary.1b3dd846d.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.1b3dd846d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"be125d3d5fe7da04ab0a12e060d9adaf6f81021d","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.1b3dd846d.0.tgz","fileCount":9,"integrity":"sha512-K56+kYRtpCTyuOyovnPzjNgTUwDIclJdUYVb+kyAAKJ3cONbvzNbL8LKiYraMyMW9HehJud/sZ+yOMg6hF5Rag==","signatures":[{"sig":"MEQCIHBq+iS5iDkTZWm5MlX6pgzQ/FhF+JILo36ZEE0/+QGWAiACaLYamqDdjzxe+J97uVYZ6gT8BxdgOLAYDLonVXDkWg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeo4emCRA9TVsSAnZWagAAixgQAJMjmFC3PWm1SlnKG0c8\nTD+SsxnuIfr99c2IpHFHMNPcC0NZcmTqDmAGDh4J0ZRXfnsN/e80w18e9ZYU\n0yM8x1lwo/FSOb6Iuu/cs/4MH40WmNH4TmnaEteLDpGezGXGDmWnpKBrnUpp\nJOrGw9JX0dCsTJo/xzwSjZPw+jownQrysMEMerUXFGA8NFMGoG8hw2QI9xL5\nyxA4NIRvhvRKzUc3lj3i7H0Xnbp4xYeTBbyuhcOLD/QfyzcUl0PJJFmdZYuI\nbZsnmH94mUHoMR33KPNBmCJneex5vOjZoW/u7z3u5eSrKQs8TCm+fDLDGKYs\ng6gS/tdEcl/qWJUye1v/G0Qb/OAmptqaBE+G1k7NlWo3gdNmXI65IqUCgSj5\nnLjQt0VDFg7FUWKfZ+RfHcTJTroNTmqEB7ntw63wLOfxA2ZgTxQE2RNOJxto\nva3nwd0+HQtEA9CR6UwoOWMP8tP7C+8KV4pKTUMls/RQCnQucDL8Iay6vVLc\ngJQEBONGaOs1CTJeliUlgNzCK0syd1iGfS5GyjiRQAiPzRSQS1kJMGdDAdqN\nWFKivGWbz3fl7EWdd+B9ZR2dlw7WQuHMBK/d5pCfq9ixrDD0H4v/sPRKMKnm\nRS5W7ND8cZYVpdPQ1pb6emuLZ74B6E5Z3+W7OT953VBxOuAaGbSpnxgw4+/N\nCJvG\r\n=xGrS\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"370fec5aeb98791d923dc357e46611e61cf6eb0e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.1b3dd846d.0_1587775398375_0.7941702966507331","host":"s3://npm-registry-packages"}},"7.0.0-canary.29debfea7.0":{"name":"@material/density","version":"7.0.0-canary.29debfea7.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.29debfea7.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e133cd188e8e546c6a338a536bceaa10fc6e3b30","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.29debfea7.0.tgz","fileCount":9,"integrity":"sha512-9hT9XDs785qxnZ4gpfYJqSYLq2UcJyGwdBTWDudMhA29b/CKWJkh0wjW35IUDNanIMs9v8GN79zb3DDggxdOGA==","signatures":[{"sig":"MEYCIQDrPOYq6bepyzw1cciIISdJaRVm83tH7vAdiujrRkIpPQIhANk+akg0ykrM6I7WYmxr2/rWOZ1t8bCTs6rOLQQ/z17X","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeptCdCRA9TVsSAnZWagAALe0QAId7B1AtltHQzichfdNW\nhUcHgjrtcBJ7Rf7QiaHwlt/r8PJi19o5wS2ZarQ7blIA8wYPxXi7/zvZ2fP/\n0XzEc+FYCxBL7PuO7mSbFfGTfB8TKE7ITEF2sg8+GVtFc98z39kcevM9V7xK\nC7xKttQTayJV5K5FMtsAakLMNsBOcSw7abcDQAF3vlZT6BOfjDMOdL6CjDMA\nXmvG7nK//wAPiXCVhSpiE8YVOXuX3Ver978D7k5n82Sm84PEDtX+cKH3MkfV\nGnPBJ3LH4f+ZWuEfnzJY3etFE3pyaZhvAfXgmrei57mR+VBkWD2jlVdBajMH\n00TOQTeWx/HYY8IqA3dhBI1WNnbfE1sGxpclI0cDIIpOrIW1XqsKrdfrMY/7\nEERy7wLXM2jMtWKFyHCgs3xP1QzqsPu1O40yyoiyrzXukQ+YjAtYHp1CTk9d\n5K0PyKwP50geDOsNNdSOpgmBnum09R0JYNftfJpajF2UHs8P7OtHFDsjn1W5\nRoVyvSJjv2T4kHOA5YWkVWOmdhxE0f3XFJZcPPZejFSHGXefqtzV980uPfKX\nL6tcQ4GlsPYxThdTa+BkMKSxr8BMvi35LV/61XGos0GljLQU1QmqIMHxXEpg\n8pvbHqzmX1IVKu1RhrL+a18So/0izAvTMjpz7N21YLTXKNAKXBoFRfkRALmQ\nuKwk\r\n=raPK\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"f121c350e2a52fc59191d5e843358aa3e3926ca2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.29debfea7.0_1587990684752_0.5356907765779382","host":"s3://npm-registry-packages"}},"7.0.0-canary.28d32f8e0.0":{"name":"@material/density","version":"7.0.0-canary.28d32f8e0.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.28d32f8e0.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"717c090850fd45967d5f82dee57a26a5e4cd8fac","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.28d32f8e0.0.tgz","fileCount":9,"integrity":"sha512-JyeQdZiMHHzcqSUKsopJeFk/bYhOUfflazDqVilBQanRfF7K1oBEO+mu3U1Qnt11oUvSIlXnBPMimq8Ak+kzAw==","signatures":[{"sig":"MEYCIQDGayJFKdOkFlCC52dB2yJoPyauy4S3lytZLJFhv2xe8AIhAPvz6C5biIijZJc+t9h5yZciv3Ov3Kd2IoH425VhHy4w","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJepua+CRA9TVsSAnZWagAAyWEP/13+oiXRzwDxtq2/I7+8\nYNEIIUHsTJlJaNWbsVgUKuJRaG12iIyDaVsPfxqWWsLEcgcEcPsv2PBeIMgu\nAFEfil+bTb5sUWisI5/558eqWpRS6yzlvfnYCVi4UGcqOZl17KPWtWgh6odK\nBmGw63/MputJa5abSB1GYxB89/AE0BT3nOizxxgwgV2XI5AaFbSDaf4p8QwP\nZ18OJXt2rRSc1Zmp31PlsEDFbNC3mArAbgn3Y2/323ATqnp/Jw+cXy23mvPO\n4pcCKywolySOakcQLd5jKO3BSlrWAY3Xl+x5z9D6/cMXvj06H86D/EhDLnbM\ngxDAhRUi1aR1ubbQYyA+uHfmKPypB/tFl/iFiKkqELtz3ICFydVUGzs4iHKe\nrvXSFc40t5y94cI8S/0FcaWLFpKPhndnT8ZKV1VnQSlO4PPKuvyQyeQHbX0L\nf/RwuNURJUEMYtJaPVqC5NncpgGuuSRA0VopaEmkOyVm50xmmuhSXQHtX/gn\n3UN18QumfHfdKUWUefa3NSbDBv+SDyI5Q18KrC9sCgI2WcOxuS43Q8I6KHPw\nGP5zEyPRh1325fF3meIdI5zU2LtIjhJCtdGqi4sS0YTfO/oBMLYsxtGfE1lM\nHcIkovWH09NxH7Ki9UT9qMNTvry2znNOoHdL75t7U+mutO9LvwZnvNmDKASh\n18lu\r\n=6pJy\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"5e2a5c88bb5127200d9f70d65964a419ffe2b123","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.28d32f8e0.0_1587996349712_0.8374053935112724","host":"s3://npm-registry-packages"}},"7.0.0-canary.af71cfdd6.0":{"name":"@material/density","version":"7.0.0-canary.af71cfdd6.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.af71cfdd6.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"07deb21c34d4a4ec6a1e9aa56fc838ba89efa9a5","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.af71cfdd6.0.tgz","fileCount":9,"integrity":"sha512-j4TJrbJDDFrnRgLxENn9J3If901rSEzUHQWRReVp5GvftJgI88zarCS1IQxgvhVZU8DaydSnqDgsM9Ycr+6WYQ==","signatures":[{"sig":"MEUCIQD7HNSKjajKNqdfR31d5CUduxztsv0fC01vHclGVOpZlgIgFXUc9QmIdzL4Xcq0hW5aO3uUpDGJtyXsRKv7+3PAGaQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqLlhCRA9TVsSAnZWagAAYLgP/RKlRs78l672HrlxxKXG\nlihKV2dwydefdeE3GLoFr1//9LrNRL8O2XFqAuk+2XHGcWQOPKi3ubPdOqKj\nBoQuDkvKuqzR1sqtSFzhSU/7qJ8vKeVD0TrDiJp30umpvK5vYpiVdnw8yk9/\n+J5Ooi2P7CtqZBrR7hqd0yEO9RYIoKY0OQTSE/HN80G6YaxyCAJQQVYddjzA\nxwhwcth9O6pqM2abHtx3qAek4tgsoAiiprdRwSeFhIsBhbDYsu/7p+11Ccgj\nuGfjUeA0QWkzoEoQ72GG8FUcyi2bGrbBxhVBfSLrc/4aUqUl0adNYNGKIfvZ\nLzwUDF5iQ+5XBc/2Aa0o0qapaF/57MW/5ZHQ2nusFYREsHYLMjSvP5w+gn75\nUWGB4JREWTl8kjSvD/tCFCqZokUPNXxDSSH7UH/ZiHXXUKi0VIYTPVxzJmnI\nqWmsEDGYrUZDtP12+lrSwIbeQ9CHmIPSEKl4cCrlDXmmxTDoYE+eCY+MoCrp\n2JI9jlqIPEFaAyISCh5fiY4X+PdYyOnxSOUORRWcq8apBIP3rIUb0dCjhg3y\nKjlG/P08IiAboqSJCOyuTixuuxTK70tZcP2WL7UwnkdlEvIK3u25zsZsCZrC\nAgJWqwLuARDaFTwXa0Zmj8b1ZE177kYLn3LhR/dtPkzZSzssQkZsycB9RfL+\n/JD7\r\n=m8l8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"8ab654dfd65440046211cfc73468f20a57d7fb4c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.af71cfdd6.0_1588115809085_0.5937882701332005","host":"s3://npm-registry-packages"}},"7.0.0-canary.99d2fc961.0":{"name":"@material/density","version":"7.0.0-canary.99d2fc961.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.99d2fc961.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b8560195400ae6e20cdaab3c4ac5c80dab0be190","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.99d2fc961.0.tgz","fileCount":9,"integrity":"sha512-AV8iWcAn+U/fa343yck4yzOjOSVDLIkLgFJIw58DRN4GZteYQNGCCRo7XVqLUs5HELERpJOKyklXbP77K4NNfg==","signatures":[{"sig":"MEUCIEJJAW2ZHIxbwLp7VKnteHMmpLHz3tsykSBTokbNMhguAiEAjo4YiYVfOZyBdOiLUTf7IPtuti2j9BY3zO/614x9gQw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqVo3CRA9TVsSAnZWagAA8BQP/iOHIhxb1WA1N7crhkWm\nIAGyGXBMBpgJjpOOrwaDgGmq65H3zrepd1MvoPi8kWDLoKetg37M0vi/mNCf\nG+wQLuk+Ojm1YtMKn9XyFk+eFugaMkUZdqXOdVdIo5QfhsJTF1qySXTV5IgB\nzK5NbH6KA3csvu6rKPC+Yf6p12Gu+BHksJ93rhU6GZd7JG0CnRv/pGNUjmDB\n0ca+Z0yup2gIa9ga7wvGej/Fo0O1L8WOx4PThW3ekc/lW0WX2c/wsKiYLU6W\nVrDyzdb0OotWhsyLm9ItHDjXd3s6objB/6ens2NLRCOpLpLIah/OeIWzk3cH\nwjKYdT3FnkCC3bWH7HdzFgib6wzLGgpW1n9ynX8fNKIyMpvut+iUpP4clwDv\nh5MNf+jCd1xMjptbbfQviS0J0HkQIznexOi8OtHUWCZDjiVTHXOSSZHMZhbW\nEjl6M74iLd6YEGVVL6KwijtRIVQ4jt9b1OqxfHYSuMzUWo1ecDeYSfS09L2s\nCCVxddnfFzW1FPAKs6c3fbGurFZd56LeEUcATF3o8NH2u5fSP/mW3Gp0ql9i\npXokrHuMlfixHHXjPL/7O0lBxHHrtHVI3htNQR7OffGgxdtSiRB/6T5mBkW7\nERUJxhk4hI0JpD8MLtCOOvfVQ+vgwrKj/co9Pju546HJDcGMYZWWkUr+xYi2\nhOiU\r\n=qkug\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"9b1ef36f20c436f96aa47dc90c983832edc5985c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.99d2fc961.0_1588156982636_0.3444265277997054","host":"s3://npm-registry-packages"}},"7.0.0-canary.0e052b24f.0":{"name":"@material/density","version":"7.0.0-canary.0e052b24f.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.0e052b24f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6c528c47823666e80466da5bb0a56a1e47154b7b","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.0e052b24f.0.tgz","fileCount":9,"integrity":"sha512-jBtta9YxgOvnLql+ixss2h03azx7UEAp1aeaiSzG/3mWcm+wPkHlhb8kolqqrLaqIs3mxUr3CpMW6DTajS7LKg==","signatures":[{"sig":"MEQCIARMQFUszWARKYzh7FjgEzGbSd5ZGfxYyBuUHcO2yu4rAiAKVVwFKWoffg2SkdpvtQv6UW/EEHe/mnqAhv2MC/mq/Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqinPCRA9TVsSAnZWagAAXOEP/33d6fPb0c+lgSU84Tt+\nPxxXkHItU7UwSAD6pkhlQr3+lzbdvuYGPDDp7Y3GBWWxxB/4AhM94yreTknU\nsBfG3dw6WXRPpvcwraFvdyMCjTlOaLMBCXb7OCaZVoYJfmuv4mU45TM4JGQG\nWOHUBr/yHTBc4POa9eFGAQ74S5RMDdq6wiGPsvmtnAPpHeo+toY/t0irpOW/\nUuppx6XPB4EBZk/ej8Ll+0s0IXI78BSfOvk8JIyTCKt3nIcP7s99v/sFy+Zt\nmnV2wcBTh3eWeUpQCKbepIbf7WaMDA0OO+EzwC17GFuiLpitdYxKrDA2cScK\nhSVk896ZaWEKD4j76a0sBfTKbM2jRjO4Dimwco2uc839gkn7BfB2LfZlLGA5\nnE6ym1HOv4/rd7Wfbt57lELshRoDYfFiPkSESNiETgoOuvubtHUk47fTyb2+\nxrOv7T4DxGhD/S8dPWguKaLZleYUrrFbAD4U+aRi9nnMpGhc/KSjgrkGK6o/\njxncvejMoxZnCmN75Kw/hRaEjsTZbqbJeQYULu00wsNqsD7GwZSkDXz85zEU\nh6hZ9mjwkfWTrSrZVe/3IbWhwSJfHY8Wrn0UfXYnmE5gP7mEPMPw6idmBXFp\nbbkNagJUjSlC9fVgGnKbpAQQRNtAzdFLPD03Y9Czy0UXJ6Mt11GbB0iGo3Aj\n06Q9\r\n=r1v3\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"69929564b970323734d16e9588636ff8a645f2ad","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.0e052b24f.0_1588210126952_0.11530734057563596","host":"s3://npm-registry-packages"}},"7.0.0-canary.ff4bc632a.0":{"name":"@material/density","version":"7.0.0-canary.ff4bc632a.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.ff4bc632a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d870dfaced19e6b28926926bc469becffe5cad31","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.ff4bc632a.0.tgz","fileCount":9,"integrity":"sha512-rvnn/bl/650c/IaY5j0Em/gFYupk+Me3/hQ7LXgPcaEWBAy9MKQs+a9Sq8NGsqiPxcynUtQNXZ86y6Vg4LSICA==","signatures":[{"sig":"MEQCIBstPfEubm7E0z4Ces24viijlQaMeVKNXqnPJWWNOlqPAiBo/nVcToP4QM7LhOcp56sseRz0warz9GkYfdKokSgWUg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqovUCRA9TVsSAnZWagAANRoP+wcy/BExe+wr7HlKxzZ5\nUmkLUQ0QegEou8H+03qH97bgqhfL4343PHVgMZz9EnxvEoraByiczHDrbuU1\nPPhUerxR1TyayxXCtLz1FYmH7ZLd/DYJMl2zR6AYJdy08sjcyeRRaPkYuBie\nX15wcJ2B/JOmRIotgtCLRu4K+BkdLS0VAUZzOq+tb9/kuqtinp5jqYpCwsZm\nt2AITHplTfwyXao/qdmKUn73UCm1lY4WD+KNPvbxqLxNO5pssZyrJNTsFKal\n1LJAhaVjiZD4Ng8VScmP/R2SYkVU7fHrPIgoE31qrfxBv9cB7ocodgKqWxOm\nMZXM1IIj7Wy4hU1sSS/yrzSL8EK3Sr+lk7Jp9kJo2U7FW4Dn4PDQ0p5eZI2m\nKFVeApFagxGRCME6Q8BtGWiTaT9iGpm/GGOtVQl8ZocAAoVABRUjN49U0c7s\np7xKeIs43dplQwQ5LDrjFVm8iUue/I2Du/IX36VXXs0XLLGh0RrD3I4urMEO\nAeTkFcRXLHJIKsngS6u74046CDVACsPy/5CramEGn+Bjqqwgi3HaU766+mUL\nogJyTbx/mfyjGxD/EYYsFJT6yJ3EiktS0kH9RmVVBlExATspKYoxHr9mu1By\nvp4LMTGKko5zECKkolZW2o4WW0DkATIMlopBBKPqHa8TViaq4FuHdt775mVd\n4e9Q\r\n=dc69\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"bf4456b9aa6b24c3dd166ee7bbf96a700054183e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.ff4bc632a.0_1588235220209_0.7906313830602103","host":"s3://npm-registry-packages"}},"7.0.0-canary.b0f83d2fd.0":{"name":"@material/density","version":"7.0.0-canary.b0f83d2fd.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.b0f83d2fd.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a9bcaeb77007827f698cb63d19e49a7ae980184b","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.b0f83d2fd.0.tgz","fileCount":9,"integrity":"sha512-c21fwQYWE3tQIEk7aZ8IVbMQY6CmTC1v7DGR+AncVH15MHupfcCYnC/EDajiklM2bS+086Qvx5QYWy4hvTWNSA==","signatures":[{"sig":"MEUCIGiwszNCE/zhtVnSVUZFebN9OL/OnrhxwmExfEErSSlSAiEAwqxnmsIMz/76rwHEpalINlX17oFcohH/oqQfGmgxeBI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJequFcCRA9TVsSAnZWagAA/l0QAJKMXDDodqfLcWRC5yNE\naK4hQfoRT8aBq6BwnZcOLf1qtTA0+L4Qc7UecBpBPdrn8Tn4GZDbmJnG4I9J\nMlCtkVyNCIqzcBxswMOgiwAY/Lb+H12V0E5WO2q7i6utUVEVhcuYRpORL5tb\nBkuMCukmupIEgH3QfAeLAfybtylTD5rteJ/8zC4dmVcjt3YeDIdxxFYW+E8M\nu+KEOI4ZPKwd4v2wmU2Rt+6mnUMZnp682sUL6ga0Sc10IHs9u2iLTUexInuK\nUmVTyu+V/r5TdGHEamjJ/5GaQh+y3MzO5jVfjb60v+MF3n9g2q8V3Tgei+fg\nmJcP/Wf8FY3N1X/krc3UC+ZoxyUesVBqrt4iX2qEtyZXGUsxD9vzm5izDVaQ\ntQljIJLcss8p5gesSd9/sDqj/l1Rv/yd79iXh5x0Agd36zMUwkQFrgyPPJAp\nyPB0/K1v/RM+/UZ5oNwK5HKugtLAQCsu9DmQsvBfyYudeoTJFiATEubctcoa\nNEf1GYRBGL+PPA857H+jMJEkGlPSq4tuRz23L9LNi67wycz0KxjZ6UK8PQVk\nScCX3y9T+ZgjuSEnFptcQ63X04QJwSKZPh7pHkN98B5Xz3utrh3Tbu+f4V1T\nz054IxWgJptwNy7Ta+1jH/O/DgvgbTITnYDgRAPU/W8TKMSqBgy/2rUG5ZnJ\n7JAg\r\n=WTx6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"a1500073e25d06ecb6fe752169f836de2cc6ba13","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.b0f83d2fd.0_1588257116148_0.8667829372308342","host":"s3://npm-registry-packages"}},"7.0.0-canary.e59906a57.0":{"name":"@material/density","version":"7.0.0-canary.e59906a57.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.e59906a57.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d71bc97f0a30bd21fe3fdc6fe2655f8e6980a71a","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.e59906a57.0.tgz","fileCount":9,"integrity":"sha512-jr9ZhTq4O2zbf2Ut6zyWcsECNQkBPHnvLdH8H2h06e/V49VNZNMjO6TTeCGUOxBjiHeFnuE/mV7sUUufJicnCw==","signatures":[{"sig":"MEUCIQDEZ3CkB3zAiY/EHuV+29q7cYuYW4LK/FbDTB5HhjEPowIgEeSK2FExwzQ2k9OrcVNO9yqCjJj1ZSV6nrp9oVfj8xU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerEMyCRA9TVsSAnZWagAA0DAP/issc6BFL7yRJBfK36Hn\nEDMfHJ2Bu1Wbn0qIAAMcf6ax2yKRYlcoP3f9iesSPLWWmHpNYLkmAzLEo5wL\nt+30CJ8P/O/lKQ1nkyFVGtzkJY9mgABIenGgSQD6UYHi/rBuJtEXqlMxK2Iq\n214zSCePfY0bkBkIfJrUniz1Dden8tqNlFv+Y6JJOKj0azt3Mf/5OAV5M0sL\nT2ppWdIByPxU+w7jlcqjXr5Up98H8rTFYNbAEyg+1sLiB5xFsg4TYTyeBFRd\nGae10UsoF3bLJF2egLW9lC/004LBOD7cZMaZuBdd/kwYdieOom1FoSliMpe3\n34lAT26pIYKfh+y9A9c/fzMbByxzRqVKnzMjtVHy3LAF3cHLyyWFjsiTrEiR\nLl7Tm5OV+HqjGOgd01D8KxgwRfExBAUdEMcCt9xJYg7Qsk570X1qD6f22pLB\nMY2zBtJ/oeIRPcStSzDAivNLSKsEqhWtzqAFGHiGIAFpwzdFsSxQIYz/+OYB\nVJ7JFbCQhbEHsDPP3yZ6MSRsTnWJSrIZ9i/G+OrslodUCS1zJO1QBN+xFiaR\nII2wdiiyAdnrYtXKjIyhcB4g49P7B9Qx+Um/GOzfz/w2fUnuPiFopUGoJeMY\nBobfdvkOYihkuR9o4owNVOsEMA/6kzRh3cNloIL4JPy24N+TN5Ao+wWci/8j\nQ0lW\r\n=MSXG\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"fc7a5c94d345c5fcd76d4957427c551ed759a1f2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.e59906a57.0_1588347697817_0.527315192681767","host":"s3://npm-registry-packages"}},"7.0.0-canary.c02712b59.0":{"name":"@material/density","version":"7.0.0-canary.c02712b59.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.c02712b59.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"659acf5377c350b008791bf19668dac994a08796","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.c02712b59.0.tgz","fileCount":9,"integrity":"sha512-2Br8BVHpUvg8yipQucd8Tldwh9wOqRpK0mcdLIXpjWwCpe6fAEG+ezaJFLbjy2IBIy5cYwGjXilWOWvwf6p+ig==","signatures":[{"sig":"MEYCIQCI2cWZ25jP1VLfPoWNXCK30HgMmQjCMt+/0cWB1EE3MAIhAO5BCAdKSm9guvF4lngPSW4kHbI5ijHQbyE+zWs7ZqKV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerGmACRA9TVsSAnZWagAA3qUP/0220OtYrMIfjTpZyzf3\nrxCFwR9x+BUeScfpU5R1pJeyqGXSfjtOx5mcQWjNFfAmx1uzIOEyQiSBlSbF\nTkn+FHobhS+OEBAClIOJQBLxoY/qs5WusJFUlakOt9/R2WV6Ip+JThxjpRMC\nSqxOmA3lj9DKpVU8yMUWM7WnFzlVkHpAApdwnagX0IXyNG21zdMOOKpkni1F\nUBRR5TNWHX6BEiWHMov2HAhwLD2E3F7gDutnrtwN2vSpdJl8tBvwOdl4h3dG\nXER2T6cnufO+fbN6kdE66ve090sX2+7Xev1I1Nld3gbvBtSFvBbD0UUtY53L\nsGWKz8CleIcaAKk88LIgtyc9wVIjcispkbpDhwLSVXHkdfNMlN3nnaankCcj\nKKGUvojwX+0KpSEq5i+GSXX+lRTnHeKUajTeQCFt1k8qxWOqQEEV8Rtqx8c8\nK+XJao7Br62DHxzJ+QBv/uovYAnlBeCkAPTWLr2eyjz7i2i/5wco/pP4m32p\nIlbvYcejQD/04CJqn/3NRbSsiEQVGhz5y/ByAqjLpVRDq/qSaI1ALkJcXvD7\n7xdcfvGUEBb4Qc89TsSNxP6yuHiNr5T6qBX3NHgi6Ax8kphq1/WMTq/q/pfr\nHVv3azdXsfZIxDk+2tVKB4OWw6P0lS+cFIpyUlWsT9LtNQ5kg+Q9PD3pzFts\nDTvM\r\n=lwod\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"ed5da0cff8ae5197cbaf84af0bc924c207d3998f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.c02712b59.0_1588357504164_0.9566368878733433","host":"s3://npm-registry-packages"}},"7.0.0-canary.15d65448e.0":{"name":"@material/density","version":"7.0.0-canary.15d65448e.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.15d65448e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0d0f77c748eea9a8c0de943f369f3b2d1d90ce9c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.15d65448e.0.tgz","fileCount":9,"integrity":"sha512-Rs5WYZw01z//VoTgnaNTQ2LoB9nw7oxuelmTaIgU6DNLJIsCpHSM0DoZ3/5rPFxgAbNeksztiQxjiHW6OFJdKg==","signatures":[{"sig":"MEQCIHWAsEeq59l9T2Njr5icBjkr3pjzLwRzblassANpGSVLAiA7EZNCZCp0PhVdmXqHQjKn2XneU2kYBf8RBWjdEI+DTA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerHbMCRA9TVsSAnZWagAAIhQQAJqqechrKQWpezDLP5EQ\nTJuoxyBPk4nDLt6supEQD1wnrVGlR07rkV1D/iRgdIU629lMQgWrAtSHKvuG\n0ZJ6C2jQtxERdWUB7GXM60XWEEcBfS7B+xwCXHVg5wGwUeX3Q3aj3ITBVQEK\n5KOqzY7i4YdlIHyVt5xrrrN6xyr5qCxh3x3WwLysRe13gKr7dxGPnL6dF1eu\n0sEf73DhM+/pDqCjZR1hws70V2WsXUO1aBj+VWDNoOqJSnRMEwDnxp8GX6Gh\naBQxl4SNzYCIAXlP0MEFp/la7aIU8D3QpYgUU04BPdzqPzRBdq+1QDNMDSPA\nXrArBEiAdB4VDiKkefvSabWYgaae/f6nK5Cx93z2ZgKvvSRcSLa+N1iRA7Da\njMLK9fvuAn3xz9+XN/apza3zYKHOXAJCY8L4AfJI2UXl1r84REruHsMfKhMG\nizKlUrpq4TN+u0fd4jGo5p+NI94TnAl2w6vzMbpFkPHmrMqoq7UUKqFy7VdV\nItJ9y3p7fj+nyBD43RErg5E7kpvEjbnLslhSyCS9wJYsSaRclFN/Z35GeqGt\nByXPjx9nzHKMT8WKoiMfthJo6ONwinaI+iGjP0/mZtiSOmcdWdBV5Aus/mg8\n2du0cxhxXGshUTjUC3ElckXEuuQLzkbp5wVO7JP8bHN5zlCssM6QlvR3gknH\niVM4\r\n=adRU\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"b2e16d6a45e857fdec3838c3c09ee0a1c61d1858","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.15d65448e.0_1588360908541_0.20158702676000528","host":"s3://npm-registry-packages"}},"7.0.0-canary.142b1549e.0":{"name":"@material/density","version":"7.0.0-canary.142b1549e.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.142b1549e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"837775d77eb34bcc48df785a51c224a23a2b7d61","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.142b1549e.0.tgz","fileCount":9,"integrity":"sha512-z7N/Wcbn5DzdJZzlmYdziGJuM0rPBj+3sLe5f//rC5xu6A5cGs4xsYoH1kfF+QCqT34dGyEDywfmb14c31eQkw==","signatures":[{"sig":"MEYCIQDeWjJdm4GziUV7suuIuSzlzQK5JAmdhZWRduDw0hLNQgIhAM2hmA6IW1+pN4R0dGaSIowAjErMx9xF2AwieEbOYaOp","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerKQeCRA9TVsSAnZWagAAyf0QAJO13U08Y/WKfQiMZb63\nwTVTTB42fQkLUgSFy11vW/TqK0ijfl2sSkSWNJBA2VVjzceOyV9f/0ro0WUB\nASr3Mtjm9qhqrCIJZVNdNkKjEO1q9Ya9dDPVZKJHOp9dLahVZ7FsfKsMSfWe\nNTZAd6Hnbupbu8bVBIR1QZXbgsAOpnX8w3nAQ63QjAtsBYim/L82yhWncrp5\nEGSMqFs1J9SCj37bx65kjW3ok1Og8Abhp1uaqBDA8kBUUaVSYvdARuHKScuc\nVJetKl4+vNkWXwRb6yrXijsiUrujfuL3mYJ7snIKIqp0raHJkP6dFuDaQ4UJ\nZ4f6M17VTsTYSCa97SN1OjpUguYPP6KPmrbSwCfaTcZzKtuBnmNiWfrPlHv2\nngjqLqehSwxdAo1DD84ghl4AfXdvXghK5lsHmjX1p/cmzoZWDPZoRehOKb/w\nr7tpMIjAkq1Tnle9Gq9XLpzXfYbBEfTkdYyi5W6INw3d4dn47AYaRk2dbs6e\na5XFnQ/iD1sM9aFtKB/Jgz+FDRbvv0f7vIUAet6VdP1QHM1QqCjskNogzUML\n5yfL0EGGA1nkQlE1g7CFiA+bCBujaD3angt+1vu3s6hvVVojLuBLyIwSEucB\n5yYrQUkjls5GFLT0z+k11mcQfofxusgdzyMMriunw7oQym52XhzKEkgv+QLJ\nyKmr\r\n=hxwE\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"c43c6e2e74a4352aad7225952aeb9e7154d35751","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.142b1549e.0_1588372509753_0.7367170626897204","host":"s3://npm-registry-packages"}},"7.0.0-canary.524b7b812.0":{"name":"@material/density","version":"7.0.0-canary.524b7b812.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.524b7b812.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2c9d5d743aba3806db15782c2129f106866731a0","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.524b7b812.0.tgz","fileCount":9,"integrity":"sha512-ZHtOGQ4YxdK/DlDTEWIGxGjj/977zzM6/ajDttcqbfNOzfO6SupOHlhDsYW5A/lkvkOKyhXEPyXP+i6g4O15TA==","signatures":[{"sig":"MEUCIDJGtCCkPcx808PD331j6wXfQODRDgay6BuMRmNJYSSiAiEAnwa9DV+KVU/Mlauzw+lPicV7fNSUcqSotXETqJEXFmw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12763,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJery3BCRA9TVsSAnZWagAAuSwP/0U6CrFOWnzjvD6qkqHh\nFUDHW2cUFRuuBaIsLg/DQGy76N5R77tbj7FqglxFk3zDUwSbL2TN5jIOoM1d\n7t9be7ifaZb3TKb11ethi0/gaxHTNcQpiPRaA9LSFgvL4nflFktY+4g65ccY\naTCOoc9P1pp9w+kpFJqE3IxAVEDJ5JPol0eODtbdlI6TymQKSYzEFBxx2I6G\n4M7CWtad3aixvs+Yv7bFRwheNu9wyuUeYsOPQmNPVDqtW/4WhtP6DgAiGjcd\nxzpZxyVVQKlyVsqaKp6U18kYqp9yf7O/wrGr7X8iPc52G/ZVTlOLWCu05dCe\nhBVkKmH1+Y+Gtc/AW63tvNvs3XrX+XLFfnhZaf45MNzkg8eA+QAdqPOQXfoa\n8YU4FKoxKK0AIlOjETF1be+kB/Bvd6H6wyvX0Kc7fd91k0iFTOuKMFYCQ2US\nL8yh748i+2CREBXtORoZoByQvH3dbOTFlWI6BisNuyKuLOXF0pP1JtuytUEl\nSRn4+Kd5KCfnFVoi378t6fTGwZIFTaQ6hZOXI3kE7hZOSvotUtcMPiQPQv7N\nPgqFDkRPH3qW4BeQqwTurdz8k2qJ3O0Ji1exjn8c5+vAtI0cCy1IUNGGYpi7\n0tldw54eVjsZ63FLnTFKtQVVJnPieTtHHWTaNhBNlEN8VpKvWAQNkXnbOeXs\nY/3Z\r\n=8cyY\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"82ab8bbdd2373b285c315177e7054a727b38f4a4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.524b7b812.0_1588538816652_0.7206620096894512","host":"s3://npm-registry-packages"}},"7.0.0-canary.bd8ca9678.0":{"name":"@material/density","version":"7.0.0-canary.bd8ca9678.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.bd8ca9678.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"372f53afca49c47d8d5b889114f17cdf7394c333","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.bd8ca9678.0.tgz","fileCount":9,"integrity":"sha512-k0TY+bNltRB2xOLCU3ccBLZoR24caVwsOWv3sLSniq6yo1+wFdC6BnQtDstjjulwWNtGjtu5rsXrkyKiF54WIQ==","signatures":[{"sig":"MEUCIAmc+Qdb7ahhT9Y8c1FSrRDmd4emrxodmGXxmFZ5T3qjAiEAu/YVUyAfvYl7hWseb9kZ9YHwLiXPvzeRdOnF4MUJ2lU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12763,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesE5aCRA9TVsSAnZWagAAIYYP/A65cPU8LDcus2Yi+jl3\nUbqjspzJvtXnlraqzOp5ZYM8pB2/2xn7w36ibK9ST5qacM60oUI9TckzeQ0X\nKX16lNu5S+3Sc7GBE6Z6Zggt1ZrdtZzFqn7/hcYlfqCM+nbSfwtWPS7MAHud\n+q1TqmCZrBvlk9k9Iddsy9i0BEklYfDmwBBSmdbcUBImt/SVXFyec1C4N+1/\nWdjQUKFETnEzmj76sxj0UgwV0TjbeBmeDNiRzEXCVvevjvRbOYPCFv7Afrxl\njiYU52p55/SC6m12pniDnsal+qkcZuc7zlU58lVCvX1Rtkd+LWvGqbKloJhF\nvnaJwhvGiRIvXcCa2Snw7qufh7lp4YcIWjckZO0TlUCFJEhY7iOhWMGwDH73\nJfQEFmVoU0DqXKrUi7b7pBLrNbgzmfivtydjU3p+LRlAZFEdw9lcyYqRcpxa\n9lTq9Jk5TUgBuTvha5VUPyZPbw+IM5Pfit1Db5t9yWdpne0ccD+HiLsXVwhd\nMcWaN5mGBfq8iPWQCGkHyWu9lB1x1TyVBioojQOd4cnKHPNNs711UoQhe+8y\nko3uYzXRK7sHabn3ssotgOyw1OtlHYIbXdzbWqCbEydshMqhrYTkYEubKgRD\n+XfBm1jU0MiuClIEwtu1YhQttrGm96gcSomNY75A8z/hJ7jXd2yUHirEjLUn\nALkz\r\n=CcXW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"d21e98ae16f9c893bf27272d187617574615c417","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.bd8ca9678.0_1588612698288_0.3548152320421425","host":"s3://npm-registry-packages"}},"7.0.0-canary.2553e86fe.0":{"name":"@material/density","version":"7.0.0-canary.2553e86fe.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.2553e86fe.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"88377a2425f6a55887a3572b5fdc8ed00b29b882","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.2553e86fe.0.tgz","fileCount":9,"integrity":"sha512-CuoqysLVtOvzASYCJSBxOQVn6qBOAw05sks66IA7pQuvKvPkdPiZU34dY3zr4hqmR7nie5CjGWZwT4gJt2G2sA==","signatures":[{"sig":"MEUCIHIoKsBKVQieuYBpaWJiQ7je8J0U1jnJAMwWVpX/NOSTAiEAxgCYU0NSMpQhls+XYPyUv+5v1+6fuZQdKBVz/l/3cgQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12763,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesFEoCRA9TVsSAnZWagAA6NIP/26dzCnd6y/jpIxrMcyT\njesJ/Tp3LHAkfdS+mbRHNDu9YNliLx1i/hnePgMvCxDV+oyTlK02ZEUwQi7d\nBNNm+avNPIssBPTrO0bvbRsk60aOTKiS5jTS68jt7rQX2b5yLtp01lGO4VtM\nU6RcpbDyf1tnXAlrcjP+78ta7t7KzQrpLT1srPcgArxIFc6GfysUuj7K/igs\nzKYrawk1/zH9SLYAXusXFWescHq0ptXoHBtsz+yNn1Vqkt/+vylirGuCA/Qc\n67zuekC492BPniCIa1TjErvrjnDpIb4FL05hXJRe+Kfu3UopCWl5xb95KbW6\naw91XwNCmSrlQxFxjNh/xdMbim/EeqHwsfox3WxbGDHoaZjHLGLN0JEF+TqZ\nxD6ugzhdt2twTtl1gX9UxiCnemRdWjxWLBeFoDG8ASFuxBFE86F9tMsHIyS7\nYcMX2l2BA/NvKNAlL0pmekN64xTJjNGLkNUuKZYYxVNJSw0QFCsL9TkicnPi\nM7NKKANcb2KSTWrTHBBgMw7IK/Z3Hc8bHbMt4eiKag1xi8tHwpEPj5Kaiyng\nHnE5cSSDC8dW4QIYlZQGQRsQ01NV2+uuKa11PjYJK4z2R4KswAI3E2oMpzeb\ntP1HE2tHVI6LPt6EUwTaVRevIb0JxYE325Li77EIejNi4Uz3YOpPLdUQwvy2\n6jJN\r\n=NX6c\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"9fa3a214bf3d70eb6522a1f75e622d936e7c0273","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.2553e86fe.0_1588613415937_0.1733241759366293","host":"s3://npm-registry-packages"}},"7.0.0-canary.03dec929e.0":{"name":"@material/density","version":"7.0.0-canary.03dec929e.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.03dec929e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4b0ca36731cb5342fab9992222d9a89c1d23eb01","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.03dec929e.0.tgz","fileCount":9,"integrity":"sha512-H8r6MgxVB21cijEJz0fLH6IvwNfbN0FZcJKqpzTuDwjPuEMtSdZvx27+aBWDs8x3qvBljKjWlQe8rVS/JlQ1YA==","signatures":[{"sig":"MEYCIQCUzwopRKm4b/inwS0kndWLJHAZh/LwAa0vgsBfD+yIDAIhANpJk50GDvXIS8PFFL7/Hv8PAQWHh0axB4oP8kFSbWlj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12763,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesKYdCRA9TVsSAnZWagAASncP/Rh9xAMhqrp31N0BflZi\nmsaWeuFy1iNpsYVsZ19OvRAQujLhFPNG3bOxiCfv6sFw4f1T/tfZtMuaMPWx\nlMcO1FIdp2mw/Vp5BCa0O353z30XNWDudlQ7BPnbI95jp7qjVKv9OQxnEpQA\nlXqXhWM++FoZ2NHBHhcaOUYtd7HIgt53Xs3U8mlzwfDpPEZ0LTMHpi5ruOLq\nn0qLsGGdoEwwu79Dt6mKSvBaR+TwivfvOPJes5GEr0O5BIiAA2vEwoFBipix\n9lvnT+d8eUuFAw51Kd+jrOzU1bThii9oxl6dromJnh6WT4H4RcTixXZnnr2x\nj70ed6xt9i4MNP5saJpLet6ylTMopYf/2o1F1uxgEVw2vAeZyiP9pum6iZWm\n7ld+RXa1tzzGuV56BNmat5XwbS2enN4Iq/3NqJ48zJXC8NpNMMMvhJCiJtRV\nlxAyB+0/xVOAmom3RrSXuwhn0i+mjaA0jh1c+f5cq0WYV0kRuJPSWx3qPp1C\ndbYE7ejOlk6D3ydgYMC8AkgRgTi3N4vqK8OcswFcmmxZWGCUFa98r1XnMGAa\nNvfvq4XJ//mEB0xElKZsBHyRAAwCNJKtnEgER++7HJDtIt3FrarepX8xHkUm\nwEg6mJnADfWUiO8NyYYDYmF/X4WF+De2aXfLYmYPmZtRBoVLiEI3qYvZHj9w\nlzzk\r\n=awoa\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"976244ee82fa3e080e074d9aa9a254e6428c90f4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.03dec929e.0_1588635164954_0.839937863094026","host":"s3://npm-registry-packages"}},"7.0.0-canary.d92d8c93e.0":{"name":"@material/density","version":"7.0.0-canary.d92d8c93e.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.d92d8c93e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a7a3b0a4fdb4ce92487611a18af4bf51b8f7b09f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.d92d8c93e.0.tgz","fileCount":9,"integrity":"sha512-yUZw5NSTp7Aj/6Qu5bqLmX23X1QWBfShAoKIwFFZMpLkgWQPy2+p+o9JqaPXN9U824/sDFDP9nofR5VosaNyVg==","signatures":[{"sig":"MEUCIBYfyahguMlYFpvcoaIBwxHkQluJlOzaq9KPnXluHD04AiEAiviQyXCv5a3tqAoPLrqre2FIHLUdn3Q5FljkynDKT34=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12763,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesZsgCRA9TVsSAnZWagAA9u8QAJvxuFJlxuHFI/23XBiL\nGb6tvqcbI9tlAo6Cn+tWc8ZzXUu5t2/TjrtzhDWQo+yUf2UxoqTI4I7ZNlH8\nTxFjXCC0BF2TWeTTqKf+DPayBliUsJVUTesP/Zku2KBrkYVUs22Q4O5AE9fJ\nQX3efLJdj6CLh1VFkNYB/OInXn/avDybemJxFLENOvk8OwpYPWaa4agCX22v\n1pRF3ZTzbPE45pKTfXhPhqnCxtIQyW6XdcRsRW1vyNNa9Rpqv8j6EwV8Vu6s\n4IA9aGRXYCX4RVz6gDIe5LQAN9AOGt/MSBM2vbV3r61Kqe+Ts9BoTgprltVf\n6TY7J6Tyon7S2cghs6DZ7fLLjVo/qaedRb6HUrVHi8ucDLR9skheyqw7aWvH\n6xiddWz5M2skRjVKUUHJ7mknA0+Z48a1/2O6vDUIecXI3LV9bowaI42B7OJw\nX21UN0wRNamszW7XcJINQ2LsW/FoofZdIJJ0a6kbE/LQbD6oDWcMEgFBD5aa\nsxaY0tQVEwqNYI97abpMyft9eSGtffAzdm1o4NEF4zqMUeUpIrvuSyPf5u5Z\nOm4HJ2SZP82s4nX+Vz4BPvqWcMtwN6LRaJPDp+iG9R8T7PS+BrQT3qF2IvpL\naAedqlbLyEJlj8s7RsfQTVXVznAxUWq+Y0TIBAnxL3YbIR4ULRWXYw5EHKGy\nEuEk\r\n=027/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"0781b5a0f14ce17201271abfff044630d170700d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.d92d8c93e.0_1588697888138_0.0067670025854740246","host":"s3://npm-registry-packages"}},"7.0.0-canary.09f591967.0":{"name":"@material/density","version":"7.0.0-canary.09f591967.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.09f591967.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"39400fd65e78f8e9d33000bd1d9a460b790adf7c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.09f591967.0.tgz","fileCount":9,"integrity":"sha512-iT2A1IS6y62VLddFli/qsxJwC5ohsZT50+GA96iTmzQ9V4hs/M2NaQ/0DJRLPAk2JOnNGQ0/ZSTo7uyFSaFAtQ==","signatures":[{"sig":"MEUCIEu1ySqlePGp3k+TEunaZTkGLoX98AzqFl+xT4Mf/sUWAiEAi2n9YrNpJm+Va+2OwyMA+Z6/RLObIH/C64jzHIg+QoQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12763,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesdSiCRA9TVsSAnZWagAARDYP/ibryhQ6hJ+oshImjxm2\nfTF6o/ic87OP3D5m8xvgKdFm8+AaE26WwxAfcBMzZnBhyt57IVcgBtEuM8JH\nDCnHML/MWTipaZCDC/Q/JAFy9pJ9tftW98vzLpzPAYKjsPqGougorj9Tg9qP\nIZ8k6a7fUCaxwC/YCthBN1VIbN2+880pCA15FNngmy2bm9QbpKeuxh5bmQ9g\nIVAblJKkoxvqeRGP/lipCSpMO/uA/PS7j+ZQLHEPK31fi7/rF4gIp2FfaiKk\nFNJY+Jtb76rVMtNZ01DZPVa40BwL6Kph+NyaN1LBnzIJj21HlHqHShOQYOlj\n7fv6bitGSL+tsk/DqQlaAWg/dHEobZAHniA3A7SVhU0nToxlOGEW1GxLLq6M\nM0V50/5xSgDn48g9voO+W2vXfYqWsGjZMlp9lA/BNtH1xlLFOPCm9aMOR3Aa\nUm8XoW31Gz1A8gS2RpvW2urXuhnjzeM2+ZhLr6Lpq9+uZMitH/L0XHvViGBj\nmlYLmeiJLka/+xJwOc6+oBPxOZ8Fk+PfLfZN7Sq0vMDOgGA35fFt7SM02rW3\nSxnKTHKIYPRsKubE+z4Y1xFgzxSPylmB6oElMdfAh/pTaF5BlGvVhf2AFWft\nK06X4p25naIh0bLmC/XSYKiVJHuc6jNdEoR96TpXnBzKvPtKm+p7tZJzalSX\nadnb\r\n=6k2M\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"b1c5f494b8c0fe5f6f9710e50d51e2736a01b227","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.09f591967.0_1588712609511_0.7692044752492997","host":"s3://npm-registry-packages"}},"7.0.0-canary.3846ce311.0":{"name":"@material/density","version":"7.0.0-canary.3846ce311.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.3846ce311.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3082677c2dd980f780e53b7d3c8d86a95b02c6cf","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.3846ce311.0.tgz","fileCount":9,"integrity":"sha512-HdF3bPcuSCnFFclGYBJmCeFNbYqggStbJCxDsZ3OcYz6aAb2PQet/1Ul5ZEoR1anQ9PfF2Jj+fqSNPHFRwcfOg==","signatures":[{"sig":"MEYCIQDEgNlFKoHdfsRRBPyQYHuWoVVfKeHAVJyn6sMgzk6FHgIhAOXh3rJr4HxBA6Hpy2F1XmnUT2rv6LkmTKs7w+6CMbKa","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12763,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJessTqCRA9TVsSAnZWagAADbMQAJK4DqaAA1sh5SKxK/Ht\n6hvVnjZMV8vnglskPQFz33TVY65RaS4rokTN0e1cQ2ve3gfWAEty1kKbFzoh\nHtmkORzDUwrCIAqxitspYEfZXE9CW2WOtiBFTnACODzgX/6PJMvyx+u/CIOO\nA4+OgqSErRbk1Wa34P3HxKVxBHYYn7Yy13M0UtJWxIJ1liCv/Qskx1i3JboN\n+ye69ZvoOoXevj/+t9Uo47ALTvnGsDHzB2odZSYoXj7DjbL/brydofw2RKdZ\nHA8ZlfUwFpcBOu8TrZm5+dnfGLN215dDK0nISRGLZMCKbNurWpeNap+2O2We\n6PNQnqtoOzxJux0vb3GZYX3JeCXEEe0wP0jb/Ca1J7BBclbn+tmmbb7VxPvb\n+I0ygvB3KvN+avNPrMZv5/b6pYKlbr/RDTuxqSbNPPIgL8Zs348VOTW9yETw\n71F2D6m1rLkAJKhsrdIqI1yVc8npq0pGsWJkoK+cBT9c5+1zAMTE06XWQIHW\nRb8qupHD78vzMBX+V3SL8Je81vbdSME0GDD1E7Mgbt0mR1imSAGN5u96Mpve\nVFglmFeuUJ9ucLww1OdRgkq/K6ZBbC94LQj2nQrT8hoq3EaNtGx5vQXWqy31\ngYH7onFD0Ne2qf2/wbA9T8r82A75CpEeaH/qNzdpDZmW1FP9Eyj8xBX4U0yS\n2+zn\r\n=1Q6W\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"80b3806d13f75bd5b77443c9e504fd6468a5820b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.3846ce311.0_1588774122339_0.23115558880878484","host":"s3://npm-registry-packages"}},"7.0.0-canary.ed7f32463.0":{"name":"@material/density","version":"7.0.0-canary.ed7f32463.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.ed7f32463.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ca20c64600c6031e071f5ea6d603fcbb969428b5","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.ed7f32463.0.tgz","fileCount":9,"integrity":"sha512-atogya/fqmIeYpC+xrM62q7Yal4pnbYVrc8ydBPkfwNc4sKDiyRJgYoZD7qhkziMLLrFNVKY61JRTJJVD8NDBA==","signatures":[{"sig":"MEUCIQDixlGBv2TzLlnV+6PjEuZdCm1bT1htAIqgiw6RssEXSAIgLEIcJV2RDTtB752/HCFty+CTaPC7azu1CQDLq9klnt8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12763,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesuByCRA9TVsSAnZWagAArWcQAI/TvVUIQXVMY76/wRyp\nSrBkwBCo7DmcS+iGpgu/ERJekJ7zolxv/sDcVwt9Yr4kmymlMbgWzjjlK9aH\nB4LYao32TGpIzVAauecJxyHx6Pu5Vx6z+VnQr5A/ag6qePDbzz5Q0qsYzUoH\naeLsRuTqshF4KZRf1z5PIza5nD8UlWa2NfxTSq2W8XB3wEoPvTrLQTqcEUDf\nCdflifyvGPWkK8uHjNfg3KwlsrsIoS9T/BEiPCKFqUi2wN7ZhZzmI8MUiHhK\n22stzo6AlDWB/JKWohZwOmq+nHDrh/CZQIr1HxzgUl/TxOb/QK3FDeIJz4rD\nwIPwN4945zqVMurmr50qPGc15Pu2mtcW9AyvpfysjyqtP/BtSwwL8haIIDeI\n0hvrgmUgdU617qbjtFzA6QkBGc2WevHrthBrPd2MKdtf07Iiix4yGf8EIaKK\nhhV0i46IoCLPJfLSoLNzVf0Z3fy9e46GJecJgPg/QJhqlrOeiJJSggAAUox9\nB0hwMmoXqFb0s/LuYASem04j5WHZS8N+WxgDr7cVs0HaADz9NtbddqZNy6KB\nLqd9ImJ+uzsqczVr1n7agt7t+IEgRXyHjRU/OAuTAdxrkQFpv67VLyZ2GCFp\n+BRSnR0sebu0gDbLGn7oAxyWAdqZKX6VcMvWgDaQ8HDOignRzJXDRLFzXO0D\npMIN\r\n=Epr3\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"84dc461d7b4d6f61ef286fa2ade4f3d05018af62","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.ed7f32463.0_1588781169391_0.34216136744386927","host":"s3://npm-registry-packages"}},"7.0.0-canary.8135cc085.0":{"name":"@material/density","version":"7.0.0-canary.8135cc085.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.8135cc085.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"efeef5b5e4e34e02c0915f9337aebdbee1e261f9","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.8135cc085.0.tgz","fileCount":9,"integrity":"sha512-DfZLv8pOqky68pihbdfaClsQp5Y5Ez6ZGdWApU9gmIL1tTywzM9F6dE1kkKghCpCTRqW/1ihdCOXbNHWctRFwQ==","signatures":[{"sig":"MEUCIGYNaq3sFI40GgUcpfFUB0GG72MMp1UPTDC3jWXVrIaqAiEA27K5EuNTUhsJezh8cuY6JcLWHAe1NebDDBEhX8qyfMw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12763,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesxXxCRA9TVsSAnZWagAAHXsP/26kq6b8qRT3MrsVjVr3\nfMPSjeeP76RbWzYxqDV2Kt34Q45RMASufA9g7oja40jRAn6bOiaHbS4ScEqH\nu6JIjqdcO0QIKW3lQNIJampK2lES7OdAQ9dQzRJV+mPMGc2gAK8OuE4u76nw\nfbPDoUp4lISDw6KVG4i4OSKHzbL+qmVB+sWc7wtGuImkCLaS50dKTAI6hwYB\ncKE1Tu40F7Qgnu2kVUU7frbpUYm17KVTyWOUX97NB2hoBAaziTAouKsZVsW+\n/PAwRe9aZ0Fw4Sm8nlzoE4LeRRGu2qD/Gwl5p+Hd4rD8iC6SUs71laOPEe52\nV/3sYslStwyfc3ob6IaFP0INkdlVkMRXUzw3O5GxwYmwEp64oYi3SuW7I6LV\nxT+qGKyHkSBywEMcRuMcynxu4VFVhDMo0C91hD8/wfNYBKzSWfBlVktOaMJv\nGqj8/eufw4FFx22YTqD8Lqn/orpCv+0s+SUzkoZZ/dpljju0IAe3cFk1QZP3\nMA4hTG88vyxCDflLRsRnyjDKtAnAxzDOJd/DD8J7qWn26g5ETRYTobZNBeLa\ndU6bNIHk98NXIqidnWIQ5tVA3tjw/UCU+V1dtFOIloE1ZUp2+raOME7IsFsw\nFtzymJPw1x7IaQ5tGKo3HkHcR2xRFBR1wFnBTnGHDjSyW0hhOxSQ/cjoVB/b\n8hQi\r\n=VeoQ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"56422959574aba25d1461d4e7ebd168437ebf9a5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.8135cc085.0_1588794864738_0.9394477977852829","host":"s3://npm-registry-packages"}},"7.0.0-canary.deb212de4.0":{"name":"@material/density","version":"7.0.0-canary.deb212de4.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.deb212de4.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3af0cf6b0926e908906d551b494ed32c1fc57f08","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.deb212de4.0.tgz","fileCount":9,"integrity":"sha512-H2N/a+bJSVl+FGXVB7wvJwF5+7bMQV8s5u0PvXtgh43ieY8bZS5J9vklMR8sn7vITAPcJJXECfH2ehOWSmcOeg==","signatures":[{"sig":"MEUCIQDJ+bFyhA/EeQREXItWBAvF38/+e6bHBuShtTLRznbijAIgWV4+EUl5svmboeZdYCe/3A/zAuDkAP/8li4nva31sKw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12763,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeszeWCRA9TVsSAnZWagAAFmoP/1HLh09DSwb7r7MKPa4S\nzxCO8xoCEHlqdY3F12fTE0/tpiTfoY5QrovW3Apu821AlfMn332+xW+A8qWD\nf+79glOXJUnZSZln3DjaakZP6BmKZtsy8xnYaby/tvv9ISyEnQk3vE6dNea3\nB7yM9d1KnpQwiYq6a8hOK8Fj5VdP7j0sUVLWBj2PkJ/ui8gpaR/XHWc1pAjL\nIOD/e27yJ9IHENTxdST/oycoaxgLDVgxIA2E7vHHJe8+iN3d+CLU5FhCEXXA\nbHXXRIZDJrIeRfJ59be7sOdWKtFNLt/NKl5fXcoRJca+KEIVQUPxeytknp/G\n457e0ABqeMN4QH62koUs5OHa1sT5nzs05h/JcTa+y1vreZHgduLhqT0hmiPQ\nAC+8W+K4Y25qKkby8TC72fFJuGclziA3UwuRy/M6YsLzBSOb9z656Zp/nwVv\nDDAdC6necFuuMOZBWyUSkC30VdQ3Nhlo2jVHHmwkULfT65ov+aeta52tgPd6\n4WN40FSt/IF0T6v2j4hdFhDY6N41sJDMFoRkg6o45Ox5xTLbA0kITiVL+ZRU\nxHJBtf27KvL3UoWM72rGQ5jw4Bx3hEzpv7EbgPToQGxfsjdoKeYM2NGfXSPO\n7DRDhNHEjqdAgayWLuBto8vlSGQF2lud7uMKzhwI536uyg2guJ3VO0i2DU2d\nsX2K\r\n=NiXX\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"fe9c146f82589e5f1c471dbb4986ed6b3a7caf54","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.deb212de4.0_1588803478136_0.5884129281142936","host":"s3://npm-registry-packages"}},"7.0.0-canary.f83e00898.0":{"name":"@material/density","version":"7.0.0-canary.f83e00898.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.f83e00898.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"99550aceb51802f7b8b8de3939a85be394a8d916","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.f83e00898.0.tgz","fileCount":9,"integrity":"sha512-+W/yLB9kIsfQZlIzCW/JohoLNNqePXM1tC0UaApjuVhUHQ6qtLukZSeMDGLachPtaqZx7nLfYymzIHexREIl3g==","signatures":[{"sig":"MEUCIH4UIG/mN6gnXhKW068nc5ZCxQ84J/eA73P2T6AFWL15AiEAs+m4RYCjISg5q+P7GBoMVdfMyQwsI2euKGUozmvt0y0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12763,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetDvuCRA9TVsSAnZWagAAl8kP/1uUu5bgh8FxmcjZucMV\nYy0fy1XWIIq1Xq5TaY2Xcg4r4QpICMa6X276ssK2SQQkOVP7LT4ocFvZRaI8\nsffvc3XgbOzGVeUyCR1yQeEei/+4cebt4D8Ax3eLZrpzCExmy65FROcptg3f\n+UoUFzoA9sm2mVKsaBn1OqXa3HReRCACoWBBswGMvQzm5xc4u2JI8BvzBWCF\nPlBdRwU4TIAJd0/A+unHGBce7wroqaOuwZWBhWbU4Cx3ycR70E/VrPhwRkoq\nz7BVCHPtMMEKOocyINw7/24h3m+ltvaJHJoVLAstk1dZevvxc+YT06tWoL11\nBqNOZYKuwtJ9RVe6XmoRYlVYrSHe/zARq8FUQBD1rWBfyo1h5ibY4pDmapCj\n79W0Mw53m3HGQe/JKXmT1vQIUtiOEnjOX5s+RmiMgcSlv7oYSLZ1aK/aTJDZ\n6FMkEr/QPH41b0VLWYfqwgbRMSJhBmaEfRagKalxDvUvTal5IW0OzJ8QTbz+\ndoBH22+DuhH75cRuxU9jnrGXxhKnQ3nV2P6IrnmwppuC4wH/ryKDKfHbvWY0\nxRVZs40d4dxxUAPjrs1jEQuVaVpyjOGwRG6GktVs38HdYVOcWcB6nKe88rsZ\nU0KVE+4A7Eb5ERlEPS6ij+NK3XMENlLK+hWF/jZ4MhxEm2PS1b7UajrAZvq0\nyKcE\r\n=CaPm\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"02060afc2f5dcb762e9083970f865f1c714a38f3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.f83e00898.0_1588870126043_0.9176416606716382","host":"s3://npm-registry-packages"}},"7.0.0-canary.047e6b337.0":{"name":"@material/density","version":"7.0.0-canary.047e6b337.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.047e6b337.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"224aabb85dc743a08ec58a2063b927d3710c8d28","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.047e6b337.0.tgz","fileCount":9,"integrity":"sha512-xY24O3h/iOxaoy489g6h0kQ1Aoi1IXG8EmDOLZujFiiORmL/hPe8Gc6lzZREyweX2DdymxUBXFYtg2qM/vo0jA==","signatures":[{"sig":"MEYCIQDEszTBlHA5moE0wQHJX6PLZZvp9D39lrIFhstid4b92gIhALuo89G1+dIXOdjNOwYLay/OeN+JsIKk9AVx+2NUsTDm","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12763,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetab3CRA9TVsSAnZWagAABDMP+gJO5zauM7QRN+X3yVZ6\nmbSuuIZ2yyE9hIjPt7h/ZCdkUcnipyG7kTP2LF848F1PkDknzGDE0oPMHwr2\n41I9fNmwVsY9yhldjmj3ZMUZBfi1KwU/rZYM9XLps+EXrnUOC0QSDaWe7s2T\n+yuJcZmO+GWPWmSoSbcOHJB9yLK6HW7k0m/K3iSuQoBFFDRxSK47HBV6EudY\nQO2VKoHzUtRCFrtjXwwKauaEUAgSGCMjiMtpvR+YVgHaIBzsPVvGnkP6mCl3\nWU0nB/P2BO9mxpyCuZ8IMZ+gHICIF8KSjPk9UsQJ5ffH+xUP0C3HCWfwJmWF\nZS3Azzqad8yBLXsA5sxiKlFljOU0mDnXtecCX2lYqXPskn6+xiRvyFCIBvQt\nff92mjCMzz1sbBnvFJYdckUaI13e0AJgl+P5eryihoDwvPna1c5T7WjuYBz+\ndKHfMpppYjUz6XFUNTyuSlUqymrUNVutIYO249nmdRsBAO7lPZa8rKryU2jh\nzHG5BIr7keKHe8dmS/THKi2Af6nPCCC+iMvQ6yMf7p+IIHG+WIsg+EIvsaPi\nmzNrx4aORZQOIVjndbAJpOP5ICUNKQpNwWmw4/8GGs123Cn5VP15BSTPTThh\n0iedGFElVFC3w3ESPHiqMdT320fFeICxjZ0xg/+qIOLhNTOFk61nU92x2UhR\nrdXO\r\n=p8m6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"2be3b5993e14d0bddf55fdb157837e5593ca217a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.047e6b337.0_1588963062736_0.7622730319600051","host":"s3://npm-registry-packages"}},"7.0.0-canary.119e21426.0":{"name":"@material/density","version":"7.0.0-canary.119e21426.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.119e21426.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6f9dc2887c0395ed58c48f610cc5739f8972d976","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.119e21426.0.tgz","fileCount":9,"integrity":"sha512-lNfgCmoy28ATzqJuafJBNphjs+S8KJoi1ALwmvQiry6onJ9gATGrhrfSGSJDra5ESc7erT3Ok6RAUvhprZZjpQ==","signatures":[{"sig":"MEYCIQDL+vmWTYYYvr1LtwmVr/LMrRVHWdUoVc/Bc+FintvtJgIhAJ4V5+Nih9cQRhlVnZGSMGB+bo9q2DI0Jy6ssIPw1yVY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12763,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetb9TCRA9TVsSAnZWagAALDsP/0o5UosJ0BclJwyqd1C+\nwivAAG6Av/0I+u/2dK1SHcBm/GEJUlqzjYkEZWdLMPQRfQh3GrK7gpHyQgqE\nkNLyZdUSRx4T+g3Tfy05iQdzx0aRe77bDyqffzxUFx7iBQWPQkKx+pm5j4S7\nD3Upv2k1RSxssp/PwKl6t0eeKvRbho5VAZLFtzhC9GjT2w7B+xgXYT6ts5RG\nDGcR2k2Cc5y7GGl2kDXdt2vBiW5sFoRIx2ITdpiDqXFKBYFvWUHpP+MbKL9c\nHR/weMP1MRVELV1VF3ljA3S13IsNvB6iJEChUg90nOQucVurzd97c1N31v4A\nreJmM+5ilv90bpx5Y6lXH0JNwHY+HpeWXfr8JVRkw9JFVLhceqXifcqjwGt5\nGPXKauHCp+xWZYOdIyM4HZnqZ9BCKgh9Zkec1p+r7oFNqttk0RRQBrx1s6rj\n+hsnodGp0KG2vUPRC4JWqVluVtB1W91ELBazZMYzrWvwMahJ+jX0QapueWh9\nomBxZzEgai/vY+r1ToXuxz9VkgBxNZ2nTb2e1+1SqBBlBkBvbjWf2yCMOw93\nE84KYTIbC0xeR1MsF+h97U6L/tYks822GLar6oLcDyNMUA73fMf9lsZyFpnT\nzVvzSAxDOkNfMWFUylk/gL0J+MVKOuBCFlAvKXdTbmcckMpLraLXckinFu4y\nv6Mx\r\n=E6Zl\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"693ba4159b1a25af6955ffb1ce0555d7a989aba9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.119e21426.0_1588969299054_0.9605902447688974","host":"s3://npm-registry-packages"}},"7.0.0-canary.2f052d824.0":{"name":"@material/density","version":"7.0.0-canary.2f052d824.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.2f052d824.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3dd99bb8683c9dff5bdfff8b27cde286242cf589","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.2f052d824.0.tgz","fileCount":9,"integrity":"sha512-D16aoeZ+PBHxYN5bJzW872SDm83vNWQMgMSr6m65y8Wjc1cTM9WZQVPCG3ci9i1qCGmkh4a0J+G/QjnlF4R0Ow==","signatures":[{"sig":"MEUCIC+hrrIulV4sQ1vLiNiVK7Ki6xAmmwhG1JZLWu1DBVgoAiEAhf6QI9X0PoO9CukvIjRwbhIYoivE5m9liVNYGHnCvdE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12763,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetcnPCRA9TVsSAnZWagAAYGAQAJB44buGUBzL3CVJWonY\nCJ2C3NabmPAGvz0GbvJVckzqb2pWrJaRoHHoU7Vhe5yNdPGtF/tdhZeugHC7\nswKnpLZrB324dK8+pjvuYuat0/DMog2+RsVkbKeLJpfatqODD1ZIndLH76/9\nc2k0bi/tm6iEziTarsTEUEcgQoz/UJMVQ4z2/gXNCUG4UCX8fVP4cGr3UOWP\nRlNF7CnuIxbCH6kLA9Zl3NznWpzhTQQ+UANebER/4S88U6D4FkYaErGqx19y\nCotM9qcTxWsvrL0T4t9NjmDN6NTPi9pihEjYXeJPqe1OksGXqkQLRthCPwlx\nP6LB3BXAZX30PZf7sJUpVqiOwdEQQvEBLJcDhrtKVx6uVEEVEwvPpax/fWcA\nmMaaQge/xCV0lDXHv0F2PRLPmP4MNwds8SCve8C1SZlSmGZHNQ/P1ZHodwOM\nc3z5V+XmB+5sYgLjwtmf4WTFJsYM8PlrOrSUjvSBgDkdVcqNI+WmKlI5hvJe\n6Gu2pjQ1G0xoBQ2DpNAr104O+hZqwpu6E47h+KUca0f+57ACecgS1NQiNiY/\nkw8aqGxwAxRF96GN9O9fDuH4kTyRz3uV24FYGaOI+v/14XbV9D2KnHp9G+f4\nSZL3dfW4Y3ik42VIVJtra6pVgrwSFwEIaADBScYQIqzrjMVaeXktJNUPx1ay\nwsuZ\r\n=JLhs\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"e3bfb78e98db35607ba75f333490d9693f14e844","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.2f052d824.0_1588971983032_0.33229055590776446","host":"s3://npm-registry-packages"}},"7.0.0-canary.e84444387.0":{"name":"@material/density","version":"7.0.0-canary.e84444387.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.e84444387.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"35af691490864199354806c7c0f6e4e17cd700bf","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.e84444387.0.tgz","fileCount":9,"integrity":"sha512-miQ+ysLNEPHFEDHqHkcg9yUl1YXzCD8sxqv/8e/9xORsxS37fuAcD0aZkEKLXaij/3JlZiOaq/EPNqRVhyY0aA==","signatures":[{"sig":"MEQCIA1S6HLED99D0zzhQqHFDyO5uNrCiNXDuVrvDE4uYbtdAiBssPZVuBczNkTdF5sZVQCrEjymzQe5o2ocF3qz96+3aQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12763,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetc+KCRA9TVsSAnZWagAA/8AP+gLh/bc3A79VvFsqIBxn\njOh5Zo2VFldw13HQrW0mjxDZ9JZBnREbYpkSdXd0xcaIV+KiSjmSGgVyq5S1\niEP80JxrpK7+GZgqPayoriK2vAKgM1p0kLQXw86dCVprtQIE1Zq+ab4BqNr1\nsomcoman2qs7RKCFpE0Pzax5KAYxS6Atk1+rZQTbtdt1SvwnC2Bi4vEKllj2\npNMDlBAg7w05DoEmebUv6SNECHyVqRtrIGIicJ+Xw2MWRbk9/irdMYpLTgJM\n33AnbVVHEFdxT32/TDMG783ZD6mNO9PE9u1LZFQKHGRtzQ9vZRLoJEvcXX+n\nk2UaAjIU8R7UB4woqtGHDFkL23dH0ahPLwS+D/Wu6WZp1sXDjVOSkKRjBPiD\n0g4Lj7wc71fa5dqKx6+o0c2P0iv86CaBdt30hApq0iGJ4GQnT0vADRKmqzgA\nzZ8CXuwLMmcNqZuctSpW05950c4qUOgcprFKEA/1aT52sIiOQ+3yOG4S18wz\nAzPYRcuO5XcGsHS6pZ8d3zeWbMuxhhEkRSnffnRCmiRQrcSaWZD3A317Jh1N\nBnzz+TuHYAP8tHYRsb4jZ9W6AZyH6zaQUJeOHbTEINi8U42aS2sTWxz6NbEb\nMaWvPObyLlnR4FKoutACQ+PF1QiFb0hSHzuXt4WO4TkNtBcGKXzifUOcLawM\nX60g\r\n=Z+Zs\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"35f59683bcff8d7b2e79ea4f582488d0d86b0b97","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.e84444387.0_1588973450505_0.6633612570167304","host":"s3://npm-registry-packages"}},"7.0.0-canary.893eb1876.0":{"name":"@material/density","version":"7.0.0-canary.893eb1876.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.893eb1876.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"939b49852c94c0ee37192765834493bc885572ce","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.893eb1876.0.tgz","fileCount":9,"integrity":"sha512-/XzXY9j47FXomQoAsolsrAv01OxtzyZLFRdcG83HzKFwg+4lp04Pobya8NNusm1QFq0WOEkEFGpS7X1QenKJmw==","signatures":[{"sig":"MEYCIQDUiRsEaEw40Xo6Q3rkh99d3FPmWDXy42kd28fLPAqM4gIhANC7YEm8Zcz0TlMSoOPGNbqXNYl0t+DbevQzhX6qk6WB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12763,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuV09CRA9TVsSAnZWagAAZYAP/j3VI8jeocMnDvYIELyR\norIHXM6t3VweembuvYgHYXXvCrS6fDzKLtL62iD1QGX0xmHMRSg2dZPX/Pko\nb+opRibX7Oyv9M5DKCqyoBEiz+IGoT80werv8nEFnEzok4taF/iVy97pBizq\nGsPGwy9Osmt3uHc7zQAc7touBGTrrdCIRnEwdWtXqYGs1cP5nxpt/mTx3hIr\nmMY/b2AvhCM3oQtalri+rY37zkblUAM3GzsX4cwJddOmhW2+mCdAdaV5NoQN\nFCh3KWeo1qLo2seTUQ4p27OmJ84vPEIMY2cGVs6gZb716TYuR+T5ZtnNNGf2\nOHehPUZPp7+Yf8jiTdaMxIKllYqBQ5inFQ3zBza/2nGwZcVdBTWrTCkqUUBV\nBVI1ewxFjoMhtXMe6BalYa9Vg0kGCAuD3+vurVOxFmfhjoKYjXUbxG+ck3tO\ntrSkmyL6DdSi4jyKSV9cLNdwMidBGQTKHn7eBXO4PsaPmkivlYe/Ukm6IFBR\nRGCD826848bOCS7N/iiRU3oa2mmfCoE/nLdHVJYP7QtLmwN86Y4mYl7BQjGv\nz0gybd9Gv362oHd1PnkVE5/lLf3MA17JlEV6Eis8UtKj3WHrIH70OSJUKReJ\n3zHpRflCij6dAhTOa0jK8mY04wkbm84u5mrQKv+BLcThOq09MZWSrcLBFsOG\nFSN3\r\n=61VS\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"4bf9fb733753ef4cba5683a95a2f2a71a743a68e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.893eb1876.0_1589206332947_0.3388158415586071","host":"s3://npm-registry-packages"}},"7.0.0-canary.a5aeb3001.0":{"name":"@material/density","version":"7.0.0-canary.a5aeb3001.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.a5aeb3001.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dcbdc5949aef620d316b2c2837bd29ddab3fb93c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.a5aeb3001.0.tgz","fileCount":9,"integrity":"sha512-K3es8cCPDOMx/ZXdmAVVo7lMid1gl9DvX16WhDQh2YCYypvapWfeJ3MPY339uWgNHN9bMCbzwK0DBM/oyBfo0A==","signatures":[{"sig":"MEQCIDV7O1x1rTM9FR4TIjs567dpeHA3fsH3SEE3lEBX5m84AiBs/QzTuSIP9NoMhgFcka/X8aFZxtNfogXqrCKPMdzpPg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12763,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuWDtCRA9TVsSAnZWagAAAvQP/3HpER4n85NqhQgnptt2\nEaR6SDGPJZIDiUBXlcAd9hv0tLnVjbQ43x7YJ8KrtT/toedOaSG/5sv4PMqY\nlk9ksNOUxhyhk1bAvdMzaYsXxR0TFgXDdXJztV+4V/Sd/ayd10MPqEOQk3q5\n/7rbymhQsUIx/IokvHom8HxHGYFKeqmKAjidpmuc+ETnInZ0GR0UdNq6a/em\n8PWiBQ5f4zYYNrLVQDRVlNNtrVqY/te/6k6ddlHHtpycx/we9sPVbV5ctAP1\nr42dy3LOwOxO1z4j5/CRpYPaGTTehv6JSTrGbSoHvivUlvzjlLbE0JatnXrZ\nEQ4MVe/dhR2CGuE4GDOs1fL+keug/HXsB3W0SzFkB3+7vROkNFgewKGVTOkx\nZWZhzZLi7p7bHK2JNrNCeYmygoqnWqXHM+U8t0+uclzPgzHG1qryQNQNF+sH\nY/cORjOzpAJwONeuBFF0RtrbrE5Ce8g4KiIi0O9adgY/rb7U5aiEEi9dA6ph\nt9hL1nVeIJbKOb7FGlYGCtqmdsTnXnRQhlEAIzPMGTSbiT9DfyaDHVLT5WqO\nPeoH/E/XhfcWrZiXfWCbSlF2Pcc8RxaS40NZPgsB5zsp/DjMEPZhSL4ldVLY\nwgLId1i4ccTSmNf5KWiQSYJu9JrM40Tt3YeKTWmrRJphemypC7jwiF0L8DGG\na7Mv\r\n=nomh\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"01ce640dffe32b7838dec108ffb4d0c40d3e7bc1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.a5aeb3001.0_1589207276825_0.20341311097640924","host":"s3://npm-registry-packages"}},"7.0.0-canary.610c68d97.0":{"name":"@material/density","version":"7.0.0-canary.610c68d97.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.610c68d97.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fa4afa49722f124be4c835e5eeca5f053f7c3cd2","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.610c68d97.0.tgz","fileCount":9,"integrity":"sha512-KqKV+uSFaTnWrayRDo0Q2LxlkeofeIfb8CHuWiPg6837jzJBA230/uX4vBpQYj0tM7C4S8QtEoayZLSTqDiTNw==","signatures":[{"sig":"MEUCIDV3k9hiJQD42Hnp3pqyzCCN7gTZmJucCV5u8Dtx0qwnAiEAv6Fmy3Os4Kb8sK/VChbyFaOg7aTQVmkR5v5Hjbrsfxw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12763,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuagcCRA9TVsSAnZWagAAE8oP/Am0jFxA/zgzruCZANex\n9ryOXFa7guPOWaYZ8J4qhbh8jFkDaAOIGUhqtjt8zKprDIggug21dWuyTQr7\nNXpj6kFkA7RStMRx26/kedIy7yQ4i0isYPywsyoYr1wcTROEV6VX+PN565yU\nK4iiA8eV0zJw8/i/wlpoP8k5ZtoWKfuG1V/sdKSJo3+LdjIr7IASaRhsnTo3\njTruiczXWclBRmP0qLdAYmA56yBiDeX63u7/lAv1LjLG/KLUrrC7vzpQ2QgL\nJxwMjYW8qM4vmmGTMXOTZ8vS5h92IFLTDM17Bd9lwI/BT9jSXMzTFkpzwK+k\n8hTHUaLs4Ag1E2Z6Jaw+dH2Bh2Qxnw1YmuhmdmR03UXeJpgfP0yhlV5YAsfr\nK6oXQO4vktQKrHSo4nn+ceqM3cxHxCUFpk0vNUMYkyIxY5TXfWw5xeSB6L98\n4o2qknanaTCWfhuZMAQRG7Jca6eil/ep5cxQGGFMGta1mT2x4EfzJmrAFWHb\nMZTNpBJCVBVYhsbEIhPmUfmGl50VBRBxPgD32sAyMFZm7rHf56d+p679HlTd\n/hq7YyuyGerUDGTO99QJORZmh95/dBRdjrFmNqMecZJBpBMVRafPgLR/pE0Y\nloLpio0jyxMaifhTh+/+l+buBYvplFzQ7TMxwRdsFEJMf8RHhC19tbiDOupF\nmLBS\r\n=BTU5\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"ac4b0339093446110cc551732ef34ba30b4f4a49","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.610c68d97.0_1589225499742_0.09301827842343147","host":"s3://npm-registry-packages"}},"7.0.0-canary.ed52af767.0":{"name":"@material/density","version":"7.0.0-canary.ed52af767.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.ed52af767.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"48226876b889d4547b1bf274907df01913abde8b","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.ed52af767.0.tgz","fileCount":9,"integrity":"sha512-PeozamgRsPghOLb4KblkdeEqeL8xxN7goHfFzzPa5A+hJdZP5fjnKC3kGOVMQqG6qRZsDkjxp0BUAgBgEKv5FA==","signatures":[{"sig":"MEQCICFIS2UD45E91BeYweuUg/0/XCbNcTt5bAKJqsH1zyJwAiBb0er79VBUTACFhfdrUuRob8tLO0vLbL4LwS59V2aDgw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12763,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeubT0CRA9TVsSAnZWagAAMLoP/imYN8sgMDEcqbSYftnT\ndYau7pF+WoXh8CmF+ERPZBQJPisKsD+ttxLSfMfm0i8611r7XTkGmdPyE0XR\n6wVg3jQHx8fcJpIgDiQSYjwvaMB0X6bOY0MxUme7p+6LBk4k1TdYF99piph3\n81W7nGS5dGqtqK6BNpX8XCjbpR/GKzJ/RWFxH+KZppXU+nneNOelcumpVW5U\ndqCbR40BFLfNO7L9imEv1W11PaSnOiSEI5yBV0RvLm8aNwmRXCfx+qzo7a7/\n0a5eWN3BIpvXOs3J/yANk/5WDBPrzt22xEdr/GrtaYBgwpuBefxPqIQcxl08\nMnpYYd9AW/uuxtRruPXuRz5cHlDy44mF3kMUOfKpXcyZiBQbkNvUHPqtnJTf\nv9xy57AfsmOr73XB9U/i9zHJiqhdcbUSm45yL70IgorV16zdSkCHICwWODUR\n3ETqqgEyPBbM+MAHesPisLd0huiEdgt6Ai+LSlLBj2D40IlEl+BTx+8hUGmB\nEM+MYf8EZsWLgwHzw7oS5RVm4fyqYk5oDhYoXTBPmyH4sQOcEEaTEaDrvt+K\nrdB/b3w859VaAd3DEeO5xzlpDBJCB4mOMA88+jtj0tg50RlGxuZvNauX8CjJ\nfKQjJ47omAna8JZhhgx138lPJbiPY291N03MFj4ElYmnVX7bXoZd6szqbyzV\nEJe/\r\n=NNml\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"06b24ff740d1a29e8764ec98f735b6fef77dc5dc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.ed52af767.0_1589228785774_0.41368114388049304","host":"s3://npm-registry-packages"}},"7.0.0-canary.058cfd23c.0":{"name":"@material/density","version":"7.0.0-canary.058cfd23c.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.058cfd23c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"166738ac1a81e54b4d546456935ac9db5c465f26","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.058cfd23c.0.tgz","fileCount":9,"integrity":"sha512-oaMpVaYqdgfCreaGI2JwoPtV6eAmIIAfZ8kGqtfwsKMdDw18u3mlCYeYNGu9eSZuIQrszMm7DcI7mpZfOgu+iw==","signatures":[{"sig":"MEQCIBf04EqZjj88AxZfgPbDC/VhQB3Wdy5QhDyfAhkEIWzWAiAb2gHvBvWYtb7N+qnn5YIRh2u8IqCSQtyrzALUecKkpA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12763,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeucKJCRA9TVsSAnZWagAAfo0P/1hj8YjXvp+2jqMhJLIV\ndgj9oSeYXimM5+9PsJiF4LboA24S8jxddXoM3LdrQr5OFuTAc+TAnTQLtGdc\nG9IUfJcAncA8J9jVjCpfyLcAesli2VUcg9SrJtuZQzGYzoyJdPHJMz73FgwZ\n0z+VhqV8yHUlxPeXaozzqzfH2RS1Ltlu9QN5LsyF5osWSMjcXtBgeZwrHL+H\nmq/IHf+r5gBpyOCY1wOBld8EJSFzyd21wOO61L9FFdjxwj1k+r1kwpsRfIP3\nhwrP5F76RrvHWqkzxcg4oM/eDfqcYUIlj1mNTT2aiub0xmhdbcYxpQCyd8nt\nKqrBbB2yEWF1zRMI2aBc/VXVb1IyNroRGBZa5RHuqMly42vLFuW9woS5/Gwx\nzbR6dBrflgJ+A6QB4E57TH7c55r/ouogEvajyKuMVCtUF62cVVJFXyYpY5WV\nMa1KEYW1tsPYLkjvj3cWytIrkgFrAT1F8PpPPXn1s/gt0zGsoWhlQOY5ivVd\n0oNDI1AFGpKCheL+x7DlNZ9ak3VSh/lvgBBgwtjAjaGCcSsvgyid+RzEiTQ0\nL4+8xLI38DH7nibyApgzVe1i7oG8bgTywbRJk32uJkba02SDKoC5HMzkPj9x\nEhyXtbh/7/bpwKckAnI6nOp1hpm375wCIGHsYE55WR9amz6ICy/lTmHVSDib\nc8R2\r\n=Esh+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"e012af26b00c720a751210639bef8379d1085234","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.058cfd23c.0_1589232264626_0.9655672846447838","host":"s3://npm-registry-packages"}},"7.0.0-canary.0a371b4fe.0":{"name":"@material/density","version":"7.0.0-canary.0a371b4fe.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.0a371b4fe.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3826bfb6d77c822c885d1113cf7b4aee7b3a828a","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.0a371b4fe.0.tgz","fileCount":9,"integrity":"sha512-dwCToceVGWEuEsy5nvCQZ6gHGD+P5VVi0GbR6vIZhzgk3qWusISc+2HHz2QgTqsNtNHNgkT6twUyrTn0jvrbjg==","signatures":[{"sig":"MEUCIQCaOE3SQ7h/GhsttQzxyRm3Vi8l1H8EpXIVve4qB3hggwIgGNEzwG27DGiHv9F7ngqrArSvAW+OomKjlOIzVADfsdY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12956,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuy58CRA9TVsSAnZWagAAnzsQAJXUcfL6N4WnlCmPiy3/\n9nU/Z2iXLmiYr+7BngWYKpHQ03J9EgDMxjhyYakoaCw0LvB7njDiOZug85h4\nrKm4o+0bxLdRlMjTOCZnKXdRPS1YicHOfnXU4mAP8Tt312QTodexA1v3YRzp\nUByTGo60e/h8YXyg85o1xDLZY2yQdGtY+5bJpPh56kQQBcrKGIm9ca+ogquo\nbtI09cne54rvNYSioW6qgDSDEyve3EIqIHBX5JCFxFc2phfJYcxfxydkdC/S\ngFMs1VBpALDWyGeuZsTiTpYKQ+Verh3KXxLUXLliB8GpPxjoqahvonLGS5Lf\ni31OcU+Kp0yJE7t967uOgfe7Lr2i/8CEsP+gF9C3Sk9oS70WTSFH3T7jRmJv\nNqUVtmti2YjDxcZRAjVc1naBCoR3OzKPPA0wtAlbIjNu83eRikjf5k/BnaF+\nbDEA6PcV5c8q1wzGm8sJfw8dg7LroLEphV6BG/xsVpZPs/KAaaLbkzEoX84p\n7uESDQn8LrtYPpt7q7zGVNDltT+AA926VlFrrfC/lWxnQ7X0dDZh6b+vIzEe\nOSJENDG3+e42YOw+JLE4p2E43FIev+0xTxsoV8P77sAPJWI9teGmD3QxzN9d\nerOjs1HrMUsCbe09tc9udqOeCEKsSQ05/CjVeJfAJcFDZ4Rz0ALLr2rgxZpS\n51SI\r\n=hyUv\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"c3c5efa159a3a5dd1da72a8e4e94015fb7984f7b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.0a371b4fe.0_1589325436289_0.6796988398488939","host":"s3://npm-registry-packages"}},"7.0.0-canary.2139200b3.0":{"name":"@material/density","version":"7.0.0-canary.2139200b3.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.2139200b3.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f4af96f8e623c7e715a5e567c71ede3e9dd4f594","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.2139200b3.0.tgz","fileCount":9,"integrity":"sha512-Wn55awqKXNo/qMyKjok9Z4Qyq84bh3vlYk5SVezA3JA6f0p83EosruN+W7LNfqXHjVkHD5smRhk4va+gJ2oQOw==","signatures":[{"sig":"MEUCIQCjKdhOD968ratx2x22V5nCjwmdyunb9Ce2Vb7/fGF7pgIgAr4C1wxo7+MWxRwan/JpY6X4qedkP8TVEP8rzubLp5Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12956,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevAhFCRA9TVsSAnZWagAA4JoQAI/3vioZhYAvjdH04MLy\nXzuDtbsJeAswtjFJOzmqUuMNuHUAygqVdfFxDJdn4ii975IYI3JyDicd6jNs\nv2nmEedPq+xkw9GgwNGiw0fF7cafuYzvEJsfesfDhme/PVhyya6IdyLuOwyE\nBKmAsGC7mGNXXOwfMao7mNZcUPZ7LrgeevrjMFNTAB3yY9tQ6o/k63PJcViy\nVAt5FXrsiTS1wn0JiWHT0rO66/0tt7cAh+/oPnzNKJO8J1lf/aF1NYx144RB\nVagIYSe8MddDZ/E1vged59uaauYs64F4LInrDK+uu2oKNeW43vB1ftj4ksm2\nqfWuCaVMR77UCvXHhzqCStegWgatEULheMTY0vJi1dEm4O5JNMGOM1Y0d/pI\n5xvjkNpOpyWhJMSukHjXxZoW8Y+U9rZXb45q6BpalJXKA66CA83fuJrHM+ni\ncgY3F/dJVyyHmXtQMOtIIn/FX8p/nzW76WC6UWkcVEJIjCBUiXrX8VcQpApA\nre9ELxg8DQdsyWU6zmmIetD+rpraeF3iu15iehclHOt03P6i18N2TOgGT/FI\n6DpbkfNzbKAheBgJqF/uMJ2YO2NdhoGd0eyVqnscTkLujAH/PTflUYsBIgEq\nnd9pkn8AW2x8n4CwWzcL3eZ+GMKGggjgohkj/iMklqNf/28DWXu9Rq7DWXNq\n+u0x\r\n=yQXx\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"42c214d2b2b544f76002d71be276eb747a69d9d6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.2139200b3.0_1589381188863_0.6825396416895282","host":"s3://npm-registry-packages"}},"7.0.0-canary.744d751a0.0":{"name":"@material/density","version":"7.0.0-canary.744d751a0.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.744d751a0.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c304642afb54dd0d4eec85d0f506a1086ed8dbc9","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.744d751a0.0.tgz","fileCount":9,"integrity":"sha512-jXgYXkiThQxksaqdC9gW20DRKhSJPNJhRXn/JZ9D23Uo9rbB9tpujg9XQCKalCayP9ibz7eQG/vxKP2tiVvriw==","signatures":[{"sig":"MEUCIFBSg9nz7Dzh1Hl9UaL/LSnL1JEhChSzrPhNEloMhZ/rAiEAtADQWQgp6F/A7QPRsz/FwEqnb/by269BuGnY3ZHzM8I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12956,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevMwaCRA9TVsSAnZWagAA5EYP/1h57su7etOTCM2xVwA2\nkldJyNtXA9gmhhmNnToFWnlfrXhhud2zdPj8m+lQnOGoT41VFEFU8WvscpN3\nlMAoCiOua18tVD7tIeEtWdkd7slNrKOK01gm/yi3BjG590ft9nS6DFbobX4R\nzHDT41uV76uyF2S7izUArhVt1zjpCFVY4y+C4BO46ucqqusOXfxjXptlw1ei\nCZHAXuJc5l3DLEXTBh4dRD8Fr8c1yLv6JbaJd+RQ9ouRC/PkhumrVB2BpB6c\ntCjyN93g3gTHVrigVCf0WZzo8vXJx5VHNoJbCf8Tq4u146evzAutxkGlGfDW\n4BZKFnGEm2R+9xbUIKMmWnlE9o6q5F44VK5ZrbXBztPnuJsYj1L1DG1GQPg3\n3sreMerJ4yFEfwqqkXS/gOGNd9kfXvIuJqia+BoaPQnB2VlJrZbaM9XNr5uU\nmp3STJA/mapuXVyINrICYMAqcVcCRTwY/63GnqPd5Qz/1y0qQVlnv+l1rjaj\ncK5ip13vjOM3NX1EGZiAJEF0hBoMAHcw5uV+PqHq4mJXlrLkY8JZc/8wglAM\n/vxQBekPq7I8nhR4v1bWVbUFBpBAbXQ+eqB0X8rnbj9gwhQOuJSDqBbLq2KH\nGaGLf3OsM3VRzyQTKGGPWVjzeO3ks9wBI3MK7pN8RQW2FE50R0bDJP6oFd2V\nRoyD\r\n=bB6a\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"afc5bacf5330bcdbe874e652a8d6df5e4a35e7c8","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.744d751a0.0_1589431321784_0.7738201745018454","host":"s3://npm-registry-packages"}},"7.0.0-canary.ad0c0c103.0":{"name":"@material/density","version":"7.0.0-canary.ad0c0c103.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.ad0c0c103.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f18fb58535b5bf17c91040c7ba1ae638807a782d","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.ad0c0c103.0.tgz","fileCount":9,"integrity":"sha512-XG6K0JXb/hBBGib+U+JVLx25Fawo+TUdAvQXubCIgrsN8ljrjrbFIUfp5YNcrzYZAZCIJk6Z1LvQypUe34mjzg==","signatures":[{"sig":"MEUCIQCN+qMxCqT483AkDbJLDHwKpjMC3t+1dUG1SaAIIi5ppgIgUU+IRPzap8Ej7QcVqnceZ55Tik5cUSTyHJO8H0soPbc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12956,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevVq/CRA9TVsSAnZWagAA1/cP/R0PVVXYhX5u2Jb2uJbn\nP7bvjE7o8HASALq1KOlAp/RTXW7gaY5QZoxg+qBWYwCc8cNCogABxAQy5yBM\nt2XaiPiNd/PTOAcE/RMAtQR+kURrItDye2AlxwfqxC9hpUjhIglKM7/sW4me\nNXUH0X49e6OGzY06Wmk4rP4WHEScO/QirCS4+JmN1/daw+riUdM8K8KViNy2\nCnHGwwMfcaTw+0a6Aavg21ysochNnm40rZQMQck+iFGwzWq/9pmuIluWQakk\n6oDTbKZBDuNgw6SzxaUQkuoyUl9Lau/6xObxm68Px/uL6d4bVHN6sNsKUduD\n+YbahHVztkbnPyqDe3l2hETjfVBSlz2JDjSXGGURuCqa188DTB4o+Wn0AZL7\nzF3+/b4vFhgRozf5tb+gRK/0umjZVMoHbYIgWa+Zu9CDviOjkgIg62FE49hS\nc6sxck2FNdK93jgSpQ8wUvFR7LPP3dMQ/h5efwcCSK7k3Ql5l0Tq/6nBpRyR\naOeDmh85subTEHLeFPVpggwaDAGLmKAlHxaE56gfYzPuHLTJ5ECpF2GXdddN\nIrULy45cedUe8MlD5VkYSDrUU9SHo86ZaiiP0XrJTi3CGGCH6JB+mDiKur56\n6iQwKniCJzpp3jKQPbvKqmib0MYi7ff0+DfJ0eSRL2+Igq927GJVyxUdxhLD\nKKEi\r\n=Ejq7\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"76a0fe161f579d30f0d739918fe09f5f4eef04c0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.ad0c0c103.0_1589467838969_0.24143425440312205","host":"s3://npm-registry-packages"}},"7.0.0-canary.fd8f8f2b7.0":{"name":"@material/density","version":"7.0.0-canary.fd8f8f2b7.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.fd8f8f2b7.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f503275cd82c6d656da401f303808634a5a7e393","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.fd8f8f2b7.0.tgz","fileCount":9,"integrity":"sha512-oU4O+2dV5fr7EVwPg6B3xJDGKdab3XbgiZBBEAaSOt45iUaiKZu74A1ayoXjEpVCMWsQ3hGMp7nmuESS0KhgdA==","signatures":[{"sig":"MEUCIQCqbtBDio2/kChQ0pbzfLtzfKSCIDgB/cYgJbj/rq2m0QIgHqY0JXXtZIVXWsAF/27LuGfL+psy/lYYCinGwKCa9ms=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12956,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJewst4CRA9TVsSAnZWagAAOFQP/1t+jaWysEacX6fZxtIV\nYHRhLHERlvrBvDLEWYTHgofSF0yrCKXOJQ6cRHstcsoU8IDIcpovAWTNyDlR\nap4STw+k2SIGoEYyOFsYMhQPHzvyqW5Hy+YnMXbA3PHSRT4D0cNh3fUILclr\nI2TavJb+mEjiC3un2uIi+CIZs1bKDA88nsJaujshZavMcr2rupKhrHaReGI6\nHFij1SrCByoYstKJwW4ENWIokdWhDYVw0d2RadnYPvu1CkbJKrnMGMBG1Epu\nDlcH7CudDCz2ELHq1QYwwR06m66HeXBqFJKqzLoFoI0qBbVuA1S1zskK50WX\n0gOiNzHvq1q9cWchNHp1BcrRxepWuxube9tzP93ukqoWSQf12vfRc4R5ZY66\n1XyKhecfueuAsE8485BgOMoDIdI/qKvrOXkRo6oEDmb9OrTm3b7xFvyVEDQm\nbBrKlkqxuOT4f9VenGPfvhXK8HkZueka2EgZbLGyKDuujlZ9umXX9c6tIsQK\nc2F+NHon3OLzTJwDRWHWT89H0fj8lVcM5yBPWNBNANaaWjLUR8YkR67wrRRd\nqWZ8M8aThsqRvJmz3dWmmSG0T+Jy3kagVIH1b+d/jNDhyRpe6mKxaq39WkY8\nh9tIeEajaHreigloAXf+/5c0nNVUI0XNn000RG4ZRs+SnHAS603Ch2Hex6IA\nw2Ho\r\n=80rD\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"30fbf3d1582cc530b978714ab043f92bea7c4b83","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.fd8f8f2b7.0_1589824376002_0.8098728100684605","host":"s3://npm-registry-packages"}},"7.0.0-canary.730920fbb.0":{"name":"@material/density","version":"7.0.0-canary.730920fbb.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.730920fbb.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6c8b8d33c8a1cfe8163644041ae6513b15cd1113","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.730920fbb.0.tgz","fileCount":9,"integrity":"sha512-Yqg1mY710Dn0fvnanQ5IjQEyWYTZtG0qZm5qvZSqzlk/xW1oY0pzAR+A/tsdXHp6XkKhMccaO32BbQ5Hqs2vGA==","signatures":[{"sig":"MEQCIG3BAV4kA3epjgX/RIWkcK+aAnwavRtuKmvVlMM7kUKpAiBZJHEEbiyzYDFPClRfG1z/vFTIfqQBd9KglSxlzgN0Lg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12956,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJewuVTCRA9TVsSAnZWagAAdLYP+QGd0gS/27w7ozJEliWA\n3z3ro2q+rJs1y35oErllXBtc/Lgqe2jkL7QGpfQmZD2Z6tIEB94ZTwNumbHP\nCKD3lOasqCSWJimY7A6j/wTzPitkg9tFiZiwTFRpLij68o2wJid1ZeLuRSIb\nbrAxGzw5fyEsI52A95GAxUwlR1eyj8Glboiw1g7X8bX3tAI9bcZcQ63RQAZ+\nl6SprvieSNnS95RS8JxdCuD524DKro7OvVx59iXOZ+aBGBElKXlr+y+2SBQt\nQvnwaQpJJUlk+d4GbHpj5m640UBZczHgFRc6+X9DkEBM3v6OlgiudWROL/JA\nj29gp64LMil5lZ1f+nYKn+Hz8Nolslk5fSjpX9Wft+podbrWqY7jLXsMN6uP\nUUoyehdiTIyAAR9BHVrZe28T8uxnCd/Ewdd43Fc4q4Z8Iq0PUSjRe2NzDNvA\nK4sXnHWjL6R+LkXtyKobBhPrxa5HPPRZv6D8NtDQrw8S9WBA69+vpUOqKrhs\nZmVybpWRew2hXO3O6EvE3HVLksQn7MK7zYwGTuM/csh72sQxgTZ8WkRyT1ah\nziF41DJl49rtPZmeSb/roIxq6YunGuaaRKbr51xbGmR5LH7MJkyK2Xd6xwHk\n/VjcyH91zruxlyc1gqdEYn+2blTbQcDbeMOtu9iIMw3FiZPJkRNF7WweaGeZ\ne7J7\r\n=ryCk\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"1acee01a3bcc1944050bcc6a38a1846c507db43b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.730920fbb.0_1589830995221_0.5174989297622101","host":"s3://npm-registry-packages"}},"7.0.0-canary.bcdad99bb.0":{"name":"@material/density","version":"7.0.0-canary.bcdad99bb.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.bcdad99bb.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"34723cf4ddd0ff791e5f8a972695fd6e0d222691","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.bcdad99bb.0.tgz","fileCount":9,"integrity":"sha512-w9fMpH8tqCACoNsIbBLE5ej9o07WX7PTyRDMB9SjNQrsqbB/VSSfB+eiHz6oY9plpF2Zf3nJU258ELa48DGqTg==","signatures":[{"sig":"MEUCIEmNrxJB/GXVZ+p1COwcnZXzBu12OTe3RCE0kmLIcd4RAiEA0MfOihOQJt7R0v6xTfSPNnl5IiV4F597PXAMfx5El10=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12956,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJew0+/CRA9TVsSAnZWagAAM0cP/jmiDyef6pm939szZgbJ\nEW2QEUDg5eco+7gs6UQZ0TzAEqZZKe90Tcp6RUiN3MmZxozmUb5qcSzQ/6sq\nWbL1Q+D+8ecNKIbISnK1eJoVpW9Wvxqu1sThqwj533xzAtRwCzso1MghffAd\nWzT59zd8NsBWiHe4ZtxqpO8ozdJh7lrTAKBifVBi5+9kASXE/669/3ZGh5w0\nxzAbPiehaeA0M6aHrfnTH3o65YObxDTeAq20vJZu8ylYLX5Rp6EiQ0+e0LR7\nb9bZjFA+W1uptpnZ7LxD1RqGKmkii4FX5CoSF00DknBLv0KYGRihChCXNN/i\nTn71FfCUKXebS0/dER07NIilrjIDRhnBvEiJM0BzYuPzY33UZ+ahkcNcpgQv\nWUBnDPVUJ5xdCoUH9frwrUfzSJNVOILJlQwEdU27ATbniqhC+PAd/6faOxpB\nMrLwBQ/tI/DDWzopzZ7ZzPnryUWKSTUm39gM+57y9G7sFXVrA35gbM1hB4dD\nY2WArweJl62pYA75SjIHRpdL8upFgPW4tvyIWaeJWp9sEPBS37VU5Cz75C/W\n571/iNXjrT/OlJW23wqUxin7Pfi3Gic/R31/7GeVFXNi/UDZ2xGcqAicdXo3\nIY9Q9n7xQ1kdp30RtBOOjxX04h8q2e7XxsuINWO+EfAdsoqiJt/p7ingaTq4\nJdVO\r\n=W74W\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"33c3545075b4fec07083bb484fdd7245d0b243a2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.bcdad99bb.0_1589858239027_0.4992957191687448","host":"s3://npm-registry-packages"}},"7.0.0-canary.4497b86ed.0":{"name":"@material/density","version":"7.0.0-canary.4497b86ed.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.4497b86ed.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4939c9567b4b305d7ae89cb9cdca17755662c245","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.4497b86ed.0.tgz","fileCount":9,"integrity":"sha512-K77gMv8mjpbONERt3Zpj7zVazD21Od9ZPV7rfHJUigvMVxM38mk6SNoMI7DJ2lQr8UmV/Zvn9xj6CwyOuTOvFg==","signatures":[{"sig":"MEQCICD0ECc/fMQlO18F/v1feTs3nmy6gJ7mSpUyX4ZKiINPAiAcHcAOWGOq+ke86Q0tJ84XHvdSv5ot9hqIkW0urWZKhA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12956,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJew1dtCRA9TVsSAnZWagAAUhsP/j77bbUI4tzaShXF2MM9\nmwMYB7N3DBhCZHtBpmAzBN2irpUj7XgQ+JFI5XocN2hKGVmq+GBxRFxoRUUE\nJbfmryu5N5yKPVr7Rwp+Rbd78Mk8fzRcBDhoQ7Hm2b/sNXxUQ6ChSy/wBjHz\nSe2Z0codwcJHejJOClidBWtyDMfa3RWvKxG7Kdky/K47VvFeXtKhn+53jWAq\nIellKeKMloPahEmEapwTak72/6An00k3+klEB+9wj7PgOmozgtwuLAd80ad8\nmznZjMCeZV3Pyn9D3NoOKiBFeoMCijNKz9ddrDgW/s1K1Yi9OXNrTIY8fa0k\nEJ+MVL1nF/iXSUuq+y0m39N2ghYJyLC9enmAiJOAtzXA570F5p/fbEWE3FaV\nRtV5AixXGasx5gp5Rj+W9IhLjb7QNnqX6qVZZaclnn+CUIlPDLEWv3WBdd+W\n36AjkbAyyAVpxFkVfuRY4WsA/BvMLgMc81t5CERWhVcCiRdN3PcGFoW8SH/m\n/wnn6G38yLbDO/8WpkC77tLgwlXSZpG1Nvo4qM5mKaGSrVG4t40tjosmyJNJ\nugVI6ggekLHU8wyRGXRtTWQq6s9bYuC0BgT3FfgohM6l5Ij/gNDAKnkX0SuB\ndGmuyWrhMkbsu+RuH9X3tcyCdKmaePMEGo3UvoNcS6HM0ZK9inJVNx5/qS//\nFwsR\r\n=iQTY\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"7ffe8b9fd24f52b80e2fa6a7007881da7c29f885","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.4497b86ed.0_1589860205348_0.3070791036655145","host":"s3://npm-registry-packages"}},"7.0.0-canary.2e60575da.0":{"name":"@material/density","version":"7.0.0-canary.2e60575da.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.2e60575da.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"40b9b4e8e942b7fca915b3b3286ceb287ed346e1","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.2e60575da.0.tgz","fileCount":9,"integrity":"sha512-rp+3w1/p39iNynkPhVO+qx1SVDPjm0y217B+4GmZa1AJrEVIRkhlpVfsuEoA65DH03+XUfP/Ut3Zy0If4yl2Tg==","signatures":[{"sig":"MEUCIQCvU3LUr/hkMJGQ/AyZZDZWlAPsuawYGQGI8x5/c8E9gwIgQrR353MGvtwO0LhpyGUqQc+wW30Ooprq92B9N9naAgw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12956,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexAR7CRA9TVsSAnZWagAAKe0P/Rt9ztRgwNZ6+QRMnkcb\nhkV43NqkGsjZWyjIGO1g3vQGjMqrg+/onscDtkGsgeauj5D2aWU+sZobSBHH\nEv7cuJWfkSbiiCyGLbvd655/73hODdrReq3zS5UwGKaHmjxYw+WS7xcv7AU1\n2nD1JPPOUdQUDMjlP7mJvU5gw+tlXLFjUYH4+7vF4wgBFWQN8L/Lkc/f82B2\nJb11ch6Euw1QCn6++6Leb7Jzk0JMAJWqE06AoEB2B8svZCFHq7kQLr9EKRhF\nZrR5UdC0YXtdVFJPr5buNSRMVEtHEk9JpBh4ey73sTyWrypi2xziXLGpVV8Y\nkzggt62+PeN8RFz5gnIsNuyBo0uJfqNiEaCsm1tuoXLxSB+AMN6Go5aSPjTx\nk2Fwdw2vRLl6rkWl3/MGoAGUlPhe45YDBsB0ZErJPNb7pf9orsuI8FpofgXa\nDQtFYYGes+vx+vi1QglSvvmh6sjcrFkNVlFXB4Wj8W2VRs96x+4EooCIjIIx\nQSSLNE52fMNR9B+Z7suIZn0VoS6C0TnBK1GW92GgFOm2f2wTmCz/lA3eLsh3\n2qhzzMoOTflbHKFFoj4fmRjBHi4gWeGCDs4EyzTEzOQcLw3SkfQoIIrOI1g/\nUk2zuyr+RSsi3vvJwfekJKmePLH9nndrCorPebmW9SYS32fp85ODBqZI4PhX\nY1wu\r\n=xeSr\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"a4b6f1d5a01445ae9c14845614630907beaad190","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.2e60575da.0_1589904506625_0.2460247724596778","host":"s3://npm-registry-packages"}},"7.0.0-canary.e3eacefcc.0":{"name":"@material/density","version":"7.0.0-canary.e3eacefcc.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.e3eacefcc.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0691816aa13e688f5c3d369778d7fa889f78635c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.e3eacefcc.0.tgz","fileCount":9,"integrity":"sha512-XnkWQMVB+AK2Ctvd9rV+AIF4iHSGC2uHcB6AC27JQKnxsxjTk+f/p3rMdeP4NsQfEvb3c3T6AEIIROk0Yu6Ohw==","signatures":[{"sig":"MEQCID5Slo2M/UOYwi2kz9N5yffZrL/vVwWh7iZAagH/knUUAiAG6s1MgCnuDb5Uqe7kksKuGiIO6b86IMK4JOW3aa7M6Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12956,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexBlOCRA9TVsSAnZWagAAnUQP/11ytffvPM384WQshh58\nZ0OTnHafc+7ISdzYJ1o4BzydpES/itcRx5RGUFwCqzz7SSubwa44dEoOG1wL\ntWkWJCdToE3t7MyXJk0lH9aM/nBnSU9QBLAHGlfPzIDJc9RFQ1VCe1Fg7mHE\nNTkhtqPzDXSyvjVRu+90Q7c+5OuTEtsr4Rl5xZo1qODCjhXkQ2UEIAnoJhrO\nMJG2oqAniMyYH0sMw/UTavPJxruUkb+Oys0IjGzGurBNuPZJhWzVmG+bzdJZ\nzBKgaJnvw7WKnTY9gj1g3COD6coxj+yPhJWjPPDEPK/TxXToVCwvAadySABr\n70AOFyIKc8OE2Ruzcrd4jIOTAYrTSHcCcsf1PRDXZdI75w2PHL/L/vEUdYd7\nZXm5Zgwj/PROvAi5NoBgyOmMhw0UZM70gj0Vl/+4Fk+8w2OhNJkHtMTv9JSd\nCovXUyYygs3u7Sd7m3g8tyyX9wNEXe9uG8Jp/MSGnKTz5v3g4deNeSFpo0wt\n8Tk1vTMhGCoOGWkhWR8YzJuTn/mXPKWK3+CXTunC+xNeo+J7sb+2nfZH/M7q\n9Vf+89iGI0fa27CO4rUY3BJL5Cv0VSfdzKzAQCboiTRVCOSgHhzzaae4GtU5\nkhDCbpHxltgBT6ebcQlEmmXgzT7WgKihHy0smEbqxeglrT8xo9ePRLAN2NLb\nroZU\r\n=OcJo\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"a80846c07f1b98212ba692bf027c2003093d0180","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.e3eacefcc.0_1589909838411_0.1680874268271335","host":"s3://npm-registry-packages"}},"7.0.0-canary.b065a4d2b.0":{"name":"@material/density","version":"7.0.0-canary.b065a4d2b.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.b065a4d2b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8d9119f48e5af2c6938cc2aa92f60e080528e8fb","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.b065a4d2b.0.tgz","fileCount":9,"integrity":"sha512-NdOdmDxEne5N4+RePPockDtD8CuyJB+5NNKNLqdncCUMus1c9kriPnkzqL5llaOszHz0DuWU4lp/awz65KvCcQ==","signatures":[{"sig":"MEQCIFP6fD7DCO+i4bBrX+cPe/0ioJeiQDcSBbbzsFgxUGKeAiB/cBspZZL/C4foizYRXlUswJxvJq7TIfdO/TikPKPyOg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12956,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexUA+CRA9TVsSAnZWagAAK0YP/38545fYrQanW11u39r8\nHalQABtHjz4F+gncl24+APyXnRp332G7Dx5nwk3NCnDx3owXwayMnWgdQYIH\nU0KJV2gvr90wN0QF75EWCSJN+zbn3AO6SGIVf8NSV7rxrwJQhtu+5Ojz7Nh6\nbZd8Bt7JY8dpPo0Uk759iYbappFnn70xF90+E1ulGhvsn76OvcseCS655Dil\nixE2dkvF/LR/qCP47CXmr+A11KiUyQZ7AtSRRzTnE2frACZh/cL+Uxxuph8v\nkig73Zq5VfG01GtemzgacH6sUyrx2dj5dV6lTOiCA4bvxqMPp8kCD9MPKnKH\nxOOzkcKSIUbmkws6lIYlA7nj1OEz45RrqtjXGofdmgSp81DPjm1H+S85eCcW\nR5lqJJ/irasDnqHycidtcgA9YRfyAWf9envO6yk2HBcUdQLgaFZj2qhXktF2\n4jJMvs3WPTMeg6hoXE9Dueu8Lj4XIDSZOcaNkjiArWK1fyW5TUh1J/2mTVbh\nFJDAgZDK/s1JN3SX73I9M8crj8RjSsoBjt7ilolULZnZgDAvHDxbn/jRLVwc\nzc7AIJIo0hyfp1JfNw2YOKma3XRsgHKTkFqA5LXmutt83RaGcSUuAVILzJkT\nRFX2LqQk8eC1ef1/BvUcuiUlzvOGAzmJJmH18NyIpQjTdzj4M8vR3slGDWGk\nPSRl\r\n=SvMj\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"7de80cb2ccfd67196d7be3fd614cebb9cd73499f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.b065a4d2b.0_1589985341585_0.06879661660850456","host":"s3://npm-registry-packages"}},"7.0.0-canary.4ebce8d78.0":{"name":"@material/density","version":"7.0.0-canary.4ebce8d78.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.4ebce8d78.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"64facb652819e108dff3593260c5a43f1018332d","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.4ebce8d78.0.tgz","fileCount":9,"integrity":"sha512-bJPJz+Nd9hPEbjXWY3xU/srJSE5s6zCHSNiYOMHw7dWWb/3Yu4FjJFdGGSHdIi5PbmRIZQxu1YvhbQfwstCrFw==","signatures":[{"sig":"MEUCIAYqcSNwC2JoWzl5GOad17VrRq3PnEFxAZV8jfw/tGKIAiEA1/CPpX1zc2mp47NA9groRJ0tAk5TPtzDiBM/rybM1Qo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12956,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexZfhCRA9TVsSAnZWagAAVngP/jEd+9tVqpNt8LsDVavz\nc5WzhQjtI3/3Az97FKeALbI7B3AebjSMBzNqPWax4GkZ7T7UxMb2gUbz5CCa\nAUdy57D4SIS70Z+BUBtzCVUEeSK7VRphdK3DBQ+ak91HFCvQ/FB1WW/fRxJr\naLVU7vB5AuSjd+OtQsfk6udR8jNILF/W6rTfLQqGw0cLVAh+aF73KysCT29v\nXRr/L3xXb9jBmHNo8fPz+zkMpYh5y0PTOv25FftfOVD5MMrEUii8DhLLemu7\nL6EM+WaCwz+2pBLxYUL3X9qL9/X9UIIhYvh7DZWpBP/nitFEbXlVBTv2OxFz\nutbkVdMDMeO9SMGeJVJOLIe+4LfvjiFeCqNTVhQODj+PSMWmwyS1UbSOfmep\nLxd2DXqfA8vdoLvEJRj91BQdwt9z4RO1DRxhK3ku7t3M3qnJMjpDgpWmu2nb\nsuhLx8QutJ3zlx1rzLAhNaOst4O5fSEKZqAti6/5DBwgimRJR1cR3yXQnCC2\nze9llrrlZojUOTK/D2GRJwcE73tVJuRiNJLnvXTJcEaEXw88cTgsBvkCeVld\nfVhtM3lHRvd4N0RL17HMSMrl+VsUj5nJF7FxTro9Je7R4bynlWt6umrOOA3y\nljR5Z26a16UOPDky5KMLYJ16adKQQhJutDg7R1+TA6RiZmsF+4+6QWSnFiCk\njLke\r\n=yz7I\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"d7cc6c4aec24377070d4417765fa102dcd7c7e0b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.4ebce8d78.0_1590007777047_0.9445232580131968","host":"s3://npm-registry-packages"}},"7.0.0-canary.b0fdca492.0":{"name":"@material/density","version":"7.0.0-canary.b0fdca492.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.b0fdca492.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8f4d705c6b0e06f11b6e553ac6d7d284943feb0b","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.b0fdca492.0.tgz","fileCount":9,"integrity":"sha512-QHgqMtRGT6mzWUi16MhcC9jM1dgi6d2wFlmLroPvI9Cqz5h7Wblps8e88GGSMH6ocaET2MBHqlWGHXbUpntdGw==","signatures":[{"sig":"MEUCIQCoGyKBeYSd2P7M0VBhF/vX558IdLRKP4KbLxudpkEh2AIgQSsL4zlq9CRbviZs8wX8F6utePFnC9Bn1p8XjW2G9ig=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12956,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexbbpCRA9TVsSAnZWagAAAtoP/1Pb6CsUfvFCi4+SFFcN\n7yzj47ImUv7uMcYQFwSCuNsnI3uX/RaHxKWsBXAwRDM+lVPOnyGaKij+vVUp\n4HMvUV4g7/fATOdeWOuk2SfUOQ0a39s21e/vKpVsioYynNHvVIPZaLyh4GSG\ncDteWYlC9ZUlawkjd6XnRKK8uFr19DQsMBfByND4JIld8Gz04zLAAWMK4dUx\nEzXWOjVLPpgUGjE5Q3GnJRd1j98dbzxyGkmkl+q2IYSyxNSfNdtUk36JnAmD\nLn8GVNct52i+/i75WPhsyGv409O8CUKkwvCeYl7lmO8XZv9nFw6FgV/LE7/Q\nN4iihKH/IOEUBhwyIHQJCDuCqgwA77wWqGm+WUGoNsjKQxy/8+SpBWhx+rzP\nkCrCP6BrCja1eJ9wFJEi8anphOTe5SkuwWcVXUYVwfbMHVyTGEMQ9ld6jrfD\n1t/IREZL69f9aVGJ6LP4fRt0Yo091Q/4NdYEZ1iu+AQXlhB8ljUUzG4qq4ox\nVhku/0O2RRxrIFFsrw/fPxZSuNZcq95T4DfnGmIQfxxdBNfeThcrXEpzPdAb\n+4vB5kjd/FYZ3B9kwIQGeKuz8gQMs1VbX0OWhKLl79tUilTrEYHywtuo2kCk\nePrOdveuDikff6l/KbIT5LCl3UMapNSQIUVjqIfoXjoqVCaFM0fhVEiUFQ05\nY/1f\r\n=kR/s\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"590e5f052548986555dab713a1bcd253b6dcd01a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.b0fdca492.0_1590015721287_0.131837117651183","host":"s3://npm-registry-packages"}},"7.0.0-canary.c67667e8e.0":{"name":"@material/density","version":"7.0.0-canary.c67667e8e.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.c67667e8e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"92d6781a0941297675858da5e4beed5f7ee1b8b5","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.c67667e8e.0.tgz","fileCount":9,"integrity":"sha512-A+YrJ18Vqd14YifsAj6KCsKIZEYNk7cc3Vbbwm0K93NEWwZHiDabu9SOkiR6Cti4KmhWoDa4C0kUf4ICjjgYLg==","signatures":[{"sig":"MEQCIEkn/ZU1BIGc7a+bLM0FicA43Xk5mAjo8HNkt1z+e07eAiA6FoAF4VG4cvLaIYh6sNyfAWVP+ERLaSPmjsxNvRaS9g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12956,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexowhCRA9TVsSAnZWagAABQAP/AoFHg1LfJqIgNFi5oYg\nDqqBnTpgAPdoH8chsqhtEmJfcd4CwBx1A6KvPj0S4ueD/8bYwyqZ3SbJWU0A\nae01MZhhytEIkuKMjcNeT0NrOGGdVlbq3svGxLi9XMJAOwKnKdL77+hMI1um\nflFJ5co8iUzuA3o3Vw1shfHQIBW2DeuabwSAjAp05JumnN1M9ww3FuehofvL\nsoW6mGvKpCqfNjsS6t8wdTqN5DLnhkgXiKNmfCrgHn8Kwgt/e5YbqGBIiizk\nAAAz3XuvH5YLWeRc6fTPAW42Y5jYiJxvs/7+5j6mEthQJPjNNBz/fzSj1mYj\nISiQt/e456xYdN589unkiH4ZyBPB6qhn/S9/xZsX+PF0teJkQEwRIUMZ8ksI\nK1Evn9RpkREdW915jN3dqF4UhZ3kDXRykepNzN4jLDiK3wfckPWfYec/hxbN\n/ZXD1lmOiEPEtBEjZQtP6MtdepGqtQ/VauGIp5d76cBI93modV/TCNY6+YRG\nkILRh3k2y+rcqUBYQMdbd7Y09+ac3GHrDDPV4zv95iT4HGHdWQz/ot9VRkQN\nf0X5ni8QZ4EuDC3YoMHf8gMrDOgdSMtID3f3iUATES3UKK4uautJV9L0jV21\nw0SCWGH5YKuWzhuOMu92LskQtrzjXsoGFEuoOdLrXamJRb23nGxXiWvO/exg\n0yfE\r\n=OM7i\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"405f1e85ef85a7cfb12bdcba9816d716433463d5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.c67667e8e.0_1590070304872_0.9321067720683245","host":"s3://npm-registry-packages"}},"7.0.0-canary.62b5f37db.0":{"name":"@material/density","version":"7.0.0-canary.62b5f37db.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.62b5f37db.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"67c798b1db858e5d29ffb26033c4431b08815a97","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.62b5f37db.0.tgz","fileCount":9,"integrity":"sha512-bAWyz6YaNgqwFgXNNtH+D7VZ0dMqXAGcTCqsos/hMlJRYcaJ2ZKqhIm+J6VSSKGL663lARm5HUnys893AipuWg==","signatures":[{"sig":"MEUCIFhI0tZf6xm4gtqQ1MqQzZkkK78kFnrOeV/0rd3+Obm1AiEAmBoLHvL0kqLkPrZ+dZaOI+IOF0omizervamU3ceqzSw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12956,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexq79CRA9TVsSAnZWagAASl4P/0wZNreNwMr64KGp4JgO\nrpDUKzBIqMXs+H9QBRhGMePeUdYqyzGoGWAd086JYsvPqzLEWmUTl5Q1Lzfn\nVwfn2p5EmV5+4+6FnEtfjHp6NYmYedzoA0GdKN32g+2b38UAMBJy5ztF4luM\nIOW5VBp8KlDShmQO1d98rd30pDR+b5MSZmkcf9nSrGlZGGHYvogtfgb+k3b8\ng3ss6hbsRGzhKvvd+4wamL2gPGA9Ny6xqc2/kZbjaY7WlQQvHPKJVkaLtVcd\nQobjKY52ZNBsSk1AxuSM+PX2LaD+vvQIMhcE8ea+mmKYmegzJN4h6dSYgoX+\nQKlokpQuFQVn5594XgODmYxkMDYy4daE9mRuHiA/RyYLl8Xi8XGdj20Da5Cp\naoRSpCI3zo8eV9m+BlExJ2bW8vTENlqmsXVwqL87tSP8jywr8mXhJXvRt11t\n9b501OtQv8APmoalGcP0UqAVbU7FwZ76WMaRmAttCIJoVmmAx8Kuw/EIlkEU\nksGxMu09jJ2I6vsCGEUBMZjhL0vSDW3qHyNp0Dk/zQ6g2RPywEssa5CsYYgg\nBomdUDesCL8SU52u5eGQ58df2NpfeoJqKmFCYt6z615guDqXeIW4YA1q1LoX\nB1ecxoTfQaMZY2tGZPz6EwCCqXlZTzy21RE7qWOVOYDJxcwaSJ1cZs/Q0OY9\nTK1M\r\n=nzIL\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"62c869c9d490fcd3f25cd87f251a83b273e32736","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.62b5f37db.0_1590079229003_0.2257627078916815","host":"s3://npm-registry-packages"}},"7.0.0-canary.2e218dbf8.0":{"name":"@material/density","version":"7.0.0-canary.2e218dbf8.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.2e218dbf8.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7fee72aa1c71f48584e39309278a25eff92dcbde","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.2e218dbf8.0.tgz","fileCount":9,"integrity":"sha512-ru+XyUsQhqvbTO2PYSFG9W4yhvKGhvnraYcmqFMl8OvU7kpYHn/X6wmUEnm25qYMzjNjlzm2brG/hfU5N9M3Fw==","signatures":[{"sig":"MEUCIANVtlv+3dJwzVqCn7qgIrO3Z4dYuJY9VAos/9h7tICxAiEAguLkGLG/27DPZTNX3ThASkGI5Z5KJpyZtoaHWsd2TJg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12956,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrPiCRA9TVsSAnZWagAAdXcP/iDeFKh2yvLZ7VaMNFzs\nuZfoHB1G2Ls3VRYDPELkUWt95UX/aYOyf//I6B2HynMWJw0KHxLqtmKCPSZW\nckQNOLUE3wz4Q61i4XKD6mfOJ8t6kQ3rv2C9eU+RlHWvNjKCqcFzLXJew4MR\ngVTvdSLrE0QHdBHpjEmSe+/x51NkpPk6bApSgsz23CLAnsmk6H2G1eXST82P\nGRfa/B8YkR1ONF4F1NvJ0JnAS5Q8b73vZuHXL954PGjChBMif0bOCPZPp195\nGewrdEheKV2SZvzWcbhy99IjH1rdKcBD9crtfe2/zWoBB7OFfQO3orN3wzld\nsvkmewt5+x0IMFEfb5M6XHZc6204pVFOPIXJGNcdZ1BcuBCHcFfV6UWzI9AO\nh4fRqaThprvJhPKGKZXNzK6o9Qm46mXGdBS5RzF3ZA9vMiQ8z1HGAj02138V\nbIk6UNSWdYYT5dPeYPYISME5GImzmvQa4sphlE5AtBJfV23T1v05gHFaQ7iK\n4rgxiRji3tnLZ84Iz+B+aQ34TUASxc1CwqYmdZuMLxsntpRs/9Zo+O6EHB/t\n8vDp3BxakiTOAZWrEr+xWPk/k2gUCSJTv2qFhXAZWUf9e/UoAJ6sn83QiNqH\nw5r5hPd8bSq4XV4JeLUTdMvNNe0wcxDqVXaVoy2DoqnoNO3xJgaXwDRoFi2V\nEpLJ\r\n=k4fn\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"f9b76f9144a233e7569877ab8f0dbbb1be555055","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.2e218dbf8.0_1590080482071_0.016567814718974283","host":"s3://npm-registry-packages"}},"7.0.0-canary.7fd792bb9.0":{"name":"@material/density","version":"7.0.0-canary.7fd792bb9.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.7fd792bb9.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fbc20b3d70a8ff602bfda6938f7512892a89b6e5","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.7fd792bb9.0.tgz","fileCount":9,"integrity":"sha512-kRwnQ0b4glIy5YASpRFbP7qqLW3JFSusOgZZzYtW0Tgl8dPVzUCn3I1eDEwO6aVemToTcs0dXU7PFECDGarmqA==","signatures":[{"sig":"MEYCIQD5lYTvrbrmCz4JOKCOhoqGdyd0n1MYlqA0Z63u7bTdzgIhALRI+7wLZrcdZzfCWoRWEhjHGWJK90sJWeoNKi28My7R","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12956,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrbTCRA9TVsSAnZWagAALpQQAImSsFeMw1MmSSNf/FH0\npKthoTf6Qh1TK6Lalv+kuYyi7sgbOyiUAZZb1V4qszht9Oc5JM30BFtWh83Q\n4FqcXSbbMTAVm6SScjKn3UDwscNmeGx0ymVuHdMlF44YUOASA4rykBPQQWYh\neMKdLaWFvPcai2iYwh6QZIkJ3dTitEoMkY6ITax0EjhCdyKsxBZ5J82ndZBu\nolWr9GQalFQ/7gqpK3dESqZC6JhzribFeHbC7WlImKtSekAkB9bcY5bQgrB2\nnYxyWvlMghy7gb5f4GjpyIDzSKQZb/dt8e7jWETlS4pe6rrj01YnQuFhmH0Z\n8RU/8AI1f9I+jrIIZlIgSFRquMWMrN40HNdx53JUMZlliJom4DX/hkQ+6nby\n8dv02MFXoEBvNUZ9UpgB7q6DhJk81W9o2qN5P3HiUCuqBQLsBVThyykMY+yI\nCufIxFTXFudiuEdlO6ZYWu1tSKcGRICwM8HJboHgfuR2G2lL1Rwm0OQrTH+D\nmehSxsHz8uUfzjDyVLklk8Gil777/FouMyCufLTF2leVnmXUkKZQBedXJdDI\nVKkG9tP73GCat2tTqIpxc8yqHdWIUpZQEMSudBomBpRwUNil1OptFHx8yS1m\n/V5UaZC1wC94wOKOO4JDoEVwcmjH3AAHRmkGqrxscS/qj/cMM2aoBnty+6Cq\ndlxM\r\n=ik9Z\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"d5ce4b5e7914675090d101b10f10374783326ede","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.7fd792bb9.0_1590081234773_0.7414809935013325","host":"s3://npm-registry-packages"}},"7.0.0-canary.a66493cd8.0":{"name":"@material/density","version":"7.0.0-canary.a66493cd8.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.a66493cd8.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e6ae348eae3c27b9660607cbb8d28dd59be4711e","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.a66493cd8.0.tgz","fileCount":9,"integrity":"sha512-j4Y8I+kUcABBZtCj2q2gPEmc3HfP/gus+FBTalYKTlsgIK2gjTiS8EqwY/JfwDzEGCdpOTXiZ3tauT4o7PIzVA==","signatures":[{"sig":"MEYCIQCct6P2X3XhsrM7e1WLWJxASQb+NJNlrrYm40ZScEKa+gIhAIhVSe+qrGAhC7gpIiCHUBDTMgJnQ+MoiK7ArkKcdA+a","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12956,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrebCRA9TVsSAnZWagAANRgQAJeL3PbjW53AMHOIIE+0\nPMcFxQ4V/QOl/TfhLttFSuAPoyevaQb86Y3gPQyeGzPHhyAkUqhJJ4i+Tcqs\n3+W0smGnG0apOEXgr9vhhilTWpsjk0QGT1k+rDpSRtO70EDkXi455gqO7jn8\nK1U/x/Bv57u3E236/68zcmcOP7yTTXUJEVqjmTJkZanaFpKcv6L5UGo1vkB7\nQopPXVL2PUE47j4g8idvpNdvQZ4Wl6/CjIUsra85MR2SUniY5xuAls1R+DYh\n6kaU6viicPm5i1w6uPA0mqjE5/+uaUiiFG8BG6+KQu/buCAMRwM20n5QCFXY\ng60/VrrUXxG+zTr8gYrQTqmVXY7sdSQzmaN4ck4WuDf75PSzlCBgrrfm7QZh\nVlJdxoJOAu+07j0JZr8Lmp4L1BApzfArC9gOywYHmseRgYq9cuSPKgOQDeGt\nWAm8lYMTBk0EPQwKZEyDBA7BjI2jZ3l5fy9mJepn2uMWUq2xLRVkwNLJhImJ\nmCyYD1Tj+UBsSbbYU+koKgwJonGQlmSPxiaLWbjXMOEYcu1NPGKIcT4KNuDI\nqGrcJbEFKpFBwzrgAimP4ta5NPDCufpYZCtWmZoETZlUpH4mna7xOjHDNFhs\nSpg614zB3vqABY2hDy6dGLe5FZ+MktNnsnXtkR4Ny4ooka7ONzBsr3nUyMWQ\nd0m8\r\n=KRbn\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"a14e3cae1fdb42680777a9a6b5706060924d68b5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.a66493cd8.0_1590081434853_0.1873130465782653","host":"s3://npm-registry-packages"}},"7.0.0-canary.da05f66e1.0":{"name":"@material/density","version":"7.0.0-canary.da05f66e1.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.da05f66e1.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5cf3182f1fa9b3a211762ee7dbfd5554c6c3b7f8","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.da05f66e1.0.tgz","fileCount":9,"integrity":"sha512-mqZkpA3HVbRGl52jJVIvLp+HvKeR78zUHjp29IA/zn7MHmGSkyft60Q4YUBevMH8nOzwHI7H4+nB68kLpAyDng==","signatures":[{"sig":"MEQCICOvWd7+nZWS4nZPj0FrdGGP6yewj20AmhrZjxBip6MZAiBZHq5HELCfJtolSnt8yFjIZU98ckWMjxlpn4Po5mwbSw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12956,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrgOCRA9TVsSAnZWagAAVs8P/25i4fZMmaiZasklryhg\nkkekFlXXQK0j34tCkhL4xeOithjWTT5eTrfNq4RVvAanHIn+Kq4U9H6M+KW6\n+59FOaXrsctnAwXMRfySAiQkgh2A5wY5DbwJFNWqE7htusBo+cEVRlNn2uI8\n7dUd7SYDBnXvYfOKjMt1CRmW6DyOc0K6H5FgoM3tBsmaqjVdDi8fCsxLL6L6\n1a6IYUwQP4KZFZwZ2AeDRWJ0NakBRm/tFR1VYp4ZZqwmW9tXPoyTtGb5RYf2\npLMd51QwTQc1uiBMRLLVax4ywgP051FVdi+R4buPG+mnyq+LeK1GtrvL5Ets\nRTzOjPdwsTVReL7QOl9kAZwR2L8VIYTejhoudpSkZSpFfFpecn1rlFVOyDcy\nmX8t+PXmfJDXvKvTH6+qnxuGf+Q+BL+lN+wAuLcO1tU/TYTGFjXiPhiytEWu\nTy75qtjq/0sUv+MbVDsDxqQVM7whN/Q40vGHRoMJyOqqES7iESQgZoJHcJBm\nWKzs4TrsidJI9BjP+WlHFjXuZHKfqJuyPhRwO2OrTVQcXDqHW//eqtGQq1wW\nZ07q8hurgy9K3OnkVk/Za9DqxccHeh5AHVdlY92T4UMUMbGeoT7i63Fy4YAH\n1Yu4352NRxgIbU5vOQ8E3DQKPDPgNPoS8KlYAldjDDovvMAmF3M1X4KX1BOm\nUuR4\r\n=gSQe\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"97f495e74f33645d8f066a4be88eaba95700a4e3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.da05f66e1.0_1590081549491_0.9705250568182515","host":"s3://npm-registry-packages"}},"7.0.0-canary.740860e78.0":{"name":"@material/density","version":"7.0.0-canary.740860e78.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.740860e78.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bf068ffff1bcd63f6c1ab9acdb1da1340ae558b3","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.740860e78.0.tgz","fileCount":9,"integrity":"sha512-kDdlCQvO+T0JHN+6awTE1F1NFmMc0lvr/W/dcqeGGFv21Z+EKVoiysNqzFbOw6DnALSgW/hWKwLBqipnoT8JzQ==","signatures":[{"sig":"MEUCIQCnoU8HM5mYS2s2r38+/YUwDJW5ZLSSebg3ozgWRBA7qAIgFD3ZKn6BrPKOjvIlnEGf+D9FQNUs9Wch0sH3Wwz8z2Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12956,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrmlCRA9TVsSAnZWagAAXVIP/innU+RlWYs98DDFY4nX\nuDg4kguQWZknhtF5diUD/wR4iLjVWwblOYjpvRmVBRmhRFWEmNvFw3F/jIc4\n2m26npqJ6VAyQiqCoZ/BJFwN9QvldMyigG8Qe1HCndtRm8cRT34d3zhVj59s\nGnL24cbYYkKFBzMigDo7npELL6/YJjA0wAtQeEeZOY2A00SFVUuTdgHtpO4M\nUmfBUKgmvkmHKWx8RBz/wO2BwL6lWFSTAydlLFYi8r4/AfODzwlGoqsuYYtZ\nBVkVTUS5p1u6a+2M2yAzBG7Ok0AnBVSgwGtCn6WkiJpMQEMKyBeWMG7hM2Qn\n+RhwJWf7s6f/mnxa02RUosJrfgfLoVY38xc4qCUoHj1tmHi0rkCUS/cNpbnO\ncCqW06uOScnXT8koT80dVV8UmQqzWJ7zTx7X3dpKgTLuAfLJSRxyCCR28XTI\nGkIgSl50sZdC0NtPtuA6wzNUCYaizn77u8hbim6uBm9IIF9iTvgO7GU9PnBr\nPPqfMwiKsbAyOe4uMGqtkoaUhVbZoDXDS7EHcQnHy2EJ3kI9TtFyZHYfRC6t\nLJJGtBjtYCWuSlB42RxRu/IbVQI/F6o16mbiFTiXG6CUJSVe08b8iv2wvPAO\nTGLDHSjZuk8+RLe7YpXTMfyJYdjFFGw3zpRB0kQ7GdFiVJlRkeHWTvMQnGiy\n9TQW\r\n=lhrx\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"2319c23e86ed8e7ed27865b711bb6ea6970b98dc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.740860e78.0_1590081955611_0.6370768865425134","host":"s3://npm-registry-packages"}},"7.0.0-canary.5cea2610f.0":{"name":"@material/density","version":"7.0.0-canary.5cea2610f.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.5cea2610f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5c1b0ef33e173d9cdbcaa263c86015d9bd876cfe","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.5cea2610f.0.tgz","fileCount":9,"integrity":"sha512-hqko2JFasxPw5QgEz9YH3+2cbMxRq/9PjdP8lUf+uK6pA/x16PISnbsuvvX7ZJp2Mah168UvUr/9GW+o/79OCA==","signatures":[{"sig":"MEUCIQCnCwg1PAk8iQpiT351cB7K48mdAOMakE3IHVLSaoIWfgIgLOhUM9ZfrNpwJnEvBSplWm90CaR30H1FUBpHk0uVmGI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12956,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrocCRA9TVsSAnZWagAACR0P/RMNE61uv8GQ5pewiz7Q\nvXZES1Irt+Cyg/Wgz4oC0beVLLZiHEpWwwDJD2zJcm+qaXMUCJ8z/gSGBu7O\niWIx2Qgu7KxAV5TOXR2IC3fi4KtJFqygMQmyPbeUBNxHaZI7gVCWVHautHCm\nSnFupbKazoXLe8WksiG86MK5cM4aYWigwcqwj33PKxRYsbzLtcCkDCavowJo\nZkCzXQOxCgIiBCYTPTE7S15l8NANX3+Nj7vJPqLek2Sdftzo+1CkPmT7MBE9\nLEAUwtz+z2+T3qadfbq2c6n+JzrYbIMN6ST0v0So3sLbP+vm3XAMabrowbS5\nksx/EXkcYNhxgOqVanyqgorEuVTpa2BKDMUcCRBeNHXbr3qf6LP3yoAzOGvg\nF1jhOVtyw/hLAX6tzunAkzJj0wbs7TVmANka5BCtSZLK2etCsd2NvJmb8Gyh\nwN23zoXyNnu6qf4jnGv1upPo3xyynpYQ/3/C3UjAKgYQ9Lkumzu+2rRIFmUr\nlpgglQtqKB2nE64KGYvXucat6s4JHc+GdPqttfpHLzryvf2DRyg+Pjm0lKC8\ntSa9woipuDlK9SwFkG0+UkMYyR+0TI9pcyS499ecRdQUjFDFaRgr3xBJWsiW\nkEyd6ITK66/bBOtifFfL7qfdDwxfEYYmtmAaTw1pcCcfKTSLcwcG3Rt0ebAD\nzXIb\r\n=h4Sw\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"647d4356b68bdae8879ed7384b0ed1ba4e1954dd","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.5cea2610f.0_1590082075955_0.656692277237602","host":"s3://npm-registry-packages"}},"7.0.0-canary.cf7747ef7.0":{"name":"@material/density","version":"7.0.0-canary.cf7747ef7.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.cf7747ef7.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5dc4bbd060b0e65946131bb4490e98c00294b509","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.cf7747ef7.0.tgz","fileCount":9,"integrity":"sha512-Lrc6C2D3FDeIRorurB3oJsfgUUZ/Zn//P767YK+OXxYtknNFOiBUu+JqARWaWoBHHhmT7ZTkgFsa4jjLDumXdg==","signatures":[{"sig":"MEQCIFiuo60pwtWuzphSUO1n2yM5SbZ5AyBlUXBnOJXcavQ6AiBHALTlF0FIE0lWxH+dZs2X3ANGLJc2DHHhnWSRyyDAfA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12956,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrouCRA9TVsSAnZWagAAlfgQAIkNipsnB351etCeP5lz\nl4aGc+qCIzcO09uAdr0JO+qhU2l2KFNwVmoSmrPxbw1Z7GUvCafcBm2d3Cjc\nYGJMpLwRPFQCqsnGhfJlSfugmHMz+kGRnhJ14zhxLlQ0WVah3pJVWKm8bC9X\nLOXvNZpdTwMWQEYU9b0Veg44tL+HbbC2lJefpgqSPD2L1DchuBUhH4ZkOJhy\nqlLYjp1u9z2OcDMagUr5mIyiObQUvAWHYa0MtICYU0R4nhDCwAECiDKdsRmx\ny9A1Rqa1ri6OIoXCV4l8FFWI8s8E5OEh+KgMLQNEjNbCfwyv4JZiUgTau1py\nN+pKMUwnJCuZRES5YlsSNyCR8gblQnlYksqhNa2AxKiL4TpJDPSINbPnD9ES\nJLvpWWXYYTyMtSGXV2pQ/sjCiX/sTpiG2ATiOZsntP8K4jL5eLxNF4iWGk1i\nZn9r2joYszmLBZ/6A0G8VabdPo+dvh3HOIyMG2p0frX0dZsQzqSBewoPdzV4\norahhBX4/wSLuJH4M2EKvm8UiZ9ghaxkRBSNrAhBtzoQpPNdvRw5E2lYB0tR\nf+BNS4Xu4Fqhg9r1pLsoKAKobJ642b6YWhuGka//prI012EJNtTcwGqQma/U\nLQULToAEXm+VZrhJPv5esZ1uBp8Ikc8dzHCayIv7Xb3x12ai749m+gwQclKH\n4C9u\r\n=dmFZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"12d3ae46d64646ae020ede8b9ce88abc7efd384f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.cf7747ef7.0_1590082093715_0.06165997633212017","host":"s3://npm-registry-packages"}},"7.0.0-canary.862d0d7bc.0":{"name":"@material/density","version":"7.0.0-canary.862d0d7bc.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.862d0d7bc.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"21018f89c73618e314d5c15841bbc57789e69de1","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.862d0d7bc.0.tgz","fileCount":9,"integrity":"sha512-cpeIkLw6TsXwGOmfUWiLtBV//3JICgvctNV6kGUp7jbnn0WsQN2EkQqKHLz1yBjqQwOCTWP2qSwaWT916DtMXw==","signatures":[{"sig":"MEYCIQCx+Gv+F4zF+YO3HGN0S4ZLNybXPrg9P9BVVxT9kgwUyAIhAMas3Ai03NC2ZwAQjThqp15gagcsSSgC2JsDIHMfDdnw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12956,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrrRCRA9TVsSAnZWagAAYpEP/3C2zOWuk4Q2o1GKQ26S\nW8K20eODzlvKZvxx1EqJqVbB7JxHHDTiNhDIWATYGmg2iYkzUGFaT1jXU5/H\nqzsPvrth8XMbCwcuiji3RCRCvnjBrduqmf33QLWyhSAxIyXJq3e46QuOEZHp\ny1oArk4jrN9PiKO0ElNyY8IZ4bb7hcl0JXJqLTGg0nmPlY0wg5or6wTHtD2y\nEkaYz2ZRxNnOqkjNLtnrwt3efUGZgJuHjVYrygDh3XtzWjdLFqXn3IDQFM+m\niEerlQEiWGqmNjBrZE/ghl9/vZxY80fb4MlKYpk4631aL9UaELOPlBkwc7VY\n2wRfCJ8lWBbV11tpL3smQ/CHZTr+NbnWYhJ+2I91RU9UkOwE97jhuI4NjxAk\nSfU52hMvbNW6ZRxa0Ly9+vqcmO3rlcu4W5nGyt+86x0pKsE/i+OjCivef+wk\n3SZzdc+dVaqMOK4h2tkL+8YUYVoM36e2vEH2XQHodM8SsE6M7Y5yEajyi1qH\nv+634rVeXdyYteEAiTgq/fmmfZJErDy9c/qkEOAYMH2vIDwCZtqUJrj7g80N\nCD9ix2c9F2mwVIHLkOp22BVqTXBNMo+diUH5sJRB/NI26MBdWmBqlk7Uu3pP\naDhcX3zGhgDjvEgTSM246HZoieU9Xh5CE1bP93avCao7YMu97RBdMAcdVA4B\n+UV0\r\n=twmn\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"534ebaefbbb3a8abf3be3e2e13c05f86a5461127","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.862d0d7bc.0_1590082256892_0.055222118086527106","host":"s3://npm-registry-packages"}},"7.0.0-canary.0008c8a91.0":{"name":"@material/density","version":"7.0.0-canary.0008c8a91.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.0008c8a91.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"05b56fa4065bf3b2c7617c2aa6ec7b82b0d35432","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.0008c8a91.0.tgz","fileCount":9,"integrity":"sha512-TMl+NI8GN4nzWPpJ8ItZEWe0BW6Ra6GRIYQvHp74wIVp8WAABXGPaMHAZBKx+0/STTH3lFN1/4tT1frZPL4n3w==","signatures":[{"sig":"MEUCIQDoGHxhQvEBcTEreQIH6T1c7PIMOdExIJNI1NzkE7l+OQIgO6s738kUUuS9dXRJYFdSx2ubd2ZoQOpoTpukFU8BEs8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12956,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJextdJCRA9TVsSAnZWagAAyx8P/jiVh4Y8UH6ABQNvvPcM\nrsXqYfrpuLEvz22X1yv6+IdvbCaV5zfPo+67gI8qgow+fyuvYB/TSwiev4jb\n3fyuxcru7Xixb+FgrByI5BWe95ZNUjBSpzoe0Tb8Eo6SFRFXsA1iobJrEnlg\nroSSDBPWzTgBJQOgXMYcbdtKQbf9NeK/lnHI35Z7n+8+0jG0LMdzFMHwJics\ntefc+IYuv+EL4AHy2+gMW9FrSUoS9tuLFWsx8sSiQeS/qIx5F8kQtrR+/Ejj\nTFTN9yeUapUyQ5A74H0ZZPepX35wbmJdPI1idskg9oRqhjKgpmTEQvXPLZ8M\nel2DsnuJNb2DnZ8hh5WBtuqMJZv9SnDPgkXwSWDXyuxCVZyw4lM2JB1FijBT\nJ6mba1rvcbHvJxWzpUyVXpyGs9k/MiJ2RmyC3GCrQJOhyZdYEB9QPngkmjyz\nlLY8JdCcop/Wx9cCjPfOysP707YaNe4s5iEZTjzIOGVQ/4PGNilmAfsih4n6\n6e46z2+tar7UoeyVIizYbISGQSga/2FvrrLhREOClNjYqwvta/DEIWAZxHRv\nCnAM8AZT4Rla/alMQmxi3iknfOl6mid+ktpini2cR8e5jRz5KPMC1OykwygQ\nS3ZLEMbDXHtqVmkDI3oeF8uAaW3WuOoSKJ7CmhFEdBZQuWBzQBr8CfBCl5wV\nlfKU\r\n=et68\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"5bafcd3cd9f6f60ca813af30e2b0a8974de09ec8","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.0008c8a91.0_1590089544498_0.8304659405916284","host":"s3://npm-registry-packages"}},"7.0.0-canary.541638fa2.0":{"name":"@material/density","version":"7.0.0-canary.541638fa2.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.541638fa2.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"52ad6cc261bb0481c0de58c95d8c6f5803f99948","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.541638fa2.0.tgz","fileCount":9,"integrity":"sha512-Z/xD1Qt+TjiJ1u9JnA2bNqV2bxK3fk/MTNbCS4CRbylMry0WAUMtJfoWSs60gkL0iBbVKkkAlyeCU8rpZFazdA==","signatures":[{"sig":"MEUCIQCLzZ2L9WSs9EYsgaFX/PmzkXbwQOGX1NrwuE+S2bZKrQIgaUyMa0bWuJKbPaKMcR3FzeWVHs8nu99OqVQUmwMfqZ0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12956,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJextrKCRA9TVsSAnZWagAAFWIP/2XPpXGzbaZz0GGDgE8I\noATWUGscLmP6zVDJ/bMEr/nE5muy2izBMe6fdEMqHWm5S1cJM05R2yLLDw/C\nEhNmKCbVrIRdGBsXVjS//s+nXlDvz1s+X105iX7w/HKaO8QwZsHwmJkGTnAB\nFJFXSq90+p/PyvDqb+ahXAyQF/LFsIR0h5cRwR8O01qqRSt/TprcJnLwQASf\nhouoWfVcccRnYz2Yv3Ivsn+LdtaanBEC6RbJyhmwKUy+C9NwafLvxsdJdnss\n/QrKoRh12J2R4zZWHvbhRT+jrq/4nbaFR+gUQ3r/XbCC2Vv+COef6eCZ4pQx\n16VyseXMvvwROjz2UpBUiVN61li5qcXvZiVtXx7ugpmtFdLfO9PVX+aT+LBR\ngkObqHo7P/XeRxzT6H4TmsLZM22ZpGU8OUVKH+CNmXmWDofMIbiBTqAfz0kq\nxdCBorAPVEOrlrQc+X5MhUvpmOK5KE3YSu4lz3WwLFB8FSgOnXFWx+7ssa+T\ng/tGASU89NInm47NPaPWD5JLJ2MLRbRVz8D726P5k+Bqy95Y6NQTvMz4176/\nn6L9B+GN/ufwKGdLH31uy5D7Twa+N63nhRHyNibrU9+t0iHGIWyQRhQQNTmX\nvJEhTV6YoQfCK1m7ybtof0/iEJKVuBZUAL/7C4zHMvs9w2ayLjCZU4Ws3W4Z\nT1lu\r\n=Axl4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"e9634a8258477402629947671e06d007833e14f2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.541638fa2.0_1590090441769_0.31344496962936663","host":"s3://npm-registry-packages"}},"7.0.0-canary.6167cd075.0":{"name":"@material/density","version":"7.0.0-canary.6167cd075.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.6167cd075.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b599ac84185046447b7aac73a73e55e6a48ed3d1","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.6167cd075.0.tgz","fileCount":9,"integrity":"sha512-CpyjUkzC9Rm9Mo3kyYDvitgb4CIdiP4n4XmJCMmWBb6XbD7HYQEX4CG7GBxXq4HpjA5lBu33/MpbQynu0n/sAw==","signatures":[{"sig":"MEUCIHSheeDN1u/Slb7p8SdFUSeSuao0c71FihUEMhryXWyuAiEAneZyefQwwI8tPXfiun3l71ePe43iQhs40ZnTbOj7fRU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12956,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexuKBCRA9TVsSAnZWagAAiBoP/R1Cjc9hvTI5rFLFxnw2\ncUPwunDkBdpaMB7lKv/4vw9xjJhtkWAmyp+tjWtdtTX+B5GGmxe8zuwnhTH+\nogxDVsp4yiaOnnvPsw8sBQca5U4p8J/mF6aZ0gZdGOlRjfqY37aWCn6Zbq0p\nJcmrFCn7liZAQyAt8gFOZip/XaKLqEqp5I5HtI3PgQlSrzW0y/kW3Gy9Vn5z\nqTWEryEIY+JgB3qPUOi8MK8cImk2+v8s+vM4d2U4pT2iDe3xUQDjvQMvDl+m\n9FfopttK7dS6uPGHnuMFpkm1HqykGTFgsHbvXAwa1PqNSjAAasJEahpRB66q\nKea6hNmxbnRB5ogAHy7moK3IEEAItSz29WVbS2dmc/l5Ig2qLOrecoDfZ8mT\nd8Tfpdj5GV/z+Xa3la3c4aMboZMsuUUAjedyyB9pSiqWj9mvZOxtyBHuSu2z\n6oiYwMhzrnE6XZYLJOzw6LdaybSFdTsUH4UhAkJ009784UHX9vLqlQfzFALk\n/RFX8tUtupPJWus5OoOTz5dFVzlyxk4bS/oXqOOHdjHe8e80DKOgn79/i5Sg\nhOD9VgNGaVa+VSaPKobrGafjVa8s1j5+aMjQ7EqS8rWLUi36Rka+n2+/qgyS\nc+si1gCk3l8+veWtn3Wfgvatc2LxPqGTNTuxi/sKGTwOQ4kGXo9+1Fhu6JLX\nWZLu\r\n=Ldta\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"c86a924ab304fc32e4e6840c7c8962330b6b0fcd","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.6167cd075.0_1590092416680_0.5533180275296354","host":"s3://npm-registry-packages"}},"7.0.0-canary.863ac1b0f.0":{"name":"@material/density","version":"7.0.0-canary.863ac1b0f.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.863ac1b0f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"07b80ca36906adb11321b0aa4994c0baf7acb887","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.863ac1b0f.0.tgz","fileCount":9,"integrity":"sha512-vgDDssXWkw9Onqk1lsBMbeZC0470ieqNv8Qoq5+IDNTIGq7NpWCOBUWp/7IKeJhIpBUakHLm6w/Ew6qOEgNK6g==","signatures":[{"sig":"MEYCIQDvWLf2lZ5JIYDbYPPzNk3gf2w0ixJ0F9/bla1ykJmphAIhAKNQQVAX91GvznuRrjnhEGsVKaDS8CkOYtaTc0jB6vi9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12956,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexuuPCRA9TVsSAnZWagAAWPAP/1NwIXKrbyOgcYv4YpmC\n4/KnT9AOV+RARX8VPBr78lE7l/udqLHKR7jESZxd8aHJLeLJf2YD5kXnPkr9\nV5feP/AdDA74apeKgAR9/QtDfWo/4qqIP71SJSNNO6XYSaWgiynRL4BbOJiV\nhGQStSy2M2S9kjHRfdgPEmagLtzp/fA/2TmQBaWPdmMrxEbokkg6dqQxaSKd\nE99j/vmQNZBljbNtclzibtUNfPyNJG29ls/9P4wcCZb0lHZ/T7QhL1tdQ1oV\nA0Y2GwgUvTIvka6hUswzKsC43fZOpLC0APWY64yWntT/N4EJj5TzKjuWsrlU\nlYQ80dbbslrWteVMiKnx7nldcCNNg6s3Av22XFaHQ8KuOKFsdFjgwaQ6uhxj\nk9VavV/DpRTuf+MWB7XiuaZIo25WVsZBHJrvXXpcuCYfwqoEyEoYRhmEReVV\nKGSGUyt4EzAfVEAMu1wjpvYKkjcApbE7/y8Of1rIjSJ8FlhTRyOaueYo+YqM\nzgA4nXfEJonEFkm3QehiU9SXSHOwWsFfqhhWqxZ354p16dIgXkI4wIn4KHtw\n/UUhq6gyYcLxzaINMFG/QYoVjv/rHh3dl2ZCQFlbmwqi0DO4tpRDCBR+KpOo\nXIVm4Jiiey5ltBu+IxCTCBlf1QeMyPTek8l8MvxB8w8SoXE3syHx865rJf2o\nlCuV\r\n=/Xqg\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"c1e7026720dc12f1bd465dc892c8718b429563b6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.863ac1b0f.0_1590094735040_0.21773396653086863","host":"s3://npm-registry-packages"}},"7.0.0-canary.d30a214ac.0":{"name":"@material/density","version":"7.0.0-canary.d30a214ac.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.d30a214ac.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b31c4050f01bb464239ae28a9e8332cf7eb79fec","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.d30a214ac.0.tgz","fileCount":9,"integrity":"sha512-yDtYRnA9oIXRZYO1WqYaj9KqNDSBYpQAA19FaM2PJSRxur+uJo1DFPX99HGLBc1992hyldUHuyGZ3UsCBsBI2g==","signatures":[{"sig":"MEYCIQCcvCWPP5xqGNw89rc1UGi/yw/UnJIeV3bpElTbmjTHVAIhAJ21pO4+d64+JQ6Lf2yWLNbcY9X3Wc40TN9lvngzTA3t","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12956,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexuyJCRA9TVsSAnZWagAA6g4QAJF9JXLo9zpj9WmhJG+l\nhm1XzoDVaDprhxNixHukGCypwtFPYT/9RmYildzH19RtiNvrws+uKkBK0mkN\nohMvBOeqnlSSb5XRahB/xDRmt7YXdjdxEDw6aC1AxPYH5+YxmmAjQ+t9qAVd\nD4SSwakFJrQPUn0BgYk3hn8NjegkGlZuL9Klg427glU29k5szXkXlUaMs4t8\nfYIPsbQTKNM3eqX+QATPLUBHWuHL8bXlL6vbUz91gKPIQCVnI0ZYrRwWp4Mt\naZ7299+A2fJaQxXF7GY1+h8jYTHUHv5x/hbFUVBkrXw417HcjrtjJxOD1cJ5\nTsT/sbtrEun0wavOfehUYP+zy+ef1B9t1P3IXS+X7oqqs77JwsqC+eesj7zC\nZVCgn2QY+ss0DzgDG+fBwbgzVbY7jNJAbNMoBD8LaN4zvQUvY4Gd0Xm5shrs\nLBU61bOL6iFFWmbGJDTWKM4BchqmSAuFqSZOTUdAGp0Ex6xBPO7bznWCK90n\nATz17mC+V+rU079I36GniALc1V4vT57Uok+boZ6Qe4W5JhBoO1CThTYQ49Ud\nCH04gJa3tAGnlJ0nASH3yt58jidmXZ966DvcRJNRdtSvGJLc+tz4muLHGidN\ncRy05911GwHk6yqQ6SQ97cQRuJMiRRWQskSMT8KFUIFyomKh6yat7L20qFoU\nXj3K\r\n=vnOb\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"635c0e7c484f851d2ecb4be825abc36357ffc685","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.d30a214ac.0_1590094984733_0.9313136732403215","host":"s3://npm-registry-packages"}},"7.0.0-canary.62abbc8d7.0":{"name":"@material/density","version":"7.0.0-canary.62abbc8d7.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.62abbc8d7.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"29fd44aa73736f1984b40a5a275b8e77d43c879e","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.62abbc8d7.0.tgz","fileCount":9,"integrity":"sha512-fH3adcnne4xHPyK4Pg/1c9JFxhFbIVlwOU/rjauv/SuU2s5ONEaW2mCGkl7eWdYzM7sGVWLrQyk34RXFuDHfLg==","signatures":[{"sig":"MEYCIQCFIMWirXwh67D7XoPpPCVwK9dX64d6PcB+pyTKoilB7gIhAOzi8XRpyGDs0/YRZ7NlcODGCMvIACQgI9B71jLEnME2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12956,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexvJYCRA9TVsSAnZWagAAyREQAIXApoLCePcQOSQrpD9o\n/fqh1eTi0u8H/oaK4+89SNCJWWNETCzlE2nPnJ6+yqdqnNsYwc2yYZp9R48U\nduPvpkbkeXripeMOA5aQGUOD7ugdkaEWoCrlIRczBh+rhQtg4WRqzzv1/VYI\neuC9HBZ7dJaZyui/016B0D8i7JbQtudNnEpoaJz8Ft/SM2JDLHduvj/z1oK/\n/Z5xVZTWRT8AnuHHtsSxs21/wHfjYjBwdP9ea8BO4KBXZz/XRUPMmyKYX5PR\n/doSrWVW5QOsBjxIWQvdZ7xH0XbazlP1NC5vEkXSFvbDODXLfcWQfOeIUbQ/\nEAlT1gL61exFPXITlCy2b4wB5Beknx1Z7am4far4cyx4Di9z3lgM3Bj9acHR\n4Udw6dtFMrQ8OdTRcYvvAaa7irRCnR79MhamPLUcrVk5PY8lzHjSJS0Gh5Zq\nEXK6QryPSfW0QB6WAAyeoYK3AsxHZWZpRZc3FNhtdFx0FXx4TGQtRw/femCu\ngYgBv2O7Di2OdhOHsWDgtE5ZwFJzv4n2S9w7yPNJV9oFtFT+2pcu6d787FZQ\nesffIvhOKoNSxgAdFj1mGWdnA22sg4cqkykhqorGdgyzMdAL9grYt+spa9Gp\nPmrJQaICy+cqK0pYyJXaJfXBt8coSMtk5PvZHFJxlI5CJF+cL7uBsFd1Ge+S\nbjq2\r\n=6oPR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"6758c29e4b065e2aa9cf633b0838c4ebefb9f54c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.62abbc8d7.0_1590096471490_0.11474702991015584","host":"s3://npm-registry-packages"}},"7.0.0-canary.49bf31d5c.0":{"name":"@material/density","version":"7.0.0-canary.49bf31d5c.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.49bf31d5c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b39ce0db27ccc1b875a6bc6ab887eb220b3f2b6b","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.49bf31d5c.0.tgz","fileCount":9,"integrity":"sha512-mT6ihtGB++ss58tAI5S5NQL0H0RI1zOvSt1t22qj6OvYvmxkb00tzTO3x4ffSTIAQvbEQ7RPKedlxDIqAIAuSg==","signatures":[{"sig":"MEQCIH/LsEV4hy5ESOza774LIfffuY0MqTOWkpb9s4ItzsGcAiB6TrkjxbLFweovQLijAEhn9OKULOy0wCm/MO/2UZZYlw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12956,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexvMiCRA9TVsSAnZWagAA6jIQAIGeT4GsaIRm04RNxuZK\nNcDK/kRzh7dWDt6VvMW4PDdm9J3sedVSDcErHEyyKPZV8E4KfaCpGFHIBWiv\neL/81EnIcfsDojQXFfGGPNmHpm0Nzq3+MGc+GKmZ598hy53WD+XTe/IyYxWl\nV4cT8cIByUof9TIFn+HwP9e+xrzo1WQgwXtFEGAFYdRoPeGTSMXn6pawpKYT\nlrzKe2rhIOxA9ijOw8e6Ym1AgwctDd8wHGMDoLx3ENmJNtY9y0wLNwJ9lTf/\npdvmUNHQruxYJnw6LkYrho3TMN3KQMnOGfkmBMkS5pHDWhWOpuE37/zZDOvn\nog94OJVUwtPteoSWWYlBhSmwTZqbBA3xUl/Lndv7CtT5UDPDG7E8Qka0Amfq\nLIlQLIA1Bdex5lYKuAIFuVB174DgPWzn+uBr9zMY5p6SX7gAkex0Wi4pTGsD\n5f4d5SCr6h0r4smP6N7HwSOKXQJH/8/UieQdCPkpmXzB4j5dIj1ku6tRHsGZ\nYpuLbA3SGVEKIHPLKHwBiksX+JZzynZ1FnU4kDD8lYbPgPd4irGcHhVvnhxr\nmlfNOGa032rt+sgFCrO9oIWPMQStTLkbBKdHr3oAwqmWomk5mRSp1nfqPHMk\nXgRWHysAWdMe3MVrFxCqK+AyGAPjjBfKN7sI4/PmQqAGpow7+PhnhhdalmEv\nWfw2\r\n=P6uc\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"01cd7b0082a754dfb042df35ec48efcd4aa4c52c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.49bf31d5c.0_1590096673427_0.5759280352289671","host":"s3://npm-registry-packages"}},"7.0.0-canary.8e17857d0.0":{"name":"@material/density","version":"7.0.0-canary.8e17857d0.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.8e17857d0.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"97c8142c7a813092101de8ce8faf9c145b578113","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.8e17857d0.0.tgz","fileCount":9,"integrity":"sha512-bSWfg288R0GkdjFuQAc1FRQUSqfZOzCX0wB6cxsxhkFLXUVbkoJ+Xrxg9i0nK5GaURQL3nUgqs/0o5VlXWLyLA==","signatures":[{"sig":"MEYCIQC022Wr07jbuM9tFJPATaMEU1rHMGfTZM7h6+Svt3UANgIhALadK71G7gmn7FCep5Tmcdg84WR9ToeD5uq+6XuUWb37","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12956,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexvNVCRA9TVsSAnZWagAAVikQAKBPy1j/syScX3GNQRwu\n5lWnoYeyte9GzwVPhUCECMCMBGkz7pSw/2gh2hG8sYNE23MSYAvZmLaKR23O\nphr/VK6RMY4kPA0x/zOyaUBKOPNTAF6f1tuCHKQBIM3Q9GIk8HcZ1xq/85do\nQ6rm2SpFjgGL5npoShqgH5XxARxEnWkRHAcGCm8E25w5NxKpZjR4wkXstIyH\nhiir+z+li74jdynTMdzIdA22KCU6onKniJj+fN1ZtygMHfHP82BfD3n18NOX\nnIwMV7IPn5+8mXUPADAJJYA7BaVaBYsM1xusmt3njAP+va5krA47BTYvlzT3\npdaq0yZk9aUlVoWWVw/3RaZ9XIEot/5UXNWS7Tx24/aOKHx6R9ubiw0cMqRr\n++sWQN4cs0zc87UztyhjNsNs+mKv9wR/nbcaGHF6rlBESjWV23Bmr3cigymR\n3Ab+uxAcSm0XpNzsR4DB+tkr+4g6AsOtUyd7GUpN3Eh6sw13KPzs1Y7TRlAi\nt4vxtA5mUEho7VNTLOIa6CfvlkDa9WCn7cABE8IPY0RXBi6invsqUzgTk66G\nEKntcxOUnpCu0RN6oQNjvoinjkLTk/O3KyLJsh9Ql1/IeVN9aiq4ziAtUkMT\nvnFzB0QKIiogDEIAMQ266gKb18xAOF+OLLy9gaW7pRX6D2+y+Z3x+SfK5J1B\nAx7O\r\n=xiVV\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"9b03d700366fd287f2ec053c5ef4ccf802ac600f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.8e17857d0.0_1590096725057_0.463105527250556","host":"s3://npm-registry-packages"}},"7.0.0-canary.c113fc942.0":{"name":"@material/density","version":"7.0.0-canary.c113fc942.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.c113fc942.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b3862f44f8d6cb48660f3679c62d08316e6ce1a0","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.c113fc942.0.tgz","fileCount":9,"integrity":"sha512-yGiM6Fapwvpnyc0gUPXALAQYX3cyibGSTCs9qhssKc6SY0SAG10KoJHstyM7X6JJlhhBicNNxHuD6/psEuGy/g==","signatures":[{"sig":"MEUCIHp0EAdVgi/W3UtX6kD8/f9eRcrqPBiuA1NvQjznN5EhAiEAnJ4/kzT+gurhSG8UnlsY7D2qHO2cngLwnRQ0ABs1g4A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12956,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexwSTCRA9TVsSAnZWagAAotkP/36EdZC6XzAvhZOJ9FjQ\nv6i4onqfCH7cFjJtbDH4MTMah6z0zoXJ5T18QILE8C1DXR09+XnIh4oy8mYU\nEdmyXdjMz8S3K6YuDyuKhBxlvGBprQqsOgsJ0FH6G3C40zI/u/F86X1IkVnp\n/ATMgHncYIJdIxcAj/N4uZzNZGHB+/qoPws3+ZEoo3p49aEgZ/H+c/YaPKj8\nOR3h8JpM35n8y+oWWPcMIgsRi0a45dTM0u2864mLlAMLjCleNbj3JcWExHA2\nWXTph3TESocpfRgmui5IUTcA1gH4ohffui3YzOwRVJ6yZn+7mXNewoA8vOFx\ntgbybwjaaC3B1qyWfNDlb08PKH/J9MxHVKIv7pU/rznBp+VG1N5/fNG4DReM\n09KtTlluD0hmtGKTP1it5WdjotV8uj63H/s1xDDjiNpBTGA3W7GUT3/AnT9u\nksunuHQKYM0M28Hr7BOF9aiPIE2bVA6lcuB4JQsiEwV25nTAlYeFGfFUr+vT\nuDqI8/pSUMLnZlex0mvWuvlgQXCt6LBCPb5IZNL3n/rCUBJJiZoTnKIGR6ii\nR6N+Dw156KC5qkZwLNR78L2M/Nls1S4ymZKlWZx8vizws+zF+pgH+eHz1IAr\nGuLWabzrwUy3ihZrLTreuJw2q/yM76M6qfDbCEJJe07t9liP0gPjVkWLUfOa\nAPVr\r\n=ndYw\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"49605d78c19f78dc1b28a35457efd8dd808621e4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.c113fc942.0_1590101139198_0.8600427351816249","host":"s3://npm-registry-packages"}},"7.0.0-canary.912d9021d.0":{"name":"@material/density","version":"7.0.0-canary.912d9021d.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.912d9021d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"97d3289a8716277cb620a36a94337746762f6494","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.912d9021d.0.tgz","fileCount":9,"integrity":"sha512-g1SPNcugqls9lJvIe9WyGW93hHJSofwo+ioFJhujL9O9G/vNF2IXxC+sgOkv9j4VaMyqeeeojXgyAlkmnxsTkw==","signatures":[{"sig":"MEUCIQDeLC/3o0qa4ZBg+WJqbFuMgkqeDhoYOLyReMgrWntAiQIgbm+xPsqGfdabfnkndZhXlbAkN2Y/BlhGsjpwOjV/TXY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12956,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezWOMCRA9TVsSAnZWagAAUCwQAI6qSq0et9jl4MAuMDK5\nyGdVjl3YUWOGqVrl0YU6ARBS+NDv7P5aJ1N+va7YktBx45XFEJfDGAlLurNn\nbnnt/hz1vHxfVlcPi2QJVrG/HVQ/IlJNjZW5WgU19MMzvwznww1tS6HJzHxX\nWBFxlzdCn+uD4isx5Mx/NZcB8h/ueabgoLRsFASZdCgacShaScZsiRKmFE0a\n7gpd/wekw0zJp7V+F7LJnqiHkoasyV7oaRdkWC/v/GRgv+4ctVJfQcGWj7gR\nOFW7JFeG/xJ16mgr8Za+ED43PtdHxurjmSrC78BIA7bSAixx+zXhHrz+SEnP\nYKll/m+qx2acq5z4wICFArP7NL/yml2B4mcGTXVb8XVGcDEisksBbHO//MJQ\nptOtw07H0b1HIjC8kGiiIOag9On2uth/H9CPARxkxrf6WyAuQdYsGy+amKQ2\n2e/vvpWCBj8ak/dsr8uHbw+eVmtHh7cQeIaRtMHrWwTzQfdMoeoIKM2VzSnp\n3hdi739gXbwaukppOHOXV2NqQt5CR4qVbx9Kgfc6g0pOC7tWLUHObSnxF1Md\nwXd5t1NLYdB5BE1e+n1Eksy/UFQY3NoEWvZvLzldNNDQNk3DZltNmE1db17H\nDfyB16MbAIwZwm4E0US57wzYesENepHmuhQYtyl+GKE6Nd5YloU97MZO9pmt\n7fbx\r\n=oh8I\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"b7080ce5675d8ab69b7f361d040e079511499175","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.912d9021d.0_1590518667542_0.6795932000259746","host":"s3://npm-registry-packages"}},"7.0.0-canary.68a2af131.0":{"name":"@material/density","version":"7.0.0-canary.68a2af131.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.68a2af131.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8512e977adbc33ec202daae41c3582bdb9ae249c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.68a2af131.0.tgz","fileCount":9,"integrity":"sha512-bZpe7OEP73GvaKUDuZqIQZkZnlztN9rb/JAmPyZfJOEvLN5WwR+y3d5nqHzkxqmRorpdZKWsm/gfRGQgH81NGA==","signatures":[{"sig":"MEUCIA+DQbiLH5bzWJsdzE4kFMqMdfD/IH1GFlsWdOj542j0AiEAr5fpXpsHWgpm06uWIH//vMamfh2+L5gWn/X+nTprW/E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12956,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezWi4CRA9TVsSAnZWagAAZGIP/i9JnrcnAaisIfKcYrKE\nnVE2dQfZ+NZB3Gh10P/mkuKQAzjjLIOhoCdD1aEm5l3Vr02g43R8Ey6FFq9k\nQUqGz1LGf/xh9zCVTqSKZXA/bl8vzrJ+mGD+KOrp2Seodba1YN7t1FOyNlTd\njq4gPUeC/AXuev+OSjWnEB85uubIer8fcnLK62CccwThd3QqrlJQ67x9dVrt\nANG2OWAXVTKwIJyr8L5ECRgroEJu6lKyn5KyEjasyGvchp7tqUadmI/oF+OY\nwaf8pEc507iwZ8XCOkimyLM6zOB2fYY+Zni6IeEIHp2C7oYGeWoCgIv2HyW8\n+YQ7ikV6VLv7T6mjOkjJPtdTkslmtakVxY0SRbodBDg9BoVC0L2x+pcICs9c\n4mlezMzhxzIsfSFOkU2RsTScDQ7834mcQ9hEncU/29Wb+IN/s+qgxC9M8x9r\nobCpFDDneZ0Xw0NxbEnQtdl4OBs/ODa90ThLy2czbVyn2PZpvhdYikYROONc\nGnlobnI+y3qNfThhtM29UaErpIYxiywlq7C/zHNiPCmjmxgwQWA1OnrhP9pL\n5Kn7VM486xCeHPaCQIfBfK89UU9Ks3Bmb5Nek0GvPhkE0pr4vpkRUghLGb5n\nM4nT24jvDVove24Xr4ugkFfhXnmoALTqEK8M6vQ1ESbfm1aIInp4vk5IrmQ8\n2HPa\r\n=WruS\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"9fa697d39bb8f18500434764b1fd608819d2e194","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.68a2af131.0_1590519991784_0.1189584107239916","host":"s3://npm-registry-packages"}},"7.0.0-canary.01de07011.0":{"name":"@material/density","version":"7.0.0-canary.01de07011.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.01de07011.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eb3c72f50a59c3a908b49a57bc53d601374853ce","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.01de07011.0.tgz","fileCount":9,"integrity":"sha512-75z7Aj0qmVG9GomNf6d6ELaieXVSh/iVMypCkBpkdNB23AugpEAkz4MBQUbSL2c3ucfmdb8sHjg7OHLJ8h4MUQ==","signatures":[{"sig":"MEQCIAt3YFOVCsjTHHL0Dvpc6hGds8Ok66BELNjjPpMN7CqnAiABmRztoVZ4GDEmL6IUPp6XmlctyxwkSoENZDQwR6e0mw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12956,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezXNcCRA9TVsSAnZWagAAhkoP/jnyXZyoCsNz+oddJi3n\nTuo4uPOAecBCZH70JOXNrEvNui23ymre5wCDm1fA4CYXdFpyqHG2d5VxVBSL\n5A+JchppQHPKGVPXMTJ8nMLm/GXxcucUnUc/uO0rKGQu+XoNnUGht1Fzu4/h\nSRUaq2suHx4042d4rw/eI1g10shd1A7nwjxLXGQpvwz8bTWpLrZ2fttxNnxb\nRKtOyBHkjTN2I7HjoSga2aJJfQFFgvP9a/hmMKMoNLAqSzbZLrhwXjVQU7m7\npHaOXLuNsFMux5oiKqI3fOeyIqeVBE1CRTmdEXstHOEke/iFcgKTf8bBLOFZ\nl3W+hbi1377YsspMRkQjh7Yd7LZQEwvxc1nLJxX9Zr0FUN1CKK511nF4Zdts\nHr9ZNTozi71sHDz9vVERS2qACnKVP8rZG/5r/VBHLefvIqWRlLVU4XUF8ELa\nggCFf5BGGFKPAo8EeKskC/VQs1XTIWZwCj6ByBL2uLK2mJn+RfOSiD0trXFT\nvTjDK7JX467iiNaDBoegQWLs5o6LwppK5bTCNT3qN2ufr6rxALNJKIi1kgyF\njcciDktcdqI3cU0jnDJZkobSByTCC2etsawLWxEiAKWuSS9eYZvA/CC8sqdJ\nzbcpy+4IuXHxKCdSqkX2PkBNfPUVdshIPP/COrRqyX3bMXDQdpVjBZkXy8QC\ncmjM\r\n=qTLW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"58ff4055affa7a1d66e79813fbb147990e5360e1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.01de07011.0_1590522715939_0.7667191774817659","host":"s3://npm-registry-packages"}},"7.0.0-canary.51d4535fe.0":{"name":"@material/density","version":"7.0.0-canary.51d4535fe.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.51d4535fe.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2aca90585b27fab9ef7c1a2c9f377399afe3d5da","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.51d4535fe.0.tgz","fileCount":9,"integrity":"sha512-Bt4TUV2llbxR+tOJvGkd1YAzSfW954dHxJmJyjlNkxhCNzYgY+yDvamK6wWu08lYFXC/tGoyofca4Y6hutLqog==","signatures":[{"sig":"MEQCIHuldsq/NUpGmQVu+iV3ngRv/+8FS0CxvnOCdNRmFbvdAiBwWBzCT1EPYpffm30gB8ZxZLJs78MIhe7i+w7G54xZyw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12956,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezYtFCRA9TVsSAnZWagAA3vAP/RdHeWnfPfyJGt4yb1xW\nQoBMpHwyul0U/tcHLNYwBuniT+jn/Zu08c1FzB9uHu+9UVe4rwC1HHAoOrtu\n5CXe2bRLylpJ58dGMqMxjXjIbkHPG9bpdajRbWlFJvFOn3WIpSwjonn5sNAa\novHhadHXJ0H6pTRczAAId8zGE1Tc9b+wsjBoOTpICJmFuDDs+96j1YLWhA82\n6GyzMaNHzgmkYYwvdkQWgLYQ9NTHKmQSSSUznXSrB0dbmDy6ReDWM95RfgFP\nRk1FIPAf/P74cOiMX4ySkaW7gxr2muJJrX0lcjtVXwjA1sFMUd40DLgLR8+L\nYnZMivaqgyYULZkaRYWv0ygDXvdd090Xm1IdLuBpnksUvT63Mz6F6ibj+XMU\nM8rG1rj9YarMEHpP6TdF0Y0ibojHB4IPz0Du9Zcn7GYGoJrGtcENmpMJwLAx\nA6+2SJco0bzLqPkC7gqCnU8sVUGthx+F/tEUtVtwAx/6HM2hqAkD1+oehEeW\nFUOBnTUuwK5L8DzthJ7kA9et3M2uVgzEYCgFpbPF7smLn8C2+HkKTFVc0Vvn\nu+rIJWsdJ+k0Dz6IDEQdtzg0ePRYtleU/9r0bQDmIYFvKp3/G+eBmTHKiQxU\naDapRJa0KoexHyP8m3dFyqgxZYyNxu9QHFkhHbtTYx2J7R6mFtPWn556dwms\nGsBC\r\n=5VP8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"2ea346ccbcf8fe2cc90f893a510a194ad4f67356","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.51d4535fe.0_1590528837248_0.3196886867507682","host":"s3://npm-registry-packages"}},"7.0.0-canary.b86d826b7.0":{"name":"@material/density","version":"7.0.0-canary.b86d826b7.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.b86d826b7.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3e2afe61016028cfffd68659bcde6f4382dc8b47","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.b86d826b7.0.tgz","fileCount":9,"integrity":"sha512-fiJMYdw+XFa3pW8qxH5AqOb8uRwUbMqert1/b3HZ9MS9LcDWaJ4A66vsundpyMXvhU0ACJUWkPumuDpBHADJdQ==","signatures":[{"sig":"MEYCIQCw+wbNiRAzL8Uvps8HrRvbhz6+u8RqT96sNeTVauVEzQIhAKiu5uSZoKom105AmwUiK2Kz+GaCQSVprU5xHJoVAS3h","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12956,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezZRmCRA9TVsSAnZWagAAJCAQAKGNZIbogE8JxcBKmekY\nbkkxCtJziKYZwwa9oNorzC6IRqmpeWcWCh0ElBd/KDi68LFEajXKRfmP9dFX\n+QK/Wj11aC1wZ5ml8s0n5X9AKZ0x/ooDLTRfGdCKgI2LdutwqzJTEV6aZ5ZX\niga5Mf62cEWXKW43TogrForHXTQJWf98og1v1tt8EN4cAE0sQxNyBc4BHBTr\n3JkbutCduERbpQXfozm7jfi7NV10+YS/yg6ydI3zuZyZm0MK0IR6/WwxRGDK\n7WdbAIUw3k3XQhSOBWlCWf9Zk0VacmPI2qyh0lAxPmGhpvyU2TFPOeVcYCM7\neXSoAxrIv/Dl0l9do6uC1FjVM+X02/SDzq7usNr28rY8ivnQoUVw/wudtJCl\nY9/4eKo6kHteFu/7W7fM12qMC3d9IUbIm1cKCWv9YF3rwGzYHbp/QLB0n6yd\nci/SNpXPMCSyY3Gcsf7hgEJVEYeufY4JhY/s1EA+5O1poaVXC/zC7PDGdaBW\nwIJg7rd72JAt472jNRN5oYpjlNOW4JKCxVRb7xPtrxx8y79KF4BNuBTNZKRk\nqfxkwCAixJIde7j2P3slEmnEpvvhDxIUtRg5khs31I/dHeeq2u3B3vZfN9at\na+Aicufze0JtIBV4ArpFZapHKEEe8G/5IS+ML55u6Yw9qN3nFHn3T7WDbTpA\nK9V1\r\n=+IxW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"2b22865938bbce871e6d1ce8ce0129227142073c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.b86d826b7.0_1590531173942_0.233051644732164","host":"s3://npm-registry-packages"}},"7.0.0-canary.d91794c7e.0":{"name":"@material/density","version":"7.0.0-canary.d91794c7e.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.d91794c7e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"68d869cf72f13aaef01aa3deb4ad077fb8b41bd4","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.d91794c7e.0.tgz","fileCount":9,"integrity":"sha512-wupA8KXB97H+tXpNjEd4GDZPpdHgft/FUeBEh1qhD3qiBkylXcscOwgWlo94q52QiRroTe9edHgFHrOE1MHDew==","signatures":[{"sig":"MEUCIQCykQ/JW8HMh8wRhPlBKP4MXGyFw/oXwtV4ho4WFwyuGQIgcGrYbt0s703IK+vXKJ3vgSEVngf0CYwlV9P7Txf5dJo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12956,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezawmCRA9TVsSAnZWagAAULwQAJCRP1INuKgHZ6fG8nn3\nQ1GX7fINY8260GaKAwP0ius7tOlO54LObPu+kDLhr4bnUZ8BCYCyGsv+r9ML\nH8VOqf3ja1CmnXTz2i9iN0iSWjhbM4fqgX6U5C98D0sMAXJU+NRhE+E4+0Xk\nDGkGCHI96yHp43uqFkO8xLn4S9dHr9Uh4B5i0LNJ0lQ7b6wCAUliJ0X1ALFj\nMB/ML55aUi9XLmUcje7wVWISgUC17DLqPvFB5DoY98b5AdT+9LLMkYxUizNx\nBKtZd2ma4KcUn9gOXM4ggg2YrGSBkUmT6CKJFLxOFGFesbT5TUZNUyfp05mA\nh6Letaey6LoqGNE3mcH5F52lflNd9IuFXbslkV9e1HLdxkmKifOnImNDMk4I\nVM8gWXmCnjNipfhsIPtnPw/AcNXjsh2K+dbhUlIB6xoFx6jE0xvKcFb0+ZPo\n5p523lMAQTYIpcqEI0tnTKhP4IzT6yZaH1L1vbco3myvWaIGAEkfwTfqF2Of\n24TLQ/TazInDWs/tOl9WFbgIWLmD0ZAImGn63EDW/c/e8AZ8SgXhtUXLZG+k\nkfAtE9zKVGgsDyp8BZzm+XDi02S9x3Ee+9Xx+XYa/Hh7hhYsWRv8a2DWNtxt\nidAp8PIoZ7fkfV0RZE8B3PauyYZd4w6JbnWwW1G6klPQJPh+seDH1vB4Bc9t\nhUWi\r\n=zspq\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"f931cc9789364ca07cac4a17cef0a225bf43c168","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.d91794c7e.0_1590537254216_0.037563008958932276","host":"s3://npm-registry-packages"}},"7.0.0-canary.8c6d7e076.0":{"name":"@material/density","version":"7.0.0-canary.8c6d7e076.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.8c6d7e076.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5a33e1181237fee5b23c6a827b5db04879194f2c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.8c6d7e076.0.tgz","fileCount":9,"integrity":"sha512-HmMBaCgVJo1E9YFmXhjAfCSofJzDf+zeX0RWWvG177ZZcRgWkCbLJSrY+4kx3zbZFyD4UE+fFCwbBdIl9dGvbg==","signatures":[{"sig":"MEQCIBbAEsWq7VGw75JjjcwlAR4Y5NOryH4A2i6nla8d5JygAiAmcSFVQTCdLNGJ11xzK3UurQ5WZFysQzG8ptl0s4rO4A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12956,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezrhYCRA9TVsSAnZWagAADukP/260sQ+qpP4cQOk49bFy\nG1pC/q6+Mk4WDOMXCyYKmvB3EzIj6jQ4Gv6UZtIKbUApyGYmNkU4fqP4zbg+\nCoQKqrNMsoP166wIaSs6s1y9CfwIv/imR3HNGO13QISEQS05EXcXHRX3k5EA\nrmjMf3AFfiLTyTlpKMPCuZmepr7+/qw1HUfq4MhS2+THF/od4iZ1VpaPaiv4\n3nNxRYKsrwgLW0vh6RTdPfwAejXSs3cT2bwulUjOVxLHfoWvh956NzKVeihC\nB91RbIwNXPaq2h1uGrN/iIveZLMXOaN2r0gptsDIxS7gNYGbxVb4uIagwDen\nswdDE5DQ2M2IxK7tavsBTXRx+Le09/kUcyNzS1IMLKiezv8k7PF6InCxaKrB\naFBeTkWBFRfD5XbkGndI1Mzqk8orjabiTXeQa9rNvz/6nsXj/Zp6ckxqo8S+\n9qyHI9QKadts1QhUodCZ2mmGsnR8rECB7FmbLEgfRPC5Cvkl5LUqyzAHlwkO\nh68wQ++9Av/WanZzL2l78mrXywwaRolqY+jrQowQaRn90VXzcFicUy8Zkf0s\n0WXpTYOjzU69oGAs3Dt5OqYdBiCs7Jl6xBE0KcYNZ8zKjlz+ibLiY+z5XRsO\nW1qLe3iHZAbYVgW7fY0l8JnNKs+WUxY+aAZ5rIMWFoc6s5xLIl+jwvPcZMwc\nHejq\r\n=Fx2A\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"ca2efa9bf20bd3fd24c7f6ff263721fea798614d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.8c6d7e076.0_1590605911808_0.5586844315479831","host":"s3://npm-registry-packages"}},"7.0.0-canary.5b5f62f93.0":{"name":"@material/density","version":"7.0.0-canary.5b5f62f93.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.5b5f62f93.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a8c99e618d4d08018100a3ea6b6461b896dde447","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.5b5f62f93.0.tgz","fileCount":9,"integrity":"sha512-onCaSVdpwN6mS1AkNkhRUYGVQjxjMNh3lfnOXbWu4y1pNEBhwV5XoTIuIU19Zn6BqRq8wyCMUx2HxFTcgl10+Q==","signatures":[{"sig":"MEYCIQDhQ0t3h3+WC35VilMMBBSjbhNDMlaVh1KY3llaGabMcQIhAPLPV+/qiLhCxR6hZ/gfrpqNP1vTSi0YBKsANjXwaZVh","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12956,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezrxWCRA9TVsSAnZWagAApUQP/19jXovNa000X1FxDp+r\ntoazHXKoO1iBpeySOz1qEZyjoBNV8VR5uWCx4YNP+24luoRG0dKGyApHrC1/\nRZgw2U5C0EFYXcP5jmlkwpsarXi/K1BL5k0MolKF4mcH0yrrEoc+SXZBrH4G\n/FrXanAwv5lzCknkwTR4lECLutTbtJ33xkO+BJxgHi9RGWfDO3xlyPym8GWg\n2YhbIHFly2U9NU+f7/pAE+/cWCTz8kcF/DdxL2WGL8pWypraABrfJ1S3bWuN\ngUhNdGfK/yExTW+oogiCtmXTF17rSzXlQpSGVern6/8DE/NQyQY5OzMeyB70\n6gURV3UZcTkOg0TA5/izzM8XHMvVbUQ3Gcq74uagTNIZH0UKM0FmJQhTqmDa\niutu7TXSBQJwBczpWDd0TbMvk8lUhfFA/u/4+oBIjKSt5nBk0S3nGHZAwmfl\n7nzAXO6nF+5hDKKGHrNIR4QTyjNngvXc5KH7owI9shj2JNXltfqQq7KZS9q4\n28tBd45dFxx/4mZm84uNQ8qE3MXOisn+8NZ/0qQBbLRLVCiFO7rO6E6KE1hX\nz+QveLawRBhgHV8bBznCWfiXes5AS+7Qb23gcDEXxm/VZTqlCQO2CqlN8lHJ\nnM6lITaUQbJp/jWFlvS0kx1Wfvbr8yKy2bhat+q0TrtkMpa20wNH2S9fN+oV\nyyr1\r\n=YQpQ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"bdb576423b0f8020c453a5473bae420ee287c240","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.5b5f62f93.0_1590606933970_0.128869309462031","host":"s3://npm-registry-packages"}},"7.0.0-canary.d9972abb1.0":{"name":"@material/density","version":"7.0.0-canary.d9972abb1.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.d9972abb1.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"92ed67aa0219289c6afb61ecb43521da09287a69","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.d9972abb1.0.tgz","fileCount":9,"integrity":"sha512-+ENZr9aGrg+rgU88AJyamz0dNpcDI+3jU01+U3unXdNBRRwo3qYM+Aom2/DE5q8czkWBPky9JCMwIeD1TADBrQ==","signatures":[{"sig":"MEQCIBy7SkCD367rYVegGpOBZNu0QKybmm3CMsEJTTO57VWOAiAG/+gIjjYqfqr7yj2p4RUMxYr2lgxfVVGTSRCa3xApRA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12956,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezst1CRA9TVsSAnZWagAAIhEP/jzclI5C6VNyjD9g6tU8\nMbjUwSXl5bBcNyK5LJ9dVWiwcVJx1zUw2VEFmFdNM+qzPAIQVkrFNujpiI7+\nFWuFis2qX/VH+Uxr+CzeJQmaWgsRr2kvKI6XyCPX/ZMA7plet9TZdIBT1Yzg\n2AA2xvjYXxI3/xxZtUfY9jX4sAQSryprtQ5RRtuyFI1F23o0LOJpC1ncjIrt\nytb+0HKXcFYKKW+hdDSSCZBeBfQX+MaXXy6RQ90Vr8Ko8FkGvrt2o57DbI5P\nGURtHELR+oEMNsEAfRxdJqeCC1N4pQ3FtHGz4F1sdlHDFOsu39fOqe7OMF42\nfgZOlfcGX6qqAx2fS/PhM5N0reswlwIgp6AcBrfbTJ0G05X/V/oqgnUM3hBm\nXWgIl3ep1gyTgfr0573TAsbDNAcKaII4i3LI2VAMAYJ7CoyOYZohhibUqNtH\n8hBGT4whMH1bf4GWnJiP8/MMt8Q8T5QYHb/a67tzun6KUZInLaErg+IQsfLC\ne1PoEEvlPNfooUZQV/Zh5FlSAuriw4HAGNLNOc/cIcKOk1DgbYnw3hmT033f\nkBjeWQE+SqVZSe7WR4vCyhKG1Poa6ifmYO128Nis6dRsAExCKuHJsPMwIgOV\nhn54ItgUSlno4mWht/EIhbryvHZPF+BJINwZg4J/6UWkhuOjxnoc+IuTpuxT\nG9aS\r\n=64XY\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"3db449915645c45b366327c8152342a34f1e10e2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.d9972abb1.0_1590610804664_0.8666522214925816","host":"s3://npm-registry-packages"}},"7.0.0-canary.6556eda2b.0":{"name":"@material/density","version":"7.0.0-canary.6556eda2b.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.6556eda2b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e90d90d371a02aaa40d8caf4c550c08c4b7b6e24","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.6556eda2b.0.tgz","fileCount":9,"integrity":"sha512-osg1pOQVHPj87T66nbyc3wBezJXbbBRcQN+PJ+4OeJCw0hbwq0khtYlzJKPHFbmfAVPtbHMU4xgyHs2H6S7NEQ==","signatures":[{"sig":"MEQCIFpxINq+1B8xDCcE/6LtrK+9Lx+CLrwDkVcKe61SaJUBAiByd3dkjAIZwwNckf2NOvIAMH7rQCVBr2L1EN+E6/+2Yg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12956,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezs2cCRA9TVsSAnZWagAAV9AQAIGurwre0jz6dhJgfQvD\nYPrRJ55co+eYTL6DNb0qZ0skdo3bvDVC6tXUOQmrbjzgRD5hP7uRkrRWg0Xr\nOW3JhmJtonEyH1zY4KAHkRXwxAKp0PmtiGZal7td7dC4inSHgTbndfGZvUV9\nDVGtlaLPSiSCFSuFoTgoDmc6dmI+6oe0JByXKJduiiqcBkho96fIerntf3Wo\nNBgPko3UH/bVOtVVFkS19eWPyjBj9j1vM4L+O1vtYrSbDFFZXYVEKbIATKJD\nJFb51H8sJkKHYwZ5ab14UUkbvGLABhY1CUWZJEDJh+7nFsNAv6pN2IIgUryS\n55llFHVEHD2fihRJq0RHN8BV+P3CaxYu+1/G13J7Qv8htH+a9LZovTZVBn65\nrGAMy5vsHD7TpJLsgpmvOH25rlghrqStdugead5hZeshBpQn7/U1zD1kuUMM\nFT4hKtZcL0U/qqhzD4w+wgETAgcMHwndbiAovc17+Lg5ppf4+0XoZvMT1cAo\n2/rYXtesAovzXDzMlZWPV6joOfcN/uiC61XRHRVK/49Y0O82nNU/vlBGtQ2T\n7DZEjwUKVOfpmA5L4sY4c54KJ3vcSeAj/YTYv58blzI+8l88UvFz66jMeLxH\n+TBs37AtgDq6xI2llUhabKvtPUhuGG/KIuL21x5+ee28aO83OmHz+rnmPzcI\n5soA\r\n=Bk3U\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"504ec59b4b401d057e70ba4bd1bbef2f87218204","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.6556eda2b.0_1590611356153_0.7729017434246874","host":"s3://npm-registry-packages"}},"7.0.0-canary.32aa23641.0":{"name":"@material/density","version":"7.0.0-canary.32aa23641.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.32aa23641.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2328eaa5d4ead883a93489e6402d8b495244b4c2","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.32aa23641.0.tgz","fileCount":9,"integrity":"sha512-MbrJHOkD53c8FWroSmRMSqSMlj9EkQICgna/u4BSKilV2Am4dv0yclJJZLTtiOj7OKmpmc/BgcpLXVbblWPo7w==","signatures":[{"sig":"MEUCIQCfNc5NA5DQPot/5y9E10AM8eB77qrUNWscBXZ0EyLn8QIgQvcpGW3kig7Q8RRdPjM3gGUzIsRDS8n/LHmHUmnbisQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12956,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezt2YCRA9TVsSAnZWagAA+MAP/1yeu0woIjSIObQ+mvYB\n4Y0VmgTL/q8xlPOBejDoK8gqRAGfisg4gTSiTRCVKOxcVZGCg2cR0Yf5X4iF\nZPI+PMM1KvIdGpyCjorv1KeYSXuB/mpDTTwfNBFToyhjZey+bHO1BOo4CfQa\npq7Mrm98Xr5CNaitIlOf0eXf9PGxTgSv6Jv9aVbEnoKJG/bdjy1nKytPHymf\n7OAe9Pyf1apxgV6HME2Q3aLBI8ocRVRRqQByCO37gPy9muU2LCu9he3eCz6P\nomLJi+1Jrrdx7ZEyTLEX8ItP9YcxsbVh1jxvzc+sLQI5mHwpBmyHIiDyMokh\nSDg3Zl+z9Yg2j0kyCKZqkmhITcNoGE7rbJV5eEZR8LBpFdrz081C4aJCmaGm\nWROHS9y7nlz/vkEukb56eweEV94PtHp1hjfsLuG6vXe8fTzUaxswQzUSVvNd\nMWqMLiDoAkos7q07Uft1M+w0GpLgczc7j1gvq2JpNxo52WxW2nWuSg3g8ir4\nQdW2GJtzvG1hKLCdFANR+Af6sWqgjMZabw3zZ+9/nnokt6D8Fo5/72WDNP3y\nAEC+n30USuJXXlcvnz/4wTACbdwT88KBttW4jG2oRsSenv+FD4QrmuxbOOeU\nybY//sUMr/AqvoF9jmh3MmezYOEpS4D7jwIs5q6zneJe9Jw1k4G2VJFHJbzv\nE3Mm\r\n=7sLk\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"4cc39075dabda7fb76257a3403f0bde13084b87b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.32aa23641.0_1590615447666_0.7375702242170818","host":"s3://npm-registry-packages"}},"7.0.0-canary.654934dfa.0":{"name":"@material/density","version":"7.0.0-canary.654934dfa.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.654934dfa.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"97d064fbaabae12329535809e2611281d6b1345e","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.654934dfa.0.tgz","fileCount":9,"integrity":"sha512-vWC/JCVMLNO1vlm2RCYc2ZIxPbAq68yFAJc+Q9sS3iE5HrmB/8q/qRWfRZREQ0NaRjKbGkf2sOpT+BNGnrXokg==","signatures":[{"sig":"MEUCIQDm0kWsFkJAkRFJ4Bta501eC2xb5qCQVOL7LFRaD8eF2wIgTTydb3cjnq7iwC984OKbZ4iKtU5nDuDVZXKXmOWc7XY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12956,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezwd5CRA9TVsSAnZWagAAueIP/0JoITt4z5n7Nx68swqJ\nr687oT+nbu8Zm1faL0hzx+5/qagAqy+nmhPbvV2y5StF8O9N5p6ogTaG3a86\nhdFvFfrJLgtoJ4rDp1PxAbDAfWiUv3GiEKJtvxyy4hJkp3cmUWXVX3mlrEfe\n4dNuYV3+1ueVALKNfkuBlxTa6d7uiM9c8iXI8TIGCfoamW1+mnkvS8MPutYO\niRzJyxO1WrTRv1SUB902+05XRzdmfm0NAKBVNPQpZceGFsAYA0PK3ncXgeMN\ng2q+lUUrrmCQ+sVd5gA/ErxVaahexs/XVNfMK7o+WecI8eF06bWqDTcr3u1T\nlX6cFbSMMFzP70i+QZyJd6SGVySY8vFHuR7bJT0/WxmZZLog96RRjYMV4aP9\nhn2emOLuMwFMz6n1IKzU9cdeWAmcEG7l2raiH6utrmkQH5kygQeWRF73bsHv\nF6NR9pKkhVNoK8Ner0PL3omKj/RIGFsIz+1ON5xhkQpuaLuimEVAVlpNA9B1\n2dSANSmvdQWqcXdDrYiSd0macyrCZ2tkK+YGVhpt0mweyzZn25WPEh6pRgEE\nZwMHwQyzzyBTdfR8rDXat9OIF2L9IgV0tx7pGNCrBYdtNnlUbVZk6JGNGxwU\nnE422GvCnJzQ5Yn1R8s6eBm6IP+4xztTk4fCGTwHmFgM7qyjlMGf4ExjjhCi\nMxCD\r\n=alkW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"99e56121d157a5a30949b826c0d521a365a1ae59","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.654934dfa.0_1590626169155_0.6692106018384996","host":"s3://npm-registry-packages"}},"7.0.0-canary.41910b8b8.0":{"name":"@material/density","version":"7.0.0-canary.41910b8b8.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.41910b8b8.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c579f70c9146f0e0c6e977313c24748bfdb0bd85","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.41910b8b8.0.tgz","fileCount":9,"integrity":"sha512-+L0+z5/47JdW9K1gyqqgalQSaUwkUtZ4xo5w6cxABX+gWW5noUnidKEi+qSCzsaMfsf4pj/9eIAD4WynFBCsFg==","signatures":[{"sig":"MEUCIHaQa2BQcoxe8GYA9mlDmErfMR27EfZomdW4t1ycXWobAiEA6nchJ+eTchSCoPB2pnhVHlVjimXIygFqdhsRwRQAMF4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12956,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezwraCRA9TVsSAnZWagAA8ycP/ifeNJzy+TGPtxSLaCbo\nTDjIVrcT29CiQTF7ZW2eaUR7ezu+1QAdH8Dh4M6+9bKWV54ABdI06+GyN57s\n2mnVZQYXLeTed+6ymmfkzFh+24Mrk1VW/TX8egseVzbwwFfvQKulo+KyiGOx\nPmvBrS0LcYx8QOaYEPpwCx/cQ1eWZyVgrOWUVf6AsoTAD4yRX1kVoIY+shhC\nn22q92CbCBFD5iSS4i8NY9QEgl7oRuhcVZlu0YIOiUbFEqSgtAzz5VALzNft\nJdjzKjZ9JXmOV8BVTEVGtZ3mEJBnhdePa4e0ST9ONf71t8eDK6JZHYPYy1eN\nI57BEes6IG4bdW57HlcEF2djyH9tbRFiJq8eujfSQxz1gfLTpjJ7ivzVnt8t\nOsq/4IV+ewMYfFMWTzRQPzrThYqdVOfjnCP6hfGXLkBaU1aBDscRghqY9mrT\nlwX4YYR8OOuFnbj9xrJjSttg8wrcYF7ThckVi+MG2BsOd/dpNHgV2CcsoRI6\nwpFVT+CyWuQL5Vi3x/Dgh2WUqMNpiqro7zD2elvaadw1MPDhVSpRqHJzhJ31\nQ2AzHNAJVNWKA8sYiPLJWGL3iOjnyKh5DpQZWbm9r8G9BoGus4uPsdx3jAR0\nKXij+768pENX7jsEQ2jues3KscNRZp4TzwFcMcaI/gIjpBIldr3Phr6I9+HK\nB+VJ\r\n=Gh+T\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"14656d5f31e9a410c15eaf9b47530d57a5901add","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.41910b8b8.0_1590627034512_0.1125393295709678","host":"s3://npm-registry-packages"}},"7.0.0-canary.d66d22bf9.0":{"name":"@material/density","version":"7.0.0-canary.d66d22bf9.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.d66d22bf9.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"03bd07b0d4f21b31ce195b5d20e26ddcb8c40541","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.d66d22bf9.0.tgz","fileCount":9,"integrity":"sha512-nnnCykYsJuGEqDT9KFu4Sme0DKsaQBWwhMkNDLAyLqWvklWKhai58xU5n3u9kYBvDcA1IC8351Elro47Uv87CQ==","signatures":[{"sig":"MEYCIQDieAKRFEnxX5AYB7SiuVjy4YQSK14vHRld31GHP2U1xwIhAK227M+S7j+b/GzZsG5VzQLlyUNPOKvKpYTBdBW0+pQ8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12956,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0BbzCRA9TVsSAnZWagAAxBoP/1iKrvj9DbxHgwMB9A9g\nmb1b55rJimigl600sjVjudm0lUem28nmWwVa0nNB/HdnBb1kaur/q6o2Xroz\nIKXvKUDnAUsy4iVpY+GObhXU7fzy4Ind/bCQlSDYBl6Pua2N2vKNNNBStSU4\n52S+ypYwFPKHjm1wJfSHdRmTcRV4vClvmq7GQRLcdyjpr8XGska/dcWamlPd\nWzteaTRrWEqKRpskegj4HJpQcJgWBWhJtXpDoqMQ2YeNzkMcJhVCGj2AqidU\nckJaHGH11CpwGFSkExn7hWFMoJyXBd7VX7p4cqRnKRVs49uyCzV/CKdbZoIs\n5jYGCbv0qXDie9pEwdqw06k1Oww+OL1iINW4YPxk1y3Uyxz+eFJFgzJa5zU1\nEzeOpn8+GCMi9QVzUkbR6NtH+1/dB4+J6/o1TpagKhR5kZIoiNW7s4sCn8XA\ndn0Pqu4SpVpMcD2cUXcHBSKqAHHuFwZg/xyYMmYXZ5EUDYiGFvuB1iJJHhNv\nbPOhJENkxE7x7Zpqp9SA2Q8Sf/RMSYRkO2lerUW2kdRio2mUZMThqgPkRSSc\nvGO6D1UoHaNJ4fao0HK+nIIT6SbUv/+9DF/iPNFIXnUiVSQ1pYQuxdaFEdTA\n3c4jdOYDd3vk9+C0Mpt4erFgZIANuMIv0jjlkB/D1bCJBeVU18Sdh9ceJu3u\nw88n\r\n=ztQe\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"cc182def4daea4d871df41985e6d893429174b3f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.d66d22bf9.0_1590695667214_0.1484560835929254","host":"s3://npm-registry-packages"}},"7.0.0-canary.8904f3cbe.0":{"name":"@material/density","version":"7.0.0-canary.8904f3cbe.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.8904f3cbe.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8dec3ef67f753b9b852e0e234746994830fcc46f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.8904f3cbe.0.tgz","fileCount":9,"integrity":"sha512-HHgXlD5uvqurFVrEwLLrsMoDweCyADWIMVF9IGcEvlDYzbhm+Py5aUkEFzPDRKceDNscLCOHst5HUF4L7aY2Eg==","signatures":[{"sig":"MEUCIEVt8BiYtsY2b6Cv+PBgsdKfFfTEjwAkd5AjIOI9styoAiEA6gXf38nI9CVZtwhMSGkfDyO/ka/Kwak2v09eCGJH5q4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12956,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0T0gCRA9TVsSAnZWagAAWdEP/2gzo0UBYgYX8/ceFXa6\naW+tsI1z7vrNiB+aEAA6CHJegnadg9jJLqjOYEF/pP7qbWSDHW4sUegPajoo\nznKwj3XnaOcOF5LhlJXFXdIucVQFyzy81Oi+NlTCtRcqRt8taOBxU4brzi28\nNmqrPi/5WCsQVqSURbpkGLP69V/XBlDPDWiI1XRJY3vk+FwAuud8so/ai2PI\nfa+I/4UnSiT6WWGn4peki9UKnV0ooElJS1B0A/JJNgY2Tm2QVwTnCQo4gkX9\nQZyxo/G4f04yHVdSMjhvFEJe4TJ9s5q8CwmBrk/3pjzL7Grs7RChggCwfS/V\n2cLf10Z67hbTKWRxvImXU6ygheRukVszPKIBR+uZW6S1r6kjPGso9cd166XY\nIYf+Q60uEMEVSxPMSkc57ilSHCfESsKd1MLwk2XsvaiHgO3LJB97ESsDXK41\n9xIDj9CHEnPdhxXedKYhBU2yMEOqo2Mssypw02rkpXUxCYwfkpMNmpUxltG6\nshkBaJpaoByr/Dm0FoTyTF0rCG8a3cKHT+zjPuruyjT9TH33SlbyCl+L+Gyg\n1u284neCgGR2IXDz3PryxYT/C1FKHZgV6/H3O0+6DyDvkzYFcA5NQG0zr2Ds\n8AamvZDtfNERXQrO/s1JAZOZLAaW8onWcGob3UNEQpOSXpKqN2qVxJ0WFyMi\nJdg6\r\n=gXfF\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"f78dc612af1ed0ba397842886fe5bc41e32f181e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.8904f3cbe.0_1590770975943_0.745066878738557","host":"s3://npm-registry-packages"}},"7.0.0-canary.51512a4ac.0":{"name":"@material/density","version":"7.0.0-canary.51512a4ac.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.51512a4ac.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a41ab9df5f3657c03afb417445fc2731b81a7187","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.51512a4ac.0.tgz","fileCount":9,"integrity":"sha512-eOkmELa7NzXyS4BfJ5GNW2kVe2f2goe5gfmpjt4DpWlt8C40jZOOIAuGsahwUwMAEZor3RE7VAy0CE5kOkzSEg==","signatures":[{"sig":"MEYCIQCOQ22ARqGRbSIHiVO/wzLrQUw+P0B7A6pQ5nvBZoD8egIhAO/ZEvgfjQz8M1CWqgbXiI52rzRcAovfjhyxSYBThbT2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12956,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0V8NCRA9TVsSAnZWagAAEikP/j0aQ8QYQ6e+PoKMFnPE\nenV3w5lQop7q5VftXHTz8Z8a+tY4SzfI7ItEXi/XdAs4mVtajWGRvsh9dY3t\n3ShQFcWn0OvH5XuEJokS9pHnIAr4kEq9+mHDf1Qjpp/48Lt6iLv9FeT2Xdtr\n+Qsyw3IQ2Xdwr1V1tI1r18xhz94cP43SPcPbQni+fOsQjVFKvWuJxfxq1gf4\ndNbW1bBH+fKivfs3klLbUa3vMZbb5ViFluyQ8rTvktNN6gntbLoXTfeXL5SS\nQFRj4SxNPbxWnz7RE68IBb+k1XwiFdG2d3w0FIbLC8A0A5tZerHF+kx1vtFf\nhIrQMGvwrxKNl1zbQ/uZzjz5WTmuxvxBV7rcSnvz0FCKRdzqpMuV/DCwGM+4\nJ29VsD3iJIeFiDp0MJQ5WlTia/22IBM/0txi9+EacN0YpGFVACrDZqk4Hoa0\ntlaXu31taMdAkPKfKZvC0KbuoR1Ey3TIZECV4K5jayopMVZiADecb0TlItR0\nKHYeE1XJH7spAXuGjniM8b5b9TiozwkfbALWKP6HYaGcLHtoHjoIZyFM1WAq\nJZEFLmg3EmBaZwktwBi0/+CP90m7ZI99xpAV23wtVPA89EO2vT00YJuYlaDi\n3RPE+NP/V0AnbP8yukeNx7kRUmgXQz9mixiIC/Z0vLI8DUKB07e+dSBOIr75\n8zzJ\r\n=hhop\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"d5115fe8118e1e2bc71fc7a491f672b079f281ab","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.51512a4ac.0_1590779660868_0.7092635786960124","host":"s3://npm-registry-packages"}},"7.0.0-canary.0743288fb.0":{"name":"@material/density","version":"7.0.0-canary.0743288fb.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.0743288fb.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a91cea5e25bbef00b57b5b7ee344f047bdac7b8e","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.0743288fb.0.tgz","fileCount":9,"integrity":"sha512-w3VWNRk7hCNloFiu0IBBx44xOs3Obt1GCDiXLFbWVEvKo2Vfw3yTg7kVuUBNHgrJp1DjfhHiCV7UqARVPkEkBw==","signatures":[{"sig":"MEQCIC8HR76C44tBWMg2rObmCMmVaLBMIIfowAZX4YpNrUurAiBzgJw1h02lpJIL8OWzosSnid3lDTJT2aDV7Mnv9W00vw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12956,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0WrBCRA9TVsSAnZWagAAm+UP/RvUdXBAceY776fCwDNM\nEMktzhIAzb142u/UTKYxBO/W8eqVXupIgN+VI0xpYisMkFrWvehfKgEyc7tW\nohxMuLO+QlhMBsHMwmHh+nAbKVa6RCQw0IIX8gpu6TdUcD4+UVFPoqIDKX5h\nyU+YqK6ESDtiNlwinql6i1Wv5SWidhY66AOfyWVbQiM5h4cU+LpK0QK+/4r9\nT3Q4f93fWa3g6DvOvibxH150B9tYByNKH2eg382NRoyubqLVict5wiPJT2sL\nMwnAOQBeb4PJF4LYsnFPO8ubdOD8sSJxhQAY6OpYfbvh/F3VH0r0tqsXjr/U\n+UP+QOk+PgQzLYb+xUSLkMjIVBf1Vsmeh+sRcIFlSSJ41ZEuBfbfH/sk6Zbz\n+mR7CC+HaXZ9Azu2zQtB2tvOmvx7BubUgio/ZVihvqe3Hf+1UX2t9pVe+Hyz\nDpcazc7wZ5Kh1LmBI40EgMSqqicAiDFWqGpaGxkCAvCNCV4of1sUVbFD73kP\nyVjQL3ucuLaqWog+DSwycpPY2Fhld7mS+0J7y0fFpKx7eX4kbv8j+08p1gV+\nuVUQZp0jmWV//vfEa8delxdFTPT5PnA7471ye52rE6wTta8Z3AO3zvLkSiTG\nFLEwVXuJlHntW1dZ2lWuR7kw0BJNC4ayCvUzAOOEmRC4HkTJkZIMXBX6duWO\nmIF1\r\n=L4sV\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"e0c92eea0cf28bf0f2367fb0666eb8592ef2f8c8","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.0743288fb.0_1590782657073_0.5019882029994254","host":"s3://npm-registry-packages"}},"7.0.0-canary.06ef147b5.0":{"name":"@material/density","version":"7.0.0-canary.06ef147b5.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.06ef147b5.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3e5afc17645c3c265c94e814646054f5b89c17f4","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.06ef147b5.0.tgz","fileCount":9,"integrity":"sha512-tWEr/hzXQszLxuhTVq8UnRhdFfglZO9d1cCRNRxpJJiEEejyYmH5BUE972OoxDEmCwCQQPRd21GiXzExctHJZw==","signatures":[{"sig":"MEUCIHxvk66N4QAABU+DXPimp0m7+wgZzrEpwxm3YYqzG8k6AiEA9fb+RAvCTqgc09mKMvO2p/1t2XAGFRwoSBEXZj9hdGE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12956,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0XMdCRA9TVsSAnZWagAAdg8QAJKr09f/hLdjav7m1gIt\nVaAe759pF5nvhJg8a9YgDhI2fhE5/KkjplIaOCbnQDnU+D/9ltbLaHcWKpwE\n1jwCRgPu1Pu2MhMTZKYSIgRVgMlyHxeieJzCosscgzeUKQ2DSJ9nvlyVTDdH\nzLtTd0ZqhBDFFTzlYUUctslm8Q5fkCdEvbHfLMK9DWPXZEhlMVKez55ill2L\nqYCNR8dhaAJE2Pqdl5GYyz+3wMXriHlHgtjopr/o1TzMULiz8i8TWIxD9+YK\nRcW0xAaTq0Lq+gx2IVqPKKCiShk4XU1IUmyG9kQkyKdr1+80vfXcl2YV50Ui\nSE/Jvm6TNMzmt7hrOw+3vKS0xWJfxsO2TzJk5Y1ZspDSL/Hj3J3tGONmFYaj\ndTh0NxgAOqT/nnVAf7ficBFRifx0xO9xppcOMl7RC6+BYl02ZX8J6tg5ZoD0\npX7xMo6mOxFwsZzPoCB87imunC8ie9AM97W1xOeqZNbnQKX8S4Gs2ZfffMgN\nTl07MMkPo537W2oq0xC1OjlYbbTaCmHBUPPFPPqeK/fx+Evatlwye8SX753U\n5LS7SW2d7i9NH477M25EAfqPt68NyhO+Q0vmDjcdWCqux2gb/LNbMFcbCQjs\niZhH0dM0ylQARvGs4pBp38X1F4FembtY0l5emf6YROVwrT2O8xDEHC4Vt01a\nL7em\r\n=Lqcc\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"43f043010a4682138cfe1d453ea0460f912fc2ea","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.06ef147b5.0_1590784796813_0.9288220917163037","host":"s3://npm-registry-packages"}},"7.0.0-canary.8073a20a9.0":{"name":"@material/density","version":"7.0.0-canary.8073a20a9.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.8073a20a9.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aada2d5d0ed75d2c791480692ced22881100ed3d","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.8073a20a9.0.tgz","fileCount":9,"integrity":"sha512-uSiMo85n4syAAJGqs16vS9Z3Ed6lubgcvcjjXdy4+RAK73exSTc7rDmPWYDi2w6NrLiJdWGiqDEBSTdu7Dvukw==","signatures":[{"sig":"MEUCIQCLvAGjGKgKpDH+j1jCl+hF/2IpmFm8r3P+ObbZq+9jowIgQHFgotuNBGOos/kltCSXXgfDV87vH9+rfjeeGPh1ST0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12956,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0ZnACRA9TVsSAnZWagAAKDgP/3zV7EULO/l1aL8SYR/S\n3jcCSCx5ebIBL+fzb1EqKWDcMQOWIEnKlA3RzRIAjPgNutFXd0EH52c2xc4e\n2+v5ZlwMQlikGJlZvxbnuWS/BONn+ohNAcbFqH+oy3jKjJvSge6y14iOZc5Q\nUHgm0Em8qVVokGepMra+UqXgbB7WBhj3hlAPXzCQcJBNBf/uwjAMaqdHBNDq\nheQpOckQW1pwcKK/qfSpVqWAlHMxsqhjDPDMB4FXQd3RiD5FMhE8O5JEOu4h\nCcH2J8/sblEp6Qv5sT9024B+515203VZvp0WXgdrbMZY+DcrSXC3O0x2ynZM\nlXhc7IszYp/+IDObarTRYwjtgCjHTMQV0qQy308lgKHb2RpPFnYPIcRn7gFU\nhLAMaG4cW0K+UVQDYNYOuumlHpJk5cXNO28y+4VY0/g0RvQxCP7XOwdAUmQE\nAHmUpxHPjkaV0Jmy/eqrTgMyc+/0j550PZIB4iJFhVzK8CFJRFtr5WZXBjOX\nViQxgsbNszSxvMADsF4QHi+XA/jJh1YQR+1XvnC+47tfnbofCFKSvQd4DnfQ\nI5Q8Fkq7D1RaukXe1ehkQWQjll/BCkySjY5kU6nfoq9xlfXeBeL6TSnEFbMe\nL/9x1Ua0SvHikFf5KWJSYMqVqwBQZlT54BG5uVlj1uLa/M/kenuzQOfb7BzH\nmhKF\r\n=4Ec7\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"576fa22ec00234b59b1dc4215b8dd1ae982c7c8b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.8073a20a9.0_1590794687557_0.16570152873787025","host":"s3://npm-registry-packages"}},"7.0.0-canary.72ff42330.0":{"name":"@material/density","version":"7.0.0-canary.72ff42330.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.72ff42330.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9653b761b06d868830db8310e4c9ba61ab0f1f74","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.72ff42330.0.tgz","fileCount":9,"integrity":"sha512-5X+6q6FdOjNxHpyPAS4A7wAXc2dIllEsC3TPRa2GBnsuKERG0F5EqR06h+kuGX+Mt0VVL7Uez7JaKYgo/gWOIg==","signatures":[{"sig":"MEYCIQDhpsr8WCAW90Q6RNG0/Bj9lNDTUr0AQgekbKuuLr/X4wIhAI7krVSnAXvmmsmPa3qGRLSadFMuarWWmmtcKd1PqGCl","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12956,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1TAZCRA9TVsSAnZWagAAVWwP/i4PBYK0AS6GGYBFB9Be\nYlkZQIAEQUctk4ax3RlW/VZ4hkGTszF6HFqai+cLeBDBm6qqngG1J61PtXRU\nP8NUQEl3iF1URaWz6j/ikVnRQwaYkkqz9QDsTR677JEJNeoapnVAKzVhwOmL\nScNF0GBHsi7SGR6YhZqoDf3wsrVR5qNHp2/4Srqw1q2OIPEStC4OS+obHtBa\nby/1b88LmKLuRB0S1lEMSGymgr75coZV3CxRurHctbY+cTY4RUzcE/JIpJsY\ntxgJblTHoevPUV0hG4ID+WZ8RoyDT1fMYEeufFvHmVHoHrtcfPGAxk3uD68D\nyUwp4qDsP2sFuivTa45s0M3n6ZQJ9sN+1X6K7OwygBxbf6hxIjP7dVI2GlHI\nPAl22S8l/TXF7Rc5lgWjxLMrePoMr4bIRB39rF13HYAKsSavxejH8aXyj0kK\nj9QeWPxdWKQRWcBQFqfKbwHFcRTKvzWAXT76OyhCB9RyUzoo+BIJ3vntJxeX\n9UxScviocIcuOX5TKgXJyHCotS/6dgUxSY6NzZYDfUhNU/tQ0OR1QqxXt1rY\nYYoooQjRH3oaDku8jcLICxHJPt11vD6X7S4lPUDfTpTCHr4IfaUZhjh9SEbk\nKYr37dHw1NZ5igu6hDOp70YHno4axUS0FFW93Rdc5kx1n6Z+Gjpyv4QES8TI\nNrM/\r\n=xjiE\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"4c820e9d38fc1bae9a502ae78e336f0e8381f432","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.72ff42330.0_1591029784718_0.36450617372717486","host":"s3://npm-registry-packages"}},"7.0.0-canary.9ea52070f.0":{"name":"@material/density","version":"7.0.0-canary.9ea52070f.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.9ea52070f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9e25b46102e8097c26462e67019bd4991f3b8ea2","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.9ea52070f.0.tgz","fileCount":9,"integrity":"sha512-GssD2mORGdxhqKunt0ykDkOiYincsqu8m3Elqhe0us1XSCmGgQLQAOjAKFK5c3288+qbR7/8YvR9Gz7IT61Mag==","signatures":[{"sig":"MEUCIGOqVBoH/Bd4dcnvnmmGc5M2950zEwXtbhlgEJuRwh7DAiEAtpeqwX64c7wrZ8vjD6s1UEqT2O9u9e7NnbJqIWwKSXQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12956,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1TFTCRA9TVsSAnZWagAA0PAQAIWJ4tMCF969er1usDEv\n395tJImJlRkCdxwwmJbawL9HPKLCFmN2kiPeyMZW7HBnbpXD1e25dHy5AgA2\n9XumIF3XxpKnUt5Vkkys311F35gTF45iiBtA2XPYyacja7FR9IOGPw53/Mv4\njnUoDfGnEKKMrqO4QyOOU5IU0pB8myi9GUj60f+wq2lJ99C7KSBvFsi14k9A\n0eKL0EFGZbwzkUYps+KMZe5OqCInN+jxXAlB539LoYcH1wSqCnaeX1NPjjuf\nZ2RSJMRfRHtjQ4qqAyA0n4oTzqBbe0fAkpFT3eQ/PsEAR6BCSKzltAPGKcik\nSJriSJQbyKY5WvCkMEwx9ta+1GOegpbyrR4myyoHXS+r7oapG4WdTbeK7e2o\nqYiqMxXmXUKqZd7j7SxQevs0xkgHnkA52ODUHLcbW4BQ90synvREDXyZ63rS\n1H/XEn9Wf0IfD4G8Hj8tRfHXWSReATWNTckWexclTsYi5VmjgEP/FVJPHfd2\nLrHDC7lYytbEIpx36fGFV7Q6pZXY6A26zxRVTenIs/P6aF/AlMDr0GviqRKk\ny+01rTugxiAXmFgl5X2RF/LY0QIptNqoVDVgl1kxa4zyObYVhFTWVIYrlfHc\nprqUKI+J59asMQIrotIJU2pw1skOWCGZpCwYs0qRt/Jxq6khcZ/0yYgX76TD\n42nk\r\n=FsFP\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"1c7aa3231ba2d87e7abffc33fbc156ee0889131a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.9ea52070f.0_1591030099167_0.9947844386684384","host":"s3://npm-registry-packages"}},"7.0.0-canary.d86ad3b60.0":{"name":"@material/density","version":"7.0.0-canary.d86ad3b60.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.d86ad3b60.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a5fd87eeb757617db86f4237fe38e9822c7d9049","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.d86ad3b60.0.tgz","fileCount":9,"integrity":"sha512-if+mJdVQI0pR/kdw5QuyALRu9eyfqDX8AWoT+cdFPoD0/VlkaafE3bBNs4FRxbT5A7WpY2GlcQkqpp4KstDXTA==","signatures":[{"sig":"MEUCIDUIRj0Apal2vBBfA0rN/KJXa7yzBPxNw4+RZCIySHCQAiEAkJdANfmqGzJRXTqcsZTiMydDqY5cdIPfWuRtyG4WTgA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12956,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1T9UCRA9TVsSAnZWagAAbd0P/RnhcIbOoN1kc1fwrHpp\nuctIlgC4pNHyegLngb/WXRb2uJ/cWAy3JWJW1EDBrOzbb7WeNyadgwgPTG+6\ngz4wqTgH4Z2ik/3a/anvfLMN7Nm01VcFRTlOaz4Fm0jvH0WxQ0bpTHMS4qXa\nomCurOy+1iQzylNya/TNRikYXMZ6CwK8V90xOmw8zXStZJ56AITjgj7jhTis\nG7ETnDw5EX+mLVeev/4faUpS4ZvNxXs0mLqmN3KUutdCXaUDgaDz0CfIBWYP\n0Y/REfNCvmHErDsnLs9UZcXf3+Dednp/rhpsKy4Db8xvruDcQnddJtr1iDGA\nDBB3RXwSE06+PoE7dJg1k7nljqwwgHfR9JoqGnWPMQvnMrqAGpOM++E/No1z\nlzPX9qdRJH/Wd299SyUJADj8xKibFIzMXUX8K/eEkygWDZpsEHLvHjPcHOne\nExvnZu2dQ66YRUca5fa+oBbzBuZGa8c84djtxNY+Dinc9V7UMyffhsBr4Whh\nJSzm6XGJkdNLNIgHqxDS2jyqI5ex+HpVX9gcAYvwMn5aZNBfe4daV/uFVO3N\nT/rLfOhpscNwRnCAECPzHhy6JibSKUKlxhuGRT1lsWZ3lM7VmVCOblH/d3E7\n47mTwCCxMZulP4HTCrtapYZdFDwjBTQL8d6tz9kWGyi9WDPVwLHAemMVTVWj\nfG7j\r\n=4LPs\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"ff64ee77c98ab8a932f9397689714c078eb9fd02","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.d86ad3b60.0_1591033684253_0.46196219231703095","host":"s3://npm-registry-packages"}},"7.0.0-canary.b9776b1d0.0":{"name":"@material/density","version":"7.0.0-canary.b9776b1d0.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.b9776b1d0.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7348fb22d2036dbac8f98a10767f53ef95c4a8cd","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.b9776b1d0.0.tgz","fileCount":9,"integrity":"sha512-w54F24x+s+MCwfgTffjPEdpvC8a6/eZQGzNKKax6KXC7uxJwpdZuR3NbJ5xEwdupPv/XMWHcak2AqMYEMyuI9Q==","signatures":[{"sig":"MEUCIA8uQCi0c33JRDr4ISDHIn7sMwLh47S9R9nbQpeTJxmjAiEAuQYfQ8dOyIcjGAWtOhBlq+KGmks34mOfo4cqTl0jArs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12956,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1Uf2CRA9TVsSAnZWagAAfNcQAJ5X/2QMhjXycNg7aFJN\nIydFJC+fQWS0J/o874U16ibSSxTK/QXawB1YmENkByo+Do1jf1ND5iimc7LF\nIBGaFGOxe0I1qDs9mDYo7y1GZ8CZfzFrEXylkMved/tkWdvj8JqJBdUU2unU\nSmOpc0o4AbnjMvyoqp9IAWF/yJ1Sa47v/3bS4uNsT1EgIlurqxbBeOivdNEb\nDIGaaSjslpJhPBfPNd8lWcWgfUdh5w4jVi6EBOBMJsOF6i/CvHFo1GSpvl5u\nph/xTVS/fa1ZgzDW6IgaDqRwLIRJ/bj0g9echA7VXgm1i5p0xIw7htst5tQG\nSsAXb7xSSQhzO8iHxr7MaVdzg8VMkkAwIgyr0HtZuE+udT7h1Wm/rR8jq9zO\nA1wzVUr1pF5TEtB8bdepY+tOFBP+1W5CkyorcvTgD5EqcUPPscIaCPprABhu\nvs6/uRoKemQiZYjdhvnAn/DIO0g5z41X9cLwHebmZX0QKsDS653kg0PYiaiC\nc9PwhW9yZFbBzPLJ2pZcq6VdhxKak2MLZd4fWw99FDtv5lcK4tc20bTazUDN\nNnxZrkeWqOeVvk+wLz7aljiDpY6EKHYdvhVmo2xkrq871fP2VbxQw9YWofxD\nSFRhFDRbWmc4VJtdONMoCCL79xUXH5ksTQ3BGDa0cWjM+XWEfgLPsING2Wht\nCIFn\r\n=x2lK\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"d43f6785558859ab233dac12d042ada9fb8c1b84","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.b9776b1d0.0_1591035893464_0.1286574524425259","host":"s3://npm-registry-packages"}},"7.0.0-canary.ba6f7c294.0":{"name":"@material/density","version":"7.0.0-canary.ba6f7c294.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.ba6f7c294.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"703777d3f7471511d0669816e5fc8bf7562dc708","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.ba6f7c294.0.tgz","fileCount":9,"integrity":"sha512-Tx+KCDGEfd06qXBeUYYzP9YBG0sdUp5nAUg31BKxYHM/Txg9FsZe7v66nNb6+wtMmfJUOBZcvxiVvtJ00GGhcg==","signatures":[{"sig":"MEQCIHqrV+PCIi6z3FHA5j4sOyKPVTGlMjKsfK0DtLx86gfVAiBUnbzikV2y1gau3zueHgraxA9r9b1wZ/bTYfV/rHWG7Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12956,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1oYDCRA9TVsSAnZWagAAeOgP/23hF3FfDj4DBLm9feR8\nn1gXUCcjQnFcNGu5IYn9OXhwybZ0KMUz5KD3Qxt9XlNO3RUOWJPdyVdNlz9H\n51o0RK2YZb1yNqUC7dCUhGKyeGybbi/dbyJ9/huxy5UwVrFO12HphsEQTiME\nXJ4WGdQboJWeRB+K8Th7t6gHy62/lJ2oDw7hQsnkp47q50d1z7O0RiC71xDU\nxjBoap5oyDD43/IOqTmXIyhBi2I69CcoVvhZjZAMnJJQWp9WqCB1LD0aytMz\neKIZRimvBbqr/HHW+BhLGvA4JDJ47cx1/cuFTqae0KKJfmqwxDbFbPASSGZh\n06Tt1QPE88OzD35QuvuToD5/idfqrYF1Bcp6AbPW8jqYMO4w6QrYm3FKs8Ng\n6TsvJfNE6EIbLjbMKz3EK7LRSeDDGQf0+AQtmHn07vDacnUHhbo4tJMqSTjG\n3FHLYBDW7NkV9WxvbrU5rKfEue4HRGlirgmH+RjjhwGcKn7K5f0CuT/3NbNN\n0B9MBXAYOjpjw6XkTuFAzCk9bCBrmiWTk9V5cVwdL1AvhibEwxMeG2haznND\ng+lFuDVU9BD1rYpqgqcw2weKRbaCeMOLQgjbGuwhnB1RRKbauEjG/GJXLJpl\n0EEGw5V0W3lTsUCtKSimQMyLK06dWZXnhcvUVBVBSfoaIbfXbHPr0Gs/hQw6\nnw8X\r\n=VTi0\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"f181fece0cab022dd478b7c2f4b768aa14f7ebf7","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.ba6f7c294.0_1591117314585_0.1869441033632666","host":"s3://npm-registry-packages"}},"7.0.0-canary.cf3b664ab.0":{"name":"@material/density","version":"7.0.0-canary.cf3b664ab.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.cf3b664ab.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e02b4e2204597540edcd572c103fe17dd494cc25","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.cf3b664ab.0.tgz","fileCount":9,"integrity":"sha512-k/Rs8oXQY+1r0L7XqCG8lXAwACpp0FJkJUrmLwiZ8AehCnbl/s8O5A/wJo62XxbJcbTus0FeHmhyW+w0dM1KPA==","signatures":[{"sig":"MEUCIQCmDDcWa9QlOn8//8Jviefvbt1vrSxPg2e1RSuGybe4dgIgRcbhUIFiO4yUQDmXyhaMPKTxSCSfl6rMRqQoWo7WP0c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12956,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1pjxCRA9TVsSAnZWagAAERIQAJsM2NxSD5Yeyf8pk4Py\nFCIwZ1alf85AwQ7cLeggP33VCNe67Dvjw90h6eOgKLSUrrCUYgMvwyMGtUOq\npHBpJEI5wX7DohMERiIjDBGN1vgt68PWkm9rASlrzB4rkSRgaUx3g4m6rDhW\nknrG5YWEAKOCjNOtCaxgWIdAUxVtQEkO98Mt/wQ6FBB4LXGgemnMrKh9B4Kl\nuVgoGUhuntrdH8EAsgIDV1D8/tSdX/iAja+ozjJ3T/6oK+LZW3Iwlt0o5t3N\ngLDT7v7g5WyMR1SKN3O2vcsrLXQonETZCy5txWcSWqhVOmbVr1LruorGfoNL\nsG5tTI3tXXfTMSBIUHtws/7yRYLL6VUUKFiqvigg44gR/nZySaqBZik8dWvx\n7ND35+t3mL2jchz9uZWgsL/Q1fCl17F990EYx3VM86ELQ50Sf2Qt0XU4UpRi\nrLhb18J3uHXItc9yp1iKGVNDl5+FmetpOtI2SgQSRgli7DztGVm6Cm5pdWWm\n5JB54n+y2StTU14C6ctky85t6D+tyCeemlnEIW1SGq43p1iXftHr7C/H6Ph0\nZuiJouS7nlbMDuXG28Y8uD6Y8IBPt6LuDWpqbaFYGV2eGQLpNfHsslWEZXCq\n8kHtuTWLYZ0HIKKVIfyixYGIQgtzh4WFSrb/OgXwWDEFmGep+/vTwiZwMzrK\n/nuq\r\n=sBqh\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"708ed8576095ca5e673311fcd970680f855a7b59","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.cf3b664ab.0_1591122161338_0.8131562268475907","host":"s3://npm-registry-packages"}},"7.0.0-canary.4ba3c9a31.0":{"name":"@material/density","version":"7.0.0-canary.4ba3c9a31.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.4ba3c9a31.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e6187d5457e6c4d6ebe9d09ffbd01389ce9dec48","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.4ba3c9a31.0.tgz","fileCount":9,"integrity":"sha512-4WDk4DivGTHN5IJY46brePB9K/iHJhYFn+f6rNR22SqfVusmv03lgP2VIuo7ZTp5EfxfjdoUWIvXgS2ObdWjCA==","signatures":[{"sig":"MEQCIEbU22sVyw+x9D/pOhGsewwMl6ojhB0FtJDrHhNyFaR8AiAI/rVIiYqGT/HhdrX4A/Bd40SJ+5z319mIPJLLiGGSlA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12956,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1uYCCRA9TVsSAnZWagAAoCgP/2zLQvN/tMV7/BGcoWVb\nzeRWo54x1monQ72Xsmb9MVlVV3X8kfyTxSZVa61z83GQqBOag+IQj5naDuIY\nUzogcd9i/fk7UHwt682MPw7crPPBivCoK3V+EUGoNj+Ct6WJzU/eJTfxgFIR\ntjw1f/7DezK1UaGlE00KE4Cv2ye0Q8sg+AZp1t3MwbBUQV8mwq3c6N2SUYPi\nrZ3TvTGcz9yKgQCSWgIrsoMf59A6bZQZZVXQeKGgA0GyvbrDyFwwxWjwlXxR\nPaV7+ImtIgRsxBcIRIG+sA9zn9rd10nHo+/2vRvhK5arhIhxKwKvTrrT8ZfZ\nkYHP31/8OG+tL1LICAeqvxU69QZ5onXs5uaEmoOezw3LOlt4QSesC4MtgZen\nMHs11PsINu7vngVELf3vm//5jbYZAhGAzK0UTh0f7WksDfttvBILL3fYF052\najNF/7vb1GExA+bmLKErwweKduVLoUttmGWEjfOJYjaav6wYrQ4P18cPq+Ve\nuu1uePfnDBknCjv/suV3/3yd/lhbJj0LMN0LMUMicSOcRW7H2zEn7KrKkodx\nY8pjsCHwh/2/yjQ8n3TrllO/Id1gLJk6+UUmyzWKcPxNmdjqTt4IiXl8gYrz\n098cLyAgX6WMPE4ZhvUW5ReI/VJwGz1yDTuKG1xwnz4kuZSHPNKKmpSJgjl3\nYQib\r\n=5LLc\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"cf7f823aac5f803db06863c865c07f432ec4fd09","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.4ba3c9a31.0_1591141890335_0.7467681681232103","host":"s3://npm-registry-packages"}},"7.0.0-canary.388b042c7.0":{"name":"@material/density","version":"7.0.0-canary.388b042c7.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.388b042c7.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eedff0adddd832827e1486b527d5249d5a718cc5","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.388b042c7.0.tgz","fileCount":9,"integrity":"sha512-WP3zgzfEPtsREZhUyo3CqkuCVLTU9VADuS9QdvqWQAvOasZnU0GMJ7H23RPv5VLMzNVOL0zcyjXdExBe3Mswew==","signatures":[{"sig":"MEQCIC/9B3eYKZHh/dHt1VIIKM8/guLxlYhgPBaGI0A3PEM1AiAX3+9AT1okfLgeykO1/XhBWGTirf1w53GVKw2wO4LnaA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12956,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe16mHCRA9TVsSAnZWagAAjxQQAJWNjvEQtttsswrmxXqM\n+yi4v9Tc38aZsQ7NfRgOxYZdVNnrDjNKe19EaSE9xJQao2Lc8aI0kqMuaMtQ\n4ntmKWPLFdISyE7nz4jc/HxIurj6hRKcQ2AcCY660fF1lECW+ywh1lOwK6rm\nlfa1z7h8Y0xnbfCIII4OYQMmVJdXcjSr77iIYkr8BWO7SUZPVE/h+6QZZxBD\nP6eHDHufRlIanLZd8SxAaiw2uT4SA+sqQr/vWs+SzNr/Qju7Vof3/a0JureX\n5x43Yccbk4kolRNBvNu309/0q6y63YgMDwoB/hKiSz92puYiwC/Ynui+cm59\nYmqB1bL2tBNr+st7nl6mxg4Ps4qmRoHxLCSB5SRt7u6dO8f4u1+W0U61nEDL\nbfALqVC4m1F3KuufVrYab2p+lNYQMWviruShkRC2Qw/k+tjJHED4CYBJV/nm\nNfjZna2B0kgoK3SRbnE47uGG/Lu8Yow5xdRakWwKfSfySObdoWdWUmolIKmD\nyjrfJp3LKStSqmNKfXIoPYE8A3unJOk3Jj9Rqyri89/01DOHyn5NAXTM2wcB\nleeJN73Ptdsdfr2eD+lGQPeNlI/J9FanQppizgbswYqn//5I1J9FnrvmgqCE\nGYiT5lCH2P0pEZXxdnOvFuc8nH9omdv5nBDOwFtaLu7sgnI7kJC3r/gxCddH\nCeL+\r\n=aLyP\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"7c9ddf94f1ba2ee332d7acea141e5022b58f79ff","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.388b042c7.0_1591191943391_0.2753828141260062","host":"s3://npm-registry-packages"}},"7.0.0-canary.cca1ca84d.0":{"name":"@material/density","version":"7.0.0-canary.cca1ca84d.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.cca1ca84d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4b2f095a3e48e908ff716a3e6bc9c5eb15587922","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.cca1ca84d.0.tgz","fileCount":9,"integrity":"sha512-UKkTh7ApeNoOeeTUyJ9zUKnyCAVgSjsF152xzeIRt5F28jcSpdY/yxzqqH6Ws+xtEw2Ssj+fO9xJAWy13i2R+g==","signatures":[{"sig":"MEQCIFTDQwIVcx5TU+wdcpbQixRjp8SudDq6tduBMgh7cxBgAiA29PmPNx1g1sYFn/nBDxLfNjpbWkUklNiETrH0qiaSwQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12956,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe18lvCRA9TVsSAnZWagAAtFYP/j1FaI2MrbPlcK0xGAu4\nz2mXZ8PHZjHXa9lWeBUZ0q/FGbo8Z3GCzvItFxQ88gwOUuywfwLCV064Avwi\nfYtcFBp15MABMgNkBlTkn/oZal1GuDzgRf6mbCKvLySLhsnskN1JNRvEgFW/\nNSVF8yK7Hdya+M8iphcR5dVrQsjDZ8bOHbs0f+VTXEK9xDsneqlB7V0n2hk3\nduEz7gWhA8i0wf0YFIdI/y7XhKbFlBM9dedb314LCMhUlZNz4WKW9jjnWYgu\n8wl+58dmyM3eZ/E+zresM+689z34A7A2foNvIrj9e5Q6tPdSmK7zmhi/quO6\nFsaI4x0QkQsrVZR0ZaezyxoS+9xJOYdq3rwqGP/jWqboAyyqOQjjQ7l56U2E\nY7e/TFjUrxJxKZsxgFJ1b0pIbqc08mcNylueGY4Lv2jieIPZA67tmei4rM2J\nwXfcjL33S5wcZGLagMzdsMBZxm28zWJmnip5AxS6zI/fJuAHW9P/Qns+4U++\nMnSEVQkvFakH74z26mqsX/dcN2UdH9RX2JBPzzjSS4DlIvYFImjHB6BUxLR8\nZV9WewqC5UWxuYsC4GbfZmj3Q7tJY+OkXOryNV1SLJ+Y6ELpDdlKJbAAR4GL\nF23kbiYnIxuv4hiQjpqSvh84QIqk54zKzRnYhqjkDrrp5YLwg92qSQOlKiTw\ng1b+\r\n=cBWS\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"f154bcb37f9df5f07d3c6dd0c397a436794ed609","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.cca1ca84d.0_1591200110419_0.8312200942134014","host":"s3://npm-registry-packages"}},"7.0.0-canary.9b0b5f2e0.0":{"name":"@material/density","version":"7.0.0-canary.9b0b5f2e0.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.9b0b5f2e0.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2ac15c39e5f89932ac3446c62629de2a78760c22","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.9b0b5f2e0.0.tgz","fileCount":9,"integrity":"sha512-wuRJe40ar9Puj1FnyLFhrTtiqxpNtAbhVLWpygMKstELIaT6sSlsIlkpei70mEO0TvY7quFRp5klnKFg0KRQNg==","signatures":[{"sig":"MEYCIQDqsdbo5lXuvT1teBBD9iMkaTJmfl3PLQlg2V2cHJ1AAQIhAKnW/TNE+6o/GPfhNUwMUEhwf9x5lJyBZ4+VYdj1kweO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12956,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1/JuCRA9TVsSAnZWagAABNQP/A+xyPrsg1YnzWCMyIsL\ni8E07YisXnpL7kGEaA41EzBFIely3K5/kKSuFYejvYEsgj5MpjuBDhqL892x\nmV1XBCAYpKYA9rka9h6/HOyIhBuebRZS78InQMhpfRb1H/fDJoKE04sBVOmX\n9yN6KhwVLtG1yfYPh29eE8U8FC7But6NN6OpVvboQ7GL59yJ1ebDi91mfRod\nRTOow60eeqM4veDlSCbTKeo+yp1GepNvcwJmdokQTKLaHRL1U7uWRtFEX4R4\nZOMB4HJih9F9vlUHVLZZ6R5evuOWZm21rh/tZZLb5b5DrJOZ7h5DWx0fIHdU\n4bIIBquTiTQ88eckUAC0fukhhJLmBuhVHpWVrsihA2IH9j4UIGXm1E6xHALF\n6RmofY/WXwiX+tLN1fIVwhU7yV2RVNx+PLPqtkWVkhwQqPty50P/gOKhuhRN\ngt4mtthi7GLy8Om/NOjyTZO4GRDvNwT/pIWAu8uENsdEYXuEmWPO+nSrE//2\n4kaQ7hCuh1WaewxVBwCVzO0AIH1ODZpHEs3ULRV6AHiYjTqwX2T9A5nLfzk3\ndvJh/snXEpzmvEdFWPJTk9ExMl7Kl/2o4jKUiPJsCpU4113FmbyrlDyqXQ9v\nB72/IE/tG/OCV9rooHjFaUDfRTI42TWgOUXN2y4+dOdru1CZwh+XEv58+Sto\nlncW\r\n=KG10\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"35348e60387f88e73ce8e1376b7f352877821cb5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.9b0b5f2e0.0_1591210606513_0.1532579774254974","host":"s3://npm-registry-packages"}},"7.0.0-canary.0a7895f4d.0":{"name":"@material/density","version":"7.0.0-canary.0a7895f4d.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.0a7895f4d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"65baa73ac45766606e1b339e4ffcc8ee4735eaad","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.0a7895f4d.0.tgz","fileCount":9,"integrity":"sha512-xO5aMGOIeEsDdYXQXV1nsY9gB4i3Jt/m/iM8d/k9+QhmUUOKiRfYG4NmyHRlWzkQg1SWGd81fcu9z8VqlSDy3A==","signatures":[{"sig":"MEQCIALnNv5PLmI1V8o8TOnoZv268iHQvI9vcx07dQgfoTkYAiBH77SeTjIYii9G4GhrE6s/PzZOdNAUh0JuGMubCALRXg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12956,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2BE/CRA9TVsSAnZWagAAXvYP/RK2j+HyJJ51ru3nVA69\nwqKBtqE6SDudmgKREreWR+/5lyroBYPZqTreWIHeNdsBjBwX1qYfHAzSVblL\noB6xPFHS8LEWAC1UOxNHyLiTqUOmtZRE0+Niytd3bCDAY0VgHZzdld3AzYUi\nYAJAfROMdS83Y/pLyCciuSdIZPwZPesmZi5o/xfm5MVTemyIc1u7toj3fbf5\n+b7jVYQ8u+mm+VMC30d62COLk00q3cyGfgpRfmiaI5Hpv3XZ9b5FXdJhs+au\nHz59No6iH/GUoPwR0iFpgse0oMutXz3AiBZcsrI3Ls2VKcSQesCW/qhzC522\nYPlB2Gc5HoiuYAiy2x29ZVF2U1DKYEabl3/R4wEZMGVBCLMqZUZySfXQYvxo\n4u9ExDJLX1EfLn7jrH13tHZyYKCRVQ8erFKYos7BGzQDwPVmhNzfeLohpSYb\nstXRwgSTsgwH9JFNP4XWaJjKET1Z1Ylk6u35mwF3T4fWgSzHrHuW5nfsezM7\nFa8o4bX0gk9ba0avT+spVTJTcZd74s0RXNJtvt6a1bAj8SOMmYRcRLgGp91g\nk9bC/0qhoMWoS9ZH8LwgjXpZ/91ugMOW9FWbkLjbit1m4j659If9s/5pczNC\neRa8npJB3J/Gj4AVjB6JDgtI6vS/6Gg3zTqVHWaI66ACppRGpjgw3pMkKQB8\n36uZ\r\n=EV3U\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"929c9bffd0636490958fcf34e0b40578b44a9cd1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.0a7895f4d.0_1591218494972_0.9304253307741681","host":"s3://npm-registry-packages"}},"7.0.0-canary.7461aad68.0":{"name":"@material/density","version":"7.0.0-canary.7461aad68.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.7461aad68.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"95905ea8920bb097064d7f9512ab8fc48e9aeeb2","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.7461aad68.0.tgz","fileCount":9,"integrity":"sha512-u8SwLEsx2+2oWgrbA41GP1saona4fVYJt1/Sm09JzvRKBCwfQ+i/amIw9y7N3bZS44XNGtazDxxXVMU4agWqXA==","signatures":[{"sig":"MEQCIAuMRZwUUXvARX677rnYfNpbYE0pt1YnEvv/UsRJvzvAAiBbSkQNjonHzhW7RZRl58+oiMchoq/lUf2iNSYQpyJcww==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12956,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2CAOCRA9TVsSAnZWagAAJA0P+gJcPr6WAoC20EdwNocz\n0953DzLwG4xELRtTLfM077DySCR+74ilwJ7mPv7oukaXce0gW7mLXF9+7d0d\nDKgLQTJN3fXjCbcZ14Z47MHlBASRVQbhSbbFRr4iB104FXV5viNaeKFSGsYu\n/R0l7+swYrZw2JBzzDMJ5z2xmIkDgM4lvc9HzBfJOylvsK5qaI1ry0dnB6dt\npYja9w+IsuQEpSbp/yR94oP2Z8AFvzpnncicDh3p0Q/tPLuQcY58YEnQK1j8\nmGAktE7h92l5CJa1skboeGHYn7DCe9u3rEmf7ZdQjsqelPRJUQzUUQQgxPZA\n1vVQ+TOF8AIonr0GAajgCMSGgVrT6/ZtSNrlRbsjp3WyXrYc4MqR8dbU6k7F\n5DW66FJcSDB4X7PsR5ABr1qXZBSW1fACMgOtUQPyeTSjmibAJj6YkP9dl7nb\nW/+1D9uuUhxpX45If1xykzMb2hMGkQFSYM11SRcLAQ7Fz4pkOVun83Pe3f21\nlzp+Qn0KOGRf2kjy/tM9dr39uKGrmI7nQNbHzxqJ/x2jUGwIqBfH2FchC9++\ndzl3dP9Jz5EQN+MA7xfYU/X5Pv5z2IZNyssJvLVNvFDumTxfaTlgHiHe62uM\neiIkoIS79QCHV6vdZ8GnMJ25/t/ae/zeDmjAiKD35dfhPhepl6hsye40uD6H\n4VqM\r\n=IIw1\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"f9166e39b20f57c6b5cdad1ce684529ca891bd81","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.7461aad68.0_1591222286320_0.1045130243763841","host":"s3://npm-registry-packages"}},"7.0.0-canary.a0dc2b5c4.0":{"name":"@material/density","version":"7.0.0-canary.a0dc2b5c4.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.a0dc2b5c4.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c9997941a7f9dda8cf961beb4758342856d7227e","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.a0dc2b5c4.0.tgz","fileCount":9,"integrity":"sha512-6QwHn5I9/gInBvy8V397HAQY0VjdKandCcKY+EU0TUhS//RLPw+3Mxq0K6Abc80dMIYouG4iTcyHXpt8HCw0YA==","signatures":[{"sig":"MEUCIFZ8z692HVbdoWe5memqglYVldM8Az9Gw28JY9MIf0ZXAiEAofp1pjvjl0HYtTr2C1qgZjhVFc0695CdaxINubp52P4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12956,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2WPeCRA9TVsSAnZWagAAmocP/1iI/ssYd6PzNOC57Ptm\nnFQv6TqVubFkk28y/PGcWoau2rbbEaujOtqQoXxSlvfdfLdrr8qdsFb36PPN\nbqAxoHarG7eTu2xM4FRHwubjUJ9cEmR3zqRwzl+fh1OyG1vIRDfeMggKY0ec\nVhUx/V+AF0bgUK/zPWM88Y6KXNjjZdmNkuGHF+mhwjnq4nu9EGQyDQARsc7E\nE7uesq9nn5qLYg/zadOTADiOECBnsfauSlXUjnnICTtmMnmOaQR7XSHVquP5\n/+SYLMbTbAwSZkBD49SLzeGrvEFjfAw3CTdVX51mQpr0IaacGwV2adB3eLd7\n6qIrxC48plR22iQlcB7ivyiD0h+VMFdCvBTYdJTV6CuHap3A2BmRKb13Ejlx\njtB9/dpmcUyn/+frhAZa6kev/VUk5HMNA44yx6F49vCKtLQnSYTviMn4Px4w\noqPmhlDJ41pPM8wC0tGxpM/uh41wQLQqYpQJtBzGPUJOQrZyiMcD0zyPFRak\nmeG5MT12+u22GeP6ZlsuBUJ8HWxXSTPERbPOMepD0nWPEKqVgOg1jNh5uOtg\nXAFAnNJiTb0Ax/ZUig0cjaliAgShj+z753dEVe9uFx8mqdVpGweCC+ZjIYUk\nvob12CQcPlCSRtMUBId7TjUqodcjkpVtIyInj0WS3M5n07gG5Kd8JGk2Q5Ws\nAQ9+\r\n=I8CG\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"5970f3857673cb8c032d0d4532a6cf1209f94c47","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.a0dc2b5c4.0_1591305178984_0.8883724415759842","host":"s3://npm-registry-packages"}},"7.0.0-canary.2b420c5b3.0":{"name":"@material/density","version":"7.0.0-canary.2b420c5b3.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.2b420c5b3.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"013d711e868ec47217c9b9702005b39371187b88","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.2b420c5b3.0.tgz","fileCount":9,"integrity":"sha512-5Ww1cU4XN5EAIg6Q4puAPahy8NuX7fbP/9MKcpqnpHi5xZwNl/o62Q6aOu64AYnGB1BWxE9P4/EsPARt7XE65Q==","signatures":[{"sig":"MEUCIErxZN0MBBDDbsLalun2VZ/+3NgvQq/fNnMC2ysY5CPxAiEAz/32dMQ28N+IyCVNiytJdDE4hcylTn0a1v/OxF0plWQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12956,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3mOlCRA9TVsSAnZWagAA9EIP/0bjRzCt7uNCILsS3mzJ\nAAKWrUWM9Qq1DTS+t7djkzSpJFPZdvSPQ7Tiy7kbIYeuBLVCG7YjlmhSwl6t\nD60C9do3O4gIeYPYjKfa3Mybuh2UFoTCN8tj0u5qdPQGvwJ7Lqz7IpsDTH/d\nTxEN63v9PjR405YmXecpDkBvNnO7aqwNp6JerxEbabPHzWibiDts7eJjAAt/\nGxcwzgm92QnoCvSQfkZrM4O61spbGg3Jneye32pjKtezKWfmY9mseDcpL/s9\nC4PmsE8irj/ODJC9cmHDXkJH3fzVxbarRbs6rwduKS4HfrpU4LCyd6nJ/W5x\niN4aG/GplnjIQGOUWlZ+HxM2Nb+g9fA4qjH0ydFzcRsNTD6ErA8b+hI3rQhy\nFp0hqEyZMFSVqMzL63u7lWzLnBk0BbdHxdYtkWQf4XuZqNpUc4wCvqS1/CSq\nFCg0vpVEaPLV8O83AYji+5u83qRz/xMDGk8+rE5DJiA5BCWCzm3pscN4JwWo\nSNpoZq/ABvkg/E7WHXdAXNnJ9SVn/741MTBeKbe0oifFitVrN7J5UbmEYaE/\nv49gpLMeWhw7lN2w96CsjxndFqpY5Y/60juP86k8UjZey6PQ8yfONeYUL3N/\nRZfc5kpFwx0/675esoQ3Nvx/fOldDwX1EoPLqii3D4jCzqyO6CBjOkxZCdIH\nkNAJ\r\n=QNEy\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"80cc16a27982fc781b2a68accf38760a98fdbe2c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.2b420c5b3.0_1591632804816_0.4039542593002383","host":"s3://npm-registry-packages"}},"7.0.0-canary.8fa22aacc.0":{"name":"@material/density","version":"7.0.0-canary.8fa22aacc.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.8fa22aacc.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0498184e77e6de12a4065e00f0002415fed9245f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.8fa22aacc.0.tgz","fileCount":9,"integrity":"sha512-Q1yh6VT86myVwpw/q/aWqzx3L460zBPuptMqknHE/rhbHckfqHiX0leSydlWolUc8OU3dyeMpGoC65P8tu+Z8w==","signatures":[{"sig":"MEUCIQCBEjesk7CZB4+2DizaqDzw6M88/iZY3zstp3JNYfFPfwIgWkdIhwKq9pSptIo+5FfL0vwJo9rx+BA+R+rIr5kHorM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12956,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3n2ECRA9TVsSAnZWagAALzUP/0grFoGJzSEfQufXGyV0\nxT8f4kNaYniDDMnHYM7sfyZVk+smzp+tpLOakYURiteDxTKMWMWumaD+653E\nBuzEy1lNPyvn+6wyovRcW1OsCRLmu6MJyRvDHS3ex0QLXj26O9OwqpH1P0j+\naZzzZRA0e+OQ9QWOA8oJqgs+XH9RechfURWel55lY2eVf6dKRAMLb9CKNBbn\ngDOYZAsQV2+gb+mgmlT8HnKCZd5Mj0yTPmqicfOYia6YkwfQ+dN9sB/BehCe\nDjBxunYpDN0PNtoi2xCU0hbXJXXhVGAPYaL04px8ap710aqdXJo3OU2Eev1d\nwS8WsYPLLIxZDgSQtWgTj15hDASWqSm/ZQKlTa1CPd5AWOzLqcKILIoa81US\nkmwC6YQJ9o0clA5DYC0swtAYfQal1JDHDaGkdenbgB3dSa803e6XRie83Rm8\niWnhtHphHWtqkSDKeiTkJip7hMLp0RD8w66VDqV+dHtzmSMdOrtNoGsF5HCh\n06YPPH1rcc0pLg7awyN+fwSvkHkrB4QZWApslRI5Gk4IrzxnvJn8mXZpvPlK\nkN3xxi3Gs3jga8qhBZQmUxIMNQd01v4lwQofA2VMt1tYNkWy+HngyGzwwek6\ndopxKuITc1OdFBlE93UvpgPiy7BxNj5efwbiFKmWLKC1SMI1oR9emMOWC7+W\nfab0\r\n=C8pP\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"7c66b081ba582f4d58dde82c8b83ab1dfbed6063","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.8fa22aacc.0_1591639428261_0.5794817765751719","host":"s3://npm-registry-packages"}},"7.0.0-canary.21c4e4ed8.0":{"name":"@material/density","version":"7.0.0-canary.21c4e4ed8.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.21c4e4ed8.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"73f385861b81f3e1960a2fc9c3ad93b53a467a4e","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.21c4e4ed8.0.tgz","fileCount":9,"integrity":"sha512-5j5u+AfjdLc+XqN+CEzJ0ztXlhmyYrT8HnvkJeSpoYoZ0fOGQ4KAT79aCIuJS/Qbkht1HZvkF/iQQ0O/zCoFCQ==","signatures":[{"sig":"MEUCIQCjAiSmHZJ/KiNYNf2EEk4Iw5cE3p6DdBOzSkWHMzMc0gIgClCk51tSMLX5vSD/3TIV3QbnRt3g4JN19bdyAmYLzlM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12956,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3obOCRA9TVsSAnZWagAAsrwP/jH1urYZ5emDV++m42Hl\nvchyCdCBxMlv9HvrCJJWW8w+Rd6ExP9GJr4O54P9/6tNVQicqwCBp+yukcuD\nJbx/nba8I5OqPLygVXiD6naoTCIk+7sJsUcTACCQEUzJtkYF93cZ5NcYnB6r\n1nnRRLfGtaDCesXwNT1/VRfCgjcqNql/0isv9rC6nCCc5hrcCyfgJvaegnRG\nL+W3EInHlVziyiojg2+P0Z9uNqcCDkZ/nH9FCeIyheh7jC/P4pO1gRwYj7/O\nhGeCrPrtF2sngQaQYWe1knr9UoEn8ArotpIIDVt2SuX8RNGhLLt8n0eMqks9\nSiwXTDHxin2exjpW2Z9SWzd/9JgedkPmoYxIOvwEnomM5xmD0v0+Vd1fRErU\nqlTCMA5LD/P8WEvoidbWZWjQmJFhzRWYZEZMXnPSdxkbq4lSC8fhyrfc2tHd\n4lE7XPeWo5gwBdacGjb06YQiU5RUsUfBcDd5eSOT/2Kvcl1ohSeJQoppPMuS\nlIoSUD+lQZxur3vJ+dxeKhdosU4JZjbP6lS8y2Aibqc3UJRn47WJCWcUS0Ch\nI4xgHwxtUnILdEBcKKyKo5cvQlut+ZiAiahOPMpJ9VUvKTz30cKIOwgfZphu\nOcXRtyj95deWfboEWwPzeBP/kXENl8L8nUneBzce9SaCe6v1pWUqNhCltf3c\n9D7q\r\n=oFxP\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"4028e059428ff6b13f79ad3f9076ddd853ec1904","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.21c4e4ed8.0_1591641805647_0.8743847891037466","host":"s3://npm-registry-packages"}},"7.0.0-canary.dfde46516.0":{"name":"@material/density","version":"7.0.0-canary.dfde46516.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.dfde46516.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a2646f6c3f2a9589af15a31d59d9ca07911bbb2e","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.dfde46516.0.tgz","fileCount":9,"integrity":"sha512-Xo1zSRZ3qMzhrp8CcyBRvJjJVVlj0IWKTUOgB9asZi5Q8ljErpqn1MMjugLBDXy2WjIgZpkae+SzQR5Pj6XXnw==","signatures":[{"sig":"MEYCIQC0/b3IU7wcmmhfuyzy4P2pjyBwjf6K2F0vYNM15asPUQIhAMdxET2WGx6EgI/ZgA0XIuGtPG9074VmyFghLDvm5nqs","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12956,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3pRMCRA9TVsSAnZWagAAtQsP/1TbyWOKmdFDKc3nvixM\nqdLXVSY23OE+clgIHZHI3T6INTJMOYaE7HElt5YP1znNA/CZXtFS8VIodXLO\nd6Jo4nZLVHX4ls50VRUSSI7Zu2430lMkc78wssSoSGRa6IbgfhvE7ncT86MA\nareLLm3ZgXWsjStylwIKNaAfz7HTJeLs6BhjfUZmDLQ/BqkSsqDwHnOBU6AE\nIZO1Zl4/5CJIyaC3f0ednwrOSTX/t1elftA908NJR3FySQ9cfuZVuYMVVSSD\nF31+SgunQw8JQjYCX0fwad61sXUxsg+MKLAyFDCwZJ0hk1KudHjYCJyaGj6y\njBwGAVrFSxTc/Dbg2LvdDh3wc056pa/aG6e6z7ji+lJuWTdJ3btH+GGRw6uS\nl0xLURCJG8rxTJaYntedhSNFAyotyTSDp4t1iW75aNwnw7VJ5OhMDQRYLu8k\nTOH4RP44K0VRFHDkr3AvGESRM9/cdCeisyHbll5iIOFuvFJ1BSSjbR0C7KB5\nSWilunxgQhY7arBwJ8+z0YfCdir+z/l4T4dOFgf5dWGl3Wy7hzaibQ9t19Vz\nFK/SIC4U4+B1hsKB7y6IeyW7HXDSysBH4MV3WStqLOClXL+d7OBSqZOinAXh\nJ3uB3aCVe4bkPbRlEFzUtOQWEhe8KVpT1YSBGAU+U6YaaN7lFRlNaeJB9JgK\nYQcN\r\n=CXlJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"c25d474d22b404bd6774ea12567f0916bd7fd165","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.dfde46516.0_1591645260354_0.8864998843735727","host":"s3://npm-registry-packages"}},"7.0.0-canary.05cc5c206.0":{"name":"@material/density","version":"7.0.0-canary.05cc5c206.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.05cc5c206.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8b48abbfd84483861e2c136da709607633cdc608","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.05cc5c206.0.tgz","fileCount":9,"integrity":"sha512-UPwBtRuckscgCgAKAWFmYm3wooqjPd65rn7Ui01OQk5mhPZbxwqqlbPQmRD5smq+zmv2JG/J4B3YKjv6Kneg/A==","signatures":[{"sig":"MEQCIFhzVg7HwBD5Livest4EHuXSqJyDAZ/+Ga8PSmhCvh7+AiB99rLZAqITeZsVU5IIa+bg8Jyd4dZK8zpQLvca0Fkp4Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12956,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3qXdCRA9TVsSAnZWagAAis8P+QFfnR85273zv1O6HSzF\nP5J0zH7X/yF1KIOANq54VUIrdKHR80Q3gn3mimW1myOZnibKcArWFX6QoVdb\non4LZHoiY/rfmlOyb1goXsASorxQYkRKhY7OFc+zpLTNztCrPTrw31Rbtu6R\n2gpUhB/ShW/xrABREBTrl7f8qp5uDwbZ16jKv0/5jsMvN0Vc7vxaGUf55Gcv\n/ZNwB8JaX2d7OmBk4sASo7AhXqUr4VysLQdV47GiieclMKQHZMue9z5wqJ2v\n5oJ80/hFkgSoyJAxhd2Wyi969MdzjTXirBGZ/Jtxb2gAN5LLBdriFcjY098w\nVGXb5Onnoo5qclwFQxQWGJHW2lkN+ueC3QMEfNYKXcYuO/EqLKVqJm6+66lR\n7bFsJ6caPgGOx+vwiBdQg0XEOWNTPduRqWb/Ibi83N52X9SdvBlTViIY7FQh\nijB4KwK5vWDEWPqw4fo9edmm2bWOUNdjTA8xSfDjpCII47+O2iOWPoqKRwid\nEbKnQ2uncoI+7LhsBSIFLkVLLwx9R+csD8wwORVlmB3xFPMVx7wP0SGfrB1t\nB/rf2E0gG8chDFe94/0ibPDneFklzY8ZbqymFiENLbDsS3OyUHi5WHTBFBJ4\nmpoEHDcL9wLIdR0hd9Eod0nBrgb7j1SEi6hO/bPdv8K7cn9swOmOO3wkJk2a\nFAdW\r\n=Pnrx\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"933ae32b3f02920ab3f6f1660cefdd6302297532","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.05cc5c206.0_1591649757195_0.5034922227003444","host":"s3://npm-registry-packages"}},"7.0.0-canary.3ee488f1c.0":{"name":"@material/density","version":"7.0.0-canary.3ee488f1c.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.3ee488f1c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"de9c059cb44ef19069004a8439d5a8ee416f0211","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.3ee488f1c.0.tgz","fileCount":9,"integrity":"sha512-fOov9KoLFk8Tb1l99qYA+dMrihWXDlViIdnCMAeZE0qIj7MlVkE5O8U/M1ABQRYhJBTyOezUi7Ez24pOqYaWtQ==","signatures":[{"sig":"MEUCIQCqw7lt8MarxWAEn0KlOg1gIzvBTwLJK37SnQqpKIurtwIgf9fQhnYTmIJv4oZrFn2wzSqmNAkeJ6YhxEVXtsuhOj0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12956,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe36JVCRA9TVsSAnZWagAAPPEP/2g/7oT70bW1yca4kQ/q\nN9AA92nuNMTh7Bzr4ZnOisnqB5hkl3FPWjVc62ODjsCIHWfbqwPbC02Rva11\nRmwWKNZ5drq9KFMnkBv6+zQoFOb5c7zXWrZMtBvkx/wzXjBk9KxJPtLHRWPc\nDtom5deFvQhyOo25MfmPqC5/7fyZunK+yDpN6Okeb92dKXP+iIsiapgByhrg\nHtavwV6lycfI3rpb9tWScVdC7SWMG+VThz2ByIfI/rgufD0sOFMlsnezVtwy\nTHCqAsqwi1WgXzsBxv0pqHwHdPzE6nGyBcoQrH7ZvgbuvqZeQdXIAERsn36y\nj+AJlQkrRmfLEjqKCm1DNqmK1kCacFWHjP+5BeEgUNJgii0aSm86D98iJ79C\nu79DVEeROVel5OOEjIr4xmVIxjwHoHEX2qjZZbv3ToSNaY9AF38MzqiVZ48e\n9jWOCmMKTezRwbcQN07XrHKwQKwYP4MBlHjDYtLKxVzp4wT6sMS9himyv4Xg\nCLfiC4VGWZoEYD093M4hff9TYrZHEYv4a0HDbYBAhuHR1va84cnoaziMgOpf\nshDhNPq86mVKYSJM4pAmBj6nBrOmlJpeKJWuDoC/oylPCXnd9CNI1tjDUfLO\ncwxpECiS8QiH1LyVTwxTB32/+qnPzWtXi6gGHJaeubPIZwW6NzKTkEfdQO43\nc4UW\r\n=t5aC\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"ceaac97d295d5d50e71137ff6d4b390630570b8c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.3ee488f1c.0_1591714389064_0.8866483874568816","host":"s3://npm-registry-packages"}},"7.0.0-canary.b83d720ee.0":{"name":"@material/density","version":"7.0.0-canary.b83d720ee.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.b83d720ee.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6401759a3ae114a96e32f72c40416763dc042d87","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.b83d720ee.0.tgz","fileCount":9,"integrity":"sha512-JVpW5oQ2e3m6GNb367z9yFyxqcvEqtHJUTTCYYwtBrSrxNC8bZkzp0AKaGg6zVZETFfVD/DMxZJikxTpPlEy1A==","signatures":[{"sig":"MEUCIQDpF2uUoXV6YAzSTw27sewktINWsscKN7Vp4wJogiR2OwIgQl2KmkfdQcJOn1wut0jItv0DSKppWA0jf0u5tqSTtIo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12956,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe38YICRA9TVsSAnZWagAAmNUP/R36Un+YD6wTolOxWFpD\n4gUuCAhWrD9XZvxMC5Krth95pQIXk8fEbn9Yc9vMyGja/D2kxdvoj3i0yqeS\nEyVE6Noq1YYnyi6cRUqMtAQ6L3SLhpL4snTv+GIOBZQIgLWcWJk/rLGtnnI2\nXto9sNSMPgP2+6V/c30/RjGwO7fadXKZXar2+6HJ7Jsn+3NPWTmc3DtrHDX9\nk+nQk4QMdvFp2bnFCAzIDOEYi1/vQXVxM0H/rULVHuBIMzBeEo7Eq4roCosL\n9OYVFWuD9JU9lKLq8xdogvUVmdpcW9Ne8djRMXD72HviaPyoQBU3CPjGYSx7\n96bB+s98RbtNyQQou33gUuUoJjEWZTuOgI6dfSfrcw2blBt2lDTiMJgDmU0S\nZ3WrIYG80ZNef5m9mfg2yJkrCw3gKVBW/t/VA+Fv4OyV2Q/AorDT/QLN+yaj\nS53e1aeojVLaV0mDZc0Zw7+PJExDCWJEZ9qKALCmn9uY3UbJUDhTx9NO7GuO\nMGwKzjIZr5HE6q63tfo6ypuYq9losjc0c1BA1dZDwxyWy8fGqCgDsx6GekvM\nP9eYggnQXyc6buPUKU4Q1/47OmEE9i1pJZpr8GxQywt4fXyLmMse8Mgv6irO\nAyg5x1sAYOK6lQuLMosqva8id6D3hsRSTo4jxeeFikn+53uEcYUZb4ZID5eo\nZLFm\r\n=5C5e\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"3e998e476c86bc89c3bb626240ddd068529062aa","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.b83d720ee.0_1591723528256_0.7873278250142177","host":"s3://npm-registry-packages"}},"7.0.0-canary.afb1c11a9.0":{"name":"@material/density","version":"7.0.0-canary.afb1c11a9.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.afb1c11a9.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"27dbc2ed81ffdd885fc5bb242f0827f1223817e4","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.afb1c11a9.0.tgz","fileCount":9,"integrity":"sha512-W7a724uBYaGC79zKX46J9dUr5JjFeAZYk5qfT6m6v66K7ztel9HRoMZM9dtYtKIpmFtJ27t2YYQ8hwzFP0IU1Q==","signatures":[{"sig":"MEYCIQCgNvIwsP7yJR2CnDaQoylNs0MvGDzpe0tnjD4exjL22QIhAMTrsV8V95FGJctu4DpPkRskJE4gRecwDz1R5S2ZGc3G","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12956,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3+3sCRA9TVsSAnZWagAAmDgQAJsHmE4nbWtN9VWXsdiM\njDtXB7GPgkf+MZuV2SnA1GMXH8dMNxDxPNehXf3droqE+7cf19tREidKFvv0\n0Lf8mYl3FbL4JcRMyFtxqNS5AZO39tbFQkZpK4/s+i9fmgLTHOKI4iYgnf34\nfzhSlwTRoLMVKoFIK7GYquN59qx1b5R590/irRpA5CPR9/uHxz07CLYsYAw/\nGxlE9lKIknYwCCuUOQounhSfRJ/NGAUIsqjY+Z8WwHQlOPXyrfaAzxLLA4Ve\n23am4x0E+25zAdfKUbcZiCXUjNPoBGKqlfMqk4LG8W4u/cB02s/rlWp+IjYg\nYC3c4KU6VJgtcPj6bpQjfpb1KfVcAYmkXam8OJtzIh9Gy3b0FzUPnskEHi+x\nM17jVBUgydJ29+eldgyJgPPWkYV8Vh4SLY6Mv05UJPQKjnpOvJvIyzw/+LRk\nBywhfcCnqPwDu7ftGi9mHzZexCp5nJ//30DIAlWcjG0Fh110Uvw72QOavzaz\nC0NJIlxT5MPQPvl0kKtLFRa9IvWK6mZ2gPtz8XWTY39Y2LhsGIxylerk4h+P\nLT4SYNQ5GvSq3YUZGelNGKkXCkL3haFrB3+WLM4xGp8YIlg/9zAcUSK8n4zX\n4DOUaohQijTDFs5Gst8BOdFUupnQ2q/fuqDyjwDkbujBZ8bM3lQwOE+zKKnc\nBKyG\r\n=uH5I\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"893f09ebba8aeae1b012971b66ce3c77c410b823","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.afb1c11a9.0_1591733740257_0.613822820124805","host":"s3://npm-registry-packages"}},"7.0.0-canary.39e6f71e2.0":{"name":"@material/density","version":"7.0.0-canary.39e6f71e2.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.39e6f71e2.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"57d02399cb6f0f7fbbb6478655cf21d236a7ea85","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.39e6f71e2.0.tgz","fileCount":9,"integrity":"sha512-cwku1gG83wDUnbxsr+CLPrhmBKEJyaeuVYFQTC0Nbop3tDronYxS7bvyQESotHHnZVvxyS1+nQWdtdKksXGYuw==","signatures":[{"sig":"MEYCIQCVGRVRoVCfNNMNmss1iURCgU1132bQR382JgMHmT11bAIhAIi0APf7xkZYxZPxGvWspVxf/KLCohDZyVNRH9ZWO18v","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12956,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4B2MCRA9TVsSAnZWagAAFsYP/00QjfhZr7j+g/Y9lzXH\nbMV72qHlBXJ4Kly78GodruIXly8N38Cn+RnDLgA1F1dIlPDsQyoF1E4YTvlM\nznnSF/6hYYCstpv6+aBDMzIqBNJZEOPRVXS8LnJYzgZO1HJ5FNk1dhQ+cpTg\n0x03hRDLSxrIvu8+rvtWZ5S+yX+HrCKl37xIl+dPX0Z+gfrX19BAPtw409cO\nzi0y86hXfsAMfLpVz9MBaeIKSz8df/DM+7hTRNUViU+lODMPSbOCY6INMmWi\nK6mg622/ZUnW/A10Fl7O87ENP2iBg1KTFr+1SHwh5zvplMGBDUzSut1xXhhD\nj8Jr2gFUkA+Isa/UYtiw/GSZHMkZEj3TP5/vGkjsmqIz/lGRdXfomPeZ5bl8\n0iierccK8uyW5U0mfbTh1T+aLbQdM9N/87YWdIgTCJmlyqpgiJ95LQyj5kpA\nk4tz3xk9/sJuDFecj63VTqErfOwX0BKpIAkYMvPKl5r6CnQAWgKVClPJx3Uw\niGLmu1W89b4w//sj86ao/E8zLz+zkqlakSOOwtqCele3HQc63pYfOG8xP8pP\nBZ7uoHGnOfbKTCM4YCMWglASco3YtyWbQKlr7Gb/iq2kI5fGlO2uKHbXBM6t\nFXrLgGiScyGOkX/hYEuzQ9rsLuC/jEqAnK8reembi4/TSeiyBCMnDF06V2WV\nxr0E\r\n=wCzQ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"2f7273891cbcb7da6646bdca0ac4c5dc2ceed9b6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.39e6f71e2.0_1591745931607_0.14370791570871733","host":"s3://npm-registry-packages"}},"7.0.0-canary.d4c66dc7d.0":{"name":"@material/density","version":"7.0.0-canary.d4c66dc7d.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.d4c66dc7d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a7eb589e5686176e0085a68693a49d1fc0484f8e","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.d4c66dc7d.0.tgz","fileCount":9,"integrity":"sha512-Wqu0f+iaym8t8XjQE9PYPf52kgYJRvycDu++7lClpVisvylGxJLrgHTGBY8WbLYcUqtIhJ4OlxRhR998UtKiig==","signatures":[{"sig":"MEQCICtY8B1GvllriWKv2XIGHinVILADdvtEsCBl+RlmtNj4AiAOvMoMat/oVofkcNdzqPWTNkFqxSmhsnno6fPd4HYsgg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12956,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4m2kCRA9TVsSAnZWagAAwlcP/iswY7gNUCbEsds7an6l\nUIUA5wy5MxUqf7TEHwZuCwrH2XpDUgfLuCzCD29cydLDtVh4h8SrPQqy2d8S\nyb6zv3i2reyXYE7jb1GZ1IkxCF7VcyOHdiLpQY4FAo4Kg75ApAh0DLYooRrS\n/uh9J9vTcSgsWqoi95tRhxZ+gEk0qjUROg2tmi3ZoHpQDnsIz/fkQQ4cmrJj\nasubVOjx9fhrKZArAUxFa/HVGWyXbXZjbQ5NiXJ3nXi1bRPqI4/gzo1am4gP\niDvi2ozaerzwOWMN8QSpoLDgCP4CXrqG+wjic3yqFJzLqr0CR+Z+9rJYQH8N\nf8UZUgkrFhnXyJyQhTieIzfaAb8pTPGetGpRS+FemUu2q56VijiSw0vXXfnw\n3O01hU8/XKQEIW0QX/ysJkMnoDT21aDLPL6tuSVMouvtq06C0HNzGDSMSr6z\nZekYFlLFJ6bKyUUTfBYX03oS7E1ZPLPP0anOY3N7Dyi4C0ElECb9UHQQMKPF\nyVTxLsC5qtXzRYTViRii4QyCAQ+7eGhRmuNF/Yr7vYxQgSRombW8KzoZKlyS\n6rZhSPis/0Lbpup99p639aWAmfCl6F1wUB1JX3liPqr+AAoSMS/jtBOXxkVx\n9cha6+1l9pywXRAxLfNqxro/LwiR/AL80RqiTo+hiO0g4iKdbUrpVNKKXlK7\n+0WR\r\n=lfnu\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"5964d9e6836962528334c54ef81ac4cf4898392a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.d4c66dc7d.0_1591897507890_0.3124448280905856","host":"s3://npm-registry-packages"}},"7.0.0-canary.be4a19f9f.0":{"name":"@material/density","version":"7.0.0-canary.be4a19f9f.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.be4a19f9f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f19ea620910f512d5b7d73cd964468b13a2545f0","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.be4a19f9f.0.tgz","fileCount":9,"integrity":"sha512-pghawDmEVLFjBeIAs5lJbaq6pZJEAVCD7r7zXmS6u8FklTu/mFuRC5edOESr5gIYpSKgNDLvBAYkWRWXLsYSdQ==","signatures":[{"sig":"MEYCIQD0bDkXWGphsQRTDMAqER9+kdL8Jl2wr7ST8EShkB9hRQIhAMW0+LId5faTwfgvTReuaYsA+Wng8cCKyfYsCIfBIujh","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12956,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4xuaCRA9TVsSAnZWagAAo0oQAIOsc7DljebbCbg3AIt0\nQNRHxGAIxo47HUwKxNViPEJhs/IEZofYLLLAuGSnXNnw/ycmu/m2U4yynwYW\nPmBOJKPqPu4PRzjhn0en3ahg5e9mCjw7u/HOXfLVDCWjDbpxAyn+waVS0NvQ\nZ2dbW/wWFPjALYWVp4RtfKGOef3qqiHxFnS3UeFJxmBW23TcmGhprZoJG7fu\nN6TzSShFG0KpiZYMbGvNAqjGNDAbk88PO6sloCEjoeGJRC6J6436urpOGkgj\nkg15hbf850YL4uFfbFYENGZrWq3BWi3fvWOU9QdgkPC7fqsoKZg5wuTypHxq\nisdwQ0WcAYDhw6tQ5J0ZGioECiKo+e6jNyAXU6fj6zFZToffZfptcbJ0txZm\nQjt+15O/UTdXTl0iv0g9znC0pyd+Gv2xQC2ADgZ7P84EYRW+6ilK8+8uDeFU\nIClJx3FQcnv6gTK5fkJ3xD9s1kknjrFXEVnHDvnh4TrcfLxaX+aL5bJY6z1j\npatwWDDIkh4JmleOoU7cWpWJxefUI16ZNAgSJ51dESTFfdRuQakIpWuOyWdT\n5DDvJIk0sPjXzZ6YKP9KO4zdlzskMX9PiLFo3U28cYuQUlQrSiDLzZsDfAWf\nNcsJI5h98AfxDFPptyH808Qrq3uEZF02GGglxP1xutOmEVW2/WnazDJanUmA\nKcy8\r\n=Jkqx\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"d7a0b89cd18efc7fec60e96de627e59883e3657c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.be4a19f9f.0_1591942042445_0.01936140560459987","host":"s3://npm-registry-packages"}},"7.0.0-canary.a6ac8f629.0":{"name":"@material/density","version":"7.0.0-canary.a6ac8f629.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.a6ac8f629.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9d0a3973525c5f43f477462158f2d2519f918d08","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.a6ac8f629.0.tgz","fileCount":9,"integrity":"sha512-KGWI0//gqgpJdEKmJutVW5xy9lalRmVlc+TXYqrSmUX4lHP9I6paW/nqurxj6MB9i+YxfrDJmTdk9mt2LEUFEg==","signatures":[{"sig":"MEUCIGR8ScMjJiNGrxQQPKAZKfYeVJeJ8zAZzSWrJhnQMhV/AiEAgxYILmMspu22z67Msy/kaHDfnk0yPwcYo0JGdxO6n2M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12956,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe5+hWCRA9TVsSAnZWagAAqbwP/jlX1U72yRv1FCYzSBCn\nR582wqqAQmv2R5ina+mOb0vm8hcCjhQ7LH87SKiWFM8ymPFjQPFwuj471lbV\nw027uEBQxtlfTN/e8NajhLwLRFWr37VnbKI7mellRICH/X5qAri5hKNrLrrZ\n4OgNcdt2LEISYCtduBXID2NMb6a++mOrEEf6aaVPJvkI6Vp3bugP41JZCxJD\nnK9Ih1YghrCR29ITuktihd2nPoAliiaxMG3JWetYK754+R8XH+drBSEGjfnG\nHWsCg+PpIuZ8Rg3OYsihTxUiv7cnl+jo/2s9uIsfaYANRNUpiJt2RCz+5Syw\nkzAuyWYLN+xnlucJk5bxX3RLBrm9JrHaiyq/gK9+br1Q4rMyOpmHyv2PugeP\nD6JejERz8eC2WFTQWPipkJ7RUl4JsrmZ7fweSNEdksDDO/7isLztpc88Um/p\nawHwAl4RZNnQae6il13GBNhFsqqYSOM3NNbtj8rFCM2EJU8m7G2GcReHi1mI\n8mKqbi+HUUzXsYnd948rsWvPqZ1+KTsZU5nSmJrMD7DONLDajDEN7eigXX7r\nZzVADNeCzaVx9N7xuXuhX7jKJXZrZCj/yCb8au17Dzm3RoBLHHXV/EppQg+W\ngI2+bpBxv0v0xMWIj/RHBG6FWhLVrsstXbIkZwA6FWAYxFQGzKAj2sl/Rg4u\nkEip\r\n=VdFe\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"30d2dc59ec3530f0f21233e5b8e93c990a4a2776","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.a6ac8f629.0_1592256598150_0.9311859904854773","host":"s3://npm-registry-packages"}},"7.0.0-canary.9833dc287.0":{"name":"@material/density","version":"7.0.0-canary.9833dc287.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.9833dc287.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2d185375f72bd9036703433ac2f73737234b1108","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.9833dc287.0.tgz","fileCount":9,"integrity":"sha512-IQMipPvYKUNFv5c6B/r+XQNW5zFyi5B0VY8pQG4OmBlsA/fb+bOyfqZBsfVMy5ej3KD0It2nhDtPGboCaOxYqg==","signatures":[{"sig":"MEUCIQD368o5wwaOjdT7qv0ylnLhy5c4oxx5RXoi3BRuFQDZQAIgPAY6m/L+6GihFaVKY/ZCkb0Yf29oVVq1Q7G33RwHts0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12956,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6SISCRA9TVsSAnZWagAA/KwP/0amFeTwmPJrWwKU1p4Q\nYssM62zDTMSR75RbVb5OkhTgXiDazhlGNxhRkiv3vdH42SyQjrA8wJYErXzv\nSKYSHQTv5s5cq3TpMpmZi0YNbI6kLBgoFyiXeh5xl0th2/SooTVRdm/hbbEY\noXGPKVhtWxMjxr3zjm2fCZ32NiMQ1kHTlb9Sffq9YjZT27rumHJafvkybttZ\nugKkbL3bYY8E5YTFCzHTWa1Q8v8KhtIW3MT/duV1jWlhxG1XR5ppi36FEAw0\nGC50opDeyHc11su+kSAAaf3uURYE1usH8SHLLoFNWoCq2hqZ1c6gl/lhHtG1\nYJxRLi/nrnyOGp1xkX0Fsq/9zKkbSO1Z0CZoonjdMi12E5q254ghltn7U4tc\nwMQc4gKAUNb72myNCnxo8gsGjeVix9kfX3jGO2sNS8iMVgXa3Kh/DNWEpSYh\n2Yxgs8+DfUu+uQQiswSQHdkmFknreYg6DuirT9vWbsNgkB+S9ZBZIDhwvxum\nbhcVHBQiN5ILXc20udfakk6LwgE/WTLHIycW29zonOxyXWqGn2R3359l/iPk\n/O1mSgyIO3AUGhl9lvUY8KYPcoHho4Mdq5M/F5S2/VfTTMRFQWQEjn3dRK4J\nJdILew9hRiReeED7Whg0X6V8hnqydnZqUqsiGCDmaqY8PZP6iU+lLzvhpfuQ\nYls5\r\n=XKO5\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"6852334e45da838c4140c1aadc974a39d80a83b3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.9833dc287.0_1592336913795_0.8250318103388836","host":"s3://npm-registry-packages"}},"7.0.0-canary.3aa33998e.0":{"name":"@material/density","version":"7.0.0-canary.3aa33998e.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.3aa33998e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"028e6dea2241674e5d2ee9b38e4ced9edefe695c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.3aa33998e.0.tgz","fileCount":9,"integrity":"sha512-U7r5un/PWPfMNAgcsWAG2yl8auCBfPy2H5oE0INOcj1tILh+J6bLo+Ar3GH34KSgmYSOf5f9Q6NsZfNadqBstQ==","signatures":[{"sig":"MEUCIQCWbuNPNvG9UX4h4TW+Eya23xCPn02z4C/gNDKOIVQIqAIgYAfOl7br0/L1lxb+ykiPvu0h1Don2AkeRns7rCYEMbs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12956,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6Sl8CRA9TVsSAnZWagAACngP/Rj0LiZ57T3Lt1zEYN1s\nJ8wNiGZGa2DvQJE+zOsdnNbR5myr9Fl4n6NPzECwtA3lEUsXCoIggcRTuqGE\nFrk3k6HYaJgZEYaaee2MgAftgdds/dp0aT1ZwkpFMqaibmK4xycUva6w7g8u\nz6Me/L85Wk9Ff0vBBhu1VQMdq7KlzTs/+Cx/AjDkRcZWVBO+/IXInEKSMrzk\n7CqHLqvlLAWy4OXrxWU2T6Ho1BBx7zEotjuyDwhjO/sd+urUkFscb4iOhIFf\n7YWgb6LJCMurxQAlFJgbC3BWZEVBbrgaOUjG00hLMbjLGmjyC63OR8xRbJS9\nflvvXSIgA9qDuVNkRqzz+7LHR7augHxY3/kb8IOg8X3QBvUBI27OmxYAb/4J\nBuXQTxwbkafLDQ6/VlNEMpG2M0meCodl2u5P8VoFmrFdacVolvklD/kAAw5Z\n8JmahUXABtVbESOtnbk/ihsqiRGLzsneszMbolWWVsAU84tD/DWhLN1/n+/Y\nI+3RKf8BbZAqqUsi0qTztXkUyarI1y7lL5TTawserFKd0/q6J6P4EAGz3nMp\nabQigjRSAvhaPMKq84cwrYjrAyrJ3mSmdcCsAjs1jCjlEjjSWcmuUkkTB4bY\nVNBU0cmvGWJv1f7e1m14nRSqUgQ0fXxXOMAqEj0dLpXmYKc/YLMuAZxqIOaj\n4qYR\r\n=qlds\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"20873613db8172781d25b42fda84ee1fecd88558","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.3aa33998e.0_1592338811728_0.44313391087002096","host":"s3://npm-registry-packages"}},"7.0.0-canary.d2b54d183.0":{"name":"@material/density","version":"7.0.0-canary.d2b54d183.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.d2b54d183.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b569a73deb628d019c2e2d2b63ceb2df1a036ecc","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.d2b54d183.0.tgz","fileCount":9,"integrity":"sha512-tK1PuW1TvmlRoBsozj9bgd0vuEsvGLBv0Zu93yrhdxwIppKS9uruW5hxrlI+PHXm7NegqqPzY83/N7kviyUNEQ==","signatures":[{"sig":"MEUCIDe7pwClRf2MZI7+doywQPuAYSVTa44aXCoVE8Waw5q8AiEAtHr7EiZ1rWBDf04PIL7ZInppHTbaTQSzXbAVqWtiVl8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12956,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6sASCRA9TVsSAnZWagAAlogQAJj0nb9gfnC8NOx878xU\nMOC/54b6/l38BtHSJrb73qQoK6fT5x38mxHmt/ufcmZHJWLREMXCmTUjNK3x\nLINuY6ytGSC21tWYdNtjLorW4eVB/2lfRFwclbuG5CKdmIbDL42p6CrGKjiQ\nbrE5bHtTXIYx488iSLp4OGPFaUs70SvG9LWCrRqerM0YXEAVq5zvw1TwZCqS\nX9u9/nOCzyaIz2v9oqLVMMubfN6ANvHLqwkFi6pu7fTs1TCcm80/6ugwS2Rc\nx1G/urKPa57ta65yOGqvL3YcgbkDmFyuyKk0uYiia1pMdyMIYV6E1kCoL8mF\nRnwbyPgcwsRW40pExuG/kNbPVckwG8jX4V/BMpHjhKFWbDoBqRy6k6fZt7Va\nfi7luSVukXh2Z/Ej+BFOyhW2zwIHGCeiSPDABsGgbFAknJWl9fI/tb9hPAJB\nyoYzJinGEbHFiMAT45qPyGoBjYGBAe8arbF5ma8EatI6tHv1bT8/CQTL5YOp\noc1uyai3v/cATwCYRzNBtrYIDRu7ZK7mcD1cvqXA+3dNhAImC/7e+6VXbtSw\nmlj/bVPjUz7bcklI67jLjnVgVeDPOqhEGhTQMnWel7UyIvUArmDmF0tB3mYu\nG9RJynPK/fPkweiFCQsgG8UrcavB0QgmjvpBQRP6rb3y4o3sKKvKqIZOUoUO\nvo7r\r\n=sjw4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"2941697c8abef0c194a923cf548ee231dc67a2c9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"_nodeVersion":"10.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.d2b54d183.0_1592442898228_0.7284797434352788","host":"s3://npm-registry-packages"}},"7.0.0-canary.f2a488e95.0":{"name":"@material/density","version":"7.0.0-canary.f2a488e95.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.f2a488e95.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"049ed50029e7dc978c5b90f827319cb701ffcf8a","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.f2a488e95.0.tgz","fileCount":9,"integrity":"sha512-fJlm8lb3DNET9zQqdYDIFSfBYneYwJJHinH/rlgq8au1eSoc83Ksnfji4zBu3qVjcqocr3SgYkvY/jv1HlSGMA==","signatures":[{"sig":"MEYCIQDXQnpqIbC8EbD/YjXUWZRqs6CcV/4qUoOfVm0Q61hJJgIhAMIms7W9GkDxnybIGOxeSHsKVf0q4fVp+PcNLCvUdxNQ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13144,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe64IyCRA9TVsSAnZWagAAReAP/1IoQr91MLBqakvsKQ2i\n40OiL6c8sqbLoeWcwCoFKlqgFnNDznzocm3/U+2uOU0qm/MwhPHpWCkej/p7\nnLBFlQqglQRgGZnseI3xrWjvetgCZ2Y6AJ2qCxAtsdYaJ+edUuHWZ06BkmL4\nDW7A3kvF70Tpbk/vfv6EZir+gZJiwdaxpwlnuaw5XhqDOEw0Uy5GfoxSA1fb\nEij1mq9XnN0sU3eWcxn2PU0Vc87O95FZsNQn7BsrdV90yn1XtiLJ7n/oo72k\nEfqBbIwSMHO/5K6Q+Y0G7D96kBmYzzjHi5zr/Gc3J0P7lk4DciPVnV9bbBRO\n1V0v6SRvm6/dosp4z1IGlbO4u9KvixhIcUbY+2Tyi/T3IOymJG9dTeangBQp\nydQj6Au53LilwrSP7ttoosN6JlTFNwkMujN2zbkod0UgZ/BbaU4pAIhTuCqA\n+3ZnWua8wvnaDC2LWpRXjy3edeI95YB8p1KyoUtINNk8Xd3w+FVYR39Hs7ON\nmojgTUo46+dtp+KXgAAyOp74aUZx/Z0R+O5v7aYpQO1n6jXmQ8ALxatHZ0ed\n2eauRrhj/SD0qNbv7RAYiwG965O1ZsaZxs/wGNNPTCWRFTbMD2kARY6tXqUE\nIGXYLG0DCDzWYSyAoEUwIszGpqVfyYVHC40nBtmsm2lWI1w8mE6xPsGuk7A3\n1ag6\r\n=gxsw\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"bd7f6aafa23ab94aa2f862ece45e1775f1895b88","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.f2a488e95.0_1592492593769_0.37906854253393285","host":"s3://npm-registry-packages"}},"7.0.0-canary.bd8d1aafa.0":{"name":"@material/density","version":"7.0.0-canary.bd8d1aafa.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.bd8d1aafa.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c58f013bee05d62d17e0ace5b0978fea0737086a","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.bd8d1aafa.0.tgz","fileCount":9,"integrity":"sha512-w7uBuuygQbPCxjaptPCli6faVcQJZOvyLOGDvGMKqqkBAAz6lkbGBhiA80xR3Na3ViF6X21IcTeJ7Y/PgwqgWA==","signatures":[{"sig":"MEQCIBucjZ6lNy49xi1KiAn89A44d4RKQgFl1/dTd67O8s2sAiAtjc5ofxyykP9Ef1ESOYqdrwORAqSnQxUq48EqgTsKgg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13144,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe64UVCRA9TVsSAnZWagAAs3YQAI1j29j5q7YRQQ2IhskP\n2LqOZ0p8hhkR8qsmUkGWiCnj7Z5gRbOZquyGId2djngAWmS5DzQGgkYCUHqb\nN4X4voHB9CNEiKVJczNunyai7AjEs8KzLvFdEQ+iDD7c1wyfecTMvgnCIs3s\nI17nbM02ER7i40DQG3c7c0iy/DQ4e/TOoN7DfFUdyzxcF/oIqOi/rrjotADB\nLgo1mLThL+m6ceKRAmn0dRvrA3SzvqFdUUnFMD0OrEGV2UANPATZeGUxblTC\nT5XfOBr4X+ncnCAYBuNFNQycLmxOJvwRCSEuZAX6iqaMrIoLd2vT/p2YyWYO\nh6Cjf9E//piso35OmWbE6Vmyv55BgP2d2QSqnpYpezG2QmwntRdHYU5o9oxb\nSTl9MwaTn8DamLwOYIQURzqTSQkLlF+2CF0hn9DTPo1CWt/2aO/gOnJtKpx4\nsQI7NNdK2SbmZy8FeWRH+GaWSLCWm95ZLDxfTGrv/9Uqd+97Pjw3iDmvhIQl\n+7tmEuV0xj2LMCFrry1229pqLBwvFFqcqKppqtseccZSlY7Zb8QYPwE6HMeo\ns46btReTYVIiQDJOoFBkQv3t9wepQXxkfv87H+h82C/YN1oWwNffxwieL0rV\n9fELL4e/Bvth11MikydyfEh/W1bvu5XpmxdHiS6StME0cEP/qhubJvhjG6tq\n5mGR\r\n=apJu\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"05dd265c139c96ecaacbac16c7128e4a851b00f4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.bd8d1aafa.0_1592493333481_0.4275375080121251","host":"s3://npm-registry-packages"}},"7.0.0-canary.1321eb968.0":{"name":"@material/density","version":"7.0.0-canary.1321eb968.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.1321eb968.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"62506245212efef1b7dc90fc6fc34c2294981a41","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.1321eb968.0.tgz","fileCount":9,"integrity":"sha512-l8nFHOOu+t/fkeDssn5H7OthLnkecwQIiBMm6r+gvnEmmXEAHv8Kz3U9P0EiH6RI+XBMX7rAv+c9ei0NNKIhIg==","signatures":[{"sig":"MEQCIF6lyPvBN/9l6qeptPN0INatipKh26UF5U35p6VztC+2AiBGeB7rIsSiAk1n0UHOwsYa/L0/BjNt6jWeyQFvq+TcNA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13144,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7RACCRA9TVsSAnZWagAApHAP/Rvxg3N9NJ+yvzQgiyuc\nhUtMAo63J8JkCG4pXCFPB8232XCqvxLJILZjoPOkC8aQ9UqbICZ3PMFdSDiQ\nslqNfsW6Vkbn56UmfLCUfJIYp/zHbElqDm6zg7TyFHMlaasQ0iscFkakGNq4\nSzrdTGhKzfHKi4umPDaAnRuOPOtAPjw8R+7VsN8U/XmEGHVeAsrcn9q/bH7G\nnf/duCzz98LWD6GU1CRyh9P03AQihKfdCRj6fA0X0pzFvJNCl5vw46ZMOf3f\nPyXiIzyLDIIql7F5TzI2LwU6rqHWqCCNPpOHd+GVG8HkOFnmh2IdmFW7XONK\nMZLf7YNo+yb5UnDz8WDgp+S5WFiYOT58bJ2JYrkBSBnemGDqhg7pmGnl0uAT\nn52dLy0GXiQVzAuRWsTEpJFn09nRwkdxVtmECqabhakurawFIJrIygPw1Gu+\nc1hWNX1/OS9dNL0UUWsG53JJ68Ca+ENlbGCrq1Zb08aVpatVd4TUGX8DKCDt\nd2kpTZemfk96eGKu0xYiHuZ07v7RNXKSHZm7+MrZCnoYY4LdEEjj45jrobcZ\nY/rn2Jj3tFsAAtAb8CHiZg4IV1ublrodT4D4+nfaTFlqDHWcxKjLKgskOEb0\nzKaduUKIMKoP2bEGv6CC++uwJ7mBHAIcQjcy2Scz8gArdzKxoNTvMBca9MNy\n1QS/\r\n=T4lN\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"41c074a3370c2ff9b4dd6af27f2403d15cbf2832","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.1321eb968.0_1592594434245_0.41646095351787493","host":"s3://npm-registry-packages"}},"7.0.0-canary.db5cc0382.0":{"name":"@material/density","version":"7.0.0-canary.db5cc0382.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.db5cc0382.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bbfca48cfccb05996e45ac8dc4d886de8855d902","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.db5cc0382.0.tgz","fileCount":9,"integrity":"sha512-6JE3scVRXm+Aq+UUmBl/9ileB+TXbdxU+WCkPJDbpC3dVP9vwAhaGIy7u/+ypBBja/cm9hVPt2rdtxv4OTGGKg==","signatures":[{"sig":"MEUCIQDduDp8XhXZYC7xyELIN4Vg1tVG+9rnlF6JlLv/lA/CcAIgA6ka+bMru6Qr0jySBYVuivlEzE2c4FIAE288P4UxNq8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13144,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7RGCCRA9TVsSAnZWagAAUUQP/j0nRWn/Kmi1hQpBb4J3\nR+4yzuak/xfxIgPJPK+UqEUfQ1HwEwAXzqbSUSrRCGBg1YKgGBGia5Z714Pl\npNlFgAnvn9CcJkwsXoKJ/326p2VzBInrgBTmts7QLaQeVW3o+NMBGmAC4Wgs\nnC2F1Td1L45dLdgmJGa+y20K4wWwQ1lWSMtmO7EP4FAWze69Q738GF2CplZW\np0C1rCTwnQNxQg2gLNpD1C3mq/nOc8FwEN45lVPKVIwZH48KNUnRtyzE1hCT\nj+4KaL3gZQW+6GiJ7bFgtDSexyYiN6XMnBLRI5pyEtA5EPFrQ/MeisB/ip83\nuWculXL8eeCJNH0FvdwlX8lsCBQw70PInetpqHqfyIKCZI6nkd8YxYXUijkV\nqX5e99bBECF2Qf329i7duhHSqgTQVDYXnbtS74sCjmbmAp/BwBkIwgMr24nL\nlSYPL+Bhx2f9vcju0W+/e56pm9JIREwhzKc2OSwMbiQOQU6mMo1eljmS3aWy\nUxz393+Xlq5shp9mSxCFVyGRtiKhpQ6kKa2QHcfRIY0taAKZbtWE7rp9+ser\nxUBzWPuXqx1Z41IDiLnc6ehl7NNqdWkMT7fW4oy6w+QaQSLTDJZeemvrZX/H\ndmYSMhivVW9VkfYoTTwsjGJhSZPAN1iE3XaBtd5BaOORSMfWOtB1GEY7zB82\n7TSn\r\n=+uQP\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"698cb6184d0d6e6823147f7d050c39efe9b8e3b2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.db5cc0382.0_1592594818412_0.15393387342123854","host":"s3://npm-registry-packages"}},"7.0.0-canary.6ac9bf031.0":{"name":"@material/density","version":"7.0.0-canary.6ac9bf031.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.6ac9bf031.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7408147354dd62ee830debc79927520c0dd4e6e9","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.6ac9bf031.0.tgz","fileCount":9,"integrity":"sha512-au+sKVFRvxiMc10ZUPe59rDIdjpMEZQkE4ELlTzKjdSRwS3RHAuS0syHBxE2JSOWN7kkLyktBjYX5sqABCFmxw==","signatures":[{"sig":"MEYCIQCaTTAuEijJtH3UkfICnQyOImo+/TwrsA8dQXz1H0UhCAIhAIvqOEEMROubwFRUpnP48i3JKEZVYYcefTECsuUtDyQR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13144,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7RZLCRA9TVsSAnZWagAA1oQQAI+0DQwDDr/CTaSCA5Tu\n8ABBNO/LHBix+KIrepn6UIEoGjeo6kK1UFFSbEBRY17WHVH9Cl5r6rjRqyRq\nkc86/n0EHyLfBvrh1efcduIhgAzgBPN4QtKCidEoRmfArkwj/mw3FkHKSOGJ\nfqcIMoCDf24rH6VEFIeM6Xg0auMAeOLmVYJpV3rVUIwWT80s9CmNjI0xkJfJ\nnhSIqe5fsarvsTcKwfCWCIHRre6b5hwMSV/DaVIPReHptRv2PFcoK7JISWhR\nPlk+VwPBfyKLfo5OmjvQrESbett+iZyYP4ngtpm+uJfAdbrFgSAnfvpFFyej\nOEFi/qjVWFwF3urXg7u0boC05FKrBJUd6RLqb8cD0Sf0iPEB1Ea8XsaV4f1P\nAdSsv09B31jo0u7lmN4SeoYU9pnkRVGGx8PGtyjNzXRZiQZfS1w614EjzaDL\n1JSLNOkBQnyR937wB5a6UljaYsdj56pk5UptTyU3FQJiB8xz8ELvR2vmg8+b\nkk6rE0JpFg8Rk6WX7+Jg8RLrCBEBt4mnOc3jHZWv47PMNQlPoBtKBljwfB0i\nrp7QTR4QeVlkblPd02O7pbMC898jxbvoKl34ypygRLEnFgfko5oLd1Ni8amp\nFhkH1NLaUv1/sXo6K+b4bTUxQPxGJY57ZFnaY+lImjenAt9VxGn7kjRmduFr\nlaAE\r\n=JIME\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"e80b52100d3a9ae7653579d78250cf18752ea92f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.6ac9bf031.0_1592596043151_0.4276996588033295","host":"s3://npm-registry-packages"}},"7.0.0-canary.c21b5c367.0":{"name":"@material/density","version":"7.0.0-canary.c21b5c367.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.c21b5c367.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fd83b8235c3b18b1fb217cd21ba498790576fe5a","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.c21b5c367.0.tgz","fileCount":9,"integrity":"sha512-0xVPqblx6CXTZn+W6mhsI8GQgKaSiAogJoPipitLxH6qRxQUjaUluXtJkKzuxV6/zDgMfIdKR48B6uney9HjPg==","signatures":[{"sig":"MEUCIQDcyj1njsfGSAYXk0fNKFxXrd+E7Yub8kWaqFn5rhtLAgIgZySphi8TS+y4pnY/K9gFooUwd3NZgLw6mI0gnvPOzWE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13144,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7RuCCRA9TVsSAnZWagAANs0P/2xfr1t6sueDopgLXPI3\nuJHcSCeHiltsMADGTFrj4TI/MpzgibL+O5SwZ/p84HZo5KDdK03TH0HW6Fsl\n3Saa9x9WSC3uZVJYxWS7Co9PVmlILoIMSD5lJP4QvlRAPbHwxuxI9HkHdHav\nuepOzBRfYwEhPipCuLP040BvqZlWMHaTW6jNsZ6YWayR7P6YnYFy/38V1Z5c\nLqB1IvkQ3mLoSbdu5dZuCm/W9PnHWRXPn4F5X0rwbng0+sbjo3SQf2ReEPWs\nu0A6ljHE0tY17Kqu1z8CQrzHbsm0YLOlnj3mU/B+bjAJOY5DHYRfedKAP1TC\nCg5wqOdOOfSrJf5gFAFyQpoGioe0XqmoCcOSBbv4PQJa71g2M1NI8XcPB3OG\nfaqSMJfGYqKlZnC8++MkBLgwS9yGr17KOrx5UDy5vSDkqUdG9teJYkWbmyNT\nsBVcOn4FsAT7CiH4X71pAMa5Yz0Zh79F2+lz8Xe+w+WNKRB8QLL3QDLtPh87\n/WX2DLfykO/Hg4rogjMdTBBEjZxKs3a3Q6Gsv3CK6H2+BbCnYqG9wrw9/mYB\nk202aUDWzUvJ7+345csYKKtr6ZPHwsL5W9jSDZeBDmS6/wUjEWAtLtaNFsEU\nQpGmy4wItc0yCFOUDARPH7/psCCyJhNERcwC3vOfGWGQDonYqreZkGZ7MLIr\ni+tR\r\n=3h5q\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"08c734c10ebecdcec22cb27e38dd9d3941fbe847","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.c21b5c367.0_1592597378546_0.6987984309043491","host":"s3://npm-registry-packages"}},"7.0.0-canary.bfdd7fd39.0":{"name":"@material/density","version":"7.0.0-canary.bfdd7fd39.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.bfdd7fd39.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e36af66c95cc53667180c52d6950f238b335a46d","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.bfdd7fd39.0.tgz","fileCount":9,"integrity":"sha512-WKrW+MwoKsBrO27OTEf+5atYQ2bxJM07Jjj51yJjymO/crEojGhsFcc1doiWryStFWys/nsBCMIeuxJD+A85vA==","signatures":[{"sig":"MEYCIQDyYjLTySQRFQAzPy/VLP+zXeHjKs/HyprHg93qwrGn3gIhAOzVToQ/PVhx4GSB5KBUNfVDWQIhBjUSwuAAF2bqxY/X","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13144,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7R2/CRA9TVsSAnZWagAAlMUQAJZdWBHdgjykuMEI1M14\nMFySXQQPA2yR0FIErXOUvYq4nCQt8iQUdyTLw2O0yALqt6v/PqDG2WP5Pi/8\n8wCOkgOvThHtss3Q6FWBU3reRsq845zRapBPoeSHcJE2xY9+TSA3NhIl+vN+\nesDYfVHXEDUvMTmftgdNuZNiiOqjSLrQ5a59gGiA0WyPxAStvZnG2CoBi1hB\n8pS4pU44X8TkcmFSow/APlSnw3waScF4ALjLT4u2aac/j8kqtVtMIGMpsvP2\naYVSYSXR/iAPVuy1Td9yLdyCIgZanCdNIWmpcyKIrieEn8kk170eyE1Z7aRR\n9X4XyS2/i7VY4VMngN98ItFhZeEe3Q94u3TnURNsUtfiQiPEafQqvjk60ebK\nQ7XVCBkW+UPLXI+JLJlyui9UHjPEkZ+o7X8uVkfSRWpnxfAHNCRnmD+h9/tT\nYmO3zA8tiXlbuJWDyIWezEuiFy65UKEklJmZrBMxz9t2/oElcawKBfKZ0fR9\nqkramaL1VwgdUcHSjPakURw7fSGfIRzCVz3Y2xBqsVBFMMgSkB7R+is0cvY4\nK2sBpW+qtWTWnD3GJVZaRMg9t8nlBQ8etM4ndQdAefC+Sp2XAk09Bq04ks/e\nBEZ4Av8HDxGldTh9MpCX2LA1M3s4qIHVq9JuuxM4+vj4khB45dfzBrNJE2iC\nZlzQ\r\n=6HUY\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"b9b865bcb7a8ad91c21f4b1cc433f6a49dc627a2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.bfdd7fd39.0_1592597951008_0.5468014109777559","host":"s3://npm-registry-packages"}},"7.0.0-canary.10b505785.0":{"name":"@material/density","version":"7.0.0-canary.10b505785.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.10b505785.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"131a03485f5bb12ec6e11c9981543df335ec53c3","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.10b505785.0.tgz","fileCount":9,"integrity":"sha512-qHKPHewiw9rJTsFlH4F2gDY13zswYPThMgn7xSxoNUu3B+8piKGEa9xA6tiODWfNSApsCIdRJLa7GdgHUFkOVA==","signatures":[{"sig":"MEUCIHUalzV47ZwQuPSXT2x5/t9VS34UbYY3Zv8x7dzdu2FQAiEAgMAx5m1Lf6nK7HF3MET55Lqi4AyvflvUPaR1g6rC9Ys=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13144,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7R4VCRA9TVsSAnZWagAAT4cP/A0M9CdoGpn3GWSH4eJQ\n0kKAs5LJxaczlL+mTVOqRv0G6SWOtySoOZwJT0O73QcUi5+Cgek/r7q8/ox2\nR+93xHSnghjtUgjXPg5XDUalmUgqknEp+0RrumqcpZsEbBUXraH5MoEXAhsl\nTeBwLrm+90EQPw5ir9KNLlyPIBdZqfnxZcmnFVq6ukUtY7QLSrnZq+NWyWEB\ncigKGvBTmE/D/5/x/BzAUZuLpBGvbbDAMNPs7D/e8++RFFwED4yU8/bfM2Bk\nyOBI1B7rYKNDDXtdH+YnFmxzgUG2b7/w1SYb8jN1hAmGsZ6nbM2E1PTNI92K\nBqD5DdWBqYd976/ynpP7VuGArHEqw44pVOw9FmmFlrlcLjk0fGKAP2T+niNV\njkTFNk0xdubuCOzgBHy29YjPCj0DR/DWsefg32yM99w/lJg/Xwu0TYVJb/iD\nTGArmd5t6TYLGYM1zWlL43Jb8rmaMbgyy4pwW+5uIDor8n2sThZXkIU+skqL\nIobXZytU3nAJP91LK7K5N4ELtET4WxCxWDrtfxWPfFg+QivtC6rc91r4jl3U\ngPxjFQnas+cx38ChHIqtH9XHlrjFtgpW24FdTOM2iocCQdCTnjMU617Kqz9h\n4HzvYbjEXt/xWKOfVKAAHyhRnrpgaT5rB7FbrVKqYuax2Iw4+PbHvQDC2KvU\nT0ZQ\r\n=sa8G\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"ed5923edcb43bfccd9d40cf56cd605eeaab00d1c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.10b505785.0_1592598036489_0.896939488880699","host":"s3://npm-registry-packages"}},"7.0.0-canary.6483d3f44.0":{"name":"@material/density","version":"7.0.0-canary.6483d3f44.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.6483d3f44.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"36ef934346a36a44a33bdfb78e5a64d76f14ca0d","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.6483d3f44.0.tgz","fileCount":9,"integrity":"sha512-lEXIb64VJFh8gWky50BQPOeTWxTVoZZUxWvCyb/74t0+wyh+h3TGPdiLkrfW1Ip7K2m3+JCBMwuwtyx4mkisxw==","signatures":[{"sig":"MEMCIADCffVbFJRhrOm4tHHfJXIuAmZW7zJEaFsZkpzFsheQAh9ROe0w9XzNA7LdXwQGSQkvBX0ULFwCWEz7DG//tdp2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13144,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7SHgCRA9TVsSAnZWagAAJLwQAJKPFwjvQG5u+dfJqCW/\nP6B/YiRmxJF28gsk4QdUUxkJTHW54yjKQdFy3uB/akIKj1gTbv++Yn0oy/5B\nZRb0Tgpl6Lq1bFCOeewAeONBuXHwXfsEFxVH4efQrayfZ41OJomXu6Xf0pqy\nPKsW/wvIi+JFr2SybjUcwE7Q7WKWxKzJlhVEXMnvTN0jOLgyEWCgFj053Rri\n2tkULr4rRYeAWAYQHcRqxdD7YnZkmtxRtb2517aiuDlva1Gu+NYnBV0unFiY\nsSTAsewmgXK5M+XQHZLr+4GhAQMe+5uL08VOcQyDNruKBVD0qAZ8Don9tEmw\njmTcfYlyaXXX5lle25Hru9snf/f2KxRuR9TzBh/NDbRaaMR3xSzNebjMvgDY\n+eUDDVAB/LnmY36pgEUt1vl3qPykmDQybXvfcjJwT8FF+8mmVJ8BE/jGM7sr\nfG+QeOeHJ9hAGMrPpQc4JfX/3tCwzk/OOFL8vfs6Vli7JohaVbhzVhmn/8Ae\nftOilaTVi7bFEy1Apo8W9r4718ZO4caQg2Fio+NjoffHaTzAZ0fLJNmsGcjn\n3yPTZZHH937z3En3BLJKuTxE8bL1fJzuFHkkzra/YbUU+gVhfTZhtAhh6Zuw\n6J+uh0alHvdHdmDZZFAtEAOg6cmYMvx11a3QUSrNq3oPQVABOjjjhJFvMNWO\n84bT\r\n=Xxtd\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"5c831da018408423d31c9c4813c507ca591a010f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.6483d3f44.0_1592599007571_0.8107611502770096","host":"s3://npm-registry-packages"}},"7.0.0-canary.30a74e921.0":{"name":"@material/density","version":"7.0.0-canary.30a74e921.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.30a74e921.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c0ad92a6c2bdda41e48c16b6c8e17ff11aafb283","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.30a74e921.0.tgz","fileCount":9,"integrity":"sha512-fAKZZkNcMAxr6N8WIoo/+r4qIrkNdhisEetZhLpA4QIvv04S1bg/VVbUA/QUE/K9KaqWjyuHUHXdAhsHp/fhFw==","signatures":[{"sig":"MEYCIQDHyF88pQxslBwPEaa1U0neRbKI5CR9i3Mtto2BzVpuUQIhAN/D6eNG4gksd/WSEqv7+DjedqxQbgphRpXaR5fuZgQ3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13144,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7SJoCRA9TVsSAnZWagAAYAEP/jkxuWyyASHifecpeZsN\nArrHYKksTiZU0k93BJZRpVc37eMXSDifvC76FQxfLSgCdFFCE5UQO8veZIWs\nTRzwROgIOiG5XtNN8VaEHGaKUCIQE1Gh8/zc5wKWol8fmw56mFmf9KQELDjx\nl2VQU1AcpdAVlH17mvgRyDNem2AwYJmGsoC9dvd/6pkBNfbuJAlPdoCy2GhR\ndYQAN/g0LD0GZYco3DPXSxPozQfOUxUbMdKEV/JPEOlBiclA0XNE6HLNo+Gu\n144XSAhvOfVzve6YASNtBRez/lMvV55+IJNsgRI7ktpZbBkgQc9dJh5iYvXd\nhEJW+sWIpeo7aodEXwbuk1lhud9I1D7N6GrWuipNfToK4MsvKGITLs0yvErH\nn7kre7yChVfCSP8hVCjGohoZ580th+L3oENf/7pf9ppnyavdoUpipDRsgxAv\nt3JqwXij+CB67gI0fAFh3jXlyJe8SPpbVOZpV9KglhZvWPpOIDNE7oFEfi+N\nZ+92OqFW0wrsfWbCFxFcQu+QZodVxhuEUzqxl/p81FB+5c6/R6yPenZekTS6\nnDTJ5tfNNAFyANu0+H7JLNrPz7z6S0yl1spw5w6K8BLZM70RZI/4nA7UbT3A\nm/boDH2taYysu1lrqJr8uUdlVzdPG++SkDKm0l/IylJCPB9ZUX+2Dm5v0o3d\nom4w\r\n=Utje\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"5f983e004147b05efcae5aac51dc16aea4a18a8b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.30a74e921.0_1592599144154_0.7830552390182082","host":"s3://npm-registry-packages"}},"7.0.0-canary.c20727498.0":{"name":"@material/density","version":"7.0.0-canary.c20727498.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.c20727498.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6abcfd136aeb9d5a4ce7d406cad3e8b597a0ca07","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.c20727498.0.tgz","fileCount":9,"integrity":"sha512-mo+Zqb7G6bVm5/FS4BCjoMnsl8z9SqmXMPLphb8vovi1bm5Bzx3rl1MAICaLJE3846DMylwP7nUBa55x0OrI2w==","signatures":[{"sig":"MEUCIQCihN/zCuQKy6WzS6Z67dD6PqHWeL3fPKjOk19MvqTaAgIgedP/R3+D2Te8Jx9qbrvvHzib9Zsw+NWmdDHswLt/b9o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13144,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7SMWCRA9TVsSAnZWagAAxqgP/Aq0CJwRu/AqD5AgKR7P\nIw9nQzMbu3US1MckVetujnzcouABNCCSaT6hnzF46kVzJo6TFtKinR96QDB2\nMUlaKQyK7VwTpjNTWIeheF7kSmMVV0GOjHRyzW+6o5g/5IaxqTVYyCtpHOcK\n4qfdlqu73+4gDN/pRbAcqUT2ENSQ+uXJoG9ZKYFKNWDcuw7FUhNYTUzclGFN\nSmNYQFDOv8BnDr2LFerJYI/ugwEqUa0FFidlF3/Ooeu9LekToV4rV6cue8be\nZ12iCVrGafBYZEHDX50NF6ejOsPPUK42ulZ5qa2wZNGaJROSIPXLSHMjVfq6\nqtbmxfZAWkpqzwm0lMsoAEx3dvJ7mz5ZhyIRLI1WB38ZKuvmaYZ/ucw3U4Ad\nMwZAoC8lJiP20vIebl0n8txdljxRPiFTWOZK3AREeHbEmwnew6KoU0VUsdBu\nlNndH45amIxqTqv4e7eHxnB0uALxg+mr0w6x93q8qrfoJqNw2VxAOjCw4txL\nOkaZV+E1XKPhB1Xm3+22hkuiagnJDXTS4FtAk2oCi6d4t0cUMsHtRygNOVs0\nqxDANd+2Hk75ow9u1vXuOd4b4lDdxSufEAhcq05+f2kGiS3XOu/DLhtD9DHy\nWz9PR91+fSH8Iwd8UcN5KauTTvt0SI8yCZYeCs4tF4O//f4YG3RwwkH2dt/M\nh3fU\r\n=DfG3\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"f9ac75746f7899d34903c19ff758bcadb9ce2d30","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.c20727498.0_1592599317656_0.8026041493725331","host":"s3://npm-registry-packages"}},"7.0.0-canary.4e360ae94.0":{"name":"@material/density","version":"7.0.0-canary.4e360ae94.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.4e360ae94.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5996b744baa184804edd0525555cd1e73015d633","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.4e360ae94.0.tgz","fileCount":9,"integrity":"sha512-9Pq9TShmlkTc3z7qiLMb/ALIWVaD25vicikFlXFd1Mqlv9bHXNwBw5zUzzOCxzoo5tUHK4nWGesV7GMRjutJvQ==","signatures":[{"sig":"MEQCIHosGCZaDQfN0C3GDGDN4bZkhqHOzdAnbd0ffftCXdNtAiB86hPYg3cZReB5Ghbrend71zcKb629GdQL+hrIYq4jjg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13144,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7ScDCRA9TVsSAnZWagAAFVsP/2XS6cJuTU0oTie/hMv+\nDP6DZ+HSBL3snHv6irNEBrEpoGbkFUjf6tAJbj/syRaO1t03LGfQcG94B93X\nYtCj2H35rcXrMZ3XL4GaHxHXIobqoP8JI4iVQTsf43G1wPY2oVjinTSUL6X5\njoXbhlnanTz2FG+3In3FDW1gk8yZcLknNq0Cb8fxMS/KyGMtpvIoYIs4gDxW\nFTy/78h0UYb2EYncWWeVk7XMnUkEvCMd/WhlBHniRH8oVTw89mgEgYjl94WW\nuLilrJoXK4+F7nZXgIGHXgZifALIoxZHq+3s0Hw719iBKbBFv/+eUC9WDJ4l\nbHNXpw+bFHMwsnX0eHPi8bhpQnL4Zqrr+H3dWZou7eXSbsdQdG0Q2MsaOUkx\nQ5OIaXKhtR28tEdN4EyHFYuNkJfV2XAnv93XyMBN8IMUJNY0aLlfZvT7/XuU\nxMZB3oAsZlgPS3FqgK6weI6HwE++QXl/51WZDhNh/21cpQpfTIqxWgLCW6Od\nDO6PFFsOYuHhF6Uue312f27pCRaXn9pCJTSy2r4NMyK1GWFmBruE2CKWp/m0\nj8q3OqtD20xirpHNlQnsxwvznlhq2GBOcEo4RH+T8boYXn/BLaGCVeev6Pxg\nFzw4dtO+pF885X3Hfz0XlPKjYRbkVa7OVYwdU1Sd9xW+3WkPBgnFbCFgedED\nG8El\r\n=LL9P\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"7bbb3adc3aa84c4095304613145fa53862e147a7","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.4e360ae94.0_1592600323221_0.30762218650294293","host":"s3://npm-registry-packages"}},"7.0.0-canary.8550fa53b.0":{"name":"@material/density","version":"7.0.0-canary.8550fa53b.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.8550fa53b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"768e7675d4e1bb8c5862867d4cf174101b6d8811","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.8550fa53b.0.tgz","fileCount":9,"integrity":"sha512-vs3jp8/5fZn0oImnA8zrDEeW0QdHb307TnBdIOOvc7EPJvHuxYv3yuk3+jt0rKn1Adp4lzFpjbjVjXrkyarrRA==","signatures":[{"sig":"MEQCIHBo2WUg+fE8m8YWCbedPTU0KCb2GNpevRoWC9fq4ssAAiBd/e4eg40SEDI2QKtXHfbEUvbISzUA0Pu03VYMT2pfsQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13144,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7SeICRA9TVsSAnZWagAAhW0P/i2LanT2OfR7U5mZDy0g\nVE9Fj7S9hKzm40zZtGxeRI2/3+fiqeKfYSy0Dr7YYQpNPmGSKCD7u5huefkQ\nxYgO3QA9rgaEoHqjRI7wmBPulB9+DxNYgArheghhz9yDlOULHToOeVBnIfwZ\nfL2RAmeFrgveFZuQUSAsxu+WtP2tgWA+pcX/AXuYlG1JiILZekTQmVrhrsoy\ngaAj0P3RjHbAViE0WFTGhGzJPeqAdvSi7NlDhn1AlBRbuz16echC8x+J0Ifh\n2Fb3Ekeen88CLZx9k9J/hZ7ZoCKFkKtmi7eYvJCwpo5wnRePZXa4hJ3/pdY+\n4SHgW6flBcYWUkXZqISPEa+g8UJpsnlFnZsT1mM84NYFAexEenGZy6jSvfB7\no19jnbxvr1w+poNhRQlzJQK7zkMr6pdKQiL4DCQ+6cAHb0QFISH5Hk7MeRsx\n5IfHa9ckSe2Cux74kfgBXZEOSi5LP2vbYexvJ4QGSRnWEt0qYh1wUmEvvvfN\nKoR8vDmmBL7K7J9CmkvNOULcwCAgWn588P/pKwIssHGOzcvZ4c7NHsEyhqvt\ncuey9wo8b9RKVkTE44OM41twOIUL96I8nsVfmx0o6JGqBXjxERJTvQ2fUCod\nzKyRR0dnBeJ8BP98q6VVo/MnI9npcUMQfG2Fh4Y8LbI5/IZI0qXx7Rb5LcPy\nOI57\r\n=tiRa\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"9d8529cbd579dccb2470a1f19fac57883cb2a5ef","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.8550fa53b.0_1592600456451_0.7386976570559833","host":"s3://npm-registry-packages"}},"7.0.0-canary.93ade142e.0":{"name":"@material/density","version":"7.0.0-canary.93ade142e.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.93ade142e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8f935034dcb87ccdf9e3607e6fcf3e8ed699cab8","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.93ade142e.0.tgz","fileCount":9,"integrity":"sha512-otP+9EghvsuYAZnARQgERsbwJlz8ZXSBZ1yGonVRUn//kjif+95D5r4j1YLbgS6aWHNLrJ7WDo1VuEj6me/siQ==","signatures":[{"sig":"MEUCIQDxRbwZVRlRVbhLQgNXlgtp9xvkWEf5U9pgU3J3faC1mwIgImTpV9xLlb2LN9aSPDmjKEVZdFq7vNuKrU9CgX035zk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13144,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7SfMCRA9TVsSAnZWagAA1C4P/jfPWAwmnX+ELmUfW7N8\naczwKgZEmsIwDhx/oa6PSdl4FQxmxcwyB7XHu6b89EFmeSdjNj7L8U5R97iD\nC/H8KLqmoyk2VtzRM0JElolPuPghEmGXDpVI33qXXud1K2cGwpot25eNsxm2\nY64n0iWfdzn6UBjNHwmom/4hf3y/JzHQfUPH80IcBN21qLFfW2v6H7irszkE\ns/i8cu4nFnAsqw4hiKF0ogbFbk1Ng5+LikroUcYRrSjyEvY0CaWeWGIQ7/8e\n0IGifiL8nRLDOZfotVhXMp8fKP52Sk61lHNT1jHhZ/KoR/Bs3zyZ8UtqUAB/\nhoPyakc+S+NZMjizm4x//gxPvg03uLU4Z00A+4Eda2SUyixhwtXGoAh4IpcE\nKXykoz/MHprZNt6bcboHXjaGhmwvPTyxOLaUbwz+tUubOZgTmyQTjx4DwZVI\nb9zFFLKEnQqDMGiY8uMElloILxAfvLYcW3Vo/CfSi4LiFfaay/gck9lN2RhN\nP2BWgDBYYvB2oxlcdT/k3UQKrlavBjLhcpEfMIz+l5knAFSRWDgJ3VkF9q+6\nVlckMPqEWD33isy6AUkXSjfab9KaixTjnpQoCgWkkeaiDKrLgmxk6EsJfDg4\nQ4S46VIW9sQ+Zv2F9cE3mcrLR6IPc4U4BL3fR+yIIW/nI9NfNThCxTOuyUDk\nuUbS\r\n=/IX3\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"fe392b7ba8c7033e5614eb91a20bdf2e6d7d7936","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.93ade142e.0_1592600523985_0.029719996944239213","host":"s3://npm-registry-packages"}},"7.0.0-canary.a0032f5bb.0":{"name":"@material/density","version":"7.0.0-canary.a0032f5bb.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.a0032f5bb.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9b576b15294227a18837baad4b3666473e6788f1","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.a0032f5bb.0.tgz","fileCount":9,"integrity":"sha512-BoB7i3BQu5q7oFH3yJV5Q2Ck8SwS94YycPI5YnQL223eE+LtL7jPB3c3PFFzNwbjQw/4IFbslGZ/FWY+YrmPpQ==","signatures":[{"sig":"MEUCIQCQkRSuIxlrLP5UeL6V+eV0MQvE3NmW1K9QFAqJJF1mAAIgBQUBnB9BR1MYBZ/un5oJfj0H9EwrPcKqDv/bWcrSDBM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13144,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7S2qCRA9TVsSAnZWagAA6f0P/1qoNwUgzj+WYo/qX2A/\n0Bu/eogZeao0JRsUrL1Jroi6/Yl+7NtFwzIwELQf46sY28RZQVyghIGE/zzb\nA3Ep/8IP8Z+zdN19sg0qe62lTtShfowS6ST+V+HtUaJOB8zGRAgtEXS0tiwq\nWzdSHb7rfdB/lbCtXH/ubjXI3Oq4a/6CJSH1D1vBEd0OT2WGcrfmnDNW1wjN\n3++mnXH07cqpPSWmO7fMtVoPgednkefPLcLCi+05iKqskRghj3Qk6gJBvMmA\nLA/PqMbmTwvb2Zk/A5tYCDoa8nVrlllG64gecfLXK7XujhK/gIG4jbuEu3tH\nScmCWFHQ4M04lwm4j3PAymgJCED3a+r1CmQifWX92egRXNpf+zmFGb10uJSo\nF7oCsod54/1ZwCvgll9VRWYShQysoFHgApXT5BuDYADihU/LQ45zs3SNqzMy\n4r8jmfkV0Ds23Da4Uso6y6GrDRuCsipylLdRJGAVWrkaSneIU5qWxM6MFOWM\nUlvHHMdNisTrSagl7sIOvIN9eZytSEXFnPsSRaQpDf8M3jwgAfM+cxEMsE49\nOHGmWm2pNW8krWuPdM0uH06nzRxTSy5lKx9N4dSdz8UZXGApXS/HbXWJB9QP\njlsmAyqFYD3EVpi6wo45MVLWFPNte+7LXMGfdsBalhmZOgbopZlnQ/71ZIv4\ndEv9\r\n=01vi\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"8c0789d8c409d91f7f4e13675ac80e0f355bac02","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.a0032f5bb.0_1592602025631_0.3583663660603862","host":"s3://npm-registry-packages"}},"7.0.0-canary.3f342e721.0":{"name":"@material/density","version":"7.0.0-canary.3f342e721.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.3f342e721.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"46aeaf8c771ccc8390e3e2bf64d30b17d65570df","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.3f342e721.0.tgz","fileCount":9,"integrity":"sha512-pDouJsylfGBi52WE0QdIGNxcoMEboD4Abw5EsoVkYb9hMnmFT+LoTYK8Q2/jhJZZEtVDYTBMbYCFKzq/AVpn1Q==","signatures":[{"sig":"MEQCIHS9HluQnYCm3Bwe1mjvaiqytReUSzgaYyEE50Jy1YJoAiBXhKBCPcl7MjZZcvMWG1FT+Ybrkog/DmOfa9QAVrs3TA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13144,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7S4iCRA9TVsSAnZWagAA1kYP+wU+qXhG8Nz7LPXwmBF7\nSQ78MftZwrXeFOUbOcm5YvADc1NXVwvT3nDScU/i1KkfagxU9OK2lCzSJs0M\n420p8Y7jj9Aaf6vJvwP6d47VILOjomSuXO+FSw03pdZ7IOl2Tbwwt8zYB/Q6\nZl+mWt047r9HAuP0Ghg9nNgh3gn8Ahsn00aoUz05P238RnRt6OOFfk9hcums\ngTmHisGIZ3+h0mqEq7OlWUQJJMyAIiVyP30kU4oeM/tomum66SuctRY4r66A\nwdMUVaw8kDN707F6Zqf31skka4UpJomKyiBtDpnYwCoOPM93OuxzpVh4V0g/\ndr87jtTfrW778CosRyQ9qHcZFv5LQkpsZeGvtchNMNIY+8BbCs4IFZUbFB9W\nN3RxST8tCUHi54fHbyDU8TdKqyAq7nE1f8GcGXSojMciGeZTYkjqQgN2/c2Q\nc3+KlX+/B8B8QAS2jlAB+ZF0W8qSI56KQjbKwcVFDn7c9bnXtOEBbfAWtQfI\nN04UkmivCGHfdbELXaE/yqdI+JqhVtm5GqQHRm6FklWG7OUwD/UGnZLPl9e5\nC84CL0QYzhLAMOeBkc36YAxJvrzREzZ6bzf8Lp6UOzZrqF0w7G2KSpxd1JP7\nHFS0Wsm9XTYKRu+Z9D4fRHS6tNLmdmyVJQco9d94UKDsbefMm6huVJ8I5UpV\nAJ7B\r\n=lKx3\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"e972042c8ae08ecc8469492707d55d647e3495e6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.3f342e721.0_1592602146435_0.24357177941143626","host":"s3://npm-registry-packages"}},"7.0.0-canary.ff89457cc.0":{"name":"@material/density","version":"7.0.0-canary.ff89457cc.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.ff89457cc.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3bfb1feea1ba98d8aeaa557772a8875b71fba06e","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.ff89457cc.0.tgz","fileCount":9,"integrity":"sha512-lqpW2+5zQzL97lstOtKGsU2tgITw9/7IUb6fljQ0vWQeGupSTGFagFoOGnEhahS2Qhdqtgjfve4LbTSvnKdtzQ==","signatures":[{"sig":"MEUCIQDrvsQv+ib5DoyHMKh05BOaX79T/4gz13rSLWceD7/mgQIgeC1KT1FM65HpsJxHSW1uxOyoi7pG9rVegeFnqHzWcnU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13144,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7S54CRA9TVsSAnZWagAA0vgQAJl8ptKOg7N4Hg8Olc0Q\n7AcFT7aN070LQxmiZmk+zfn36jl3D7vf+6EoEceV5h0sZ1reff1izNNDCjPp\n3uEWrBCxXjJfxz1V5TtpFtZ0MQuy/+hr3aqqkngSQVP3zBCLKGhukDVHjVKN\nO9+tJuCB0XLxO2qB0mgjGRcj6m1bBBrKsqyVPb0U/jOq5hjzGTttYr9rfpxA\nKIuDZK/n0Z2E7914cGT1lKLsl/pYJ8pFF3pm5nPBcZIzFZgo1JX7Xmb8bRNx\ngblUfHP3YeKXg5He7JexLJ1ehb6eZqKEeZOGqFVxh+t5wa/xHzrFtyeaXELc\nNzrQINnoLqZZhDWqWNTFMqdzMAykRTzlOZRv7THCX8ofzA1VPGsBaLMgMTWf\nOwAPbaoOmM47i/hdBI7Q6Otm4s++TUNItrVxp5BxdxAYchikgvEr+ghewtem\n5vkeAebUElD7WOiA48VHecjJaSY8G2q0DhE3fU9uFV/1e6fTCLqsdfWHywlP\n3ZRYsKUKdjeDU9AWFqXslWCjNSaCC/78kKCfWpUdmeNL3T6WqiUKt8oyi21z\nXB9I7bzWNtbaudRiRouY8y3XTlcDOCy5ZFV8vJXzDrpuH2uxiG1EW5ccllXZ\n+Pa1t+M0tyWE5m7Ui6AvI+1opQQ93no/OpGsMP74fnKZ55POdL1jeav7Xk1G\nkvLm\r\n=r1s0\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"1a3ec64383e8afdd818b5edfb74f32f6acebd044","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.ff89457cc.0_1592602230971_0.2946929707503476","host":"s3://npm-registry-packages"}},"7.0.0-canary.4a1855cf8.0":{"name":"@material/density","version":"7.0.0-canary.4a1855cf8.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.4a1855cf8.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"086508ec5dad58f827779ce0d39e154293edb53f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.4a1855cf8.0.tgz","fileCount":9,"integrity":"sha512-ekRCu7/jnD17K1v6VdjxnmpcKx470bpE2E83GvmWK6VOAZmyQDHNrUB91Jg8A10rYEvZY5JZbQKLhxzu6nLQ6A==","signatures":[{"sig":"MEUCIFsqkPToIpgArgMyF2x8kFubs8YENdEpoGpgbVslq7blAiEA8/5Wz7yKqC0D90M96vowIa8B/z4BCo/PK8SWuxmoCzE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13144,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7S8cCRA9TVsSAnZWagAAYxQP/iu6A8odjAfJbQpUyvGl\nsknEGGDSd5OqMvnr8j75Rn5oFUi4h+ZIboxKWVwthqGkSpSRcMqg4t+I5k7I\nktd7m69DqlCH1GeEivFcR0k6BEPfuK1Zk8WB49QlIvExOdXT0dBMJfl6sd8H\nu1QSyGp0pvB6qymfyrhtlPKATKj2phM/9qcHoc0Uu/fKcP42V9TVP6x7kO2f\n5RDn1Ms2rhH2XZq1yYWMTzHjZMOaN0YyYvNsyyUb4KZVUeVHfTYMF6R6vk/l\nBwQAC8rwDY26shGGmiTwA8yXMNW/e8qxXaKiuzY2i67qxPJDe4xRde7z+zos\n+NZLE4R+5zK8qlfN9clC7PKMbl37Kr4pF3qwqmhhLOgvSSVKFTfWMcW7ZBPf\ngYem7eW5wFtzkhp7+Givx9C40Ew3tIgMLil/bMWA5VpH+XdLGDmQa7RU6pyL\neAMKbL0+xPlJ2I02Uoq3HSrh62XiRv3fvi2QM/AzdcjQ7XJdowQmtooau0Hz\nGWmszWbmaBe0d29116SYCdWz1nqLR8osfTbG7nS6NnwJT63x5mDGs0N+Fla9\nmr/3vIr9fsGjBoOcr15lOe9f+d285h8ph4zNIhipf4c2TTOfH9BNyg+kr5az\nNUQco9c+FcuQ1FkMLDbEgUpdj95Rkh29iItCsWL16ZeO0Nen4Mqfk9NpbARp\nsOH1\r\n=vgi1\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"eaeac5e820cdb30fcedba281da8c2c4a846f0e73","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.4a1855cf8.0_1592602396173_0.5000445502994182","host":"s3://npm-registry-packages"}},"7.0.0-canary.8602f1b4d.0":{"name":"@material/density","version":"7.0.0-canary.8602f1b4d.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.8602f1b4d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"57985829edf7760bbb22141ce5cc20a75d607218","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.8602f1b4d.0.tgz","fileCount":9,"integrity":"sha512-GyFo1I/uaz30Fwaoy40+BzxR84QaHMB3RTDY5muGd11EkEZjJvSrOKusfas9Bm9hQjboKwVz2kNfIiYksocbBQ==","signatures":[{"sig":"MEYCIQCSzwOoL2vAB/Ew+SpQIsfyOaIeQlYP0Axj/ktpCApwtAIhAMuM6FMZ57+kc2pPJPQfXtI0WIxLBI67P4udXC9lImxW","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13144,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8OjpCRA9TVsSAnZWagAA0PEQAJtXk/hE5Ufji5Tu5UM+\neonMbNSDApzw7r3eDiUV/G9w/oEfYAkLl/ZOI0HqzXelXBmBu38g/M/tyhiZ\n71RI8o8GhJMTUV9xerQILCjk6Li7fzXx6mfskMGwGthaVTyGls6oA+cRim3q\nU9zjB2ZQ8QSAFKAcsXi9y4vljgJ4rlIxtME1cBOgrtqqYLZGwqAGZBr0ctpe\nFU/4x0fagqj/ShSRVxQIQh2JmvCXOhnCUY1Dm8ShgKES7f/2UlefyLVNZNTa\n+eawtZN5tdHIPVf+gElZYKARr6dzeluRKewpWgvdfs4yIH4XQCv4edMeE89n\nrtcB152s20yIFAg68d9bt5wlw1/q/HL1TetAuraj+k46GoyZvvAnQu1IV+IY\nI1XsM9Wbq5OUuRslYLo8wIPGjrmsLKwpst8rHItg8LBQB9kaGrMviQHZp6D5\nvpYkyjwXh0sQy4hcZkAXRIeDykrMqxFwPN6xQUDDcV+gu+Qkd3N3wv3jCwUo\nTSQVcy94heCCX6c7Jw5EpvDfD8l3PZNU92wGZDW2duV0WCCqhhWqIsWuNZLx\npqrMIazWYYsthhHxh8KzKybdo4nRewsGAoLvbtYQhWy9ds8CnV87TLIF9hif\nBA0LGrRilgpXWkFXK/qpuAocSMnFSJtLvMTzznT+z4BXY6kfyDYSg+3SURk+\nO7FO\r\n=UDO4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"07f6372c5a2f6f8add971db62aba74793d912f70","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.8602f1b4d.0_1592846569316_0.975378685664392","host":"s3://npm-registry-packages"}},"7.0.0-canary.69f9f0982.0":{"name":"@material/density","version":"7.0.0-canary.69f9f0982.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.69f9f0982.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fe8de13d6af075ca5a78db58973c6e6deed1c300","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.69f9f0982.0.tgz","fileCount":9,"integrity":"sha512-u10mHQOw2Z6SkGzFFFmMwhF1lAL20wUBp6X5kTCT6LeARbJfG08VpdziWO5EhCJBCyQ6uRkPtdoefX/Okifv5Q==","signatures":[{"sig":"MEUCIQC/cj0Mk5/j9Oq52WKzulCbmFKo9EVn+OJTS3E1L18LZQIgTc0XGH0zS8FESM7H++V0VutKhNXg0HNOErW1vpSX1Go=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13144,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8R8BCRA9TVsSAnZWagAAvF8QAJf9s5mKbOiZPA6eQBXf\nXBjeeC9RyJ4STRWMX1OqnnvwPuiTz6M3f1gFOmDpqjUZq518m3UD2+ldG6GC\nqY3Zmvwc2NXKXHWQNQ13CTOOYjzU3UUpTtbBVttgHceefb6tV7V6U7pKkXKT\npI6iX9ACNoG2q0L7/Va5BbFv0dxoqsaAMEMQMpMtYLLguxs6frEhNleKZY9r\n6iJTu5kzlob3GhQUqAnMI3OysTdf8hAjHMprXL3vbuwlmylad36B/6LXxfrn\nyb/qG9aLp0DCZxMvEXAX+hTXTXCnqQUV1PMqX9ajoG7STfJY7gbUPKDCJtvf\nBpGfedCsHbO+kk+3K5KG1y9m0FZUO4tiyDwugaYJ0Yh8FKgl/3/LyXSY0swB\nZ1Q9ikwYp225+i7D9LWbgzNdCf333eZYAAB5O3bSbXP+X4117o2TvNbeA5QC\nX9vbSslb3D+Rj9fIP3i5AYwtZkYuq8ZM5qvEfZBE61uJdZ6/Q6FUrmxuMwnm\nEvnWnHVK75KwUFTRUmI1NZzYYe8o1BnlIX00X1DF+NTmbOzKiCs0gyyUOsnv\nRahdH81YeaBP+nuxynO15caFO5OYo0yMg8ReFKDDTDmaFFC+FB6nKQSh/762\naM0of/XjIz84OSZtNIyNbcrI6DRsASiXZiKDtcvTf6Jmpx9FWignZIkZ0ypJ\ndevW\r\n=GMt3\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"3aa0430a8c5f21a2aa9f3d54afe07b1c1b1cac09","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.69f9f0982.0_1592860417278_0.29095250368516057","host":"s3://npm-registry-packages"}},"7.0.0-canary.369a293f0.0":{"name":"@material/density","version":"7.0.0-canary.369a293f0.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.369a293f0.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9e8867f32f8a1db3dccd320fe22e9b074f2297f5","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.369a293f0.0.tgz","fileCount":9,"integrity":"sha512-6esJWlbUAXKwuGDJeraexfhrvKUXfem7JjT2glRM/iR3bGqd0hak99tCbmobsruKJVbRcaaOysvXCDi0tTzBlw==","signatures":[{"sig":"MEYCIQCBjRoRPZ86hHTuMQiEVbFmaJv4T+FVFa2LPgVhX00kZgIhANCCOzYFYntb9OoUqgFhZ97Gr4uFIpAGXd1GmFWC3HCy","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13144,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8R+ECRA9TVsSAnZWagAAY/IP/1Uac4vQ28jQZhWcy+Q0\nOMwIEJw+w56xyuhmQuarcXobi8bPi8D21kGHgEpca9m6A2P4FH7jS0ExK3D3\nCpBtGmSwBjc2O0uztTyXxcAJXV23qoGS9o308yo+ShBU0tizXkrEOrvM3FIq\nrol+ID0KlAlKF+VbTtpLso9y/S/bg2EFIQe3FvseUuiMpQurCvT7Tewi4UQW\nF6Aj0CtRuwXcWcBlXZY+CymsTLW12YLO1xrVq6JMHEDHY7eQNrZz+p0Uukf2\nncnRPsSi6grj0yXlHySjgLTQQ4JxjKV/i6STRejd0nn0cdQuBJD1TzmhlI8L\nSS57bdIT/LonX30vXRNXbJkwpSD+AHKQGLS9Bwio9I0ItyqSVyC0eL3N3cr8\nuIo/hxs9U7tdQ+uKkTawWOIPUUdtXG1x1CwGJk83z2IqrZ7MJAYXPu2+9YFS\nrcH42lDFdzq1sr27jf46fKNyRdk2ORmEQ+W+qMqB2Z7CK7WD6NZP/aBkw9k+\nKubTXmEGHVgLDHr/a0aSkKW+/VdVibTA5b5FEiycooc20mwME31D1HXIApJe\nYU0Oa5Sm5LdV0422WupSuF2FZ+RYD7/5nQLoKQWn9ca0vm3LOGTJnoL48HyL\n9fRt9ZweefCxcKAGWDjaw4G1viGfjjl4STi8t9sHoUWyB+I6UeUUYi4z/5dU\nLabI\r\n=9Hxe\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"4b9943a16a4fab61aaa8f5dad0d4f7aecee862f4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.369a293f0.0_1592860548110_0.9073031025049201","host":"s3://npm-registry-packages"}},"7.0.0-canary.f1432b5c6.0":{"name":"@material/density","version":"7.0.0-canary.f1432b5c6.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.f1432b5c6.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"54b52051209db94e5fbd16ecdc9d1f33dc2df3b6","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.f1432b5c6.0.tgz","fileCount":9,"integrity":"sha512-VebOlP5k4YNT2l5YrXisGcKaryBL+Qxfg2ZrJFm5pwQg2ixsbaXRhyEseq4mNNl0g3oug/wfS8NOU3bzX0KSKw==","signatures":[{"sig":"MEUCIEZHTZwG0di9HIUI3LpLsDVtfRUbeTDLgQHayrNoMYYTAiEAsmbe+sK4+rIIEU660S2wkDzG+Mvox6RufCOfPfI5Pyg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13144,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8SGQCRA9TVsSAnZWagAAZfAP+gOKGADzTrzyiI53yJp2\nCi4Nws7OBdoqvo3hpiUBZuwnKZxJQLyLVir9UMHxwnA918TM/SWKEaQtPy7v\nlYm7uO/WZ2JLiZeL9ncdCMCr5MGTPLbhajHwbs1r6ZmmWO7VPBAsNvDgKIDA\nWtRcBfiXWnfvmFV5yc1jnjX9Krbq3tunR7m28/55kMn/N5ok5VASE91iQkhx\nv2+9X3PDX8aHQXzorfjw4sicLoDex1zuFPj2ALMUD6BJ5b6tQ8GM3WotVLOT\n7MZHl8vOgyAQx4tJQ5CEsyNfbV86/WPJ7n4OZVqRYYcZFgkW3S+C9ZkNGDYY\ntlyueB6V5wCYh47CxJUIccfpX+ndz+J+5OTjp8BYDaS/6dZ6npahP/f+pZ3Z\nCGVxGfYQ9MB/Om4VC2Llyh4kY7W1jnLMN7xQT+bXxec/XM80HDa+tZll/wvR\nhG4LUEKoqm8gdH9kZ+Cr41xPrA+hl4tvARO1j+UIIJWIHXaw7D7SjULW80tC\nuxmTSjIiWRaDaucC45RlA9KCXmEHx76W8YfDmKGrM32nwPeBdU6g6FHd2ryl\ntO2cYIrAi3FQfZ1FQXjAGgZgxkVvgddh23lQXg45slSqO2kpgzVhcZcG2dv0\n4so9tLHyhBfbK4LvUqT0PRyU9uY7Bk1cwZMxLFl+6Di7Xz+1QjiRYb/QaUvL\n0H7m\r\n=H4i5\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"9987341fcee9f9c549490bf6cf1a6ce57b5a83e4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.f1432b5c6.0_1592861072145_0.14842757598343592","host":"s3://npm-registry-packages"}},"7.0.0-canary.4757a16b4.0":{"name":"@material/density","version":"7.0.0-canary.4757a16b4.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.4757a16b4.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9ac8223c62748afc38421dfab47c1792bc17b638","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.4757a16b4.0.tgz","fileCount":9,"integrity":"sha512-IxKOv81GBfBM7amvuLDqB9i0L+USRzuFBNo4J0eH37k7CJpmK09qVYKfOUOSKt/elIogKv2KkmnNjVLdMfLc4w==","signatures":[{"sig":"MEYCIQCt9PZBSrEWuWHSlmv4LB1duz0JhAjYDb/cjHddGHr90wIhALHRkhRXXUlct29ma8sXvBbCEFIfu2fg351oOPDpm4gz","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13144,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8SgaCRA9TVsSAnZWagAAkEcP+wfz6Lvd//7gWYaDGufs\n3Pozjj/jE5IQ/5DXNkBjGzXjayXs6QXSGACTUHKFjZ6IplcKQXbr15omMVfM\nbkIe5LeE13h1sZfjgfKPq0llZKfgsVduiZlU6B1pWlanoWkxl+tm03KpHdS2\nqjYt/yYWpngRn13+NaZ7YnsckwRX8AQFqTShatolepMGzeyH7WAXKVqAGL6Y\nq3A0oIrYIAzKFRvZEeUhuhE8ASgf+WnzFvx3oBOlNY0DWaZRYLgl3gYPL8cp\n9t0YPKN1eN5iV/Y/XRnY8xOZtShD3wZpj3GFrUo0j6aUBjId5UgV+xVfY11M\nwFs82dM5QMAhbyRR/mP60ukGjNU/J4kYmuYKuW2qpS6cf2uQncVloEkXaJsi\n2crLSnnWg/+8mbwMUIrDQ2OrITFVS5MESDL+sZjrJo0sLOjp0L5C7isaZHr2\n6CTWAft3mpW84/x5HMEisCC1d76NTd+bKPyZM0VrP7pMVx9EIcKwYm9i6/3D\nZ8cXft/VujAYMQrK+UYE97rkWshNtg1dbg/THERSmV1WrSOpdX8oGeaQBO5O\n02qNW1xPWQ7KAuZZIymc5/+kNmVMPW7sCFet7Fh1fI/4+UX0aPbMaEe/2jSA\nZqZ+AFUIRIvY4dYTs+G6dlSwJ5pXUvtwYyplpADz6Xm48kPKQhoCoPGjYIxm\nBy4W\r\n=ceq2\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"50b08262743d25109a9cd3d4c87d82d0631d9c79","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.4757a16b4.0_1592862743026_0.9203168628281662","host":"s3://npm-registry-packages"}},"7.0.0-canary.f8f472762.0":{"name":"@material/density","version":"7.0.0-canary.f8f472762.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.f8f472762.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8f6b2b1d0534d567f10874beb9b5c38d6c8134ae","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.f8f472762.0.tgz","fileCount":9,"integrity":"sha512-0IN7vJA/Z3zITMiPFulee/pKliI35eQyNymu0R9cGo/paFvgAliWoZoL8YBxaCmKzOdOHXl4L8zfwF1OtC3LDw==","signatures":[{"sig":"MEQCIC02tJFYZgvM7ZoSOFHgYVoxNusbxcxKT3hOcEKlbAVNAiArXCmUNHV+/NNbtpzGIDFG27nBq+KkSJfxKkufwjST+Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13144,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8SkVCRA9TVsSAnZWagAAb/IP/0fjQn4qCKUcBK48luLY\ngHI9f+frIwSTFvCWJ5Hx5Qp0riA+B1H+Xl8kJHvxyLrLgV9own041tHXPHR+\nBPvZEPiTHe20kbRiI2stz/gZyT+UuEK0+3a4V3TSnZ55KBwc/7Rjm8oHoxAv\nU6GAr9FodOxHNbx63+xUmbEwbx5lpdObf6YSGYrhw1zVmE/UlP9JmPDvqYHE\n8nIMtFAVvZNK8QgUrQx8BUDQBcf5ejTWgqGUdDYWOa+0pi58a8PPjUHO1nld\nWK4yLUpBc/VTrskMbv+Z2e/KSfoehBeZx/agbZra1iKUx7KeA5dty9empFAS\nqCE3bGemZx92f6e7GyjKOF0NvfRAAf9LjBlyI4JB/quwBVJ0iZZV9tP5ZuvT\nNtpvJmQZ1TpbLSLp6u1tf3thtV+0IClWYrba/FGd3qFaRAgJaERFVjjbNskg\nsGY6aHeUcQlpfZH6CAvxbz8CHf49vx/iR8fROD2peU/g+xpxRqJNfI8w7LsW\nIuqoa22fJmZurrUiK35FZk2Ww3XdxmnHfvDiDADmrqXmiJcGu1yhngs1PrQG\nv+hGXecQE04MYv2RnyPza6Y8QQCudD3RJcD1npOwcsYiaOj/fdBHbJMK39bi\nE+4Wak3+TOgBZt7tyq/JwtJi4fAd10sUYksy5zL4LZOw+EwVWpUElBN5l3iN\n/sLp\r\n=vBx6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"b72e40a4e5c11a670f3423da9ae1ab370f088535","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.f8f472762.0_1592862997301_0.7340520796808501","host":"s3://npm-registry-packages"}},"7.0.0-canary.7e4d55c34.0":{"name":"@material/density","version":"7.0.0-canary.7e4d55c34.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.7e4d55c34.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6bb221891d484b6b607ea2af8d13b9408d6483c3","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.7e4d55c34.0.tgz","fileCount":9,"integrity":"sha512-93iHGod4phtC1G80fP0K9jkmSZFJi6dXG+f7fC9LwiNvXTkIUkfn8j9XpGJWF/vkKq8avwH62h8SKbqVrbIfzw==","signatures":[{"sig":"MEUCIDbceswKxEfR1rDsERyxpBxMVR4ITNiGJKei+3krfiiAAiEA6uEDeg+yi/XqFVv5Z+SJuVznbwn87KMDQNJsGccUeYg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13144,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8TCRCRA9TVsSAnZWagAAl7IQAIQeaTWM1G34/Fg31Ckz\nJyhDDzbh6JrIvvMOJk8F1gROvNxL7Tk3eUgPfGjufN39m7KK1U1EEyznbamg\nAgNzxy5PG8sHn8qCpDMLyelzBYpOdQmKLMSx+VTq0byIujP10mj9zRSjp1fz\nrWB+e7RcvisBbBal6Li5yZcCsGrJgX8RbalV0oVJYWX0l3j6jxe5BtjrgTNU\ncwAvLMbReOJxgFtWEgcCyhkJi9GAxdiESkeKsmOI+zf0ogq93Ftti9S8Dj4j\nJK1XFuVVfr5rTVGRh6Lhie5bJLCMZ0Vo6TvxBk+EE4FEpGzxv7xOluSeuRP/\nzEX+nrMVD+gdOCbUI4SWBdc1lTnU8Isfp24Qxd5Bs0vtpIUoJ90QMI4LxbMi\nSoIKXC6fdi7z7o6/eoWPyy0VDLV2IitbcXIRZCKCG8Byg8Tx9sg2qV5Rcmrw\nhT/XhE5lRg8oerzSgZqRJQ4zLUYMjTDJ4LfdnOhLNWe/JPkRmjruRVp7IFzC\n9QUazbsLciJy5G3FV0q9+JHN4Fr6AbLNpTKwr9f+CLiru0e4BK0XS91WUQBU\nxeM5rW9QAm8aWfI/4BfLIJKq0wrfQkeB0fqptLV/kPZovXjwBxd7WuuuLzx4\nlMcgqvRg8lRmM12mJ1tQiS30XEDYtKWQxBlmuSkWRBQLUPUKLTJEHKyp5UL9\nA+PX\r\n=vXva\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"1dcee78d27cafcaab3b8f265b4f1bea83600563a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.7e4d55c34.0_1592864913014_0.8955964081632286","host":"s3://npm-registry-packages"}},"7.0.0-canary.bd1dbc91f.0":{"name":"@material/density","version":"7.0.0-canary.bd1dbc91f.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.bd1dbc91f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ac4b2fa5890771d37c958e9ae809fa5ccc0ad93f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.bd1dbc91f.0.tgz","fileCount":9,"integrity":"sha512-sd5oFJD0E5q7CoL8+ClXD+Y1rQI9v8gMwuBnv9UZ8uTYuwgeh02QE4m9EHa619NuqU90RC5pCxuCtA50wobGaA==","signatures":[{"sig":"MEUCIERhGHdJCq0/4107a7Xdv6YrGGx8Gje3ElaUanLy2v5vAiEA73dXPNKbUNK0L3Exj0evtL6rY+q7nzFAmX/C8c8fdjI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13144,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8hE+CRA9TVsSAnZWagAAKioQAIM5C7CpOvx1J7RdYrnx\nZHCONXv0YJtJXnXuOmH3+fddyDZt47Yyf5uTdlV10rFSmhKgFGH6leL3D97q\naobnDaoo9tUe2PC2EJoWURPoeHEeIiyrHG1qQdUq3h613eMSkEa+vGH9XwS0\nFptdPXNYX+5VXqo+T6sCYQvylvaw01Gb8gIjhqs1c8uaF/FsAAFD/Ue8C1NN\nDI1HAMOu2wnXzyAJ+F2MpwuOUI5YGAgyW2ll5Nc/JF6hzPyeZ7pe60PJ+KHK\ns1JmnRRybdP+mANRZjvHE7DFuLHV7bna9cEn051Ry6vudA0ajQ2nCrGsGOhe\nt6zZB3rGKPFQ+GoAMstxx1zOST4xUAWCIYLGi1I9OCI7m+qTCHKMLxsU5Akc\nf/mUa5xTYk5tEj1WwctFfA86Sk45GwqXlae7ZsCASsdLFfwA2G9v9EZYE+qZ\nSSWZ1D8G+/T23wDWJsmRaSUwqZgDYYr1ndO7RYIzHn85jKqZ4Zr5hDXvPxzk\nWmZraNlp9kxHxWCR2FcBSmCo1PdM6gp9379ES7qDKDO0bEApgk7NnSll8FH/\nTui5R/mRhrs0oKCykstamMEThadZAV9leBAxgvBvfGUeBgpj2HlSBxaGoZMm\nfNwk5ZXrjF19oGXfbpDGdR2qVQGKfMATHgPyG1SDqU1QXKcsIyk0BjfzxFjs\nEt1K\r\n=h9Hy\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"b63b8059c82f418a3f6134124de3ad8bbb08976a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.bd1dbc91f.0_1592922430472_0.11696456302207814","host":"s3://npm-registry-packages"}},"7.0.0-canary.31523bc62.0":{"name":"@material/density","version":"7.0.0-canary.31523bc62.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.31523bc62.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"abd9d351552be506388a17d2f6bb81e51f224eb9","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.31523bc62.0.tgz","fileCount":9,"integrity":"sha512-BNSLsQNHoiXlvJrJETsixok4Yw/FTykXv5EapiCH01gCbtK0fcFDbLQ3mvLCM95bqLvZz51JmCsh1zKo2if3rg==","signatures":[{"sig":"MEQCICRx6gzdFvPEMxeBIOdWjm2BsF0Cy4JGnd1xWFG8OfJFAiBxyK6mntpFLRSccEe1k/y3qOOMNKOaUL1xxxrKr4Tocg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13144,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8hJ9CRA9TVsSAnZWagAAf84P/iDl7ti4TwlhFofRryoJ\neYLdHStwVWt8EOJRNhkecpfvCgXYp7OjmU28RCE/fws06IguYwD1IyJuRxSS\n0y5+NdZqWV3UdoS0SFaEkFiw6IOv1qe5KrSszLaJsG0dftV9xLVBToXrgQHF\n6BwNtCQYDazw+WmcURxLVgrOSTy4HQoOeIW8VWbaqdci/CRgEEe6Hvg/ML/x\n9wstW4ZwhVZXfgbs/c+avJFbHmL/xns3gTR4P8IAW6xYM5kCWpSLEYPD15Xp\n6QoO6uKtMVN1J2703WWVeSkSk4mDyHwWGxnF6I9OECXqqv0FRCq0E53fhcNe\nHYUKrLBnjqcaMvvoFjJ/rL2uMOSrdVAAXf7vjqZEtgy90QzuWN5YX553I/sN\nJfqaeLx3i5CvqEHncW1RveZ7GHp1OnF0i9rqgdhCOYnKLnFgBOy1o4s6lrtw\nRpc/XQ47TREzjAGhLiYgmaioybrR7XFzGmI3qURZnrljCI9uv2asj644nF75\ntLheZf9uEb+mZ7p4ZtTaSkrmiZaIumiMbtotbA0yvW0fVrxuCl/V3k6G2HyC\npU9UmgCijnFXRfxM3OV3ZEGvFnXqam0b4jM+WBPMlEBDcvqxEYoILwZdifUe\n2RIr7DNIqUaqgTXKEyQqMrJHIyxKwKpu0rryvPIAGQkJZYMv4DINmr91HFrG\nhckp\r\n=06iu\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"035ab4d41a8c444abf721e44192fa6e10bed9f79","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.31523bc62.0_1592922749353_0.2930361404886952","host":"s3://npm-registry-packages"}},"7.0.0-canary.a96b6d4d6.0":{"name":"@material/density","version":"7.0.0-canary.a96b6d4d6.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.a96b6d4d6.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"deb4b7cb7b9c971a7d9b6d4c59f70a952cfb4c12","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.a96b6d4d6.0.tgz","fileCount":9,"integrity":"sha512-nueL1dm/ANO5SIVDiWiVxeToWe6Wwxe6OSk0v3WWoxkBz3zSSZBjp3W3sig8xJVBfy3PJT9g0pJ8H7+ZspVxLw==","signatures":[{"sig":"MEUCIQDAGukr07tDnRiXRUJMrqPZCOTlmu/vMKXO9Wf1wkz25QIgWi4aPNw1+p2RzQDwrvs9Jo8kg/JKKcC7koJ4t1uymZ4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13144,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8hQNCRA9TVsSAnZWagAAniEP/1jj0UYYageRyZx/Rkzv\nZZHWfv17KbSMZqr8jbkCFGokX6voBM/ocJvCGUnNdHp7SPa5jL9BRMIbEcNs\npl4d1AbbvJ/+XPYTQ8n+cMGxWebVC75vi87WeNruywK0osu5r3fL8HhkWBKz\nZ16vI855tx/9+WGvi6uASYW5Ss0AznMd1CP0rbuuEasg8SuAcA1gvxKTjkS4\nH1Mrdktq/NESMx9RbyhNIqqG22VsJ76TJbqXBJmJ5unczzvlJRyhRLzHbhU9\n/SFCFdfSwwIrfJh2OGREgf/CXH1JRg2vbJhZJE1Db9kk7r2RZMQVWRguyhri\nelLf73JeZvbd+4B/vHdeN5c7/VdnNO/Y9jpzztGTJQBlnGtuab/DwW2m6+jj\nXEavycDfCdpNXwvO+rg07nimvfvkDJV99hKQBETXe+s2L6BYnN39iOdI7TEp\nycR+65l1XIuW//TptZQwjGoB6LWe2+i3UxeRbMFWdDEbBmGD6FhFTsu8g30j\nhNki00H4mkWjM25tC0CDW3neKkM9a5xOFCp0/jkbGo/Vw6jE7nC2YQCNoIOh\n/07KPtBJpfKdHwGmbdpHZhY+gcFOdvgFyVYaaPOw9ZPcLAceWfGXyXIFzH1e\nI00bGz5ruda+K/oL5W/C+MjSzqoE5Qpay1yMt3qhDz4Ht3FqXxA31B8D0xTR\ndOu2\r\n=FJvX\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"ddfc88933cd9a6210bdfc449fd3fbed391abf4c1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.a96b6d4d6.0_1592923149048_0.2136858682660545","host":"s3://npm-registry-packages"}},"7.0.0-canary.ef3a09533.0":{"name":"@material/density","version":"7.0.0-canary.ef3a09533.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.ef3a09533.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"180d47082a6f452dcaff84cea3b82a24eec49c30","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.ef3a09533.0.tgz","fileCount":9,"integrity":"sha512-JTK6QqecnDLZ3rXwszT+WPCahio1uMXc0kKEnnLIVI6QVRH6RLlrWX33+Z/zmyK2MI2bV34SDGQkDxqkCjv9ww==","signatures":[{"sig":"MEYCIQC9JclN5EIvmbPSZ1eAdltLVLqMfjEDvwckdbUOTuverQIhALDXg3/TihspGRy7jLToRoRzDXmU9sCSvZ58TERlr1/u","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13144,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8hXwCRA9TVsSAnZWagAA8LoP/i2PXGlS+IBtZqSEn5z4\nSWXlUupkY8sM/hhejJfX/GEGJw2TXUHVnfaJv+MpP9SNZ9coun+stJuso1NG\nv0LGzJi4+EtlH4lkL/MiywiwbeK14QVfRL1ck7koWE/doaCNM2gs9Bn/UAmC\nAtvu71LmtMZsVkzv4fjzh6fILAZpcyHDGjTAQw/MKLl1QFcx+VU1usDe4Qp4\npX2xlqZrKwxaleqhXNiAR/SXXm4uTbLCwrxCP09f6Rty5NXvJS0LI56R8dfP\nzErnJkIrPJ4TR2uhLxnAhffL9EvpoT1k7WxEvVJVTrbMsHBB5cacdgfp4BJ3\n/1pv1J3qDtixeBs26cZ/MYFuqb2uy+uPqnhAPCoYWTU2aEoBmsFYiMJDLMaD\nJi2AK11Ms1T/k1wbrBGT/ulM3KuKQwDNWo/fAmVOC+18QMQ1vJxBV66aM9ab\nfnxSOzKAru4TQ0iIpAkYDU6sZZ4fvsRveeFuMfZR7itMDsuvi+PIxWUZdLGZ\nLoGIyq1zx5n3QT3ufTmRxN5ChQ0VkXQhd8rBbblOSuDRlcAGH3E3qbfjmSFc\n9e0ycpK3bgRPiVqteHlPuKC1J1vyBgqOS17HoqzfyefombhUqaqCjlQmo3QJ\nI1XlZqSX3hDmFvyaifZ4pNk55EOeydy9prhLUSGcdhTqNRNPbK4PpkHvo6tb\nk20l\r\n=hNWB\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"2af091492939e0fee42736977683591ffc221f15","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.ef3a09533.0_1592923632426_0.04983943710182337","host":"s3://npm-registry-packages"}},"7.0.0-canary.080965f39.0":{"name":"@material/density","version":"7.0.0-canary.080965f39.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.080965f39.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7cecc5d03e4c3ac47d63ae06601e8d50db79829b","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.080965f39.0.tgz","fileCount":9,"integrity":"sha512-WW9xIO3vhVDeY3BgqMy5J1i5/y8BmcCoaBYsoxekT/NAHjOeAveNuyHj15ctIx5L/2dlSAWqcq2q535JFWXoSA==","signatures":[{"sig":"MEYCIQD91UtLp+MMCL70VJsb53WTx242To1R1uIJxbSyplRL8QIhAOvEGi26AABEUO5xPrOwVtaBONYqdHjCwGIjxhxtJhs7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13144,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8hzbCRA9TVsSAnZWagAAoWYQAI3Dgb1KB8e7JDBJQR0B\n0vZINYzCpCJw8F4XIY5wgedm8cYziKZ6aR2dN4OsrKeeAbwQAXn9sLUDxnP1\n3n3FF40qoM0JDTUhWPtDGAYjuO4ToPioCrO/P9UTHwa6dsmmoKSDSYImavos\n2d3f6E+0kpEVRbegjqGvdWrJzE8e3tNhsJ7VLCoLtP2fKjCFJmjZVHwY+ISB\ne+bpY1WPyuzdF1+QHvRWozUauYYLB60r84TvVmkeMLD8ldlWmtJWr8ZtywfT\nnHTdetZQ7TyVfFMJLJm2UOvkyfp4Snh8V+lkCAU98skHHs8tCxZvLTPnMTO3\nuINznHDBTioSDC3/GwufSaoM7ra3fX3H1WRkxGO+6DVeaiKSPAMufv+y37Vs\nArDTfc56ywx32Ys6kZ/yI2L3+1ZMdgGJ5k6qeJsrTTAixwe5VPSFJdwSikfw\nU64BDdF4L2YbU/2VCjUjqTpH/nA7yRb6+Z38/edJvuGbTk+jVQ83HVijDWS4\ntPMfzQEocVTdRLv+Y2wielVYGqcvdKJUVPDnvZBSiSvj/9YOh3Exe/iF6bXK\n+uQFfq3extCILbH5Eb2rEVDDX6rSCOWFhOUG1WNVUJO6ppNqocwtMeR0B2UV\nxOshvsas9Gx2kjgDkOWtL71BVY0xX/P2TwWCs+p3mRmjR5SaY+sGEYpYeu/l\nimhm\r\n=33H7\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"c0d7c5371df46e0114aef4ac9bc2b3aad1377f76","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.080965f39.0_1592925402891_0.7260105123757234","host":"s3://npm-registry-packages"}},"7.0.0-canary.1bd67b65d.0":{"name":"@material/density","version":"7.0.0-canary.1bd67b65d.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.1bd67b65d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"18c6f0a7266e5393fc599d402f27264d27892e16","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.1bd67b65d.0.tgz","fileCount":9,"integrity":"sha512-xnr8c35qDJeruE9y8p73OwQtjcxu8To8ybq0k+FbYIYKiLu6QBNjLIOpOE5A2yQS7TvHzI20MxQtm0wHx9V7ew==","signatures":[{"sig":"MEQCICw4OAdkQK6ZIWBLq+m9pUxUo8xJV6jmre4FIO8hHR+CAiBy3oCl3Y5dnCUmpzyW2PFtQnD2o5RSrowQYtzBx2zhFg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13144,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8ibFCRA9TVsSAnZWagAACoIP/j7vRF0JBmZ23OC/kpRm\nh3nFxa0hNW9j0iHXE7ypzl3LzdK1HP5s+eoQhIRV4ZtK41mr1ptGq0n+Jvi2\nrcrvGerBP0Kjto56HzRl4bG0hIp3YZSccgL9fksnQZ3we0oRqvRBKNbmmiGr\nFUghinYxj6BoHJP5pnFaY3fypSe898kRdA96CcTyasSUZKiuKydSD0b8dgR5\nZ2/hmoqoY5TUhaRR/2++oP25PzIVAyyWJD5xWk75z+mthqO7VE9MsJzJObS7\nezzocOqFs7YaeUe/rP542zYcSskPl7ljZmCOgzmPm1jrxoYsCj6hgtKJfKns\nk8s7NOuj0U6IptLanUJ5Aq9UHzl0zlKjZqT1yy1DZkyf6f1k/kb+STPvD0FR\nR0pKBDBKNLKBtIjykgS2kERj00ollKM06WQUudc1iVLg+njc3bGehfZCrAkG\nQnx547yH3us4AX1kRMTE8FMrkpHGZFp//Pvl6jxdWfMB1jWC6+yXkv5l8sUs\ngor0bQXYdx7Oin6+ygz/2ZyyvcBKFFpZVfA1iFkWRgkjGmbCITzrKLlBF/0Y\neg+3VEn37iItg9CMxpODP7+eiRSVRfo49dVqyIKJsp0vxsVzj7cMFYe4V5Py\n3/8fUOGGV8vRZZSmAdHsShdGN8Zo7thzQdHztrpBP5hRo76Lcq4y9ooXVyjx\nX71R\r\n=g3Qe\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"dcb3206c3f6c1567eec203025b36bff594d66678","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.1bd67b65d.0_1592927940596_0.5275504345241535","host":"s3://npm-registry-packages"}},"7.0.0-canary.18ca31248.0":{"name":"@material/density","version":"7.0.0-canary.18ca31248.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.18ca31248.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a63da1e3a2d1d35cc9df7e65edcc56988815bb2b","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.18ca31248.0.tgz","fileCount":9,"integrity":"sha512-+v9X3QU+/2cErl53Mx5G8fpuZBUmkcn8NCqr1uwDzoIr5sztk0m+lSreV8VmqOxbjm8t3cwwMVWqEf6dOafEEg==","signatures":[{"sig":"MEUCIQDMFQw+HKL+ouMA0qlr+IqfwIbOjTX7Te+fP97cmUxDVwIgHtt7Fsus9OmnWWkvz5WYbctU8h2uDIrXx5IbUVeFPmw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13144,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8ki4CRA9TVsSAnZWagAAvF0P/2lmTCf9hyW1IfPtRpCY\nlAHOIwiJA/Siv8k42CcdjIUziExuVx/1Gp77lAkTvpDKp+DeGnzzlHwubY5W\nxXakYCuopFdDs6aPRvqb6Dl0oHJgqmkg2GLurLq/zrSqvTN30ENXni2kW3WI\nvWUGSuSf9VzM8C7QGQ6ed6cfqK6QSkL4oZOSmgRPFheQn5P/ZfySS1DT7G3Y\nHbB3UAcBk7PN+KP2L26haoCNpjC1HJH+cKH8KnSSlPskWnzFkztctqhP5rht\nrTaxP1XzPXJRJXvLx2lsiP5EUxfWXp8SXQVrLAAuwKyNMPU7Ank/eJW5fsMC\nn2ozweVCyAq4T38qUs+SkS4f/KDgYfdc+b4eviM452GwkjhgMRhkuT4n4xEp\nDNkMNEhRZgEOIou48fb6zqiD/33ZZPUIYG5Zs3xjudH8X+YHv0bkqux4ZLdJ\nBXqvboI9E6e6no7+ShowtS5VGghPGJGBWCeur5I1vOHiJsfrVCMn9ASIjV/f\nWDLGZrd1RhargsB9M3mZfsDicNFiPnNK4OyhkUEayGJp3LTqJp95/AquBqp8\nuNXYQHZ5YmKMEPAKY5uT01YVLgbFVzjF9y8IRAcapzIB7Tdun8Ne48YJt7dp\nRqBu9d6YNRyfL6zss+vpPB6mwnZLF1zptAUPkoTdNouVzIV+/njXsHKDiCCo\nOReT\r\n=ilTg\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"34a77f9ac5b41ab1f71969d01fde32c58ffc08ae","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.18ca31248.0_1592936631558_0.024520075529455454","host":"s3://npm-registry-packages"}},"7.0.0-canary.39cf00836.0":{"name":"@material/density","version":"7.0.0-canary.39cf00836.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.39cf00836.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"438537c4581d63c4d327f3b380d4f29766f32784","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.39cf00836.0.tgz","fileCount":9,"integrity":"sha512-5d/qKaxnLQPkzYF5pQQZcUZtQRwQ9Pt4NjGGxSSJpYl1n9WfxOia0C/vSILo1T8hFvqkfaCmS7j3dUpBwRsi1A==","signatures":[{"sig":"MEQCIBG7l8Exk10adSecBi+cLrRTXPP98REUbcgDp/Eu5Yp4AiAHwkWOug9FGOJ/FCvy030bIhYAGrj5HgIcYaVM7Ln22A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13144,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8k4sCRA9TVsSAnZWagAA+gYP/RHLWEt0jFuW4L+OokrL\nY00ocEEcA2tWURkOkSEz4sHo3HleG40fhX+6+711uDf+ic3QycoIkzxEa0vA\nxnjJ+xwkh/L0IDmS3cpx3sInb0nB41tZrjI1b12MJv+RWF/0dgMel4Ohhv5y\nFIm2M04qYDttxDlyZD+nRfiu+JObR2aIhaFg3iRhDKw/WSU6VxrfejnW9vk2\n7qG+0m1++jyPveb2Mt+qQfJkC1lu6vIDmrN2wUweYjmvvg2bz2TvqmN33qSA\n5Mh1XWlUEooNPdVHVtNUDpJ+X+GYrh/VnJ7tQUSsjEZCd6Ys5LKiATICrrD5\nK3tYnLHGqWP5WpZgHffvlp7QVfYJ+MdFlLXoQiLrLO6udcChACHyyNIe2ahC\n7K9MyBc88O/8HpTIXL9UsrjYC+ozfhmDqC7jJuR8waivSn98XW+nOQI5lSyY\nwzjWp2mOou6Ey03r+Tl8suD9RWAA7TBI204dGDv8C1MHBnnWwCO/xUmWu/1Q\nvHAmCkDj5gx9ThWJe22iXFxmSi5ZCiIt5WUU18kl38xaKPBP6ykLzz+ZDjrL\nBHqJMuSDI2hu6oWipkRz+xECnA/KK9k1CIoN+/iefgFwWBjEdkAQz3IMtJpa\nEfxqyLLmQ8/LSC75Mnaz9Ds/aT9/aJn1m1WWhSLa2BaX+vATbMJ1ouuaBJir\nQ8JZ\r\n=+3Oq\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"490def2a6575f8ae6a6151f024a9af3fed1f5215","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.39cf00836.0_1592938027722_0.6246870537692442","host":"s3://npm-registry-packages"}},"7.0.0-canary.1bfda9e05.0":{"name":"@material/density","version":"7.0.0-canary.1bfda9e05.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.1bfda9e05.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ea050f28ca74ad7941ba08097c5bd6c80a7cd2b5","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.1bfda9e05.0.tgz","fileCount":9,"integrity":"sha512-X7zFnR4hDPeOwTX2m91jap24SyYRd4e2H9vw/Vf5BnAqqX5EJLHxTlDP8a0FhmLGh/tNRjCHlVL8kI8DQ/lgOQ==","signatures":[{"sig":"MEQCID+50KxEyOQ8DSZq6jvtWZH7J//BEOGimkd0fYWbEZmkAiAGadBJZ2N6G4jUVryIskosTfZ7mMKXzZqhyx8yehm5xA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13144,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8lEWCRA9TVsSAnZWagAAgzsP/04vMtLqPRYJZ9NSeY0g\nHFIDGXMMSGm/c7E56KybEA022ksBi0yu6hQxGX583PejCyBlsTZ662nWsCJQ\ne/1CLuzaM7GVwmjPxQD/ngBiGAEhEvc/ZXQaKIlbPYxw/K89sh7jefFSs8oX\nmYkTuxTUe+lkMP4wQ+tDbOcvKQ/ytepFVlf9eJDlALuY/ez2MkTjq8iYXHnE\no4JW4R/jKEVs1KfzaBDmMwbs5+OjuL4VFhWZLAeEAu4MhOSXTblZaYtsLyJ+\nXekAdXLSq7v/UVErGibyFdmRN1N9LqaRniCizcZP35MSiFfPMAo2fATdjQ6p\n4z3MipscSLY/EpdRMIBMMUnnxrXeGiw8PO1CT6/5Jwtqr/vk5a3vXjnC5E4e\nIwjcI7du3k7TqHq5WuNJJxICD+28SG3fqoEOJlZ4h2/A/+AkYOrTCRmgMWNQ\nRfyMDQdhqjLMJunnMguXo7iUyaKa6PTDxVm/nB97j5CYCGjE4y3dBpi6AGAa\neT5I57N+1lEN5uFVR3gk8ioYlblVz0Q3puF4LZ94r16a15ydQKrJeDO6lIxi\nOK1dDO2iqlCBjbNYe7GKyCc8hxFlJJBz7PyhjWbR79cUxeJR09Cj2/IJQC2E\npYCQ46yU8tOYKd6RUbZRpFyqAPJprJU/eHHXeH9CnFE7IlszXkgHBb39cmaP\nxNJy\r\n=Mm/i\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"d858287d263a004329d22036ef43b63b8ec8eb08","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.1bfda9e05.0_1592938773700_0.523472976967339","host":"s3://npm-registry-packages"}},"7.0.0-canary.08731bd95.0":{"name":"@material/density","version":"7.0.0-canary.08731bd95.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0-canary.08731bd95.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cb17068c2c75cdb6093b948d9687318352b93e4a","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0-canary.08731bd95.0.tgz","fileCount":9,"integrity":"sha512-uvqhzZM0+a+bbk7YLvFcJ7Cq1Tuo2GBauHTcF/2PsT5ti0T96izcAS0PWtsGTLp/C8a442+zGJ+SebyGxr7IqA==","signatures":[{"sig":"MEYCIQCHTDS3BGizt1oDN/9Y4tVkpjtZFOZGsIscYaFE5Ey9xwIhAIdJ5ODAfD9EX65cFagFUnyKygjIaWky756At4Oy6TZz","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13144,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8lG0CRA9TVsSAnZWagAA/QYQAIepf2BJzUQ5cXqhJdj0\njKlbkdLPsw5FA797qq3AHGjwiejL9a5E4D7mqvFZTxDWMtlOw2a8NCC07RvF\nUMNMsPsu0KGw+TDh6bCim+hWpRNut3jEXa+1tg3SEVzNEuIsJ6ryYGE5Su4C\nPjaLcRWtiZGKH7KX/oTCccArD6kFGd/DdCXRdHUJ9KDKhiVej/uOBrtVoiF5\nk/AitFdU3u7/NjDwTFFDqPQVObkZKl3XWV0C33kh0/k8C4odfNa6tcwE59x5\nY+BlJmKmSBqQjULnRwW/xr62uEJ4A/ZBOKPLiSkM5VJC8LMzdusEVctQIEK6\nkZtpbjZ0NfPGlBQJFdknmWzZpfyBZscs4Q4xC+XyHPtXhl70ybG2X7rk4EEp\nfwQGsD6BiqeICeI+l/hwwcgj85p3LYLbC8xdltwwZSVL9p/VXVfwlgfLupmE\nmjTMQMcHceJuDw5yhOarfml3zwpL1+Z6x3LMh3XR+OxzI+xhl0akt8QrwlNQ\nhOfwt9zCsaZT/IbozHFtNSxJuHQ67YkhxKsdNs7RNywD+KU2TkCx9riZ9m5z\nl021kPCcbiwrsAzO1kFJUvc7Yg3VRnQ5BUD9ADmYEQSNEzF6BUfI7TfoCsws\nsOApWkI+FfDKOW6c5zuBvK4UZDdjHNgUsVAZ1PqNBOIGGoQmjhhcCSgOx9Tz\nBizW\r\n=dVpk\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"8e24a4ad4b32b05eb883e0de21ddbefd3c8f641a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_7.0.0-canary.08731bd95.0_1592938932248_0.8316938711707511","host":"s3://npm-registry-packages"}},"7.0.0":{"name":"@material/density","version":"7.0.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@7.0.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ad59ebb62566c1085b51e94375b20b5149d5e9e6","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-7.0.0.tgz","fileCount":8,"integrity":"sha512-UsSngxrpI7fX8xS3QHjg7zHBxO07ftHdgBWEYklH/7xnv/qeR1OeqhLwZJkBrKJq1BDnJpeBJ2CHeiw8C5Ir+A==","signatures":[{"sig":"MEUCIQCk0fxbOSs4cOtTr7pvf5fWlVVReTyN0kTywmNWp55szgIge4ICrq2yg+/VWdrN1EF8UzZaMyKvBRHVBGOUxNsP06Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12031,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8lODCRA9TVsSAnZWagAAewYP+wVGJEkAalf1n8JHp9I0\nU73PqJwhwgC9/5prb59JVtOh1iJpF2ZOHctM/pzlF3npH6ePHhPwry5GNqUr\nP6z7CVml//ZnWkLNxOF+RBbLivL/+pbAY5x/5hSKKgutBstF3cFpCMJuYU+v\nHSzQOLDsGNtNonbkyyw3jXnYGXamZ5IME8bWAOk9Dv3180uXuD3VLQ62W+U8\nAShTrRPngXH9mCqlBQjEqnY3glzG7GR/WSPM96FKVj8vDbV3rkTsOhZyGAq6\nKmZ/0KKLk5POGjCPycdVEKFwSn3jbVnd1dpO3C7wAewDcvo2A5uYLQula7LP\nG47OX7+VVQ+9wGlKQ3broR1IoHskSC9AFkJDQwvYE5hA+msNk2sdNNuuPeLe\nVmQz9ARPwjSHc9b524qCwhJomlluzVEXWKkrMZ98I36H3qwXzb+iCu0CPyF+\nIiomi28KMclSLd4bU3MkNX4PvnaRxKx9INFHoRdkiab+i05D35iTSFcwTgAN\nxTa7XaTW4/HdLwLINRTzWwN2J2l6HjHG3O9eyZ+Gkh1Btpr28fo1K3LXSvuL\npurwuiyvyqy3P5xMs4t6njta1XgwooX2eOiPpgLTgjbDAJUPqjiScpGTEthV\na8ql+nXFnoaPjDNZQ9nEZCb8POKwyQ/H+nnDm8g+PO4LTZ0OzyWbX8kj4d2h\nGR1C\r\n=akbm\r\n-----END PGP SIGNATURE-----\r\n"},"gitHead":"a3212b2099765947f2a41d71af2cd95fcbca4b97","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/density_7.0.0_1592939394962_0.8603006991883708","host":"s3://npm-registry-packages"}},"8.0.0-canary.a3212b209.0":{"name":"@material/density","version":"8.0.0-canary.a3212b209.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.a3212b209.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"64c049a28b139162c5d07ed89c336b4a5714b224","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.a3212b209.0.tgz","fileCount":9,"integrity":"sha512-6T7Jl5VF/OI2B6Cm1GtZoNgxL5EGvbIfX/qiELGe5KKL5vPDWMLsSDU90pWU6Np4Y2Cl7AnneIWM2f+S4K7wBg==","signatures":[{"sig":"MEUCIQDTtdE+FKIycaSTAOCvMcT+0s01G6IMLV6cCID0wJugSQIgWCoEkpdk7luG4xlbg74J/NamrLaTao83HUT9cCasciY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13144,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8lO1CRA9TVsSAnZWagAAEXIP/igJU7J/84IvQjo+tXfN\njQwpKwo0KFZm7KYhZ8dn12JIAKW4VWHuc/3lAzciKqB7YBsar3YEJ7iEpMKI\nKpp4L9eXjHUTO/yZ/Bxk2dNyqaeCC4/jO0Z0fVxu9QkLsh9/nNDxr8YnsNN8\nPVigUieseaGVz6+eXZo2JJF44PAmhG8bx/qXGIEQbQr0I6tzXqWkw7qB5lO2\nTbZ+LhktAdqcZcsI41vK63PpHkGskjxRckNZc3JiH17AKCiHFiFDok0cs+ah\nhq/7axN4SkbqCkRB4l51qPlrAUtCErllQf7M3Bc2ufwr6uqjKRgy/GSnoHzX\n0McHNt29Wf18vw2fO7LhsWo+yQQruNXwH/MYqSOwrwJXnwiINs46owkNDlSA\nU1smX7JYCvfNVOz2NS9rp1yhRaPGXbKWIM0fyT1EwLc/pxMpD3JAi5DrAATs\nvRit92rlb5lbSyZg6S29p6l/49w49POy0o+2g0ycBrBfLqe69XLEL0NaOzz4\nXtCD2KFSAmszh4gCQENg0bHYTOz/l4DP3bUwzogu9JBOJspScpIXbYFgKTy+\nYpCTq3sB1bXywaitJ0w1/n6jXCGxkFX6ygy60RnSiM9lXTWCMP2TK2c5+WV5\nylgBqPpP84q3/3tR+4IcNOcg7GIviN40yJuBJHjvrrU95vfHwyvBPVqy9ro6\nJfmz\r\n=sf25\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"c48f67451e0470c28a2a044f902a31f9fca577d4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.a3212b209.0_1592939445515_0.43771540702544476","host":"s3://npm-registry-packages"}},"8.0.0-canary.15e81fe98.0":{"name":"@material/density","version":"8.0.0-canary.15e81fe98.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.15e81fe98.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"09dd7b3d2c7009935027dccd5e687bdc12cd0089","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.15e81fe98.0.tgz","fileCount":9,"integrity":"sha512-XBZuoycYyQbK8QS2VQE+AZdKF66v5ra4TiVkHtnxrCAWfiViO2VEDxrDPUUG7oWeLcjeOxWJ1xE2x2pPZDvJOg==","signatures":[{"sig":"MEYCIQDrFAMm5LaxZWZz9An5Yir4XkFUNSRq8jSl4w+VSsUYBgIhALihTMUl7HcOLpKg/+uEcY2f4rm7ul935IXzH3SY0XbI","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8lp3CRA9TVsSAnZWagAA02kQAJz8zra/f4fA7KQUTX1K\nV3znhmB5xxfPF3X5L5vy7lQbhV22HOh4xyreMBBeDIzK4FCMLmjuApXLWsFc\n5dasO2+ghOn0Cg/vsZmHqizk78fYNmTCgS65hshOTtM7v6DVJnAr74HHB/xt\nho82miXSNq6BvWzakE//7qaVOBjvD8h1xrpygIj/iYucf5LvPIfKkvhMXk1/\ndIEizS6LMkOpV9pjkFpJ/NKBTSn/ZJWk3Kt2oelh8TdKbxxKSnXV/OB4lXjd\ndyIoktodYIieE1MJCJ/PheuxMDbsA4pvvu007es6ySuRGUCEkoSStui07o6J\nE9hsk2S//AuFqIVzHMke8so8V6eJUQ03YF+IXUSm41kezSYSbjblDHch65GP\nYMEYZEJRUG0OV0HkuOa9p4mWnDE4M1yEPffBKP+6HGoHydE/HGuOhXOQiA4F\naYqgJAJ7ellE3xYD4IG4oUG3dRgoUQcTNdVn5hKxJXm67vsY/5+AfeptQLwB\npP26An84oNHGWIGXsazAMXYLaKxHtYBuMO7I8UnLH/yteIaXaTrAQBY/xOcU\nSbjifl/RBCljEENLQOsqSxg3ZpB39+Ebu9/dWU3+RJ3HbVStF0LHPmFlj7zc\nooaEGTEAil2get7hbYYcccINHae85F4NxLEOzkrestarMjN4nEiaekDbn443\narKb\r\n=Gc2r\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"6c7873baffc445c3cff5a006913ebf1bf53617ac","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.15e81fe98.0_1592941175509_0.9702881746332219","host":"s3://npm-registry-packages"}},"8.0.0-canary.004c9d392.0":{"name":"@material/density","version":"8.0.0-canary.004c9d392.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.004c9d392.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b2aa0f99bc87a71018ba69e8b66008d7fc09ebda","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.004c9d392.0.tgz","fileCount":9,"integrity":"sha512-NOGWC4WABVKdo31XaecYiH1cFruML53gKtr6D3OXl3I1/oi5IIzC+mKTe4bmbIgL46ZfDaNEZy4nUa2MAxzgBA==","signatures":[{"sig":"MEYCIQDxw13FV+HSj78b3G9O/WwbZXaqi/eTBKRwyxyyr3O68gIhAOE8fjBg+nDYevz4DYwCBDrxA0dwSqaG8JFJN7Iov42d","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12499,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8ohOCRA9TVsSAnZWagAAw+4P/3QlZHXxwiNTN129KcY9\ndKcIU+qU27VlD0q7fa3Kq8rEzJZv6T35x59OTcnCLMOLEeDrOzr2zryt+nB+\nZ2bC9BCTBNUHaWlTkLcrPfeMBJaaBAkgSeozFn+cFJs0CR1mafXLaQkN33fX\nWE3XH3vp71br/BeI6ARG2ySeqXnK5mPBPEYy/EAfFoqtgF8CYY+grkUE2nv5\nFLZMZTuobV5ujQKHx8J+MyhX9v75eIdFBx1tT8ZuuMA9UUxD3M9RtB+mgzT9\ngj+N+T4dmOp8cw5XNuK80JMr9NOLTd+uWhtiN+DRHKaDCFpNl8spzBAEEFNZ\nghXNErF6BEiQUr9O69wLp/E7qbZ40AQgjO7MlQ6t67vmw4/fJRNwORXrfpFF\n1Ri2s5S3Q49aFtKh4ffIf+yBLW+fH5VDPQGNkWO+EhXmHlQrCWkiUw1v3RDK\nGrLQf+iqew+RSe1NS0CHoHVTVVPZT0/jfj1HYmc8G/U5ydV+n0DPXitCj7CR\nKMhOQ3tqvBe3grtMgY1hVWr7W0koYbO03K/eUXF68BLzLckUYSE+yECSTpty\nqV67NFhKQkl//PXf5XFPe3Y4epDbFaTjNI3xmH5a2lIGQ1/zXUV1u1dbHzTJ\nVNeAFkEf3hLpxuxRP0gPjErsN+xMPKglTGCWJS1iNcnnt+xts9Rgn8DYlkQr\nsYfb\r\n=WTFO\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"776ec8815215499686a6c5d2a13543285c30a7ba","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.004c9d392.0_1592952909593_0.651549490971989","host":"s3://npm-registry-packages"}},"8.0.0-canary.03bde00f5.0":{"name":"@material/density","version":"8.0.0-canary.03bde00f5.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.03bde00f5.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ca8f78423fb564fb4e5c078a0297f8216a29fbfb","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.03bde00f5.0.tgz","fileCount":9,"integrity":"sha512-dPy6GqrnOvbNULPA/AErnvCQefUF6XO/VCTYLIadVZFnrFoAuTCqcLtASc9PykMPLnf90TLbKQVmGYJkFR9L7g==","signatures":[{"sig":"MEYCIQDs8Lv4TOx40vrLXK/DJm5uQiCeaid/eRILmBddXtLZ0gIhAMJuR0OyGnOraqzPQVcGPc46225QFiC5ExrvD1+5lHQU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12499,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8p63CRA9TVsSAnZWagAACckP/0MKfdj/tDBdaHIUn6OS\nLIEvXKsyclXDT2JFSmI+/FNHfzmAMaf6vhOv3hf9sHiTw7NSO3Lru69nEGr1\njIKBjxoFBaH4MyjbOS4mdzwO7rG11QusL4JzOLIA7lvp7D2g0zHjRf7YV9hz\nJMRCKwObBopF71mkG5wKtSwukb9lAiNWx7Ha+KhAIomo1IDDYY0GlifvLn+1\n4og9KN3GkC3TwnO9P1iQCpA9dPwMc0PnXvX3fNNpllvDCYSZ9NFKMA/lCx18\niBEAyUZtHT4VpwhiuyKnisWR6Rbi9QJ//UkzQrs1+0lHHuxjlqkoJsOCoiRc\nqsuaL+LwXNp7QDhbI6TWMzF/U22iMJ4bpCp6YhLIYrEyM/aKw1q04a5AGxiB\nf+Y0lzE4gJxjUznqBmLunNwxH7ZOJmu+DRHZf1/SJESk7SBCq+i3IxfxqXaH\nXttKY26ZrFDpPEiXfDtaPSb/a1LS4WdoG0k2Navyu0C8ZcBofLDoZ9eeTo1E\nMgHwzr7fa8fyrD9QGT5KPxdHIAvSk0I/whJwctwHVGSuRivT1HVMKTN2r30a\nSJLigkAkEZGYFzos79VRXLALaAYDVbRJhE0HQZlOterWYRZkAJHoqGaKGaSK\nTe2svC/c3+q/98imaLqdI/c2QjoofW/ziWQg7uAmWllh6yh8x9AowL/T79qe\nZpEB\r\n=NwSa\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"c3937a4069800a251640cebe987bd7911de089aa","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.03bde00f5.0_1592958647170_0.08955510110516607","host":"s3://npm-registry-packages"}},"8.0.0-canary.599b8c319.0":{"name":"@material/density","version":"8.0.0-canary.599b8c319.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.599b8c319.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"30b0c58e1b132093c7ab47b24f0a1c50271835aa","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.599b8c319.0.tgz","fileCount":9,"integrity":"sha512-WWcorndVtTE/A9C//eIVsGu4nzJ4uYcyXZA9h9JTHuPfavwJH9u9FYv+OrUsHmSzWpbFMW9aYQPbC0f/xUWXJg==","signatures":[{"sig":"MEQCIEv3qdIrSR24XEfC+6j/aWtVmd8vB4Ga+1SNxOqhDMt6AiBylBiYOT8iZvLyb1Qm3WI3i0ZJRmfXsyvE/2HhsnNN8A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12499,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe82lcCRA9TVsSAnZWagAAPuwP/1qYiH275DBbTYQKt6T+\nF35FtyxjoT6R+x6muntE608CWDMjnVLTJotM5lQQSQEGYkLct+2SxZ3+KWao\nrLQTt4cmbV0XEuQUf1WJB66ql7fjGBTc49BtGApHWS8k64rvq3mDsQZVc29g\nwaimBnywzTKqRE2Cawd/1SESzy4jhByvGab4QJV2NdVjTWy1SzLHAUQg86Ha\nHcTagwnxI1WLqzF97LfzEPZ1enVSE7b/6Wa/4fR5FY8FL7+n6FKjRTaqRLZB\nx3zHRNfpnhBsTDwFxNLERmD4Pi2rJbkxTHZ2TYLpUkMNzs1gXZG9Mo9h+U9K\nH/chGdU2csqaL7Vn/sIh8jqlCTWErlZyUpCv9uMov2be+hn2DYTxExLvb95s\n740vFCVeyPysbjw6OULidqfgGZknevGjIWM468q/VXBWhvyoj5A8F6NsH1y6\nr0/7Bs9mLcPnL5v7Gyy3kytCfHeGEq5kVP5dCjI68V5diw+REWpUzoYzGsY9\nUfCoggK79Wv9lJHFVjouxUsfInVhMddEpJl+dbxFxA998Hfdr+h32KQDi0NW\nK6nsdxIoZozIdu8mEJdbkqJp6fpgBSbu2KuWdcJZH1HCG3QblfNq+dudhjlM\nJsYIAC71Lg5GS4B4hChhMjdNeACeUxoWI3hWp5FOeo0Jk7kQanVAEmxKccgL\nfDIX\r\n=2Pe/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"dc6dee1190cd8d60caae49aba599e9d7072433e6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.599b8c319.0_1593010523737_0.3875096131979634","host":"s3://npm-registry-packages"}},"8.0.0-canary.87e3be418.0":{"name":"@material/density","version":"8.0.0-canary.87e3be418.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.87e3be418.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f1ba96c895c0003530d352b4682604b542fb78f0","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.87e3be418.0.tgz","fileCount":9,"integrity":"sha512-KIiH4sdhQzgKmGj6gtzjvmqGJZiURSBty5/Wgtyr/reMoVuh6oUcSKHnZ05Q550UwI0etPHVZNJWmuy3V/vnUA==","signatures":[{"sig":"MEUCIQC4ojHFlnIsAgJF/9NXZdshhZgzz2/A5SrkW07jvuiW3AIgHHMKMWOVOuxi5DzVgeT5sP4YY469QYwutFpm7C3L5rU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12499,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe85LaCRA9TVsSAnZWagAATqcP/iMJL+h/bFyEJmcJ2ZlQ\nkxXtBi5pxY4Ffeuzp3D15Cl0kFDlJ2qE9+m6XqOkm+R6sLorqmfLMaN5JVmP\nxU4BqNRLiKNa/lkylwPUsDnf0LrwdQejy1KKcKO/B7Gxgnw2lU3DiQkgn2Wa\nyq3FYPNyIe7QVKmmf5Laa+I1H82H/naYBy0M34dHNm0g2i1CFRQRPMVgZJqp\n2UEoM+ND/GSQIQiNdMDeL6X6TYmFYUZC5rsuwgwjMuHvO34IlH5t0FPcoTZ1\na03jaEANNiW+cje1x87/ruutBbyI14cBSGAH4sLDy6EfGPvypCKrPy9dB47K\nYloPIpScxLhn3UUZ45W7zaEX3tAaVtJwpvUWs5tkxnwZcfMKF3NuczgueEoq\nkQsbRAjRjSgrAg8UP+J8bD0OScNCnpCJizvMeEF/2s2qal226XE61M+Jybpc\nte7cHydz+jqxVagfmpAa/hvRdW33z9u/Mj3tAHnOu0cE7HL7ZxCGdupbvg/Z\nrZmH1quXv1Uw2cWyLa21ygWfv+yYgjwEGIG3o7bJpPe6dfx187/lX7yhtuOl\nkoliAZV7BZ6zWdkCv5caQzUpY6ew6sLrTul69cpcJ4cxeKTudmIDaQ0CYjqy\n5LQU1W/y1x5Ooe35IWiaUu3kpvKJOwhitdp7T4RdjhwTEL30aZUoPtimlkM7\nXxdw\r\n=kTXl\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"4f20e6e641b48a8ec7f7916b83272bb1322a3663","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.87e3be418.0_1593021146440_0.27107150828327","host":"s3://npm-registry-packages"}},"8.0.0-canary.035cf2a6f.0":{"name":"@material/density","version":"8.0.0-canary.035cf2a6f.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.035cf2a6f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7ffb6d3d5b2f423aeecc93f577961653f5c8b667","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.035cf2a6f.0.tgz","fileCount":9,"integrity":"sha512-2Z/qmJUHnyTJENpBtsdRxaoXw4AqSD3PakasDW9dl8sG6OKZGFcfx/TdTRZeAkBIRG9JPdY21zbgvvf8Wlu6kQ==","signatures":[{"sig":"MEQCIAmVSGSMb4BDJGIo6XjCg/TmJQRF9Ov7XECBw5vXoypyAiAclLf1XKByb/w5/auZ7nEsCZeAwOFmmxATvFK+BSnjwQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12499,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8512CRA9TVsSAnZWagAAlnQP/RUP07N++fYx9PPZJFCW\nTKVfxNau0F0izuz8FG+Az+23S1ZBus7sU9lD9UvJy4Wtr1BourTNge8WxQ7D\nOktsn/ZVY7S30REBjas0YLtDYwtJH1GN1EqBbEMSS2KInmCCN+1BNZ0aURXd\nO7KmOHOoCHLcssYGwpke6FJs+/N0xlCtzpv8ivgGYqzvposHqw80njE30RQK\nI+JKqHmWYbiGQArJh3IkY8H0iaa9eJn+6dHLuoxG0iIJw25OsDOrymh8NOsc\n+GX5u2XhKVEyyg2v5J0TZCc8JsFhVnX2G5UqXnxE82ya1iGSmUkrdHGGY5S4\n7viPcP0DXerU8KphXrgDtZ5IA7YXVw+VUjHK61FHJYIztmE6w8Ty+dS0EWZn\nTP3F4t07yU34n5Onp8RZkRidVNaZjcxgFsE2ThyCb9pstpzNWMW9xXWa5qxg\njastYbYs9McuiHL2lsVHfoejVlCYKWrn5hCJrppDbm5vyjtr9F6a8ypFeDq/\n7OqsxW5b5P16DbpE5UPTAra4DMQ7a5LueNMZeg62xggIPxsUHAGRBAFqfsER\n4VGAgsYG3y16Arvs9FbCV0HFWxDEQ6u8MWtJC9yGdMl+V7rlDvTnTK5Hj6MJ\n5afHnJ8h4XJBxoMdzciAz2I7wy4h0f/aTeYmxFREKJOUTjQYHPWg008Q7Bzt\n6jCN\r\n=L5Rz\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"b41149a9f9767b120dac2367ee34f615761dcf3d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.035cf2a6f.0_1593023861844_0.26271785022474536","host":"s3://npm-registry-packages"}},"8.0.0-canary.2fed2c12f.0":{"name":"@material/density","version":"8.0.0-canary.2fed2c12f.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.2fed2c12f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"31f63b3d9925f82f6934555cdccb28a034ddaa25","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.2fed2c12f.0.tgz","fileCount":9,"integrity":"sha512-wN0nMUiZTnNVwE8o1YQfHlV+WvHr9Ibut0X6dpMTMUkdMmBVL+Xv0cx+ur02VlAHiUzF+Zj4zM9ksyALW12DJw==","signatures":[{"sig":"MEUCIFjrWSI4t27mqaAbmswPd3FB5Y4gunRuvVGSuqbim24RAiEAk2aa0B/8/M1lqYbmyLqLYGhPn7jYU9FfTj5LlzprlYM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12499,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9QIuCRA9TVsSAnZWagAANU0QAI42eG+WrOqrPzwbHbLk\ny4pGC8C+QvToi8JCWk5HO5euM2nw/Nn8jvfkCKOuNEdL0DUQUobWa6Vzha4J\nYHuwEJXDgUTh9dF2G6UCkGieSJbh7CLYoE+HAMVzA61hJNEsmtxqTZZ+c13D\nEpTE0/n47enmVeV/eZgRlxVMMskCtlxcZ03K+dPnVVCCrbCpjaKCGleMG0bh\nCjQ8AIbw0LqDefBF0OxKTYQYtcpfP/xtKbOqyYJoPyUa5E0+YR2JM1dcmHH7\nLiQrUK7YQKaIBylRzs8+pMwKD/nVNMYFmSqsDWGBnLswU0Ux61C4MvjCakf8\nlsj6lTNAtIdjIg6DNYEbJ3CuQu38Vl3s+8Al1onqPsAjgpxu37hGsgq3987E\nToCe8hvOeCIsxksUJLayYPLk7vHgkP9l/AUZgVb2nXWm+FQt1GN8rxma6R9X\njYcNgsdGck18SnaW203iQtPgmVzwYxgRE9/SYTvz9gGCvlz0z2WnEc3sBXkV\n+1cg5GsYr8kuMuwfDhabbXfUuUqOVJxlZRr8uYu9Q3zTC8FOem7u+tu45+aN\nmarHasz7Rf1cBgOAG5jZV43SfY1yHFTgW3ZMWQkTTDuo7Pt9i3WBeHCIGd/z\nKBIpn+/YluzCAkCS8X7W0nxk7yIDlT0LbUhxfkJAiB8SV4jJ1liUnqqOXhqJ\ndnu+\r\n=/+eA\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"9c7b4d7bb8c365a3b1a4408204f63c124455f635","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.2fed2c12f.0_1593115182345_0.9756441861705649","host":"s3://npm-registry-packages"}},"8.0.0-canary.38197b443.0":{"name":"@material/density","version":"8.0.0-canary.38197b443.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.38197b443.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fb3f4cecadef56cae1f2cbbb5f2d6158428d665f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.38197b443.0.tgz","fileCount":9,"integrity":"sha512-g+H9Nt7CJ/RdUL+dykdkH1ywDrw9EqE2ke4kMSFh/KJFYthWtneGc2qvv0uMe8n5tOblqCTcF6JMaObM7BdJiw==","signatures":[{"sig":"MEYCIQCrfQ+gkhqhlznJTAFbUfCnLHeQE3tmnjCKvlzeQ5qNMwIhAJG4x2LuxRubcFHb37gtXZJcsQRjs0cAkx/3hftcpJB8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12499,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9RVqCRA9TVsSAnZWagAAZ2gP/0+m/mT856V2pC2ATgKt\nJh64yM9mbxzlj8TNKIsJ2ERSVJkaUdj+FQa3KnS7++r17VXVQlgvLAhzWk99\nLJn0ZoYE0RHcgPaImocv5uhEQWPslO2OLtNSlhrsyTjKC8jejRG8h3PcPSru\nIMXE7F/4Z4/Ju0Khmo5N5qS2rf+h1ivf3LW6ZubYhOd2pUqjLgn/DN3etsQ1\nRjsOIDyHNasLQRiYzNrLv1axUCLORuVIUKEUgC+v0zzZngHr8KtkIOrSOnQK\naWuOAqOAtc0OjFUvl1OihvCNdCHebGGQIEtE8hO62juNKRdEzV2hRENXiVxl\n6ntVL49eT2JUohNhGuWHPLV/EY2YOY2K99HQAoz7e07gyXJfDQn1vnAnhxOD\nqeAdjs0dkaQNkGIkFLAQuYFIqOHIdqxSDrh3Y2RHzM8RUg1kknkLkQITKW5H\nTBGlO5C0dA7g44DAEHQ6F4rM3Ym1kRZ5G/RMy+wtYV7rDG9AYqcrQSuCxxUJ\nGFGHft07tFAEVPJFkBrytVWuFwJOyeM2ZO3mv2B/lM3oc8BGExKo+dNXaMkK\nLufrF9K9vOgLE7DIcdjZI43pJzlWtNcG5/kNqJIsSmPSmgvZBWRQ3anYTVIF\nzAnK9NIUdTPiEJTzFlwls2XLW80JbiNLBzAOCZGC6NHq6GqwcI5rq09xZ+Qz\nTC/V\r\n=bZu9\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"d5e18162ee3d69aeff0d489d4f3f73bb1cad7b1c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.38197b443.0_1593120106030_0.6805777575369842","host":"s3://npm-registry-packages"}},"8.0.0-canary.69a35e80c.0":{"name":"@material/density","version":"8.0.0-canary.69a35e80c.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.69a35e80c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5a48c28d99f97403210dcc1691f59c19c598efdd","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.69a35e80c.0.tgz","fileCount":9,"integrity":"sha512-KpyGRzbA7ZRRj8lwsXCi2ep1+jBHx1VyCJ2Ze7a05a6nXOEIaFVq41GimqLvCPs622Urg4opnLyzQJjmsIv8FQ==","signatures":[{"sig":"MEUCICuRwuTRefuFXxA1qE6w41I01af8BtkGie9iZfM+9a35AiEAtN0oie3l0j8nLyGWPoulU0etxX+fZ7L1poFLAQGK34c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12499,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9jJyCRA9TVsSAnZWagAAG2sP/RdIbF5/oyVpGSYfJvV5\n9xJun4w+3EvWcqHgasIrL20vtQN/8FgJX6Y/P7CErwwMMQ5LY0Ar/rVkdnP5\naGBg7QoDuigiLpy7pSlIsQ2htoYLx2mrD1SIktwJi3NimWFN1Ea5PMBLIbDj\nRswuNiZ2AZLh2pWu5NWqMrlaj/uJE9ATsy9Dt01/y+gvQ1uVZ2usR7U4v08+\nuKnathps8Im1xqTC1+c1Ctq0qvgPoK0hJnI6cSyzAqZUtuuKNRjKCcGy2yIr\n35cNMnlkHa+/4YowLjzZhXJD1LNQrtUbgBuX70iCrUB6GYWFInPOvWAPNIWs\nvddCv8JXmxnkpmP6+AZiFqGMLM0qzHR9iPCI3GQa5HLv8wdcro15wc4lZc1M\nQZ8l13UNo/vULlAiPq3KGTeWqXlenOFBA1qxMopmKuaVv++MDXr3G6KZsgrF\n5MGs8SWuaQNiMSjoL52xs2UxXGNmg+repxqiVWiQE839eOCATVh/1EjOWAUz\nnur3b26hysmWo7v0D8AOzhFDxJu5oYoX1BQ/XY4O3Hpw5MOTJDb18EEs+2by\nmsMXl1qP3GB2NtOloVn8Igq73yE2FVB5LViauwGqxxBoDf+s2IWIiixjfxmw\nsB5gKUbOQ4X3TDd8c3RmuThF1mD2lh6mRW6403DtGV6MGbQW3d3aLR7aoYdv\nTJzG\r\n=gxsn\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"35bab77d7ad4b820da5ee4944c2cc2b7fe1533ba","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.69a35e80c.0_1593193074508_0.07331378568813762","host":"s3://npm-registry-packages"}},"8.0.0-canary.df7154fb3.0":{"name":"@material/density","version":"8.0.0-canary.df7154fb3.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.df7154fb3.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2841041bdf28eae22a24aff0715ce74bed7b31ec","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.df7154fb3.0.tgz","fileCount":9,"integrity":"sha512-wJjl1yHnQ6ZwPECIfJQbTmlpII8HNg6idqxQqQZI7fJR7kqtYjw5/LRrXlA260i1u9tsKuucZsDLIdlay1x9nQ==","signatures":[{"sig":"MEUCIQClJ9kn03VB0mbgZ6U2uCV3x9NcuQ+ca6cY6OZ7CK67PAIgVvC8/q2/dYebJ9cAGsJ2lu2c5NYldZZ98iQ33n6tK7o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12499,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9jtbCRA9TVsSAnZWagAAaqEQAKAyiFGiTIP8svy7TNfc\nScqG6ag/W7+CWPyEbC/oFFASTIvaBqaGtzjDRKDsI9hME2WlUGipSUKkLPwk\nds/F/b1mAPRPD8j/HebYd5E63v2vLf8GeZGkTlmS29OcLjrN1iLD/TwFoeUt\nliUvPQ/feuhA0dXfUCzQ7AKB9z1uYSh/bYAq4rtru+phwItuPy3v6PppUw/n\nYZ1OJHjYJ6odvNhtAqONp+PDZbfVMJGxGysBT1H//xOCdAY/9tbqZ6wNeyeQ\n3v8JkYM1EE9MjApu9abkS8yOwC/KFwrSCApSyPd3h9Pm8ouBpee88FHAENQT\nyBBzS8XZ7F9N0yXDeIHPe6BRbPrcwNFK+J7Hz4jlt9aqHZ1doBcq8Cl8mt0s\ntehAU/UBRkTlNe7PNJV99jRQkdv0xrmN2mQagh9kzL+FpViN2rSmsEFqS5bi\nNwDFg9GNvLfgrjskBuQbkadLzzeoCRV4n6WqdUck8fAQSdpKzImzpS8XAGUi\n1ZIk6Wf+M7Hx511yK/IrCbR+7NLNpiux1x6a0LEZHIhHXN2YmzlFParURvd2\nzcesjnij/w4bcBmUuHnBHP7OO2bioL0Xac32Ct/64rfXqaKdD4+EvD3dnSke\nAQS5l+5o8+o+KCm5+5X8eYtgRapAUXKaUtmwHxCp4M29YiI5SVAwO78UrJHQ\naQzm\r\n=9SIJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"9081758d517c13eb6f120c62abd9689f1fa99906","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.df7154fb3.0_1593195355231_0.9215840263568911","host":"s3://npm-registry-packages"}},"8.0.0-canary.d5618602a.0":{"name":"@material/density","version":"8.0.0-canary.d5618602a.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.d5618602a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bb7a4d40ccdbdbf0e2ec561903932b1276db9193","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.d5618602a.0.tgz","fileCount":9,"integrity":"sha512-8FF/jS9d6QprXoo4HC2lLaglM1P4i/4NNH75VYpf8Pl/7xTgAZqhnoj9c7NK8EmJuSn4CZ5JjFqrzUmsm0Vabw==","signatures":[{"sig":"MEQCIGlDKvHvQ7D/RetR6NjbXsHq/gBfCsia57XksmF0oD4XAiB6RFHslIENc2vtcXfzg6DHdJeY0m7Y2yMKUbztukvJFg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12499,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9mztCRA9TVsSAnZWagAARBwQAIbiWhq3bSv0K9ztEGRU\nLrT5gvvZfga5vWxfJBMGxl/b7aaeCVMVqNVqLKfi3DohsmmcBAM/EeShwsRI\neJvQNvQKGml2GcBEZ5G+r3k1/pj5wKfjdWoHTkhebJmKVgz2HFljSbNiLpk6\n/BTf/T6lkxgwqlLiPM9A4o637jpcQtBhzplx9aRY95nW9yDAFm3+HNyONTZV\nkFv5rt0dkc6BKhzgvfKuHleAXu5cMw24/JzNXadBkfjCXldAoZR274zaD1v2\ndGoxMbFOhltRPyjcd/3kM9I/KYs54UFgGM0wKPjjA9M/sODOEHoDXJbJPPHI\nO1DXWnvBTuFliuM8MKITEOkMo3XM38k9jkC2V/3vbg9XnDUmmDmu0f/VzFkP\naGh1u/fSjASfKfVh8PuoOYnUwRreHqt2jEVUeErHeJQIE3SQ6Czlv7FXhfeQ\nIc+QYu/r0PEpGNeuaQDxE/OkKE5J9jnUsjJeCiqzcFkqYDgzGKtndglGg1y2\nKq3s08YD243xRwR/f1VQiGnWIE7MnZYvquVmTUrYfcgzms6/cqytjg1h40hR\nBftcOJHuSR4jXan+87KssiWAsiZoWvwc94zFgsRoj7ZbhNo38cLd2Deqp+xi\n5X0Iomv6u9uHJ4VulysKwRbPEODlSw47S1fTvyNrgaNrxXTV1+Q6fkX+jzyt\nDkC4\r\n=QZrj\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"ced8c184e8043c7ac8faa813b76b9661cbe247c2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.d5618602a.0_1593208045224_0.6046572884879893","host":"s3://npm-registry-packages"}},"8.0.0-canary.e590b376b.0":{"name":"@material/density","version":"8.0.0-canary.e590b376b.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.e590b376b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d566c8566bd3cfd7e5429da000568ae7ba21db4a","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.e590b376b.0.tgz","fileCount":9,"integrity":"sha512-lE9JYP8hUkd85Q80k+jup/sEu9T8C8ETRD1z4Lm07uThZrs+GDLLSPX+nosx9XfJVsKAx2sbkzNzpLDIz05FPg==","signatures":[{"sig":"MEUCIBw19Ve37n+0kuU7PMjYU97MBwA1hcYsy3lhZRdIXUFTAiEAsralVtp6QKE8RF9Flw5YDJN4QlX3hW1XHaKMOd/tizQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12499,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9oNGCRA9TVsSAnZWagAAWjUP/julPlk/onplS33Fq6ZZ\nQstsjIV8pg5b5Q3xI7M/DTAd6o5yiZDL6+q+qYhKU0hAlvzD2Ph2BUIhvgxB\nxFe0lrp0sZw/8MaOUYGrsh4fUfwqKq5BQ1tfCmtM8naF7oT/Si0TeeKy2T9h\nIyUC7whiyzyFuZ8nPeErV86C2RqWuxFG+RwSfqWvAJbf2Pfwn+Q+7T3U0s0C\n4lyhtYol9UgAvGLqfJXF+n8VmW7VvzIlgIl2oCcTFmTOhfX+xJh5wOUEa0RQ\nkp3VyLJbCkeHnfeoTKo/9gJgUpe/L6X5IgyvMSD7x7sFHK/B15gh1gt6YW41\nE7zMuoZrHfFxlStnc4kR02HQfcrXYOPPREnUsLFPERJw8DP4ielEfmHMgbMS\nQH4AWceTDpLC4I/lwMktteZjw/8rIw4wvhJREv9j3Pq8a5sK/o7FTwsRMax4\nUVY5k3/zswFr9ayCIHp5w2VvrCp6LzAJiTkEzZ9NjUX/WSO8bsp9k2sZX8cq\nkVx21BAildXM4+/bOXVVFqU1QZ3p8Qr7N0PXIyL6K7ezOyB1X0GpNVcie/9z\n9Hp2GAp3tICM58iu+3KUgKP9mJld3hpOaoVFaqS92hnM5VFOZTZTCpIrChzj\nCxKkbiieyeImAw4tUq672vi53cJgzxcFU1tt69SPQJM2aMlVcaCXyeQlL7DA\ncgYE\r\n=Yyyo\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"0ddfb390b804034a98ec0b8e7741dd3f3250b5ab","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.e590b376b.0_1593213765618_0.41513013670439447","host":"s3://npm-registry-packages"}},"8.0.0-canary.0c9d6bd2d.0":{"name":"@material/density","version":"8.0.0-canary.0c9d6bd2d.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.0c9d6bd2d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"58d0284f7b432b6d5b5da48fd477e947b7ad38c6","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.0c9d6bd2d.0.tgz","fileCount":9,"integrity":"sha512-IgJMiCBDPu+R/gucDDzpJnn1DG4SFz6EYZMdRtw0Y09PW+F0Lns4Pv71ylP5WzUZjeQ/cuimiPdOwrEEEtgEIA==","signatures":[{"sig":"MEYCIQDxvKjw0t7gC4ieyGMBWPaVjQiFABua8YZtgEm/uITCXAIhAP3xbExEBn7cTbBHEEhMS5Ua0434uxVBYsmmJ3DGoQDr","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12499,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+iF2CRA9TVsSAnZWagAAglYP/2fLKutTRQsdv4BqpDFs\nhQFMgaB+qftQkOxV5AKrUVNC2coTCWisixqccy/Jy+zMHLOe591YWql4eWiq\nwAvW8oJH67HqgB0QxiUCjui4Ehyf0EfxHG13+gy6SGl0h1cwEbSG5H3CGJ90\njT/I0sOn2cXpgxwXVMYWkA+ez4n5zeXUt1+OtsSmlJK6kgscHrANIl/be4z6\np+VJB8zuM1RPCeQX4i6x/IiyvoQ7js8CdzxYtTNrItFa3Ru3vW4dXncdJz3L\nRa9xGQf0T+KqRH/Q/SCyCvH8MIHEG3Rb9okCzxJiHsuvtNrsnaLBOI4MyZy/\nhJHOURS9SVgNAbmoe/fyv2gnEf//oPp3pla/LwoU94BVKeCAoOJk67aQkdpc\n98bEZz9qEdT9PKy/aRehsqBpFsPG++UsK3+I27wJ8NPdgus3PuR75iwuB36y\n2V3tgPtPw6/4doWpLnQznHpYk1yjmCgRi7KhYZT9QPlHnAuQh6WaarhJE75+\n7P+23VmXI7P7A7vSjWIsVZXcffPUrg0ePQTx8VzZgkZYZsYgJmWvZsOIPDZA\nAhmd7r8ThTNwjPDZimEZdpzMujP/IRZ/IVepkQMi0xuNag14FcxOkNpsXNRf\nVo7m2NnVwkaC2bn48eVrbGHwROZxKtO3z7BOOGlBnzHpDxSgUg/wEtExvlz9\nMgBk\r\n=gf6z\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"4f171433da859f637823aa04bc12d72783771f90","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.0c9d6bd2d.0_1593450870248_0.8830368261380164","host":"s3://npm-registry-packages"}},"8.0.0-canary.c1fec4246.0":{"name":"@material/density","version":"8.0.0-canary.c1fec4246.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.c1fec4246.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"274b00761173931b7a632a9e491ea5e274159728","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.c1fec4246.0.tgz","fileCount":9,"integrity":"sha512-6WVAQfpomxnmygNFK5urvtR0MqnzgeBZBxzk9QD55y5DvHh6PhGWFMwe4Zz/xdaW1eiZxa7A4SOw6q150PPhWw==","signatures":[{"sig":"MEUCIQDLswAbjHA96sD7X0sNmDJ0lryy07GjMWska7wK5euomwIgcyLt4zd6n8YjdmG2zFAwzIIkOGrIbkrxANGaVUoM76M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12499,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+iUACRA9TVsSAnZWagAAwRsP/jaAzYohMnbo7zPDryXN\npWN2TBmP/1TXIJMWp/b+uN1iT3QiyZgtLRFnkbzRRtueVNG+CWM5cZPCjkla\n2v6NEHQ8r7b4jcXcRQWVri3457dwVt5fwPQM+1nFL6J1PmmjgTazN9MlCpXl\nGZxDw3mS/8prBcfgTXA87jbzXPaTA1L0zII5WwvjXNySD7g83xH1q5Tvs4AJ\nShtcsDGY22NjFWn8dsCLt6h2ZbPZgvGV2ybS58jwhtznXehL5kdczNAiiP8C\n0p0S/nbrOxqJY1eqY1kJrYyM+Prjti4SdvSrcjvU9PrrBBYna5yl9onkHedm\n3+Gi897es+PaetjYXszUITuVzuad8mPknFWaZcMd0QnzN06QyReYGpp0FGbr\nCmz6UGpGgtHfjMlW9OzlCFo2x10lKeV6XVHM5iy7gu0pDi/omE2vs51SLXEe\nepPNwBIyy779yZdbYLEFihblapzbK3nIGXmyMM03GQdIEgSOhpwQKKs+lRT4\nKzdeycnelQwRHIGl76qMkuE/Ia7n3t0g1bArqKXlfC5DegpNMVfvc25M6QdU\n6WxDNuxwkngII3leSSGn9+ou1DitvNteJ24KZ9nnHHQh44VzX4foAZFmKyJx\nGd9RSn+asU8qmT0un70bDayLRaGNcyeFWu2MP91voWrRXNTydsYNlP4eKQah\nJwo8\r\n=K+D8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"0a588e37208b314f42e946ab4add50d0ad1ebf7c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.c1fec4246.0_1593451775645_0.16714921589716925","host":"s3://npm-registry-packages"}},"8.0.0-canary.c678a9d34.0":{"name":"@material/density","version":"8.0.0-canary.c678a9d34.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.c678a9d34.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c52f81db528e1f12fb368ba1dce467ad36947a0f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.c678a9d34.0.tgz","fileCount":9,"integrity":"sha512-podGu3A+APZ68a9ZTf+ZLEkuLJ8UWz9qmlfMCtm5C79YnZXigBwyjOVLEmJTc9qoy8JrTil0cYr8I5B4g2Bmqw==","signatures":[{"sig":"MEUCIQDM5dWNUprLnKprf1AATuyIJZnBivruVRjzX1xkZCMIbAIgYgPTBm2cpldiVuD2tjFOlfeVnLfoJQBJd3gWg+EgPJk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12499,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+in7CRA9TVsSAnZWagAANGsQAIq5XZlISLBUX9GuZ114\nvkrMbML+0y5ZpmzKTu0FSiuhCf9offhF3RuexaSn0/89qUkKAx6gtUQeVV+D\nE+gFhfCtwv1iPi7MCDzI/irPpozyh9ppeTa9/VbRwUk3k4tnhNNrqA9pddwP\nWBR5RyLJTwzZHzxl29HKYjEGJUxnpgRvXz77jqf8paJ7bzkVbqBoPssUhCMQ\n8Nt9EMmDkAEo+Rhotb0AbE9HL73MWhskQnsNZU51ECFh5JA8tXTcPv2lHufb\naaBP91EJCzuj0km7c/s5ID/JRKIb+XhUmbmVt2Ut93hGeWTgbthNEq7j1w+t\n2dISahOQkplqAuQVWzqd0orIxsKSRGhsMM0rqcq7UVt8Tf8lsVOVhXpfFwbx\nCY7XnkGYwceuoy6z9eRQ9z79o/Izf6kJL4PTz48tjWSPdTSsTZc53XW5CvNL\nqwuHlmtYKFqFNLrbllTirJLyOkXlsxrvYuLDVkg9gdMH3YnmCYAd9MCZWCzZ\nfWoUPoViPP7u6CN/EMIA9etgDxIB8HbNNzZP0mUpxLJnWzBfZaF+TtsidqPu\nwIlgIppnfq1b+cJd3L6ErdPDFhwYl4yfeGpNdZALVEsiTAUL0SUmxzykSmKk\nfV3AvNHtEIKps0lxrwSYkD+CGt1m9u0gm1xJhBMWwce4GsyIGN23b45fybRh\nU+yO\r\n=7EGB\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"bc361f7c6bcb498f3a6dbbe6255c06a66b7dea5a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.c678a9d34.0_1593453050461_0.2192392575230817","host":"s3://npm-registry-packages"}},"8.0.0-canary.521afaf6e.0":{"name":"@material/density","version":"8.0.0-canary.521afaf6e.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.521afaf6e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"07e558f448b38157b1c553ce5bc3e11ab0584af4","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.521afaf6e.0.tgz","fileCount":9,"integrity":"sha512-Xcm4QCm+u+SXSHy/Cj4Wz9V5oEct+gqmIyQWk/rDH9zq1Lv5HVOF9i6ZypzKpinXdMSILQaP8MXT3P1Yjv8Z9Q==","signatures":[{"sig":"MEYCIQDvjhobrxmtCSfKGXsN6BaZrdGVzhMB4dSEgeBNht3a1wIhAKSoEGJeHXmDGSYaYOUsHC6XYWseUv2KhW4Il4CnWaOb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12499,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+1SCCRA9TVsSAnZWagAA4PMP+gKLiMz1dAK8cDRAVaj/\nhDGEHe/s27c5+0ZfglbywAVDHJR9zwxDTg/nTraRvEiEjwYU2Qv9VdDEWC1q\nKKWcMSBJWa+etv7I66hGMtZKZt7mkvLAuU3TcyCyvRuujmbdaKagLJoaG1cq\nfHO7KGfSQYZw7XVDgfKVWZYfS0QI3pBZp/wOXu3/rDSa8N7WY51OlSBg/6/H\nt26Bk2I1U99mDfLOWK4uLyXTNjxOBbEeuQBOJhcxaXGviO3tgAK+G2kbXI0b\nToDLBoa6YeygIw86AQSf91Mev5xXaht7XHckxC7578LwEEVeXhI4tfa7Bd3I\nagNPPvyaLgh2z/doT0P2ZujBzbnDNnoDiFHL++aKZGXoqY2moCUuKakp6gEu\nP6vj95qsLdXHpvq8JHP1PwuscVMWW8y/KqEJe+w1vjLu11XjR884uTRIyWYt\npta2Rnf1vw744pk+OHFG2/GZ99RvlqCOKHX6aSvlzNxOZeMI7Spqe8xH+q/g\nu0xXBVpngB+ycMFj5nDDJn6PY3xFcq+Galo1Q8BImbmoFfykqegEDXmgBANc\nWUsfOJrAkZYZlHrXihkI6jZp2c/nb5ggzmXoFE6DoItsaiWooM5lSRxRgAMv\n/AJ7hLWiy55UV4UcDvesrK8FPOVp4xosWhpcJhR9/3T43f9ru1xSjdlsVU7j\np0G+\r\n=83Wz\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"7ef14e207a6031cf299541a4dd72c2eafba3ef91","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.521afaf6e.0_1593529473631_0.9488964275582201","host":"s3://npm-registry-packages"}},"8.0.0-canary.a2ad48839.0":{"name":"@material/density","version":"8.0.0-canary.a2ad48839.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.a2ad48839.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3cdf316f48ced095299e7cddfa5a1b1592c65af9","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.a2ad48839.0.tgz","fileCount":9,"integrity":"sha512-YgTdKFr/SkWvDzbkTexyd5ksYN9yTMMYFlRQXRH8nYReUIXGoqXWINe6o9zFWvKgwEBPJvVHFh9ri66oPzDSEA==","signatures":[{"sig":"MEYCIQCeXBwppB8nrj8CLFfFRbcmx3oKX7pqCdmrBQVuPRG8aQIhAIK4MSegLj9EyKN3A5EOsrkCTq8XGXPWQtJmUP7G/4VL","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12499,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+47aCRA9TVsSAnZWagAAAwAP/ApyVJ9/tE1SrrpKU3o8\nprp/BahvEfqLB9RdWDGtXCZHFGOSjUrP/DufZekXtEXJPHfH5Hj14hYEkGg6\n8rX7kh0mPnXCVz1bqxRjYbm6rwaSJ8bsr8coBqeYw4pt84jU3ThW3vx+JzCp\ndUREGgqEnjoUVFyhv+6VwNPLTYSogZ5l4bz54nq5UAVHx1/CBrN2VMTMVdj+\nWXSb/Vgqnyky/YrqMDJCmR02hGdjhOirAtjKbgMZmwvCQ7oHpuFe/tSi1nz1\n5NhdIZAAuN2dcUpo8qoz9vPynOyuj1xhdMDq18vODFKljGjzOBpiE3n9GkG0\nESXuRottD0BmMHd0Po3/u3DXpLqo/QvIB1unmK/x1531XLVjsYVnZgJ/AlIE\niQKudDb5fl4MewFNAnNgDi1d2OOX9PAgJ/fjPTRrw9qcbFbx6mSUnqtRddpX\nbAk1RA4lgd0EQdp8s+DvXt6b1XaLL1c8nsZNeRNJmO4ooPBB6P9lRjQ9/Kxq\nRl4gK1fl8Kl/NjAsS9K2YT5LsQ+gb/KOyAhiCeXNjkpXMM0WPtpUHx6nr3n1\ney+5eLoj3S11QMiEGteCb/vjeHTHfBPS2YJcG2I00yiDPAnAN50hlyvNABd1\niBphGRDrLZiuZ9gSJeVYszvtoR6kEA7R1UC19K6cU3MUxZXYNGGnNPm35BDO\nMg+F\r\n=dX8f\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"f7f949a98e604fd4cce2507e8d63c145d2f34e55","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.a2ad48839.0_1593544409162_0.34625673453961014","host":"s3://npm-registry-packages"}},"8.0.0-canary.ec2385881.0":{"name":"@material/density","version":"8.0.0-canary.ec2385881.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.ec2385881.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f2fc9f97f2df998ff8d8122ade4b4190f86802a0","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.ec2385881.0.tgz","fileCount":9,"integrity":"sha512-i3ygSnqTA8xoQBo7rKzUlhzU2jYf4WFDicQXku4bV3xY7T33NMeYpLfUtEB1aeUVs/Ba1fZoiIUAjQwTkzhvqQ==","signatures":[{"sig":"MEUCIQDv5Ubja9ovSq8ro7ldMDfV8R5vcD8nFnUH+cwJfnshowIgRH5M8NDhXOs2sjCCchYUAlctuLm0mi624sCI+x9Foaw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12499,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+7KbCRA9TVsSAnZWagAAE/kP/jxmkg9wd5pNBDMghyyA\n7tdFANaN8nUBchRmbfD4JTK6GvnB/0Bjojlym5vk0pk+iAKWd2Apo9r6ocr7\n7jAT9emzQ27/yIf+gtaq3UC1IeVrOIYlVDIPP7dK3rPYPcgaMBmJXsMdtRQe\nWkFAqOggDKGBCnuRpKzrre4LciTsKW55dojwrfa9H7PcIbgElRfEjE/L6IIB\nlY0sMQ8XhdQ8ptnwmrDHzSJfc0mrajgm8vK7+FKB10j3Of7xnxmBT5L/FcUB\nv2qsQCp0/IQ4P7FSGVDiJFQOPXMy3bkBF9MZ2/CzFc6qUGeiJmkq2fDqzLeD\nfeOiN/lQAgUqJS5ImPTj8ImJ3xX4EcybSyB/Ll/Fpw2kT7V3CQwOO+EK/TO1\nQlGXN0JrOHMNEVz9NHL3TY9IbtJXke6CxxMslW3ZuPoy+xQPXuBfP9Cgwdzg\ni76WT2VIAFHLGmEmC55c5Cbp6calykfZLhEbTdotn/wHWfCnVbVAXXhyMr/q\nc5j3/Smm/CJKy9bNNCX92LfI0t7lHsEVPwGCLo8PqUjU+L7lONNKVbrzmyNj\n+OKtQ68JdQKu7tSkx5S1zdKTHxrhf69dLfqU/ZcNZPTj+nQWjXD+rjS8SFXq\nuUuAjw/gmMP2Nz0YinRvSkaT7sZPf16YHlDGGqC80oLcF9xzcX/wJe4ANkew\n04Zu\r\n=0ia5\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"0039d314b5ff29856a2f17a5ede426f3f01c80bc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.ec2385881.0_1593553563486_0.3232372142397242","host":"s3://npm-registry-packages"}},"8.0.0-canary.610c26c4a.0":{"name":"@material/density","version":"8.0.0-canary.610c26c4a.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.610c26c4a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"78aabb7e0c180a741dee1d8d27e57fbbb27058a2","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.610c26c4a.0.tgz","fileCount":9,"integrity":"sha512-p18gdrUTac+H+wdr8icW/DX8Bz1v3KVECQAMNR0SwJ8cPn7T9Y/t7Zn+9phSPzq3HbaJqPx71gUuNoaRuffLng==","signatures":[{"sig":"MEUCIQC6p3UPajrhyh6uw2OWR02XoQcvmlx89f/YdblpTeufdwIgXpt2RofW2GVnNuUm3/7Bkw+julR+6cbTno19zTqjaEA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12499,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/KPRCRA9TVsSAnZWagAA570P/jUtNIi/yzUihDyXSDv1\n64qB2FuiDxkH+c310DdDc+OOVy+lhicP8tUpM6h6XAkHJe4+e529rh0SRZGN\nmwNg2opARQUu+sTo7pqLFNaRFEYy3sgMSyO5NHT5gvzITfOQlQAQMLn6GhPE\nNf/LMu0KPkN+2XGNdcs1MNALYBSlg6iacz/owTXHUXu7Mfpx9e7XMZStsahR\nVDNIpuHgctdjf+r9f7WlSTatZ4llj3OXNjsfaO2eLkHBi4aJ23YDQwJKnugj\nQbbUOgPS8J3AOQl4TE+Gp5wq5jJu8KFM8V1BobBMZGO3GED+QYONTIwPZW//\n39P6dXqT8duVWlEn0+vLKfvVvssZTDJhJkmorUTfatbbyXdmMWEqkyPP/7nk\nhUhxCBUNrPijq/aPBfETujK39R9fAW96jgpgjPmxSZ9nqeXnuVcy24FI1o7m\nPni/u7PeMVoFgXYdXs7Qel8Iza8gyu1xiQovwE3UcpGoUmMX5rIfxWH4F+ae\nykK0DjClGXCtA7N1e+yHBHEApYXs3X0VkWdlAlb/7mdCdmxVuFdVerYDo4Sy\nHr3MtqY5iPcRyxPKJvPt77v8SYW9kIkx+HUryVPFWKlU4SAfe+lG2n1WXYjR\npKSA0oPQbhGSvhHmQLjCVdrC72J9mZuPMbcclJw4BwHlnjEUP7Za9R60zlFC\nRoBS\r\n=YOvt\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"84352d6873c8f275f890267635fa416189f57a3a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.610c26c4a.0_1593615313061_0.6570532685147257","host":"s3://npm-registry-packages"}},"8.0.0-canary.e2ea4a99e.0":{"name":"@material/density","version":"8.0.0-canary.e2ea4a99e.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.e2ea4a99e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"863e0293a90188db7429c448b1c271436caf1595","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.e2ea4a99e.0.tgz","fileCount":9,"integrity":"sha512-sHPMzL1C8iuh1MTzjjlXQkm+7NB9S3jYDfkMG3kp1FT2bAP+PdIbJlLkT9Yfo3V0UjgvrAw8d1o6xZbLdOXWSw==","signatures":[{"sig":"MEUCIDWfEASHWvY2u1jZBuKDuEwJf19aPK56WXyOdpmloD5VAiEAg00UzCOXgYrB6kgHflagJsQxA5Oumsj1HU9czjzMvmc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12499,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/ONUCRA9TVsSAnZWagAAqJQP/RaoDChVynSc2oNx6E9D\n4dksRydNhQ1yT59YKNudPrA9QQHeM6PV2vXl1jv9oFei01UMXbykFZjTG3H8\n4vjqLDfrlVzRyPdRlEaS/Lm1UI8KXK2qvbx5mQqLFATy1b5KXjbISxQc3+uD\n7iAiPyziix7F0N4HJzvaxoeyr1m6TJ+UJyTyaIg9SRR9BkFdUz92FmX2Ye/x\nSXQ83x+l8ZdGii0OttyyJW8DzUDJuFOj5X5SwfWkNMU3Vsu9DaEpnIc/Z5Q5\noeJapa4msBKcyYhi/y5gpybJMkDyyzSD6vhu32RFW3i17yYg0tjJ0RtyHgOV\nntQggptR0UBs8Yqyf4uiBRygvsTYWIv1mljX4IpHvmBegCs0K0ipWFnztf02\n0TER63fR6BwsMrlhixaWIUP9BnOWrdkw8LuLfTZIadQZPr5tp2fvxC3Ozcmm\nRlkk0/iJovMNUW0X9wwT2cqMSMk+SKGa+aHR4I/JD4xdYVkRnLN9ipCde5z+\nZ4fnXvEwWMmSGn1h5hJcc2l9VbOdf+0eAj9Lbl50IS3HKBJTogmXYiqL00eO\nOyGwZ4w+7a83UkMNigWmZdzbSpLreQ/O9Pb9EirAJjfW6yzfD7yr9sO/ph4i\nHKVQuO0/2KQxmO/45qs3Yo+fDeKuRw23nosY9iXqd7I8O7Zf1FqQ3wAAvOGM\nBzBj\r\n=j0Do\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"42e9f40d91c643a9770e5a563a204c7f36196a3b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.e2ea4a99e.0_1593631572405_0.2348484831176183","host":"s3://npm-registry-packages"}},"8.0.0-canary.a78ceb112.0":{"name":"@material/density","version":"8.0.0-canary.a78ceb112.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.a78ceb112.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f84414a9d87a932e6857b7c979166e57563865ac","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.a78ceb112.0.tgz","fileCount":9,"integrity":"sha512-1fZUwRxnCvVbDA2cEtkbGjGSkvsjsUSFAfN4eWCqylUqbkQC0AWO5EDmrYH+sT3VpHAZ+Hr3cLcydydsT3o2wQ==","signatures":[{"sig":"MEYCIQDOM9kjKquUsPcIiEZBL2cleOGDZi9FtH3+WXJ1CMpkjwIhAPrBSSv69lT/m38BlDLOTvmUdyV0rmgu8l3uN4nQTQzX","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12499,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/OYdCRA9TVsSAnZWagAAfzcP/1JnoL4h8/vxA1D0ZRcH\nsjzBE4t2mTJW8RkP4TvOFMJEOljm/3RqTSOXLQ9NfePYVSUuakMEQRdnXrjq\nGStZ7F3+M4ibkiyx68dMAt5amrDisNh+thdYROMK6g49KDNZ3DnS1BX9V4WP\nSOGUKDhsTSbRg7Nb10GKmlkrireKrF5BFjdDw04kKhkHf5e8aLZ6+7a9xech\nYmlH1JRb0j0xhWRVvrsxHzQ9xdIM8BeG/LFL8hluv6+oH5yb0f/u9q7Ajm5b\nL29Xx7jJNwvQVZP0cQi46Y/KroF6kuwaGN4PEc/9kCKe8dU6QP5KDFox5L4N\nzHmr/KQEmL5uRea89bXG2rPd5BXe71n17hid1BQ6oz7jdPF7g9DMjjI1rq8U\naPPS1M/L/IZG9xzSclnE2PHd8a2EK4WEvuMHMkj3K4vFmRq0ZCpIvNzCIfen\nf8c3E+/EFZbVMhSVr2G+lyOkrPbZejp5teQFL4Xh4CpqxHgZUGgRJNNqL+Fe\nA5qgs2mJj2YeparbCRN6xnc8I1DeiSmoWWuhEDhaKgn5TXK9nRq0GLaW0lx3\nfTgrf59IkAAqEjv38gzpA+n3p2nNlSDDv88lWmbrmKlLXcJQ4Usz/uaekLLl\nbOHq4fnXVNaYaQ6RNQWznvnBB6VZWvVzJJFAQmoORWDlfQPIU3EXD6EyQBr9\nWkOR\r\n=/ewm\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"3a38e39f3d172dfa99254185d8b0d4c03dcc61e3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.a78ceb112.0_1593632285229_0.6222210110440507","host":"s3://npm-registry-packages"}},"8.0.0-canary.b0c456d33.0":{"name":"@material/density","version":"8.0.0-canary.b0c456d33.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.b0c456d33.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5d8bd5caf30bcea36078fe1014cac9c1d3674c72","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.b0c456d33.0.tgz","fileCount":9,"integrity":"sha512-ECY9UF+mzpKfBMEYD3MzltUIO9/69VLvSxZtJljo8eG6DMTSCdajPz5WIrZTiIC7pxd0pM/alAlCVNILocrfFA==","signatures":[{"sig":"MEUCIQC1NqxT1D+WtCJzmANt1KaoCOzUPELgfsSxBmiOIz9aVwIgXAAuTrLKWt/uPkPD8zRyI50nyNfFnlwzf4UTlUFLgB4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12499,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfA6hQCRA9TVsSAnZWagAASg0P/2HwueKUcm+DdpwoDH++\nXdVwlUXb2ssR3mvtFyU9NP5gYxh3fPid0TZ3g3tZeGH2HIqgmNh+gZROKZCV\nchC/1hBQpj3PaT1SnMmbarZZmBizevWPZnJ9win6Px7FrFAZwZk7YE0jdqaA\nwKOlPPRriXC/66LSxcKTdOvdoVBQViuK/drKcM0TE5G4gl1w/kvBpUcgpaMP\nat3SN/281eRTNlx+k+hKlF/QBQ0yYaHLdRRc0PTEsDDbS0Wd+LsVtuypKdbx\nwpYxJSDUzxmpzhRSwfCiEUaW5JoEnkcySx+8lCEjKa2QkPkJGovnpIsY8K/9\npS1mRLaJewpnF+zmypP5KHpj3fQsiUXaNP08qkHcg9HqWLipeGaay5+wn1M7\n/ztzRjyW9KzqaG24uxgezfILQ8nkYropiRBoLlEeQR/XQAf99BtbBWXbem55\nvrt/k6xuL7XMI7dwRmn7DRskeWeaWTXfXD3ENg+P4OqVcbiUwn/F2ropT/Kx\nkXS9AE/RQb0Crx7L80hzdL11gtOP/w12ge05s129I0vveL6ilWh3CV5khURU\nhEWJbE3K3Q08DoCXC/s9jBXGelYwTIZ4rsV1kb/TabFF7LbPfzzZyrYAvSvp\nS+OjB0+OPiEDui6JPEDrIdMtSXVvXTbXdP1mL3i+arEuYjhJ6xzMMudEu2kC\nScGT\r\n=1Pt6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"c9a540f1489e069a2e5cd262f5daabc034039d2a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.b0c456d33.0_1594075216333_0.7479342620196188","host":"s3://npm-registry-packages"}},"8.0.0-canary.2e5711e04.0":{"name":"@material/density","version":"8.0.0-canary.2e5711e04.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.2e5711e04.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7cdd5366dbdf1af1c2fe6adb06c4b3c8f771d6e1","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.2e5711e04.0.tgz","fileCount":9,"integrity":"sha512-0NdfOOZKcrbK6SurkYGHqV9oJFpdEMum3ORuwscX56sY+Lt2QqEn2LJkYWy8dU0Bj9/inIS1gByDRCqGkieyMQ==","signatures":[{"sig":"MEQCIG8WwKuAi9efvls+DdWw6CvySDCVNzLYoRa1KG36OL8PAiBSTFJulHPUInJRooxSFZTQNsPPdjRBHXhn9mNSAZGhIg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12499,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfBfiJCRA9TVsSAnZWagAAUXUQAIXjTWZLKIQwjED4jbKU\nIRqa4FMmMv8lGa7+s9sQhoItYVCrGccPv4E5ZHJH1SvVOeKkI2NkWxXitBGW\nXsQD2J2HyunCQosiwZ+pS/9ei5TtUkjN3CD5Fa4vVbn1StHaw2Wz8OfJ69E2\n49IuqTbkQ2Prt/0KVZzgHGqey2fkNnsPDHcz1xc/ExKYFEL0lkkPajmhE+e7\nmfTlhpHSLQZEDhP/+w8aM4haT37k/kgy6vkadHOEOxT7kLQ07yyAwOHAsDmZ\nHvgTlzXB+MUdjQbk2usXIqK5GZFGgD6fW0KvG1BKwz8g6qpBgzXiUV4MqR6G\n60tVSh+KuYUhgGZUPiDMSXZ8PHK91XnHE9h7ptm+/umizNqQmS8td+fl01BD\nHsH/IgRSCNErQ5UVM6wkKN82aJr/mJcKOET1C6zNDe97tcw3i9GKbjGYHskR\nxROt6GQpBPggGrUZ2+H3Knhx0VBE0UOs8JFXq7lpzXToHk1uA5Lvkdqq1DgP\nZv24jq663KqQiKYMtgiX1PC0BWn4keUbBsvr2W5CE30ZER+ZuNoX7ttrA2Ct\nqk0xN++sVfP0g3mOpk4eH9vCecI922kfMVcfU+fWdS1zv030322wvwr0B7V7\n/+aMJfnRBe8qzZdrgpRxS7CES7q30Vorw92mSJTRQJ22pK9opdMcG+a0/Lc/\nfWVW\r\n=LCuy\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"4786b99e99bbd4c7b7f10a9111b884c165f1bc7d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.2e5711e04.0_1594226825224_0.5900586650095327","host":"s3://npm-registry-packages"}},"8.0.0-canary.811fc5d24.0":{"name":"@material/density","version":"8.0.0-canary.811fc5d24.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.811fc5d24.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"473e19186d5569c7525a98a902140530cde6fd6c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.811fc5d24.0.tgz","fileCount":9,"integrity":"sha512-esaCZVnrcr+abf/X71649WmwCql44QK76InjYje6ZH5BTCSHP3mkTaHraliOhT23QA3f+fviS0af+tdx/3ZE3Q==","signatures":[{"sig":"MEQCIAyedkgfsIFLLHX6tPpCiN4stHEfddE/64GdZ/efAF6hAiBtgz9r7uJ5ySKvi9oDtoTNhpbrHpPp1mYi4E3fgHdp6A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12499,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfBf8RCRA9TVsSAnZWagAAspYP/j4E25Ka7aJhurr1Kx1w\nUp3ktdgvcjyfYMtF3PdwhLCoP/+4yWZ5yrtOHi3tY2He3I1QNGGVzcKdEeej\n7NPolMPf2bQKoW68qyuDh2O9IOpR2DkWetnkpT9zWqF+C9kfWczmxEGGvNKE\nzVWZPdmgnjHAZ6A5EMh+DDSnxlvRAPhmRJC0PP3wO3Z6ID4sofmo5QC7rxmQ\n1eV69c44FJXYjItzoyxU7Y+Rf6f85j+DSZqtiC3hCl9hk0b6pz78AeRU9sRO\n3NEgP9akLp6eOdzF5H9TswYmdqV7tlRX2Ii6XNN7AmBKmd3L/MDj4r3kQxLN\nMea2+6LXLHnGo5wxsMNmBrnY3MeRvVHPbb4HzYiUMbQdkL/r43PZCvVRGuss\nSHoFKP7OV6PgiBRSPZFHuWidr3ISr9kzwphlibxuvP5lGryKzNTQUbk5IKt9\nKRP2hQcRJ4KxIHber1znnYFkYE+Liqm6XmJdBGs3B0viBj6SUvH2VHuzqqcO\nNBeLGkA94L/gl1CDfhznO1ZF92v2l4QXCCFCGr993ZcXVDaHDrP/Izaer+Dg\nXkU76dx9sk/+Uxsck6ErQXd09ZYqpLmDGh4mJzjqQ8zbK5GFy6IWfCjA6Fe4\nYQKowSJuYZcDDmb73c5CYx3d//L3xIbTQV3WmhYmNczKqPHi4S2k7Y+mkkEl\n1r2y\r\n=ZHMx\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"d1a1abefb8800a6dcc0cb20f74923403ee1ca66d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.811fc5d24.0_1594228496717_0.7703842260724518","host":"s3://npm-registry-packages"}},"8.0.0-canary.6ed717ddd.0":{"name":"@material/density","version":"8.0.0-canary.6ed717ddd.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.6ed717ddd.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"36219ddf70378263be6f73bd2a6e38b0b3e5eb43","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.6ed717ddd.0.tgz","fileCount":9,"integrity":"sha512-YbIjYiSHkwH7uUFZy6PkR/L24uDSBx0pcrCoW4zgxckCLl9PWsKcbyTZ2ndcXxCMNacHp5BokPwUlUt939Bx5A==","signatures":[{"sig":"MEUCIQCGuTkSr6sMYM+nNwc6n/eACujhLtBG45FTY7C/FHR3hwIgayffCxpEnfJzx8gJkHoWqkpjautSmZUXiwenpK4oAI4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12499,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfBiHPCRA9TVsSAnZWagAAWwsP/3qsgnja1KcSZqJjzxVu\n90h4FiTwPBf0J7PN+vfxm0u37kNgRCCDHXglalvuoXSAZwOAkbLGZnTcYDNz\n7Dc4G28uyoEky8yZhdH1um4l1zXEnYV35mdR32L8Ubrgag3o7PwXRr9Qtp5P\nSZjIVwByJE/UbY5DZHFQcgIEzQznYETr0sbOMOkXHNzm40C9oewmTC8FJF0B\nDeKeZcyZhGRGE84bhAcngcHV0MWRqAC5bAQou4KmUJ/Y83uygwvGhg0Y7+H0\nBOPqnip12+HnR2+V46WgpSTucKwgarZAwhJTCpOgE/B5Ykcmz7y3yhAI3jjQ\ni6h2vtyZDSaIsRTC9QYc8RBv3aEJwiQoIliWnfuObpcqbmFL0i4S/mUU4NfC\nY+TQ/DYO3Ja3NF10T0QBKo7c3lM0nVCmk7CUMrFz/exe0bbcfjkwQaclHUA1\nlDape94rxutUgqWXOCfmxpsI6BJ73JCN1AOwCt6EUD6dWHLybJypteAxs9C/\ncJSKaxrm12eXac2DoafMRDSt9sR5yOrhOsbBbGbmgvQQFvEJrzwDa93K7//+\nrPMRvze5o/68ybOuxcePTH0lekTz95b9hOo961qQau+c911mgVjN1Y+4UEf4\n+i3quygkgLaXUnXgokULc0R1mjUjQ9GNs7zD3uwGXC3BTH9vT5dSkIJNoDNb\nCCnU\r\n=UKE4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"7c9c6df731e0edf42938b11082973eba27e870e6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.6ed717ddd.0_1594237391209_0.47312752815923576","host":"s3://npm-registry-packages"}},"8.0.0-canary.d850de590.0":{"name":"@material/density","version":"8.0.0-canary.d850de590.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.d850de590.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"93f3f4ea5095e5b416dfc31f0c1dfe6ec8c96269","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.d850de590.0.tgz","fileCount":9,"integrity":"sha512-zafZsl+c+gH1Eiw333uNPRLG/i7Kjiq61SmqEXAQjFzAlwIZMxaVXAUQr6CCJsZFgpYsMTEYP+RsDo4SIMzZCw==","signatures":[{"sig":"MEUCIQCRiu/1PXBZyes/vedSlfI/YgWc0ZyBPs3hhUObVjpANQIgCpcm1EhbsGl6wZ9sJmWId40iNFEnoKrUeve59UxChGM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12499,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB1wzCRA9TVsSAnZWagAAmMEP/0W5QgOiG5Q6z+LgZRff\nq5/5CTM8OOVb6EWqkmNb3Dsv91Ar8YmYwr3xwC3OFjYY19Vhjc9WX89Ai6TD\nvFbe1RIE59JNEs8LUIW7L8mXd7+mdIqs9U/CfNLyPzeSLSw+2h85fvaVen//\n3Il7vMoHN6MUqfa5Pbf9RJvQBEmX9kVnz9/jN2D2sYBSvoClwkTM6LQ43xt3\naxSyRP4fcrNXPyfeYN2JpdY7BDZZNaYQnRQN9rVOxKk8AqxzMDNJXy9ZpVyM\nvdygB5S/1mOsZcEee9ulKprtmhuGZGj2B4wKDnyVkrC7kXNfmN4783K27sSe\nVpi4No14l6mx5hDlYTcfmcQM4Oq610ncG8W3MAnfbAFKvlNTFoGZck8I6sOa\nIbiSAPdLZYZSE05/b/Km7H2y3G4yWmZtSgDiQVY2a01IQvviJSpWhCNBuon4\nLz09od96ZtJh9Pa+4gPJsSebK/uyiHU334scGpblnvcjeJdnHbXNQ7+2cAg0\nd/6NlnjKTSZuxyAup/O/5+wx0kad5B0k6tKy1buyXD5RDCd+H+aM/AU2rPpc\nIAkQYeairOopSdg9UfzielTJsuvzwG+ScN25JQL5nAdD7C1Xy0+qToB0/kkR\nZOzob1x9aBXpJjTn+/Ely99dWJXtulo+RJaBC46LBu6Xc1urp69kCnSzBS0Y\n5wPf\r\n=AV7+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"85039ad97bde95db4d57918266320d54c581a680","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.d850de590.0_1594317874988_0.9585860140999796","host":"s3://npm-registry-packages"}},"8.0.0-canary.e07a70841.0":{"name":"@material/density","version":"8.0.0-canary.e07a70841.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.e07a70841.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"59da4876b090ee1547b635ef4b43b4742aee932d","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.e07a70841.0.tgz","fileCount":9,"integrity":"sha512-PoyDq2lQ/FjsOKEzWF5rVk1rpYLM9G59FOATsMZsVCWFw6pLYRXDoVOnkApzCnWKoAK8xbyuPih2Sf9L1vF1Ug==","signatures":[{"sig":"MEUCIEDHOiCv50LvZ1tfq6BAsLzom7ZZ32pKPZ53oqZkZBQaAiEA+7J5naXrzMmKF/cK98clZulJzZksPF1rcz9yjZijEJE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12499,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB2M1CRA9TVsSAnZWagAAMssQAJWYlMBfn/JqUk5LCyvr\nl87g2LIsNQ2pLy8AZdW0zuThEYCZShNUNeCeaFZcgJBmvDx5WgbzQdSlX8pe\nLQvb4Q2MZKtBLnGU7caOU3XK8g59kC8Kyk/Q9f14Lx0PEwlVPhHJgBOU1r55\nreo1BWS9I0PPTFD71p2WqXi1/D6oUw5cyRXFkOKl1vaqYrnpEZDfvDxamcF8\nU22z3T6SY00MkawApLTYh/0HddS9/klIpBrqGzBBt9AN0o5TmuyudzmJhMGb\nc//pySgBC/LkxTMgLEcXpa3w1nXYnVEh05kwvELZ8gW2jViGgjXHGimhGVLg\nIgpz1XV8GdIqCgnkiOU/YePLANDIDeXkzTe7FFEK2Q0Rsn1/QSGk2R3J2RYq\nuVWG4T5SkEjpE+E9bVm/WgIcbNSzJ6Njuyk5m5eujZtNuRNDuRSG48QqXZq8\nefevh7uY/VsGkcDLvtsg2kQ96n41Reiq+GkDMO3iiinkImq9s9hFT5Ld6e3m\nfGRXPwQKV2nBvYG91nbMBrWD44rzBoZ/IolD058n6pdzGeJOvKeNyhSdnd01\n+nk3QPdg5l6OZ8n5ZtW8B62vctrM6pdWgG3vhWufPSL3i4eQbww2VCCMreOu\nyx1nr/vaq+NeFQqodPZhu4EqmvLcNolP6Ap/fmZaCfPFfoMRt/50BX/1bLn1\naq6C\r\n=Finn\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"105e9fd32899b2c9a4309baf6e879287104cc0e9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.e07a70841.0_1594319668549_0.6480478367395408","host":"s3://npm-registry-packages"}},"8.0.0-canary.37947ed6c.0":{"name":"@material/density","version":"8.0.0-canary.37947ed6c.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.37947ed6c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"064a6c413294f96364459c1ca5f58e0845b97fc6","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.37947ed6c.0.tgz","fileCount":9,"integrity":"sha512-QbdEHnRHcay/gsGZg2alhCWVagRo29onASMIhn8dZB0/UkWyH265aRt+Zm5FgwHH8HPPrWnLPjZO0DN1LvJGsA==","signatures":[{"sig":"MEUCIQDWscUb/KpxftQSCXRCzUQgWzngYVzNGa3bKFVEPZN4NgIgMyKoXND3WwjmL/nWQUf//7+u4nsDQhiy93Zd4+rxdNo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12499,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB393CRA9TVsSAnZWagAAAtcP/jk2fwBCrksaiILFNBhd\nbZ5rLDa4uTzEgzGQQwA66kr4MoQp2I1vrWqllMH2mg5K4/c745ORv6V33xb7\nc4wzYUv6CYsR21Qwmuyxeyq+0HqrkjUhRLPZZsDwjeIW34zNiZ8NflPr21hX\nKZmNXAHAbVQOilnT2OFrezYbmLQ2NjT4RT+Czuza+oI1XLp1MSTE+okcKcMO\nn27rUIlO6SBNs4HWLxAg8JovZIWPoWNpMklEv1kY2Z9jYgAXpuIJH35slfg8\nAdjL5SqUoFg+mdCdvIMtRCDyY6t0vnJn4iPy2Nhn7E8+mgLoIprHv8+i47te\n2Rs6KN38wNB4NuSKDdoUmGQm+PHojW8xVQdhClKjIm8PJKISwFJ4+0Wvvjyp\nbkJhZWICGax8U02s3yS3eSMVmlWNvPgRCnHDpXyyt5jqlYQW+imDmjgMm1i7\nVO/dHZSpDAGNwkzd22XMyUWTcupv6jJSwHC8ftT1vbJ0SVxolq9JK4ay7A0F\nom4JQSW/wnAN5XrYWhJ8brc/m53xfBzOSrDfGerdeyeYvm5do2+pRASbnSA7\nPf5gnwS5BqDuu3SgHG7Bmqmt/jvis/zXSLGGhact8D8lx0bMO7CaW0TD5xW1\nmVX2v5piIFe5XLuVZKCUBNmf06c0dSiilMAcvLFVeiDk5L3Wu89R4vsrjMNI\nAGsN\r\n=zXKt\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"80c4a00e688d5a2b1a35ee55744d879b782effed","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.37947ed6c.0_1594326902985_0.19602259332237448","host":"s3://npm-registry-packages"}},"8.0.0-canary.5d443afec.0":{"name":"@material/density","version":"8.0.0-canary.5d443afec.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.5d443afec.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bb54cb3617ec86bc3d26bab763cdc3ecdb90fcec","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.5d443afec.0.tgz","fileCount":9,"integrity":"sha512-7shBIQMEeeLNttYg32mwu3bOMUBWJNzEqQPH1b3xM6OBcv1QljHYsJ2sirM8LwGVCSTVXsQwxIZm8ujwgJKyNw==","signatures":[{"sig":"MEYCIQCJC88yB5xi6kYswoA14fWH6Gbekh1maJ+Z2YqIiGHDEwIhALB7gu+AaWw1g4gFa59gY4Dly/wf2InPu9OfsDEPshcV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12499,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB4MwCRA9TVsSAnZWagAAs0MP/1J48Qjj5XKBAwyBnmFx\nI/S5szCAYJtOHhklm68KfmNDi+dgEy3TPuG8PwzmuBRGgr9165wqBm23q5ta\nkLqd0AVSGFth26ICrEQctdFpjzetd1bo/8i+lobu2HxNPDJRPDA5AABkImaF\ninTLesNBbdK6HlOlPC9R0FcbuYpg7Heau5i9N6rCKgNT02nj71aIl9yNKz+z\n4ppYCyZ148NF+WrPsNkLG9/vkH/Qsx8+8GEkx4fWuyjTMGhdCaULDBCQw5LO\nHIHuHjsaIBnO6f3UXz03rhx3eeyQJp/n2XUF96p2O+CUcxyFOn7E/NGGg2l2\n9tvQOnbBhImkyaoBRN6EmowAXhWOmEO7H0tzAb7W/FrMCRbMznR3ntJTyusw\nr3+wxrzd3u8Gaamp+tk5L9bTz+l/rclBM8ysGvvowqmkL8+wcPeHtosrzSUF\naXuww/uOi8Kxehti9JHeGvmYA4Xxib43S9Gdn+/WECGhz4bI/X/up2hJadhn\nVC4Crx+NBYyfRXLmKLNYjOubHb/zthLzjFaAUGBLdx2TuvpoLe4z/p+8Sskd\nGZZLHlfjovXCTAeqzh6v2p/TO+XlLFsjudkcpjb1efGl798Ux+qjlrH7NkqS\nM5Y9YmtLeiTCmb89ff8WzHYmn6tm5LTegd//wlU9l7ByNLufKPwgAVI0aNW3\ncErx\r\n=NFMB\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"5c493d15f89898617c3127c53145bc51e8e60930","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.5d443afec.0_1594327856358_0.7789423343371387","host":"s3://npm-registry-packages"}},"8.0.0-canary.9ac1ed914.0":{"name":"@material/density","version":"8.0.0-canary.9ac1ed914.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.9ac1ed914.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"32bb51382bd28f6dde8382d2e69445d8a701e539","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.9ac1ed914.0.tgz","fileCount":9,"integrity":"sha512-TRzFjTUBQWQokEQum/1J12riIZdswtkoYvwcL8VIMNY1ds+UYR3NrsVbzgylKmDUWgtfhBEasw4zIXJUoyPLWQ==","signatures":[{"sig":"MEUCIQCWK0d/AbX5tsfB3X1zCW6tKkdYCPKRbM6qdpPW3JI5lwIgHDM3TWeZJ6iwSWRfwEzHqvJWu6SlYkyIlY+ztsr4XKs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12499,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB4n2CRA9TVsSAnZWagAA0iMP/1DvIV1j0brxb4UJ86Rq\np/yfbmN8oOy+4IicNDelMu+XWq2e4z/1Sr7cBHG5FR5DeGc2+MzjCbxvRssQ\nJC8I4jlm/EN8k7nYILd+eO3TdJYgpBvBPEJ5HkT7aDdmJabABu/cGSHlgv7W\no2rMHXw8TpKzWtlGvrzx9yZhwtTRNdBnTkFuJv90p1q+98x4y+LCyxne8RH7\nAL9cSy25HwJUQ1gTax76JK1j5lXPCTjPe0jjihA4i2D9REw3sLx+uq0r7ERN\n0ri4+BCAU6cQauu4xuhDudJPWLKWa1K4s84NjQ6zB3heF/SXRxYkt/73LhK6\npvWfTKj3ijE/UawN6dcmumYFf5AkLwfkDvj4UlzhYnaC7hPxns83sq/TGZ5v\ndexwQ3gExAvpeVJZ5tbcuv2JEUUAH8dtbl91O1TD4/lvEO9U25HJozezzuRF\nfE2g0N/K2J684MslTP7YcF0nnDOEI8jgK0e+0MNh++rUhTdG5+gCqK8rc3Ci\nb7/hNlUgELiarbXvwS1EHY6HUQAg05721K6Rwgu523xwNB2feUUwx/YqI65s\nH+lb+RZjtJLg0dOsUCXG45qZd8zc9XJHNxfQDsig69LuDNwHJ8EH8O5A+SDt\nDqYUnDgLJNXoX9xjK62NNssNxeITTEzsywEpvptCaRk6RK2qw+UjOaATHhJJ\n3ch5\r\n=zt6N\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"c08d3c600bb022db1bcb4efe520bed724e653a77","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.9ac1ed914.0_1594329590340_0.6338560196431935","host":"s3://npm-registry-packages"}},"8.0.0-canary.1e7cb6198.0":{"name":"@material/density","version":"8.0.0-canary.1e7cb6198.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.1e7cb6198.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"212dc22dcaf7592790f16577aeb21b78e538f1ec","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.1e7cb6198.0.tgz","fileCount":9,"integrity":"sha512-3zpYwMNw07teLGCwyGoWZMGrYJdME9O2v5wT2mpiw9rdEttFbtXUFvaFMXYZ+VFM9tvDleiVhGTgAbrgvT8lpQ==","signatures":[{"sig":"MEUCIA7iNR8AgOU8pg8iGApLWnJyRjvfGvJzNvykkSkUMR9dAiEA4GLIqrO0JhB5N54KBwWEFhf4jyNDQTKtm6LqrPFy8I0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12499,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB5YLCRA9TVsSAnZWagAASGoQAKNsxBumj0auzblNlVxC\ncD2kn2UbTzpUKMW9ahfqZaZJ8WZGg1RgCcbFzOoXLIVzWl+lv7RFeYDrQAEU\nJ5RvwS6k/N25Io6dNkKy0My65MzXbERFhL44Q6Qnhi+R3dTsm77iImIZ847A\ni5COxlhh3tL+/DVgEDiZFeX5MqzB0M8jCt/I55d9P/Zkd3Q5TciDIH6v7izo\nF0ZBcCsKw/xDv1aWFR97ylD1amCcy4Kd4L7LrLIZtJ/exsA5Rg5WJlf6KbU7\nJcj+1SND8SAvyaoX1zA35b/NGjyYgH/KZmzN44xX6Sl4jVNx0ewAZzl6N695\n118l1pXU70rMfoMtjoVFH4YMO/Ci60VMb/Ez8+B7LtKTqu3lSFPLd0N9BvCd\nz3Q9u5Rs3U5UnpOghkuxA++2ocjOZRbFRMUz0EqeCOWLhSLZQVm5/AhlfDiS\n/WqR/ScNabxdyijP0Brf6nwLu2ZaUrckN9vwTf6GvUHOV98a7H19lFIwtCzH\nwkqx8n5UNL45FIdT72pXXGDcwkUXhRnBh5prhJohHKF1aDOK/ZDgknir1IHh\nOPJ7HTZXKZqgMZ5vD0JJpxTUGIQMELE0LvVkROutTHPbgEHOOm9nwTQxa/9P\nElm97IWcqZwFi4RjqC28lQ+5ZLOiGoaTq/sgpRj5G5KhB4VcWYlOHLnedFHG\nfiPc\r\n=MtQn\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"cbdbb55d01ed2f63aeafe8d77fffd1da5fcfc011","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.1e7cb6198.0_1594332682731_0.42393814996784074","host":"s3://npm-registry-packages"}},"8.0.0-canary.843f636c0.0":{"name":"@material/density","version":"8.0.0-canary.843f636c0.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.843f636c0.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"233ddc0db3e5559bb6960bd46aed2e2300f6bef8","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.843f636c0.0.tgz","fileCount":9,"integrity":"sha512-we90cIyLs/CqSS6mqBBYzVyMa8QHMzeDV3aZ26SHNeiAsW9tIw5OEE1JLx59NvTKqTP3xbQ/QGoHI+Il0jYUtw==","signatures":[{"sig":"MEYCIQDvUU8ZeEzdP/NRW+MLelM7sqarjYcv0eu8LpJirnjyrgIhAKIYzokTqQqjjbG9QEJHsSofdF+nZUhVQD6xjOzpo0Vz","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12499,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfCKhaCRA9TVsSAnZWagAAclAP/Aw64YfhrwFb1yFgFjQh\nJPMS7lOa6XmEUST75q4BNWiWZTIhf2izX2JaQ/UlpvJNNiMl3tk2J/CmI9BI\nA0S5baJ/yGXpr9l0GJTrE4aEqcerXbRmmhr65FHa7imBWAb/j7Myg9K7cVHB\nN5cZO6RBUPAxZZglyqov0qgKjTX8Ww8aziXkqANUD/bTAF4b401bb8gmy6w7\nW/aEJKxRMfSWEJQfjZUklenYPsM9KLRv7tenuKS271fP6MuHNeDu5muFrDe+\ntRS4GUHJ+CTJZ+WIwYlvvZDqGI2DeLPM/3gMJsiuT0PL/GEg0Q/t0oKKNSUR\nWO3p38isoUJXf+pSR2+nzlx7f7OwXmhMKIZqjBzDMFDBFhl//t35W90fZpe4\nrPF5ckDwe2IpEjdm5rVbD4Uwqh3kfR1YgAbvycKjmnDi07hnzh5oqFT6T0xK\noKT/hRGPs64r1LZJBhxLx/7lUk7OfhQ98bH7nM7iQrtP4e1guizd5nLd+geF\nVKaSINqv6kV1qlbEiXQ8O99ahGgXsx2TytbNigVxqEDzl/enx4b4nya2QZFi\nIboVcVLgfJg/c4Q1QkS9sWVdcAMoqTiEJHf1Ne4xmLKdWPTuFqZpA72i/muy\nbcdUn1MvfZwNnzxTi3re2OIifFWMQL35bqxGvT5wFe4hSw2QUmT8k5oJwjjI\nXQGG\r\n=AHNX\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"641b40da40cd73b439cefa7fa18c86bfdf31e497","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.843f636c0.0_1594402906160_0.7457539145173373","host":"s3://npm-registry-packages"}},"8.0.0-canary.b2edaeead.0":{"name":"@material/density","version":"8.0.0-canary.b2edaeead.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.b2edaeead.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4a9b283f059e85b3a8e86bdf97427243757c5d2a","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.b2edaeead.0.tgz","fileCount":9,"integrity":"sha512-Vu1ZuE/OjWqxqLYQaUUFoSkNRdHvotGE76+eAWb00kfNAlw1ihvMP0OG4WCE4zGzGznlOG/0S5MM5hRDrett3w==","signatures":[{"sig":"MEUCIH0+Rd9u02j5JRx39fTHEEqMV71m2hG8/aWrPW92EcBYAiEA2QqqcpoFOp+odyz3IdYEPiTTnmcZoux2h70umPytwMc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12499,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfCK4cCRA9TVsSAnZWagAAOBgP/3VS3LFjFxXt1pekupTM\n8clNl2NtRBpX7/qMNW57LS8zJRHGzNY6EwFFRDX1DZauti/RgfURE1ZvArbP\nM4N2D/U/GBX4wEgxcxnhppsJt+VtEFYbhxgRrF8On1ECYvegY2tFb3Cwjq9x\n5FUAR78dTU046IjYW3BnIjWsnGyOjU50fj4FI++AYunHSHpmgV9Rov5EzgM6\nVO0ATmrZy3d/64JFtBTmJQpnrUWPz8Vi6v//4+eWArWzMHk0D7dBVGul5d3U\nsgcEKTs+Wf5D8uz48L5An4qNDxS4AlZYXPYq7NyJCkcohmSBp4wGoY/teZ3I\nO4h6bn/CyOz6BfDYOH4pLVsRAVIqHkquOtBJOR8GSIZW1DhuMs6WKksvybb5\ndpbSeK6pQN7NJWflELwHTAsnEqoYMmh4PndKjsbx3nqC644r1CxQp6geVBNl\nmhkZpHTlFhhNIFB75nMvdypa+0z8ZMG12LP2ZhOM8dxSeNt1w6687S7AIdk7\nZeVDG2Duju4OlNYGcc6OVYJm48s4Wp+rvT5sxYa+3w9g/BX0EW/gl4tmr+YP\nit6m0ZEZJUSn2WHVlKrn1hrStSzwOI5t619zrTF2QByYLKdTXc90Z2uihynb\najcfx6KPvRF1LU/5piOJS6AIvNwN4B+Sw7jWJaiwqsbWsrMKxQiJt9+2zyPp\nRXo7\r\n=kTda\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"874d83aed6fef221001b68d44bfceb30072cc18c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.b2edaeead.0_1594404379495_0.9570632142882118","host":"s3://npm-registry-packages"}},"8.0.0-canary.5dac1f624.0":{"name":"@material/density","version":"8.0.0-canary.5dac1f624.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.5dac1f624.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"afa9a6bbd37ccd3ca3f970900cf14f7bd5d3acfe","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.5dac1f624.0.tgz","fileCount":9,"integrity":"sha512-cB5XTdd5OHPkIILDtKg0jqV92flGnQjHuuIe9saGw8PZGYtYtruECOCnovQU+dKD+oJjCN291fN0gk/q48iPYw==","signatures":[{"sig":"MEUCIEjbTaz9iRp0aDEb49QCl2iB1vd45J55SygwGlqNPQc3AiEAthRUA+BrHfBzTEg2aVITaDJhl/LXK+DGXNM3732rl2o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12499,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDIzZCRA9TVsSAnZWagAAPOUP/2o/qlpCnLOZDXKMPJqI\nXXA0CG33+4dlTKVzB6NmMzhoI0B2bQfmRitVUuiC5If9O2E6prXzyACPqRcO\nCCrQxSu+uSpaczrpYKCr4awmzYt4jCDmKpmRo78aJ8/Zm9bvMukxe1Y1Fqrr\n2W5xO2gPpdXTKKwp3koFlLMRjeGf4+PqW+m5EdW9Iab3ES66kchG8Sthir2n\ntH2MYktRZ7bqXFQbQc2OL2CapbQAI2s1mOihB5FSUUNkSM99pirTafvgOCD7\n0vfu9hjGCMn5cR4k87iymTIXKJUERIq6tWygfrsoaZq1mYk7gALHf+Yk64mE\n0xPI7xViDlcDowP2IK5rGr/SclFsefnGDwCGJTXMjsZ0cgxEQrMBNkRZUTEc\nkf7Uswo04g9UhphXNcp0TbVBBbLFxtNto4tlE5FjomPaI2X9jf8Q4CROCtYv\n0ltNz9+dYcMKt95AWn26Mt7+HYTQBoFlowG2rdCgWdBY5tK/GYSah34nyeKJ\nWpMcNjkalpN39HLgCPRZ6cANCtK/OpXdI9b1FfFpErFH4mp8x3reQ9bZT25n\nZ3IT/ZvD0lAA+kubrt/8iUFDeHgWB2IyOPs6JYoi4HNsd1QmWq5RDFzppSwK\nZDGU+LHmuGHTEqlYZhKpnhHqQI9q1gLqwhE6bT9EYehmIx3L4fWeK9kbgQRF\nEq26\r\n=A9v1\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"3acf16b30fe876c0d319f5d1681d177bd0089cbd","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.5dac1f624.0_1594658009168_0.7823220236291382","host":"s3://npm-registry-packages"}},"8.0.0-canary.4497acef8.0":{"name":"@material/density","version":"8.0.0-canary.4497acef8.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.4497acef8.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"29eb6fced3cf2fdfc713a89dc83ac62c7f885180","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.4497acef8.0.tgz","fileCount":9,"integrity":"sha512-9WD0cLV2pRY3EXGU/OkTKYlMi3DvaXWgYuXFLaFGFN+tdXujOayYzeeRCqALrex7oWRaykeEmmr0ZFNes8Pv7g==","signatures":[{"sig":"MEYCIQDekhvSBZmNxEW1Ec6BtPDlXUI8T/X9QAg7bHPTa9gIzAIhAITwWIgkZd0mW91e6kL7pNIovFXogD9DECoQSSCoJGbR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12499,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDb7ZCRA9TVsSAnZWagAAsrsP/0hh4s13InHu3j5nQ+/c\nlOok3NgnXE1KyH4/ghnjm/7OwbVGQD7sGFUBTBlsUz31N185VmYWZeJ5SuXv\nL4c+GRRyKISANCTWjeHbeg2SLYFsuvr02I8wSeFQnjzEAv+aDa2Xln/KzJ9V\nXlBENT7+uArKQ/d4QLePPbOfskoHYeP9RGPTgTtneQt8hl0z2Knz+oqUSM0t\n0SQVRPDqgOOh8jkcisf2KpSmyhVKuJ5QEBMffj5mXbdKDAEfsxARbzGA3VZ1\nePpmoo2Xu29VNrAUfsQ+PmjHQ1GFm9GsEnZ+jg+sUNHezAaE6Pne4Q3WhRJF\nBfX3gkNTK01Jz9Hbe9X4hHIniEJG/8XNkFSgq4KS6mvXnEwSP6FPWUY1JKt3\naNm6NupP1LzERfnSUWhlLcWb0+xWbcDoKj9FIR4zT/xfSpRPMDg4HCtWM6kX\nhP9xZO/vNhOmHGBE/Q/TqxM9WVIPwKxCi7dcnKSE0Kf4ycIOo4xmjKBVFxHi\nEau4+2qg59MJe5pWxAKvlW0aDMQM4wySAVhVGpZbTq7FWGcJfPfhnzA6xupK\nrG3jDL3jPP6ORlrb4BjCEfKQVOWQDv+erVyBDnavj9tCj7GGoZ2xq2s2Ps1l\nluGeYwph3/J+BCYOrDk47pEvEgOdH34M76Bd8SX3miD9FqbcIetRulPKfYvD\nppN+\r\n=k1bY\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"dc90b63c1737c63427815af4f6de59841a57a1bb","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.4497acef8.0_1594736344805_0.40186966842309446","host":"s3://npm-registry-packages"}},"8.0.0-canary.e6e23019d.0":{"name":"@material/density","version":"8.0.0-canary.e6e23019d.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.e6e23019d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"70cff6c3bcf100d94f94a864d29d1ff20dfa98bf","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.e6e23019d.0.tgz","fileCount":9,"integrity":"sha512-HjyhtIPAvPqg3GvU1omytnsl+cApTa5Ik4PM4Lu4Y7NV72lIFZ+I4LK9++iMBj4d1ggCQ5aH9y4KbXwX5bAbmw==","signatures":[{"sig":"MEUCIQCHZ/N1lw20Amsm4z1CfpSWH1Ru+2br9EJ6m9+cFcQO3gIgY4VVTTGiCNVdTr+YANrpp5W2XwoLS1RQaqMHgoBhBfk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12499,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDhEACRA9TVsSAnZWagAAX48P/0FK+IozQPHSmMhUw6Hx\nVB9nwWSGuq4+0zb+lk+lj5igEamMz0lPJ5Cr2jEhYzUR8uzDtdy7g0OZNTz4\nYjh/T9rYN5S1hRI8DjHgOaQRJYpYCLXLPkCTOKFbGUPIkBSyrBt0GHYqL6DF\nHFNnpSWmb1YNE63AckNZsXnk23YGW80CylMPDQTj7DL2w7E3WEhBOFpdqQiX\nmIHbruhZApyaNTWyFtPTikhoU3nJ2tYBnpMYR+J6ND7tifmSQIKpOFcrQmK4\n3E8kXdNlWTEXuwVoGcO/RRfkPdV28wLoSh4e3OI27Jj5tR0DAVo38mcAEj9i\n4zalzeaLSvdZpdI/gR2zFoQZElDN59GdmoFv3fJASGOxOKyJOuyebG4eHitr\n07Tyea223z34pPONZR5TMuWkqau9CjTt33yDUujfXsIIADcJ8pHybNl1VXCa\nrq1RUzKGyv4AECO8gaOpUddkfQl5Hv+rN+VxjX4oiNhFdRAVuJSgeAHOeew4\nyRSpXYiUt751QEPYzbsC4PMTlvh7eAJWTiUzG0dH9Ne26COIVAcGy2utYMpa\n2amngXJIBAv1aFtJGNjn8VRqyIQjtLTvdWpxUug4IBZjjvrXzSvjsRGtby7H\ncyuBetdpDpxoOZAF/VQiAVOp6c/ad0OsQgzykaeGzKsygfVr8yoUzDUAV1zj\nvGc9\r\n=fwFV\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"db31520d2bb46404d9d5c364a2db4e2bc564e4f4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.e6e23019d.0_1594757376253_0.8022341567013369","host":"s3://npm-registry-packages"}},"8.0.0-canary.d548d7a92.0":{"name":"@material/density","version":"8.0.0-canary.d548d7a92.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.d548d7a92.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d20b7c2552a733bb5f0b8f49fbf0db6194f2100d","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.d548d7a92.0.tgz","fileCount":9,"integrity":"sha512-SSmm2uO/YMkWUk7m22+PGLp7FisQg3AFmrDQ+m+XIds4thcsa7IIaerAP0I9jBnBxvrNTiEz42Xt6zt6fGzoMA==","signatures":[{"sig":"MEUCIEAnDBdeP4G8PBXGrvzPg/02sac3yQazkr16fruk1fKqAiEAyJAKb6afpjdBADKXe7igTBJd5hWlzyhvSmPbq/U9wz4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12499,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDh+uCRA9TVsSAnZWagAAqAgP/iWoqv8uP5dvYRPC35WC\nfg+Xn4P2kfQON8fhbc+AIcvvyCcXKmU1JRrX1mZIvmjVZtCgd0f/+PLLt01Q\nB6DjDh+TyYH+ParLtquHEfUez9uf+LZt9HG3Qaq/k6d8z/XZ23L+zrWTbXjt\nJCpAgnL6FXan5Wi9/4Wr38jqiPbWwPr3xtkoZVa3jBAKGsdxeTsNCD9PPJjk\nAsOGz8Y0baJAeI+8L2AnNPBsXE1ffQO/Jc/McsyP2YPEeHgKDR87noWekEt9\nRlYBd7LgAMIBFxomrVtR1mU628hax92ha3DkRFoGMOY5j5cACD8KwPetHVRI\nv8cCt8IP/jWDgp30Ef7+fOxKcBX4RbZYNyDaGY6h17Brjax2irSSIYafZt0D\na8eFacchbecvIvdJRLdgEKdylzKVfXODdFcyhK9do1dA/u44GyGyah83xiVc\nBB1/ouI0M+IEAio1l9rQ3/X4ZfdxrPR1KrQw0ijHVkpXcIq/p6Mc/PVzym9Z\nbRaR/9rfhqFElH1FiENrtqBHAws3htAdLe2j4tf5/e0OWied351kO4/stnpU\n3xpfo9PuPtKOC5/UP31JIT4D0DirJss3BmMEEc1g0TiwL7oJFNiGK+3rmi77\nrK4Nivn0Vo3wSaKJ9+PS7Xsz7ooUlqge0dRKFnOaYtxJEZHb/segNPknOhVh\nLvM6\r\n=xGAj\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"9ac3956fa3f0b35d113404de60048e8aa1c1a0a9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.d548d7a92.0_1594761134142_0.8630963437939114","host":"s3://npm-registry-packages"}},"8.0.0-canary.58ce529cc.0":{"name":"@material/density","version":"8.0.0-canary.58ce529cc.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.58ce529cc.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a8eae956a0c1192c3ef9bf2002dc462bb3297558","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.58ce529cc.0.tgz","fileCount":9,"integrity":"sha512-VJGOAEBx+giNuVcMUdm08uLYFf0hOMHcDiKwMN/yoGbltSaLQ6vfTJWjbPmLPU/i1siQQJWPjIPVsuN6WacrMg==","signatures":[{"sig":"MEYCIQCE1yzmGqPFXI/yzD7S2JSRgl/Eg/MVW+DX1kb04BYrIAIhAOZqf0ZkIDvMwMl6c2FNmK2d5T06JVXbJWVX4UNnlBUt","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12499,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDiAjCRA9TVsSAnZWagAAwRMP/ipfyMAaOmKEuRUogfIV\nnbLaOUTEd2pBW01pFSdyYVvQ2deveifzAqip8byidcCF1hDDQE6mLqxWnFUL\nRjFGVWPEgTcwWHi26ags+eIBjugl8qIq7/uLP1HTH4+/mWZpj02FXH78ISnB\nCA+e73JZkkZw6GVIBZjf3wmgpboYGIO2BtxwNIc4DIDLJDOxmzfCZxanajdZ\nZsRil7dw3p43jWHgc0ydPUyDEQwpLNuWTuCc+E+gfIcz//Khk69Q8s6WI6zR\nFaLQgxsbX+F1O90M55OarlgHstVFy0htQ2xoVQNN0Ho5szmuSMIltE0oYyEI\nkGbOUqwemNDJZGeAZ7Htjk3YjqR88TFT6xt2Sbu0NczhwjJ2joPJtdAgtcI2\nLZyq2cHvIW12KGLAAeHdSpYTqZ5KpEQ2HOveL2/F1I9UlDq1BYqUWKFV99UJ\nZo/dAvD0I7/tT0E6tL83GzoxXK2I7RnmbxgSmsJ0d9T7TE+qUnHZHpbOENmo\nXbVSkDmwL3w4JJAy4xFJY56c3CY2hCGE2fBfQmaEamQBrVIqmxL6V4+N2kMg\nW+p3PZpXJZCiyD9NGomqcU67aS+eFFHBpK80+k0UdMBwwydI/VsD2QXeSsaH\n9a++2gx+jIibqJh2I4Y9UbhUFBGDffVOMDJwEeazvmzx49BS0ViLdTkvdFa5\naL8y\r\n=qMU5\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"c45eee764d94f6c07b8a5b3770c89c8bb4ccfeaf","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.58ce529cc.0_1594761251124_0.6945195624918332","host":"s3://npm-registry-packages"}},"8.0.0-canary.a0f1202dc.0":{"name":"@material/density","version":"8.0.0-canary.a0f1202dc.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.a0f1202dc.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"78b6d42371e0deddb1dc46a7d34587699df1c3b2","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.a0f1202dc.0.tgz","fileCount":9,"integrity":"sha512-Me+f4ONfgJAEbAy72nzoJBSIC0uboTNtNbvcxroi4bMy2QlESfOnJUotJ9I+pUToyhKMDqKhJz1BNt3ZkPm/sw==","signatures":[{"sig":"MEQCIEyBwWYNuIA5LZCxI84XZSXWUxqoK8euDWD1u4po9IX7AiBYHxsFARQqfT0BJc1+Sc7dNLvb70T+4leEX0b7P6zT/w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12499,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDiSdCRA9TVsSAnZWagAAePcP/0zgALF60ZzCG5cyNvI5\nK0Ea6qZ/4nl/WAf3/MLKgEZwjWFohuStOyhIGYziBQgIAMyANb/DFfmnyCbP\nXKuE4zx/q1RUx7yjkWcgO+wTw31EJTCk5u8d3xgdv9TSNeVXa5X7UudQTrhG\nFAYrAQWQxMwmzCkqHM7cgPuHGFHhOe643QTpa64c0ZIeeajce1knXI71Q+ej\npa1fuRjO29Y+V4nin0mZUJqKzRUMGH2KgVlB4W/GB9H1ylVqrDE9bLqTZuyk\n8jEBmktiHJ/LqSwUwP0+h4ZrEp54mvDSYMEcItuiU8FZVJAUAzcIhZ50q8A8\nXinH6xtz7LNEYM7nIrC8T9sm1sBKeJ4YA/T40DVXosiCb3Sw7ACuBf9/rcsk\nKKzG4KbFkismzwoPSq4kFEipNU06+kgNNhW2UiSj1vNRnK+77JkrJylIlyZe\nqp3t+cnOPBGEx61NOFl6i+bTj3OylmlMhHHtwgTCLQqyKPSRookUkL9hP1RK\naI829MAx/XbJ/TcWUckIH8g8HjT1fcct7BLwC76Us6mHDMpP+FCD6yk2wS1j\nkty/j3V5yKos6efy/8QePxcNNAxiNRw/3OQInsAdi4U55X4y59KZNZpBtBbK\nzwprF0beKkOiD5DbyLtyRx7p4eQzy/5v4NGq4MHM3tebFwxMOw5ChkitcXpL\nnTW6\r\n=yaRX\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"93fc447a8bb5a55abbcf4b72084f1c65147f3cc3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.a0f1202dc.0_1594762396937_0.7325898978298859","host":"s3://npm-registry-packages"}},"8.0.0-canary.ad4df58c1.0":{"name":"@material/density","version":"8.0.0-canary.ad4df58c1.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.ad4df58c1.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"508ce5d46bf96e438a10f358a3b9ee2e22cc7021","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.ad4df58c1.0.tgz","fileCount":9,"integrity":"sha512-jidSvniVmJNqB8aShlNnx7Cr3dVAdn1515scHWVPS639RwTSC6Q/tELL5sWEYKXFFGMGOIfUWzch2kQqazy1eA==","signatures":[{"sig":"MEUCIHEt9V+gm27rOzE6rolp8Kl16vkIV8kkOerVMCtx6Z7HAiEAoVi3SIDSnqffdEC9G4wVznaQw9rSSjvmimID+g2DfL4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12499,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDkkACRA9TVsSAnZWagAAmgYQAJZNsJIj4mKHZmWCjjt9\n0XUw7sdHgrOK7oE8qWg4fBX+9IdveLxlsXWfaZaRlttMWVwFJ1my32CbXBEC\nO7WKXPMOrq4TnXg0wj1rE7HO76gN9zhn1oZhMVuk8uO/SXlPkgj4x9pxgD7f\n2RLmPLOxldLwyyHHRwR+PRJno8gjfDzueQsDAhw7LSVeuov8IuCz9aZU2nG2\n9ngFMd+h4vyXyBA/eiMtISeXWTRV2o1tM8PGNi/UA264K2BiPtMtIF5jrdYA\nPYzoZfF/1PeA8GT+1V8JpHVDOfYIqNhXHiEW8AScbJfwyWKcEoyVpdzrGPSX\nU2ctyTpYRCyQmhfsauNrWXaSwkhPdUwlZ+4/5hwVEkoVGzrGvlwOOYlpJOBV\nxbaiyLMnctICTZOmDZZdrtr9Ewa3E7qaL2mOT43Iwv17cSpIcGXUEeo0d5O7\nOM2bv/4ycTuAaohtpph23XE2HesYwZCn9VdGVdmeyxfuzu/k615xwzPszptO\nrZabc0WLXU6Yf1JqK2u//DMpLJQBlYburh7b93qXKwRfUzE2JO/clqzIL6SP\nEMnyhrsoS0XD4flDxcM3yN01dJi2mums6j+Z8UXeixS51EE7uQCGncU/eIpm\nCZWDzfS1n1X8psocQnwNoPNVE0Jux3c/Hqy+Frj9jjPozcqbRKhmUXJs4qE2\nIGy3\r\n=F516\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"f3541b13d081357419478232ca7ae0021f2a6b43","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.ad4df58c1.0_1594771712003_0.07544516960448466","host":"s3://npm-registry-packages"}},"8.0.0-canary.01db89053.0":{"name":"@material/density","version":"8.0.0-canary.01db89053.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.01db89053.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"af9792de7b95e3bd1d7ef8fe8343a71740f9608d","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.01db89053.0.tgz","fileCount":9,"integrity":"sha512-2791PeH3Elsv5TD9dYc022wNYzD6lobWwFT0YVbPpraJ2vX1ODqc4kolZH3rnN7RwHKl/8uh/eL845M615rCmQ==","signatures":[{"sig":"MEQCIHLZNEIO+RyhMPzPz5VJDXhEuChIDPIQ3ndQKN/00Hs5AiAi4qzTveAQF3VUXloikFWzca/wcnk+h2owOWmVF9Qqlw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12499,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfEIJyCRA9TVsSAnZWagAAA7oQAIkKuCAG5pVrFGGWRZB5\n2FdvNUaFY1TZZhBh+KTQs+3bCxQFetbFchKt9wx0RYsNEtBi75oqB1SeYZT5\nnEuRopZ5QnAUgt226WFyHvsRvaPUGPXqmjJikcajSY+tExlNybLWxlCAtOTC\nuAW9QmNrdHlo+8u9h11ZO6DtwW5jQMrIMWFfl6iJvFwW8wpYfgDoS/eedx0E\n1gBrdiedlH/v7yh2/H1kK1mCP3rbLONmU6AU6CDw3H0t0LjfhSZtw9iM/X5z\n2Vyy+fhPYmT0xQOOhvwd8/T8KtvBXudl7zajZtg0GNIkS/C1oSJYe31ULgSe\nuIpMu7yLsgJy5MkZBJZqnyrS4GuMKxVNVPB7LfYVh5ilTVjyxK3LbSnrjL54\nJiAJDIVe/bVwLCpHJMX7WK/rMOiqz1YYpEhhVNzyYr+p9ZHVgPYrhMdS3bhU\nfnGxwuJZSnveSNv49HkFt6rl+Cp6iZpcYU38e/ygCIzG68m+hpXz3wjc8Zjg\n8kgL7LHxv5EAy3QpQmwQyC++6F2k6JUJbB0v6YfzJccFPllvBNhcvHBmgAPc\n7cHs6MkC/do2XmZeCH+tASyVkb+e9mf6yuZYIbmdXcCkpyyDRQ0pFdv0SLpk\nNq//loMnZBJou4id6KUHOtKQ/GYR5Lcu9O2akjZMmfm5nDnDiiN30AgDGXly\nJ4LX\r\n=VZYY\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"8780c29a82c64caee37ec22f279b264af42412b6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.01db89053.0_1594917490460_0.19571902747594883","host":"s3://npm-registry-packages"}},"8.0.0-canary.fb5a4cdeb.0":{"name":"@material/density","version":"8.0.0-canary.fb5a4cdeb.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.fb5a4cdeb.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9d73e23007792b74f97fd11f25f7af656a8504ea","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.fb5a4cdeb.0.tgz","fileCount":9,"integrity":"sha512-l/gRtEUhIF12FAahfQ0vrb6TLkTrX0LIphPM5d36+e2USPQLRnSfFPrjlcDRKYiKWsPohHq1CQ2utW7Ux8ps1A==","signatures":[{"sig":"MEUCIQCukjOeMegDo/k77rSQhoTIsskf49gltWLKLuexhLrluwIgXcWVCppTNn1aVqktXSkzZTCxzoDR/9nl/UVT/aOIOCM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12499,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFe4tCRA9TVsSAnZWagAAW4gP/RIZ1JpQH6QHX3caTL51\nOu0FcULYt9VXQUvAzMZ9IsXZ9x9VbqE+b6DKPykd22/D8gNU3tsXVScEObPv\nrX377KpsjLK9WrftxTDrTVcudGhZrsEAKtwdhgxwWl5PuXxO6jkoS418DeNv\n0Oa6vuTHVrdLHDlYIefcUwfOM3wbEkxBbG6zzurvPh7+63IsfQ6tV7g1R6gG\n9H9nZUh97OoJJ1vm3XosuvVnNWfH18fxK/6DAYdlfKGezavHHG5oMR1SgmXK\nwgzu7EriYgfRybFPDC0p+tZBGKYpN65hliE9rK1mjA4Zxq+iOhTvCRfcQrEA\n/HxbYLeNdENwiaFHT+xE/Cxg84RVdq7+fFAtlXuisoqteDGEjsE5gBTansqv\n5wZdFGNJe5ZLKlu01wL9sSBPBIjKejdBLH+zviEx9gK0uzR9V4luN/ISY80v\nPnsRgNI03ipxetbGA08FUIPRGjRwYO8iDuw+6HiSslvPsgKCC2drLVsQhQfX\nB/+XbNQRDAQouTdejOhUCIC/b1x8K8UzxOGMWd4CTzsQDXd8JPKfNKacH+6J\nJ5IzGvqnajP/JwqahEtcRsWp3IX9DF7VcTSJSML/4WmXWtFBqre+rq+ibvU5\nVgfhqNQ6vmBHhNMkI0ZuX0cTSOMLdOyhjoXF6POM8dokg2Z/9F6YBF1qcAxe\n32Yy\r\n=i99l\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"8e80295b6b3e0ec36934f8d691b193c740458d1f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.fb5a4cdeb.0_1595272748853_0.4240138143450365","host":"s3://npm-registry-packages"}},"8.0.0-canary.8df0f517c.0":{"name":"@material/density","version":"8.0.0-canary.8df0f517c.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.8df0f517c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d5cd5537ddd4b791c2a308010a86e7a9df2676b3","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.8df0f517c.0.tgz","fileCount":9,"integrity":"sha512-kTfaJmeIYyeznZKppzgcly7icZj2Co7FbUCkFQumGBo4u2sZEhIEu8gRt898SKnXk2mw2/AMHUQtlUHOHSSioQ==","signatures":[{"sig":"MEQCIE2iHaRmBFRm858nw/H9f8slhn242NC+3BIcdkp/apeLAiAdXVxCfuifHCPc0z5sZ90rxt4cl2K8TIbNlKyf516pLw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12499,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFi7ICRA9TVsSAnZWagAArmMP/2G7Bzc/sgYWY8C1WJJ1\nKG01GCZPDzZQ0/Lb8pYQ4vLokQxmlzetbxMTQ3y+TXoIohOsIcn32ahUXh/X\nitmmbWNQXW4Q9UQV8V7H75Vb4LD3E7g+GAgU4gADuyC2EuOfTV3h55aVLDrw\n8VwEHNPH7rPyWlj/wv88+zis09VK3tf6j8kD8uxpsliJao/fjfqf6ndOwqJW\nxXtE+z2PlDuzfMJgYNkw2FdZOr0DLi7tIjAlCjQNWmZEY+R7HSRgJ03zvVey\nZVVazUhW2ZF2XLrG/649+ZMscTZRhsULOIHULxiJ1rMY3IP61AgpJMQhazQk\nJ65XQ02C9y3drusizjSTBTdLZyPd0StmthpDUm4CvS1E3LpSrgwov+9E3kJT\nY/9EA/9H4y3WkBnXgxrcVkNGhFFG+vQtD2QPI1z1aDWr3/C60V9i9ECPVD7i\nx0h+ZxYQXjA/KP/ApId4jkaswW5csIVLPxKTXvEsqu4udVW7psgP1GmFNLGj\ng5xIhnOArsMcayMimTU+MfTO2c12bbvF3Y+bVw1bTdKiwSX8r5ByQA8YtXr/\nwyAqCdw8KKlZRUyVB/eb47z19tiAJt/MzVzEejbG1vnn+5CAAUMDjYfv87+n\nLHro/PmbDt4BNBrha5hNcPQVxdyihJK+MDbSwcCsr30SZwJAHGrjgT/AGJ3M\nkyLh\r\n=51hr\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"5fca8679b0dad51628e898ac223795eea8e54d56","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.8df0f517c.0_1595289287751_0.36862165846893435","host":"s3://npm-registry-packages"}},"8.0.0-canary.abcdbcfeb.0":{"name":"@material/density","version":"8.0.0-canary.abcdbcfeb.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.abcdbcfeb.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3f52e4ac377acf85c87f3bd2c9b16c3618937b1a","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.abcdbcfeb.0.tgz","fileCount":9,"integrity":"sha512-4pAsCevuLGBGfQsK2BMeNTWp5mMFgDPv3bqk08zLKstgZ1VycDV4wwemTg8C2x0gx695pSoZT7H/S3SYH+0QKw==","signatures":[{"sig":"MEUCIB+QZ1V6JxJ3nDulb9hw1eLK8d7jYGcVtdVGLXLjt8GWAiEAo8aCogc4agL1nFtEZEwk/7xBzoC46U7xpOmT8awp5eg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12499,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFjuQCRA9TVsSAnZWagAAFQQQAKLPYlpSarc+4a/pNSC7\nt6YWNtfJgQkebsJz3mkp1DfSKaKTdtqh6QpHgykX7QZYZPz0AA7HG4s8judo\ngLHhjAQcEMrstQQj4rgK00UtUabeOO+UAhpxCYms3wAs7HToffRA6sYcHl4Q\nCtNYdoOecy0a1jrCIHKqe9oExvekOZEhFDJAU/o61xTX9zatd17bKRxlTLL8\n7tPLAk5AA3VN9iXC/tOCREJSRCQMz5qWdCqsZPcWBH5iE1u+AZv2NnYNJp/I\nq85fUT3fEoBxg+0W7lQmn0kYWj68GlLsxxrmlKnDnE1YqmufdcL7OONDNF24\nokU9iI7y/Rv1mEEnc6/cdXT+UFHCQ6USBBMoezJiPogH/Ik7bS4t/P41dj7f\nLhuD9mW8FK+D/B8FoQ6SEkj7MpY2AeXh8Duu0BsUBDsD0q5lEI/cVwAWfUnX\nm1lzVaa6CQjTxf7hWbLsWZOT92mzUFvqQIjCeNNXBV8GVvzYE0H0mnzBYpV8\nIgAxsL/uJxArus0fRH46J614OEdaZWyyr7bRqWBhxi0Xl/mHU/jK+6Aomzj8\nfnUE6OBXBvpuN/JSj39XA3uzVgEY6JIsBKwOLSRY0CNTra2SSyD/Ra2eSgkt\nY8hhp+AjpXWjHr3Sn/EuAZPxtGyuyX5ICh2nN4nW95wfNbpG1PJWXin92lZz\ndEST\r\n=Xf9k\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"946720776dd73c7539bfa072ea415124b3e08a55","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.abcdbcfeb.0_1595292560293_0.5815684248628452","host":"s3://npm-registry-packages"}},"8.0.0-canary.7bd5075de.0":{"name":"@material/density","version":"8.0.0-canary.7bd5075de.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.7bd5075de.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cd9318cf97c90d240de6d4f20c793d026752c177","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.7bd5075de.0.tgz","fileCount":9,"integrity":"sha512-rydX3bOB+UHHbIKpEeXlzq9gCSt5+vfH1IIKal7jl83Kj+skT5TyHfaaAzow8lTEsbTRh7M1YjjRldwbH3TuSQ==","signatures":[{"sig":"MEYCIQCz2Mi6PyRzdqcJ1BupWHeCKsl/sivlm3LuMGvqHqN4KwIhAN3Yc5OHhtWGcyS+R62vOAlEAtNe9YuDHL19x3dI7X+6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12499,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFzf4CRA9TVsSAnZWagAA3IIP/1MUKaN4x6BZ74+txpcN\nAsalfOmK0JHNjO0pkk2/ZXtoKmx2cAIH0p3BCPZ/p/w1LVtqHY1DYLADcGGB\nMgVGHLq7q/HTo+9/Lt2A5OWeF+bcwrjrbGz5951WlbXssiTBq34s+QSNTpwu\nPl3ibxSZeaezW9x7Z1h8+dwFfvo4ol5GX1Jj0S1QLgVUG2mrKrxWKyutuvq8\nP/1DkxeHv4q5c66UDr1jfUoqQ6XufOBPQfENIoiXdFLnV3jKHMG+DIV0F2Wp\n6UxSHTuwBh1A+UVwf10vjWeuTA42CwBl+Sm6j42yAj7s+h+TTzMDItxn/7ML\nMnohhZfbqApXmtDeXxgPm+ih8FkxXRMkx5yQTG8jtXrbxkpMcRitdbRm/FrO\nNNmyRZTtwV3PVQp/B1aeJd19XxRBKcMxF4SCRq2jWxBbqfAETeNkFCxGkYM4\nVJ2XkUbsRhRwi4oogJai1F6ZxTnvcREWIwVvQ18elYckzMuYdRiEsAlNkXoi\niOmlT2R8aJTBaXajx/EE1EG/Sg7lU4y+pf/2A73qO9tATXFXXzX80/FslrnU\ncL1nAppHeihMwJF5cTzvxNVKifBOjjm8sBIvqbiL0dah0h+Wh8nLoHAIUuiX\n95bEjf1fug/MUgxaKxqusDcriXW+MKzV8cgxlgkDjZ07icECi/EG488H6uAU\nOnMQ\r\n=L77G\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"5ae456e961b208e98164fa21047b3ff2e3f3d8e2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.7bd5075de.0_1595357175784_0.6295055324418617","host":"s3://npm-registry-packages"}},"8.0.0-canary.405a29a20.0":{"name":"@material/density","version":"8.0.0-canary.405a29a20.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.405a29a20.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4e50f9095e0129683942853b193a46b2511282b2","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.405a29a20.0.tgz","fileCount":9,"integrity":"sha512-1odwb4piIc+m6oAlBFreeIdJ9cfffCB9NMJe9Oex0QQeUoyhOQ2ItCpa8bjq/+6qxCrS1WoatQ/Yq1uUdB4Kmw==","signatures":[{"sig":"MEUCIQDiBlWME1eh9Ubxs6s8NwTNBNlas833+6BKBsH110sI4gIgUvyk5Au4/+Uv/GFeDVUGwzG4xl2/cujoqPShvwvh4bU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12499,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGLwfCRA9TVsSAnZWagAAdPQP/2jkwIWnCKmuOial4J+S\nQMAY5Kcx4PfBr2Rsc188sE88npNRvbHE4Ar/X6Ruac+VDCfCXce2ZeBPxiLS\njtbBH4QaKd+PVGD5+g9zXZ6LCo03x/14Sb6RH8eFxSRV1AHuFQk6sGE6G3kj\nuVR6l2QUnY9zSBXYl+TWDmbz0945CPxyhKawUlQAekzvYbiW92HA/qV9Ow0Y\nhyYZxHJsN9fvUOKwcU5gTSKyVgWTv1lQDotDVK/+C4NpGMGjEn67DcDsdg8T\nqJwGTU9FJQfjOCW4GRFFBzhuMS2gNrKOmR9L1AqXsBVpzCu437m2psumT2jy\nCs+V/qtwgpWUUIoUZAzF98XpsF0KL+v6J+IjQGEud4xOEAClIFFQPIbWv5Rs\nDZLGw+c3D3Jf6dW2u//8K2EXec8uAxAIj9vwCG8idYez+SYxhedphtsEEZwk\nQg/5kHv6Z/7Q1yHDsNqa482sfC4htebum9558jKrudv7lzRUA+uXJZvF7aMW\nJGnCOm7lR3gYRrt9YG89HMcK2fYa+B8zbbdvM6Kw+Rq6nicbntZmUuPZGhna\n8FoirdMiLDGFeZliqGobe171rrjUBkk/RiizZEjGrrMjd9BRbe0u9FOffJxG\nmgLKFnbbF1tr9CgNmY/wBm1CYODHEFex7P26DeH5IbgngmwfqvxYhK29knhB\nSoBe\r\n=AdfU\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"02c4f49285e8229cf49d9e4a0df213ff914b949f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.405a29a20.0_1595456543423_0.8113776266720938","host":"s3://npm-registry-packages"}},"8.0.0-canary.f3693ac4c.0":{"name":"@material/density","version":"8.0.0-canary.f3693ac4c.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.f3693ac4c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6232bd061617e7c7a30d2b8d9410753994fcf0f9","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.f3693ac4c.0.tgz","fileCount":9,"integrity":"sha512-iHhmkfVn+CQUUikMFgiuFTZZUJOcQ3Jy5UOGzXWanxXxlKFL0qk2UiIrfz3CMX16G7L0r30NyITSFN/0zN2/cQ==","signatures":[{"sig":"MEUCIDa59KFZOOO9EA4qUE+nsvWPl1ZMtpiB2yhxaGJuu+5qAiEAiOBWEjCkAjP56Bo65JKIUTD68S4CJV1/UXxKfxV5YIU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12499,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGL6MCRA9TVsSAnZWagAAF+4P/3VddI1oP3uIRmLw1FPB\nY4KyWt0vnMgY9TNbDSsI/plWwkquU6/B7CHMAngN1gxakdeXbkf05NBBdyQ/\n3Uu0EMTf/gqzL4sUBfVdGSofkseo1anftINFZCBgsWbXe9JyPkehuOaQaawR\nXGlj4NRIJkyVON2pUhDpVmIDj1ZvviX1HM0gLjYgDL1nmnlE7PlZa0M0LCzh\nyjo5tUtMK5ds82wLJfTTNa0NvBnPFltcwF5kNGMCtBdIyWyEx5xKwlYNcUas\nm5IZaEcagYhxjlTPPXfuzWASLmvBj8uj1FlWEOED5v2upqNfhXhpueHtmlQo\niWuOo0IiKyUOtsOJcFlzsrjU9GBPuoQHNNUSje/la614NWLtAXZqfFB7Tohn\ndnIsfbQmfZhn/WguGn1GcGjWtA2qwYPBnhn3Uda0klWsJ0OcAsaG+yaGtsdz\n4Yru6qmV+KZ3RvhevzRmCXCJ+M3gBqQBLXZbBzkWmJYW7x96xaG7IMLOBfOu\nDe9JgIhimlE1D4WM43bhfikJ04wJCmWLjzEttCNBPcKVCMEsgtsaJA4d/Ds3\npLXAOGRHWRoYfL6H1+dEwuvKVfSQPJwE/AIn3xTx50bBAwmpBUp1+EYBfk3s\nNBVr7g6RkX2J9Pk2wPfdKzqTRA/7QGWxPn/QpW9gKyFVB+oFmp8MEDHu6iAK\nDLn0\r\n=vnog\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"d3170e3936d96d26a6ca17df46c1febcfc33078f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.f3693ac4c.0_1595457164362_0.22834742394018903","host":"s3://npm-registry-packages"}},"8.0.0-canary.12a109680.0":{"name":"@material/density","version":"8.0.0-canary.12a109680.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.12a109680.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2421bd8d14e54ce7a0e7dc3fa29f79c85b7d96a2","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.12a109680.0.tgz","fileCount":9,"integrity":"sha512-cZBdd86/U2wimMUhz+4TizjuPGtfYAO3Zt6EZb719K32wWlDJcmIj9LgvhBPlldQ4xuYd4bIEkVHm9u+qxTTPQ==","signatures":[{"sig":"MEUCIQCZRotnpJINkgtlOy+AmgyqGvQUEpAZPIf4OzZOFfaVWAIgYOdFg+GB9kkqkfr2i3MtJ21uuufFbKdChvh5fi3Cyhc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12499,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGMWQCRA9TVsSAnZWagAA++IP/3Dhub+M8bkFf84exHNM\ng+quzI2668S9JQoVe9aix8tqwpk92JpJwPVibOtuU716pdVtPlIsET9Otbrv\na9yNekOSWRfAluni3ZgIZYgGEmgw75/8W/CTxsnImZTSgKU2lQ6He3T1uaJa\nITlvbF8mDKG9pOCIh54P5AS29RESQj3SoGELf9gT4AvqnUFHNLRwDUYocDkU\nbOQRbJB3xiczMHXKKu7ZARfy3S93CKDjkTbyNREWm0dhuQSPCOjqcSoxCikP\n1sMkHmNJGTnox0oFRrzlhyRAFxbr5IAL1kdkav2/64qOODVWnvnM/yfL3A4v\nnx7yz33j4UQilqAY0As0u4r05kg+qNLJkn54bswXIJMd4OneSZbijvqyko09\n/EMdqfxpH/CINMWTrceIzd289kReKND0BiFEUJnK3KnqLexTJoYSUHTc9tuO\nxyZXcEEwHFZeIitEeSuEbey3Hqhb6aVBCeAu8HTxvmQDELS4Sjl8OrxsVr0r\ngy+JEtLhmkcAxk6CP9jgKIQKgH1CEIAjKHoRqJrX4lqSMAdEuKVJ48rPyMLS\nnIvvdjTF0mkUTEb/AEXBJI0Kb6lIlL5XAodLzhXpkpxUipyeCudyytPQndC5\nKx9d+beaXkJtXXcbymrrJtJncVQUumhf2Wbg33VX5EkuhUt2hYfC1w4E1B+b\n/ndm\r\n=tIHi\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"a403e743d7da095028c3ba6d0a66ef2f7812aa8e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.12a109680.0_1595458959627_0.9023296927415398","host":"s3://npm-registry-packages"}},"8.0.0-canary.bbd06696e.0":{"name":"@material/density","version":"8.0.0-canary.bbd06696e.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.bbd06696e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"950e1637e0739aabd085fbf9374cc5b659707dbf","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.bbd06696e.0.tgz","fileCount":9,"integrity":"sha512-nOH46TNUe2SNqTeWjAytCT8gmetrIAwnMEf66E4MlEZ4yJ69xEiWlO5PwofE8x/OAnMKCF7ZKtm7jCelXjqh8w==","signatures":[{"sig":"MEUCIFWp1LroYs4OjaVpqEHelieAP54sCVL5k32fcAlX1SQ/AiEAlbwSDCWxcxJC3v6DQ2qf/8Ym2UI5Dp9fAsyKXnR5WFc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12499,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGNEkCRA9TVsSAnZWagAA7LAQAI7hFfsdeCjVNHI14kE9\njiicPjc0wCBxe5N5nuKhDJKloGzzWVhbk+7L7XcGf6Vr66dcj4BYuVV3OI+4\nRyxIlhT6RaOZsz3FhLPha+weu05Ov4cGYfJSXeBDid0YHAFKxjPRWCUfxNkX\nxeWmfpmcM8KmbFegvZSivHcarfB79xNSJwOM4sQCccuN4g9bGf9VxtnEOAkD\nTlHIzKKWGwcSsao2uPqfGoOzTvGLPBM1Q3qwUJ87utBhxDT4iDhgByrTsIPe\nJzd/WfVV0eqwZaq5RFz778VydK5n2STluquGBguAvUvvxWHJIPOISLXLAvCU\nP7LKCRaRaYxtMhfhuyzCgL3+/5XcVlfziggwJtNxtP8KCKXr2xOvh/3ay5Nc\n3UuuXPm6sSd85eJPQADFybyCMYYgyqFrHR3ay/FV97CGsTl+CUvEYRtVywsP\nZyMUfg/1g9tjcIqPjc6mKoXlkewh1QXWFuTrM0MQNEZrlyRYyxfDlWhgvdJf\noejOBxtVh7vTfEtnejojCkrGTzZ4dw6xWSOQ18cjO7lsaIoZj0U/vFuVJw8j\nQ5rWXCnvdusoVxaHC0d/6RDFE0J4z1VxnbLfBaupQG90/EBt2Mz15te29LG3\n9dhRnoTTjHrJ1Hy4pdrZEBWzmWRb/mP3rjO1wDQL2npYLMklg2fhkEifqWw1\n54hx\r\n=T3IS\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"1d34a386a37996e326b9ca18440ff1cda261f3aa","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.bbd06696e.0_1595461923745_0.3765716248332547","host":"s3://npm-registry-packages"}},"8.0.0-canary.4951e7651.0":{"name":"@material/density","version":"8.0.0-canary.4951e7651.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.4951e7651.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b9337c8e00de9762a9ad4501e3bb14667053f171","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.4951e7651.0.tgz","fileCount":9,"integrity":"sha512-RY6y9GPCfMFW9vUmo9pz6y0lmt/zDSaUcdxStXYl63m3W72WrSjOsKUzpBuCsd8jVPR8wjGd5BDfai29j1Y9tw==","signatures":[{"sig":"MEYCIQD23lRJvbVCU16aEM3N25oR/XRwuNEdAfBCEpcofihswgIhAIMygJ2m9qe0JVkrVmoECIMH+IoMO/RirfmBwyZyEu3Z","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12499,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGOx1CRA9TVsSAnZWagAA7BEP/3atvSO86+xdVHUcVu1M\ncYpIOUcASYCTVITnAAMLFe51LDvz4c2U8uPzxBIVMlO4YVfNxlkXq7aJ4kLL\nxRZrnofSbuw2bj1mGg2N/w27WLbUmlgJ5YvD6DM/W1zNnkskOX3cm89G3bqZ\nQre35oomb5o+t9KvtLt1impp9DEc/bmv3GVhIY30TyUJdgihTJTai7Mi00oA\nAn/8GaQh1K/+Lu4IyfIU1uHz2HrrP9TbLz1rjcJUwQm+tITotORNkzn0uCFB\n210UKDybRmL5KHrfojGw97tMgdwnnZhMpbwwaL1xGbhkXhu57G0hPM8muc/w\nSoO4NKeNiPwDAENogCaIZOjfkMXueXQB9tFR7Pefq9i37YozJywNSU4lgD7m\nuVFGJwpiM1uSs85YzgVu30rh+LNl7kEn4m8y6V4x3iyb+PbJAR7peLn03u91\n+frEko6VZXZk7+PUbwLRVah/83zle3gf/5Pz5DPEQzmA7yo2dJIxU0/bk+x3\n/6GhC34hDnPvFqM+wnIjmjAz9V9jY+HItZi7NA61Am1nquoNcO0U14H9Oxbe\nLqlfahFLWMqWf8KX6gjKlRgiw98aLoucC88kLMhtx/LXtg+qCJinAWbwRcuq\nK7pIRgF8xKebStk5eStrnpz5JSm8t2QcuoaUPdjpNzwNH9bZ2vPDtzTgoBJ0\nrprr\r\n=wyqP\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"32ca9cc0ab948e59f91965e96adf325a142b8336","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.4951e7651.0_1595468916897_0.7449596759734816","host":"s3://npm-registry-packages"}},"8.0.0-canary.75deebbef.0":{"name":"@material/density","version":"8.0.0-canary.75deebbef.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.75deebbef.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"91bbc839ce45c95c87f0ae878747b70a66059017","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.75deebbef.0.tgz","fileCount":9,"integrity":"sha512-tmkkkJXSQlZRP8UEewzbDBn+hkLEM91HcWNuDk9hITt2ogYXwuX7+FweRR/lF38CI2w71uLZPnZ/aiFL9o5GOg==","signatures":[{"sig":"MEUCIG1zIqY0G1qdLcvuHTLv6hnD2m20llmZb7Zc+46OFw1mAiEA5/gusOcksspG37yXOnXUOD1b3qs6u460WJPOVEWoJMI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12499,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGcyaCRA9TVsSAnZWagAAuucP/icpuiSl2s5ML7zH443U\nVqVtMdilTNovJraSPKlb/jITErNZrBUe6Z7Zn8ixkCjdyBaj3Bcbj+1c8FSl\neJvstHjM/ykwPTsGH2sHxE8/trBCmGU6YcvrSOgpBmoIhnXxtD8y5iCzR9wY\nfRoNqqK8T38Mp/9pw2kIPYyRAKOGkeBxX3keiDUwnOMenj/TyTdOizN4baPj\nERQuLGM05Bs9YJvHaRLJHcvGNsFrIHKqhsvves4fDdlRqdpPJepfiGSAEm63\nylRokmS/RpgT1z6JS7Z4kgoa7bSXiFG/b4NWdSm70J0zo3CNFciPP2sV6I1a\nb8W0PABQh0Noyz0Zd/YnIPAwcC9h65XfB+wDLYF8Kv2cbuwrMnRGy+isIrCM\nvtpiJBgEUKmTq2AbAy9Z4qNSNtBpAgUpdGsFfTB8+zVC8CTrY6T4DM73/Jyl\n/vZDlhpIQK2L1DugHDvTHM9+fwsDG0qBGT62aCLRaOZ0HKjE8gwQEvZNOwYu\n35Tr7Locs2hRt+e6xhlJkx21T6zGQhxYQTgiSYB563hCRNEp9+HqjudxxIr1\niTqKxLlVsvXYyLenRjk//Y/6raGB5C4zTU8IJBVyieKvF5RT/rpZ3tUeMMuy\nkhM7SgqLUvhdPPppWrB5uAhBPmvsZ1RfbZTn5ftmUMPjwu7bF+ko7+Wxgolw\nM3/V\r\n=qP2u\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"3df5ec3c8a254202fe3ba9017528cce3d5d906ed","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.75deebbef.0_1595526297753_0.30876827286841246","host":"s3://npm-registry-packages"}},"8.0.0-canary.95aff33ee.0":{"name":"@material/density","version":"8.0.0-canary.95aff33ee.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.95aff33ee.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"58030c99ca7ce2d36a8d88921b734c2dfdf63999","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.95aff33ee.0.tgz","fileCount":9,"integrity":"sha512-lTYLelKwl6BNiqybJeNV+yRiwe240zt5U6iaDSSa/Y4DOfOyomfPSYDfi9s/9E/A8WjwT9v3VKXOUAvGvpdF8A==","signatures":[{"sig":"MEUCIQDyBWUKnYuQUVoUM92cWtUb6ser+cVcf+x2VIUWUDE8gwIgI0EEX0f2KAlS4/ZqYaWDxGfkZwquOTse7+0lEuaReZ8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12499,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGdsICRA9TVsSAnZWagAA8ZgP/0/+Zmef8qk6ArcKnr4I\n+h7YbqiUWPWTK/JH+nyNukd4S00143XNj4ZWR2dQlZcpsTdEeXyD/q0b3kuY\nk8WSu5RYyO5+recwaiWPRXJUUreNUeAfMkwsZFRltkZqTJa2fqIznGblOHh/\nLtZNMGyTkZI7WihqUrUf8SKSqcDNs+2mvS6N0UlALiWlgHc1ZKbX5N70mVAp\npO+fAbWqPVQ1/Ihm4PpEoDA3rl78bZ5JPFUM/EbKxCTEllYMECxHt9trVy5i\nm4sh4DSA+0A9tdwapDBkNxyTdROCfJ15XXV1t4GZzKCaHb5MrvqrO5LulByU\nAm+h16DxMl75gBdeA3OM+CwnBMJwxY2hxfnom7oXlbVrzNuMkVkzbDoTfRiT\nUj6LJCHDRCZL5nr4IMYC1EUZeCOtfcFf9O5SIp/QfnySw/qY4Be4pDvEXLsy\nB1YXzWPXhBeFB0/+dpSFejPU91jr14mYa5/OVW0JrWFMVo7eM71vYMf52hcq\njEDYUbQJKqD2iv9AxiGijZ2yMcu193Ppu2tKygvDj/R9y0eXw5seBKpxWeE5\nCMlQKoOd8cZULdSqyAzqyDcjncP7ONeaaOf5Gx7uIVKh7fR/QphqGq5bPC2u\nb4EJU6e2Pk9VSgikthqyd/VveQLp7WiFuhbfgdTyjlC0OxnxuacC3KVAAVnD\neMRH\r\n=W3y5\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"0343ebd62969f5d4315e249ad81f2837fdbaa096","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.95aff33ee.0_1595529992333_0.5623775098428405","host":"s3://npm-registry-packages"}},"8.0.0-canary.9d9f47473.0":{"name":"@material/density","version":"8.0.0-canary.9d9f47473.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.9d9f47473.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"44e855f22698b97ad0afcd2067291423ca7b45d1","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.9d9f47473.0.tgz","fileCount":9,"integrity":"sha512-p+/3MDOP9pqgN319/gdOljtblQmnVKLhvjwLXwTOtiblwF8wl5dhCrqAm5MjMXMmQJEEBiR5Wuqil1Fh0ikK5A==","signatures":[{"sig":"MEYCIQDS0BOsBhjMxV83oy8YWCaR6/aN5GiF6UJtHK1Og+SNyQIhALdI8rd5AL1e63ITnBCNT8/rWUdAHnO1w8LA4P0nUZH0","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12499,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGeu8CRA9TVsSAnZWagAAGpAP/iF47mHWeAKdkvn76XoL\nn/8Kjjd3GoCquY/ALRfxhOyk1e3hZX0j2i5pa4q9aJi7irmLd46m/SriVEpw\nqI19/jRBQ7kCEb2eLDVoI3M7wBEALZDPqGqQby3Misa0R3OAz0gnhyeVqCTa\nxH0Nc5LPX/5rK/YJPcPX9TzjCQzWNxXAHJw9uVdkpaGOjAYL4UTzSY9mVuYM\nftZvmp9swUrRLG/FfwIAJIadWObvLjtYM7TgIdzjf8v0iwsRHgAv8i/E/EKc\nor6F4l2Ol8BNhP6Qk7sg2E0qXChimzmRLDkmjkfg0ue97+QKO+QyfS/fQLHg\nOgLSEi9iY9OVSfc/B3nwQP00EXRv/+kHtn8HduExfX/QGEtLjC+8/P0+G3SQ\n+sFqLN8DezS6EGhySTm44THyTXDKvBM5Ul9xLauuBBJUSb1/MKMtoQ4AHr5c\nHA0gQjP98NH0h+oahQZiY7FICrRVaHu9wWH6oWaQskLZRyc42iy8Kw3Y8w5+\n6YXHaPNXzTiRXfLf7taxS6lwY5vI2M9nqpWHM7vG2BBymVjUavsVkqD1HePP\nMgQbTqQ6P2sX6F6QjMla6MHz3QrCSAWbf9i2Kw3W7Qnpr2pWq4ke7PawRsLo\nMsZbAyAskqf39M0te7n11xVjVczQ19VLCmDnm9aCfSA2AhwegksOEqWIdKIs\ncNsK\r\n=lMxW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"b21be0611a45dd7df8e3b48a3fd0aab09d6cb236","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.9d9f47473.0_1595534267635_0.42559182923715433","host":"s3://npm-registry-packages"}},"8.0.0-canary.00dfbf6be.0":{"name":"@material/density","version":"8.0.0-canary.00dfbf6be.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.00dfbf6be.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0a5c61040413d238709f88f6cea00f43ce2d15fc","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.00dfbf6be.0.tgz","fileCount":9,"integrity":"sha512-Qeiuv5uIi3TY9LXiO9GggjCpCiE0MIv/K2bab2ze0hgkonBGFLllTzGolVTDigFBydgrlD3Vhg2xB7tng3CL7w==","signatures":[{"sig":"MEYCIQCgsYWzt6sXsVBfr61IpUU3vXZ2le8dICNHNN+IT6320gIhAJie2VieCeVyQyUl1IhoAtD6r82iZjtF0J9q8Sed+rY8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12499,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGfoACRA9TVsSAnZWagAAY/MP+QFdU2qsncJE67NkW7hG\njPQ+DeCwZw/cLk5NWFfNrTzYRSOO7Na/Ql/LCVgwFCtQWt9LpMGaYUowJ8gC\no6er7KiWaEBhHQTN6hIREsoj7U4T/uS4Hbf+OuKwTw0XQ3+XXF9W1IHWFqr5\nnORX982mWyoDQs1JWrxqnhHvnCAnDOnPhnSvVCKNi/d1eu5JQ0JCEhh+rxov\nywFM0YNHkW21zi/C9s+tJLj2FfUiu0SD+GG0Np80sOkywdYF4Ub9Ls+Qd8rl\nJmMwsttYnwqjmuOobrvCFdstKz+U7o51uzyQSDoWNr1E9QlZFjjaFEEvJPK8\n0ueUhD0ddB+Fq2uqbgRVLQl6gOnG9g+vl2H5FDBrekFsplPi5XVtQmlh5iB2\nmzUMS9JrFSUk3vS4ctF8iaQoa36GOg9huEFg0sddVyB0sxp0tLHHwujdJpHC\nCCrT+bcl34yS6SP2HEMFvsU7Mqu3A+D+oNUUQtLgsIcmAzT0qemccb4jSBf6\niObdkaZDaS+wLVjcmEzpB4xmoosTetypr6LN25u3/HM1KuUdjZNitqOfjYbl\narQ5P0Bl9iWUWsl9TAOA71wYnesOUPB3+xOcKNftCqwS/n3xO29Mkwa0SrNN\nWml5cWk3QTwO4BRTaRoxPPfJI6YX4SS98FGLsVBQep3bxL2A4Ds5GJ8UdcW6\nfn4Z\r\n=xjzI\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"e4a97455c736fab77028e52beabb53323eb60ed3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.00dfbf6be.0_1595537920317_0.1145723800965639","host":"s3://npm-registry-packages"}},"8.0.0-canary.b87e522d2.0":{"name":"@material/density","version":"8.0.0-canary.b87e522d2.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.b87e522d2.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d7c082a1a26fe67063ead4483d917357622979c2","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.b87e522d2.0.tgz","fileCount":9,"integrity":"sha512-RBCNIcr9Kex20/4YEaYMjZ7aZjXKshm9Z6fWE1mpJeqFffK1zQ8J+64BhJ90H6lJYBH2NCC6bUrdbrXnv1AYDg==","signatures":[{"sig":"MEUCIE43ibJTio/o14398Rtmp0q/LM3H0yc4S8q7UdnazEJJAiEA/LDgcKUzU1ij1tW5GcE7FhGCo9HmZ3NuN+JjlFjTWAE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12499,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGf+sCRA9TVsSAnZWagAA0XgP/A01VzDB6gkFXNHxi/sz\nBzr/9QYsqzUvblfnkV68OitigkyThzOHq7cU431wKkMTKqQrObRLSZSD1yJn\nNotHAbaxFz7FIhZD+kZHFFe/i2AlGw7oHjPHy34UsdwOVdWS9MB+T1/GWYeD\ntYMyDeYxJd0rrpWdM2/OcGo+gEuKyg14Hsl3vOn73XYE+8oD/zbFPxLjXTJD\n85/svpVnpLX9hZ+5bHgUoqxtrJn2HiL4Td20lexpO7rK/8BsW4SoL69+rVuF\nFFzae2Aazkunv6Wn9m3j9qH1jau8LVp5cNAXACzPknljKjVgZdMyW6CMVFwL\nIzbHIS92GM8rtYvIZKI76CmIbVAtpK6BWcTcZ5aN8DrXyj21t7YjoDKSYvqk\nXcYIeMt6q6jxI4btMvdHQg/bObKNrgDMOQH4XU0mzjyt8vNQ2DrX45ZLw/dL\n8lRingHmaGM1gHjnCNzTIsFv7RMjuMeGrnENCxvw00LqoRHJlaO4kbECnBQ9\nxV0R2y5TAcmsX25kI7oESOViOJ/dEhMq+9C7+dGWzSVNdCsqMrHIQBkD9CgL\nTINKwfDMOwZnys+SGovw4hC9slRlyp+kZYrj7g0arc674ji65xZYaF7SE/dX\nGI2Kh5atJxA9m2KtG2mSPixyO9KV6OSoxKG+oDaMnj+pxDRpx8vxtOz5kxA4\noXYS\r\n=E3tE\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"c6b4bba75848a4cc1d6ee29d1b67848ff11a8ba6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.b87e522d2.0_1595539372280_0.9379348066751425","host":"s3://npm-registry-packages"}},"8.0.0-canary.5b3e150e5.0":{"name":"@material/density","version":"8.0.0-canary.5b3e150e5.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.5b3e150e5.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bfff349294ec685c8fba87391e0fe2cfb16526e4","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.5b3e150e5.0.tgz","fileCount":9,"integrity":"sha512-sl/yCV67KD2CSxj1azwCPlVh7yO4c1vnmtP4dA6ifk4KhDSJso++BRGcbcHRcEPuP9w2BNgrH3qbyHgmDbTaZg==","signatures":[{"sig":"MEQCIA8srGbUd1fr0I3ayoqgmly63gItaNsxanUOI3Ohj9NsAiBlXQzEFD+q1Au2fDaNtpQuiXlh0tpK2lDMtFbTk3REng==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12499,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGjf3CRA9TVsSAnZWagAAxT0QAIn4wovPdRtlmYAVUTc3\n56Ma6fKXUgx2ITp/O6Ht0ZthGEeonlb3syJk4OB7ba3kaw04vS/df0c60ewn\nBi3gLE1vucHkGFiyJ2XRU2ECnlgcVQV9rTXgdiGKTaxYKZqAHeN9PonQ39y3\nD466myE0MoR3knaF3wu8EocOCFmHBClsU/OSgkQn/qGebuiOJiPtv3gxSdN6\nYpGl+uyotD9uedFA5vo7thc4VQDYnWNXSJSNL9Y5MSuwGR5waVvbM1218t35\nC7aR2/w7owW6E+Dge/dz4wUKqWXnvHTJ3JoBW/4v8Rub1+t9XXwCGHqWWQlp\n3yeXldbESqSC9gWfyQQmBfC0GRQBdVaLni1PfHl7ulLAi35oWSi/qv49CPtS\n2z4rrOxsaEa0hkIkD1014hJRtU8DVeWG33B177pySlkaw+ZKdGiL6NPFqMbx\n5mXnypQg9Eydyl24pBQ9u0fx0zljv8nDUWJcR2Opvuyw8pTLWYmoFzm2nE1h\nPvgk8brTsY1rLa5USUDbDVBXSvRHb723sEuokXryuOccoyejaMsw3DlywNcJ\n41MJwEyleLcaYXcdjztz5JrOGC2SW5gPYZonThTkB9Xl5/idIcI0RFtemTzo\nSe0YPQHaOBjbhPzOf1zMmce0XuCYmnnb68yFhBzLsnLZoli+0/mqe9hpJlQD\nu05Z\r\n=+xO6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"bdcd04000450742ddf94918c2953ff0bbfdfe9cc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.5b3e150e5.0_1595553782599_0.6462821481101721","host":"s3://npm-registry-packages"}},"8.0.0-canary.f0ae11786.0":{"name":"@material/density","version":"8.0.0-canary.f0ae11786.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.f0ae11786.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"359338acdadd298e402363346cb692b10d3a2c87","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.f0ae11786.0.tgz","fileCount":9,"integrity":"sha512-1jYqe8Eswla32Zl7wKw8RfWRvoLt0roKRIXQbrPWKbqXNrve10FdD3ToXxE4NKJpjeQlaucvSOATdHbNlN0Dew==","signatures":[{"sig":"MEQCICU1cmMAw1j5SwemxOqhcKQ2VaTy8zrfEf0jUx4GfiI2AiA/Mprr5EnAu3lvQEEUI8qgJn5UlepR+jr6vHPW8crRVg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12499,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGjyaCRA9TVsSAnZWagAAHUMP/RzW7lxnX9/a8das4dZf\nJlNwulTWXOiCkrBxUXLJxTw/OA+HyRUuZNVtFzEN9Pm7eHIApPdVcOhx9ESf\nqkifT8svcjA1XnXkA5kBj3I8tLNx3xTV7fdYlxS4UOsy0VDZN17s+4QKWwcr\nTpYKtFGSJpIBgtGqpF6LeulaacPUUBxuHi9vnR+I7rADUqiiSJp0st0UdXkQ\nZlMaKAMcNo5MyuDG+zK0SUg8/GHDeyQCHtPHa1O7SP91exWBNkWGsTV2UOwX\nqVDvuuk2CnES7U+rEteBQ7Hlkl7D9c+iaD5D6LQW80RrCjGCcHBqteRogRlX\nYG9rIQGOhmM9kfCZI6+wYcagUNmpKV8HbA3TfqsxryUyc/RFI4CIKPQzyUTa\nq+XVbSxxS9sV3mHDVldnIvNF3IhHwB5Jd1otClxMqqVBvU5rv0NdQha2qJaO\nuIvAGTztLzk4VEbEbTxOPCU44FkLfQ0MWJ+eA0XN/wR3g3vvQxnoRBkJPw6b\nQ8xKNBZs200Ae9AVpmrri6+F6XDXUdD93+t3nOZb44PRLTJB6qHvMs8FGUXn\nTIPluOej3FyPq7NHH3D2ITiLCfU78ik7shFkId/hA8AvFilFYxCQXJTBUBEB\nOVCwtheaNyqhGZ8pg7ER5OZvltK2Nx5M/lnl8HBPMLxXxhgOISjhZF9PW/EJ\nJfj0\r\n=3D/j\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"2f6df990a3e45b1985740da9e55bce17882e69d6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.f0ae11786.0_1595554970324_0.948069060138836","host":"s3://npm-registry-packages"}},"8.0.0-canary.fb4ee66c0.0":{"name":"@material/density","version":"8.0.0-canary.fb4ee66c0.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.fb4ee66c0.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5e48f3d7cdbd4cb8f3ced3df956d261037bcb0d3","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.fb4ee66c0.0.tgz","fileCount":9,"integrity":"sha512-J7k5nM+VPD15KzgyyZP7tktHK2qpzCCW3Y/QOHjS9UZECcQlWPIJFJal7UaLNHPZf3Cve4DS5qICH0byUOLusA==","signatures":[{"sig":"MEUCIEeUHD7AA9JtGkmb2sj+GWxGkeljrC4KPFdwgQNzoPErAiEAjOtiVp2SKLhuTRZ3P9/EY/cDisB1ct+4HLUu1wCb340=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12499,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGkL2CRA9TVsSAnZWagAAGMEP/Rv/p0G6OVWuf+ZZ0KwF\njscjYyC4xUVTxtaCuSKYQ741E6PkmgtD61/zxqfUQ8m9DagTl6FreQ1OI2q2\n0BVIX9z9gV2SBZFY/YQOwYcvKwndmZYd2MxuceXIRiUnc48Mw71sFAXm/me5\na46N4KlwJ34P1BADutO0o7Y8bC5rylmrcfvnT1uuhwfpE0Z8tCrKLYzX7MH9\n1Zx4YT+BI6UCcD69GkhX7YZa4XYwawcUdl7RgwoeSXv3ISE6i6GaKhLnwN6p\nm+E7IYpPVKNn989RPGIbFg9cmhmRp06bbHduEYAh9IRwYT+G3PCrKIvihJMQ\n1mpVdYGHgqa/CGlCHBIvfBpvjeALijbS89yNyWNSezHXD/GTnnCfoJ5Sr59g\nLkdNC+czebkPpZjCa/jvJe9w+NeIz43AjsWJAmdRFy9COKMAhU/LwuLpxjrw\nlC6lJZisiQTc78ikClMCEGsa/JOL86/8JjNelybEqPZ/lvjnLKjLBgo9o4Zp\nDXDjiSHZJojR65GlI0Wdv6r+2HasyCTakto3dTjhT762vBXl37asXT/FaplL\nXyN3A0leWUhfCv+BDqDx7MoEbCi501vV9ZCs2uau9GbPBeOSC64hFCULPucb\nwtElqiSKIpH+uwOKuznbheAGsDFiiNZ2dv0IwNqnaYpJrAdb3ctlbEZt1bK+\nKmLn\r\n=4/j9\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"38a9d8f8bf46aca600cb4ba84272480ece6c67bb","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.fb4ee66c0.0_1595556597565_0.5972512564612487","host":"s3://npm-registry-packages"}},"8.0.0-canary.5511e0aeb.0":{"name":"@material/density","version":"8.0.0-canary.5511e0aeb.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.5511e0aeb.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"21507d22f7909d196eb1e76bfba5989e500ac926","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.5511e0aeb.0.tgz","fileCount":9,"integrity":"sha512-DgJ+bneZNLpEYYiXgqVAVw+ylKVzFkunAlEWmhPRs//A2CrlZYnlW95hZoWFCgDJgs5PGCy6zsbkcq+Q2X2tOg==","signatures":[{"sig":"MEQCIHZRzxZbJGxNHieb/f67gPRvOGKAgZL8tgt4+zIKMFuxAiB9rsIn5keOXOEvPsUuzq4ervD+yuCXuCRh/afGdhdgOQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12499,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGxKkCRA9TVsSAnZWagAAXDMP/2UFP72w+DCHMd0yHNH1\nslIfIkwg0jb+HebsFfAebX0W6Qruf++A0RyjCEb4zIQWEHTe2Dcd+C0Q3Dzh\n3yubUuiKav+Ojp2nNyxBLN/ZXC+fG1sbJFDJZejZkCjnFseQ15jbgOV0BKfb\nN1dsMKmNdB38UK2e67kAv7FosQcPfpqDetRSPFhaLXytJbD5s9RcaugXQNZ4\nYq32r3ensKZW8vtuwMZy7wqgNRLzmhVOQnDdTloPxC6xQgLWTMpJj2FaPOiO\nwLuPJ/S535TZKmjOKCeT4yvKuRkeisocAoRu5UkBbLj5ZQb8VIh7TIqE3LiJ\nevNga+Kj4ddtPtSDL2JeIbiiOicDH0fEnAlCDCAnroUH899/Wqvne3rbSM9K\nZ1LEkpN2Mrs6f3/fCRZDCIkaPtzqn7u3KgWVCN7fq8o19IoGeLFYz+AyPfVd\ndqgzdflX2Pp0s9MTreclaAPW2b3ORBG95eu7adIQcbYmJmHy1qa8L+W3VPKB\nGSeK9aRL6kHiRbMIH5ttMr4NrgI/73efJXvVM8aA6Gopm3zyRSXCA9SxrUyI\nJW4BCIhMahvn91RoCcLAjZ8lzYMXH5wr/Zey+mDNOvjN9atOrQDopHmx+QQM\nUkxgjqteFh9suyxEl2RiuUsKCffT/jUNgyVUV7hdyFuDhK6HdMgi081hcytG\nNei4\r\n=Pm5T\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"dc830dbf81ef9cb796c66b2d35b70355ca46a37e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.5511e0aeb.0_1595609763901_0.2134697388044955","host":"s3://npm-registry-packages"}},"8.0.0-canary.8388a9bf6.0":{"name":"@material/density","version":"8.0.0-canary.8388a9bf6.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.8388a9bf6.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c313bca611b5b83d69851a97436c269f168a30bf","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.8388a9bf6.0.tgz","fileCount":9,"integrity":"sha512-3+A1gqptRufwBlw+QwbtG0qt8DOkjmRPVYjqx6SvQcV1wED5Nq6JtMq42e0/1CDgugmNGgB18ru6YcJTqmCodg==","signatures":[{"sig":"MEUCICOGdDBZPPPk07Mmm9jlwpLBuQ9l4r4sOPJzFooD1IXTAiEAweyS6MSLRy193yJRDi2j8VICHuaGMJNTUmW9QSBCQAI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12499,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfG0CaCRA9TVsSAnZWagAAYYoP/0gJPPk4Me9Cs8DfLEzO\nbxP7TfcDdvlrhNViLWntCj06bYwL7Bh+ABWX2uXLbKGg+aKJg15DU6uvHyK0\ne4d6Vi1rjQMWWeemNmxIOaixpp5f7XsBCRMRLdKXKdpW0BJDIiWaMBXMxkgK\neuXP0M9tO9Yxc1T8OV9IDqVqr2QKHpWSq49lW1ybbxRcp2HIY1k/1zvVGRI+\nXlwGNcvmQlX1SMeLQ0VigRHHRJUEp7Al/1GGcLgGwGkCu1pr15/GYXpAwMD+\n5VUxY+A6S1F8FMzI3Etx2qJFH7OmsqkM/vZdkYJR+yKqJGEdg7pHZdWkJdsP\nmVqnLa1VpyW843NkBQEXQh8AerqY9fiAO+8qtMwKfOanPd7743F+KfmJnrHR\ncZh++45V1kEn1gnqlR4k8mOXMW9gDQUPUaGSfUmaBWoPRMD8gdvGOGAGxyBY\ncw2ABW1WEMxKbaoDXo5VqhEYTQJZZt+P0pVFq2PXMxm/juPxRHFfh7rcXhiQ\ngSYubW3UbNsEJhTamZxKyUshyjuxEdJtxOkAr8jVHTh6TrxFSqR4mq3nwNSD\nyQYrldBvyv872j8vqoU0IwRYRNR8XLc2z/dwptjxWg/4/isxzwqFOnh0WEHY\ni1dEpBebsCcxrEsS8uPmyvATcKUKWFyuKHf1XfZpvy4dGGCrxVBCS9+Ag5+S\nzQ+N\r\n=isQQ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"f2188ad8c46b8f947761bceed0fcdfd08019e97f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.8388a9bf6.0_1595621530077_0.965193247979752","host":"s3://npm-registry-packages"}},"8.0.0-canary.ac405eae1.0":{"name":"@material/density","version":"8.0.0-canary.ac405eae1.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.ac405eae1.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4960a767d6273688f013639de800549abe58a0fc","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.ac405eae1.0.tgz","fileCount":9,"integrity":"sha512-rJ1E63uhI/OyW1Gg2SkjQHDI2DJTYlaoKefwE7FtTI0gdLjkjRaDNsksInK1JnvbAHUrvONlfAVb62G6B+qEDw==","signatures":[{"sig":"MEQCIGeLrTiVFpkFNT92jy995WKu1A3DO2Uq6uzHuRvKI08tAiAiRPN/W2eupAcw0cveJ8Gfm12ZJqgw3OvLMS5tb7h7qA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12499,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHu05CRA9TVsSAnZWagAAXTUQAI2OctQsWXCgA8Knfxvg\njJ7PcoA8j7/4sxrcwqGOT/y1cxRKEQ+dfBMWcAu7eP8KVJwdbA2a4DFnL1Zk\nchNAM2JKqD9u5EQ3WBgQoQrEiORr0p+GAeUbQ2ajnZx2zwR1WTB2NAM27sUP\nasl3O5XSB7ehish/qQrJBJMaqaH4puHM4MNwcya1W3/hYASg9UcT71wvoIEI\ncBlDp9Kc5EljuDP+uTiu9YtIW0m+B7O2dc4tXeZyRlKrHDzRNtkExAG72tOl\ngeiGojIhAAjQin3eYlWtEGV5/71ObxxWzheqqvQ0+WmKcZZEoFhBGg27R2se\nIJ7KThLWdgFlp+z2KdIzIh+oAOBkOlEKpyEYri8cVtDc0ItV5L6YxD12o8x1\nc4o5MWWeSUkHCOY9FcYPSH4qITNt5iL04+M36OI2jaFUhKj6PPWZG/4GOmNT\nHPUGUKB2uLfSa8p4H3Yicg4pghQU7Z1XYKOWNtNmzLSEozhNvYAT0CU52q9c\ntGvQkv0KhxlB7UBxVEai0qin4nls1cOKZbVjgsPAmQUrkxGIUIYmQmyqirnR\nHAVOH6TXYSH8V/i/YFVbPnWW4z5mSvWXCJhIDVRfu++69NzsJd941EXiPgX7\nYmPx3eOKtjlZyOn8ZYvzUlBrDLQqhLgKI0wwBxHWFmc8/Ktr2L53vFRPtWmY\nPAaa\r\n=aLIX\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"c4f229736a36f17b97137adbdd4b59901eeac852","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.ac405eae1.0_1595862329343_0.24404041728890102","host":"s3://npm-registry-packages"}},"8.0.0-canary.75553837c.0":{"name":"@material/density","version":"8.0.0-canary.75553837c.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.75553837c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a68013645710eba653430de1bfe3e08fdecba526","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.75553837c.0.tgz","fileCount":9,"integrity":"sha512-O7FKmhe/QaXoaj1SPh/gJhFphgZT7SP171moXCFwRRgg0fjqIdh/+D8V8SVK4hodl95qa4m/6ZB6cM89068+eA==","signatures":[{"sig":"MEYCIQCxch3XPXCieyRqOSXDAyiIqxjaqWpmdQDVq64A4EqxwQIhAK2y+9u1nKTwoZEzmWPWwpnQRK6wjyY9IoXqDOROMk8B","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12499,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHu6hCRA9TVsSAnZWagAA6OoP/A+77CM6GsXQDNzAPh7e\nXrHiNNpuy/BdVXBSOG8c4/PP1JBa4SXUZr8kqhrJEnnNvi4/t/TKhTX/eVbC\nQt/GtN3WQOBNt/AltUOckSBp29/C6VR76/uiDpl+Tt7VTBv+ms1Ny7kAtzWo\nJgRkpGrgerfzY6GrFPIfKGlnzszILdNBfLQYQBLFh9iGRSeoIaKJKQ6jEEg7\nqB8iM2I4TkcIB6Ry1kQMs8N28YsJusQzET68Wc9FtRD1E21Vp2Vm9DuP+tvD\npbo1vcOnPBN0RUBi08Fk069cWOyVS5Xx3FRaxdRvWIPfORJ3zJQfi4mtLvpm\nKSut8zDTySy02NlsP9Fl0LsTQHG/5lh8XWR5j4VS89ktafxYzYXX08Y2fZrr\nDlwahGDclptqeWhriOXxmVObcywBwifGvYN8Y3xSANDqvAMoMjw6qE37F+En\nYDGPpFYJu9jY2W2+ruSlTVOV2/DWqudLPqPHWO+KJtwNceAERk7ZD5gJqh07\nETJXDYF4SrATWtd09N2QItcczTHhteczoXrTfSYZVL+rftHo1QA9S8p7bg2w\nGooy/MT9Phw5O5FVdFu+/Zogy7VKoWvc9Uknt4wAxBH71YyTmVCi2R7MQf3u\nrwlpXv5G5jSc7ajH28hFZaLJmLVEItY0TccQX8CDUAGQii8U/nBUls/Z6pp6\nKTUs\r\n=zGhd\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"18c0e52ebb63979ca614d6df13d96e2c1cc93216","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.75553837c.0_1595862689488_0.5109303885051284","host":"s3://npm-registry-packages"}},"8.0.0-canary.b96fbfc7a.0":{"name":"@material/density","version":"8.0.0-canary.b96fbfc7a.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.b96fbfc7a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1f282ab152f70263cc02a4710346b6a4045a330c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.b96fbfc7a.0.tgz","fileCount":9,"integrity":"sha512-93RIypStTfyyfqXbC1UmsOszbpJ66RyvMEl43ePM77lVY5lJnfZOhAdNyaOt/pUEVTbv8e3t5Nm4H08HPDQsGA==","signatures":[{"sig":"MEUCIQC5OF18be00KJOTYNn0gboypJRP9LSu6vNKc/ByCDFT4AIgGciXx5WD6xmCG3LS4Tv15clkGqaqynr3yJPp8wiAnGo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12499,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHvSgCRA9TVsSAnZWagAAUZIP/1arCJKJWXPEP3kofdv/\n6Uvk1AEWV379AqUSRawlRKaLGuOOJWF/wj7mGNTC/paFcZgpMVtDuq0XQ3yH\nloTqwmN+wIBTXkBH6lY5VjaEe0eSZed+2xTjLqkbdShcNs5Hh2vTBwvv7wf9\nhMaBEowkcKjI6nlqNxMtJlz9PjgCJULXBcQzcI65/yJwhtgdHu1aUqMhZpfS\niw8D9rKV15IxTeLTeopUL4nzybATvkYT9eZiWRHPdRdcYD5WRi8n3Eyu6d0X\npD7adE3weLWi5mUHuVi1mQywG9eEtIk7HRFA5F/9xeKv0+yiNT0b4gtTHNLM\nl9zsVdPOwxHrJCHbv4BDYiDY4EHp0aDqSgxlNbA8qhrkTYWCKZnDdLeLkhza\nOZjOnxOeQwmzBSbxUYpaRUB14bSwU2FOOXWj6xKjLD3j2vRvtlYdJ2vsXWSN\nLv/Ir/DNR+kExFvzdAA/zfZpUky5uTp0oC4MyDHjtCIeykgwbtxdOFuLWaaC\nELyPYNORV0NKM3xDyFXCslcfK/DVSWf9kXXWv5LODdNLTFxPJcoD49zvx9+8\ncvO4kqnsQE7ttKh5CLxJ5LCpRN+yIkEIDQ8HSwReJBhIdrGIR6pNbWUEiTx2\ngg0Ux79F1U7NyLKo2o8pNAza4EVoZ6bTZbxWcldc3ii7YUdD3ouXlaYZmxLd\nK5o+\r\n=+gY/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"0e9c13ddacae3f3bc09bd4f168d276110fb5677e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.b96fbfc7a.0_1595864223907_0.17995229045427985","host":"s3://npm-registry-packages"}},"8.0.0-canary.61f1a8d85.0":{"name":"@material/density","version":"8.0.0-canary.61f1a8d85.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.61f1a8d85.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"48ebcfd416b1cfd19a8672d21c6271603302f5fc","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.61f1a8d85.0.tgz","fileCount":9,"integrity":"sha512-1rXuD8fNWBHYuHMPhHwjBhOMTzZzeLKU55KZDQLs+ydRDjWcBZcbqYoGHQAQQU4SjZbo3N6sKn2waKRL+75Xyg==","signatures":[{"sig":"MEQCIDxZeSXnulvFhgQGGmJ9xvwnDlixcJKbrj+7S7tQ4JnaAiBRbV4ligH7veA6j2ULJMll4BPV2MA+dVufSZlOTPiouA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12499,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHva+CRA9TVsSAnZWagAAvwAQAJBaaVaE+kO2Z/Wm/yft\ni1oCdT92GjGoEco30RzwYeO1kX++/h0f6R+IsKoPWh0Vjn8AYBiPIC4D5P2h\nljooo8rcFtVGGwbBvrNK7uzkeBoiNZsvWrzA8SSmI5z0oImgfze1JP/QIk3z\n3424ityg+6m3r0TqrnOXqvv7Ktx4mEGNNWNSc33uZYmnYzu2p6SnbPGAVaH1\nTapzED/eNgW/y59opluXcyGjoj94k6C4IMosK3Q5GLVupy+7zPInlNmhK8Ei\nPnOuxQOhSdYcIkNcIiDLxd75a7Ld1j1tC3R2s2xQtuQAtNIkcjeEaIvRHEVy\neyOd1d9gsSBwlTpgskBv2K+rh7drw87CXbcop3g6vj1vWGpB1htSYnySSebX\nsYgN6brKjyLEjr8HOeE5nvHQdMwqtdkjhvmsy6vtNu2woE7TgqZrMS4guByk\nTpDVrlCOESDgnapxb6uymZ0PvirVrZ5PGvstogHJSVsoxTJi1VVLnVN6GddC\noqD3i194Tmv4tyuBWQa+RErDdwVUaKkcZ4Yr7c4aRA3QBSDits5x8xUnPFuh\nkTvYmW0P1Vyk5ywtS+JIl8nNERH0c43QS3J6ZmtwHkE2pQlVzZo1i4dkhDXu\nRk/fL1E8vt6YbwuX8Zbk3IfIQVZLzP9RY2/f2ZGUXGR7DCuEGWq+hF3OHVl0\nEvf2\r\n=vidC\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"71b0bdc987ed1b1b5ad827abc78149cd4efadb89","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.61f1a8d85.0_1595864765543_0.42497566808755116","host":"s3://npm-registry-packages"}},"8.0.0-canary.81dc33377.0":{"name":"@material/density","version":"8.0.0-canary.81dc33377.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.81dc33377.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3bcf3c07c5352b4fd6e8dca7af720afe8b6a5768","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.81dc33377.0.tgz","fileCount":9,"integrity":"sha512-Y9zyplcMHSGd1hL/TArXqVgcgaUVMnzcIkldNhLVZ7ASKw5Dd4qWldA5gwH9RPqU9CR2WNalIHe53wyahmh3Sw==","signatures":[{"sig":"MEUCIQCbR4aM04rhvOfXShVQC7iUWHrxTL1rGLn1ZbWJ1wxp8QIgUGh+fqSrEE6Xrc0ZhpN2m+15mcMUwLBEo4jkoZU8cN0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12499,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHvmVCRA9TVsSAnZWagAA1uQP/3At/+umS4zbexlXFLyk\nFV52EzHJjKZkIZac2OefTCWEabzdeZxt/48EzmzMb35aCIbsT/USI/7W9KoE\nSfd0OqLOYPJNxJoV6DQkl/go3zWEhgupymdV0lkw8fQb000PETkL68YbZJXW\nekSzh3LxI7b28Vafnj1i1LNOKGuThvRtqwgyJ/Pw7H+Z4aLsWubd7jmhYW1j\ngjT8swUWahEIgQ9y18/douqVAG75mkd/AuBXPPTYnWofeGqw4u11xRH2IFo/\nd7Kxapql3J45lSwsV27Tchxn3nIPnNVuCW1DN2lLYYSh7hiQ+eirJnd0YbeH\nom5gX/X2zRtOH7nr3V8542zMvunftnfp0iTdMBvNzA0wZ6wb/OXkl2yO1ZWK\n+U7mdjsHKkOmER2xK0suPOqext+nZQB+fyBnzrPqcb5MDErvxfUceCUQGKlX\neGbv7h8tEsx3ZZ3t9JMlfjwPd/NMbUdBqcy6PF+0m75yBDHTj/8PglovjZDL\nElqLge8RDcG5Ul27R2Ia9kmW+M+TInWz8tVOXqanuKyd3aS5rGNDHcgfXMtX\n5pwN1RE5J+uIkmb0t8k79artvo6xcNwoVagCC8x/7xpmS1mGiFscJqTLnWXM\nZqWMUgXSBafErG5nQ/G3S0/F82X2RRzrIV7nxOuusFJ6uegU/xqBZGVpV3MR\nIuFr\r\n=L/Zt\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"14e4858d309a20ecb69620f07c8f427bda0821ad","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.81dc33377.0_1595865493563_0.3176640553797927","host":"s3://npm-registry-packages"}},"8.0.0-canary.ffd9ede58.0":{"name":"@material/density","version":"8.0.0-canary.ffd9ede58.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.ffd9ede58.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a73feb696e4f0ec649155bb5ed119ed89a63610b","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.ffd9ede58.0.tgz","fileCount":9,"integrity":"sha512-rfuzCWlj23CVPar1g+ML4rsah5iG/sAXckRawxTA3sV7joc0yCAXhJKmGgIJHlinBP+blFzgntqXPl9Yz1zFAA==","signatures":[{"sig":"MEQCIEauYP2+Cq66MJzpfl9h74Mp8xXzXws2SlkpPn5ZcW73AiB2P9cjbfI3v6nrd2RXqZO7BKnEDC2be4ytfV/9TJxDhA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12499,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHwFdCRA9TVsSAnZWagAAc2YP/2mTZ3hqnNTv9BZguvQs\nb8L7axs6sXabKKpCTtDW3Qs1FQarZtiIXWte/40ZV/LGn8vNwHZ9yjPnllKH\n/zcMfE0BIiIPRHh0IYRfFA/X2NES4oo2d0ppbUKOi3SdY3M88mUoy7riF3C2\n/ilANBgnc1Ls2LJ3BhHbyM7tN13mTKuQMhfyorL6+YN1YeaSLe0kmkJnPoJu\nUn8gb+XXZYnpuudXYmlRJ4+4VS1A3daPAhsnPGmDjYYwObUnSE7CbOeQKdKc\nQK1EaZt3NCeuKtPGoOQxJFwsuwEzpxM2Jg5WpUhnx+Ums14+HcFd7y76oEBU\nsQV1hd9RVyElBbb66tQOHe41q5GdLAZkKHqB2NMspjzkyjiE7BtX55NumYT2\nMJe7UI+4hULDYVsTKR7ht/RD6F0mZ8xrgEkt3fv6yMs6lmMRx/GrexsirIWm\nGKaSGIMSQdlN14GgedLAt0EAC+wPg/SkEjEOs1MHUOnH1cBybiP5WzCMt38L\nT4Jh6psrUO1Gny0aojawyxkbEckHod7AtLXKmF7zICZgTiH1sxWSwA/wTJG1\nEPLK2qkElV4gTJUqGSW0JcqirIITRrq7werYOmjF3mqEJITytx7HizygI6Bw\nZYq8d/9vdkHmJ7Tg46ZRYg7d0MYWHNyP653mcdP3uEk7dYm3B6jJPa8F4R6x\naoxr\r\n=5MMO\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"8a029ef9963cd4799ffbf7dd03908a696d110f7f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.ffd9ede58.0_1595867484986_0.7791467647430164","host":"s3://npm-registry-packages"}},"8.0.0-canary.52dc55acf.0":{"name":"@material/density","version":"8.0.0-canary.52dc55acf.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.52dc55acf.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"21575abb772047efc3865a787d1bda23651c4236","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.52dc55acf.0.tgz","fileCount":9,"integrity":"sha512-/xMEO0z5rtZHIakBnKKH35CsThySs/25K9q/VdQ72MyHnD37vnta4PEZbYnixrFr67In/67W2jwErBJW9pFXLw==","signatures":[{"sig":"MEUCIQDf03FsORd8FVrZMZoSh++NhPKjG60DVmXqead8h2BlmgIgVJx+zEdhwybOTpeTytkUORCjF5QRZGPIyukNfANr7xA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12499,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHwnaCRA9TVsSAnZWagAAHvUP/AgbVg2MyB76Ud7v8UX9\nzsz5GdRu3jG5Cnv0r2ApenxCCZkl3o3No5lXvDerfvmqbfkLblcYr5L1Z5av\nJ1npjHG8vUah977zK2D1o34/+cr/OqnCeHuq9i5J8TZaUU4PcZaEz8ehG/zi\nJBFpCKyfzwccNcf+b8qpTyYvxD/y3H13JnBZJfkHSJN1pEPPPLtsnzMtRao0\n1X31U8O4RWydvY37dwTKH7oZ5aDbFCkB68hwpekRNwiCVY037A1JzQFDD559\nsluxfHZTQ2aNEca3JpBbOr0PA0pFCwn6c8Gw35xhMeF81Fag3Wpzzq306sIx\nxo4z0dGHRfqri3e4ID2mROisJWGXp+AlJQ7x/KGmPmIuiZj9f01ZQIJhXN0V\nLqc28nO7xz2RIsK/94aFZc/ctNmAni7yDw6H/FNu7BkNxunWMfECNNd+8YQm\nfEe0quy6TsQAJJ+s0ykI3NwR8P2a/koFAFyP92cWNfuz04TgW9yP/m2308lt\n6ax1CU/GQNGPmgkJi3eBM/rGqm7hiXdiVG8zq3SVMWEsvV3hJD/n7f75BByP\nc2CEADVAJg9xmDP/Oz5z5FKF7rzgsf4WC9Bqrb5AEq0KtGJs11g+moIR4VIL\nnaOaSiYc/ofiCXJhGy4cjdba4pWJ56o4qzVkfDQoZr/4qJvADh0oNZS6Kgiw\nGoB2\r\n=dFY8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"b5253c9af3b0721aeb0cd096ac48b4c113801757","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.52dc55acf.0_1595869658327_0.13552445874863261","host":"s3://npm-registry-packages"}},"8.0.0-canary.d4274ff05.0":{"name":"@material/density","version":"8.0.0-canary.d4274ff05.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.d4274ff05.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9221eadd27526ae02c4389c07605778e6bf5253c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.d4274ff05.0.tgz","fileCount":9,"integrity":"sha512-BpzA9Wx+RyFs2xpYj3SmbtPXAxr1Qewx9Sl1BKeSZq6JuXPHULm0DMD6tcNzewq328mzC+4biQjdHh6DyflDCg==","signatures":[{"sig":"MEQCIH9/F64/0Dhn0tL9i0BBFd1jV/osjl62UJPExNUABJ9cAiA8fA3ntWJIYm37vtHKzkJ/cPvvySQAquwFCEWHITaGLA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12499,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHy/fCRA9TVsSAnZWagAA0TQP/06QDZyObHEngc/S9NbG\nML3nrGuYNkOlZ4ozD/u4ppnEG2iwtmOOJ7w1EtcQt0fLVlHHYc/rE8QjwkdG\n5lqE/GYRpH663ME/jjnZ+wjEZulu79lOH9a/LRKJTUIKAJ0B8PLJvXU6Vaa6\nWYo4Se8tLe/9xkpZXSThxjXayQuhOA6lfKQCbxh1Sre1CQ4d7yJm4n1BB3Cg\neTMaIRnw2kqcb1KeIWoz2QRveZGBwuPurixW4PGhhXMZDpWF6i1BTCNicV2H\n0dsYZCvFjNURJwFt+wx0mMWLhvuniWVbeXF7XgZn/WRBe2kVTDUfDUVwKmUa\nOsfFtWkUZ5UXao5Tyj62vmxMN74DHp94UyGOxoV0bBlqBJerLslWy60+Lz69\ndmOoQ1RZOlgyWhSH1ZpY/Q7HgXMGm+6JRSMagoo5g9HkjZ+qM1dj1UPaNLqs\nX6Y1+orcSS4dg8E/PB+KshO1VfXtsfXHu1yPotFIg7e2Zwt37ZnEjAwIDidR\n+17DYVIFVgu0vR/oyjphLgadMYGyDQb9AMwPK2nIX3cXPLQItuCTOj1dXapW\n3J5ntQwXAP/KzWSG7Amy4SqpGlARN2P65C9ZJGH6cci+nYS8Er2vKOcNN0WN\nJD3IU7S9CIkT7JhSyklfFuw9NxIwJYI+JD/Hq91K3D8GyQZYDk3xh4MOJC72\nchcm\r\n=RXOE\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"b4607e708cfd7069d540b1fd6042775c4599855e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.d4274ff05.0_1595879390763_0.31895327437183774","host":"s3://npm-registry-packages"}},"8.0.0-canary.b82d0696d.0":{"name":"@material/density","version":"8.0.0-canary.b82d0696d.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.b82d0696d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"75d824c7296479a4174461f5ce276539c45d2794","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.b82d0696d.0.tgz","fileCount":9,"integrity":"sha512-RAvvTFNelaO6bk85nGNR9BZkfLrCcbpA2hmPmeU2B+YCP5DGEQdqTOD6O7SvvBCmqs39+AvauaoVbObTGJnG2Q==","signatures":[{"sig":"MEYCIQCHm2u1LjnJy5dAdp75WycW8Upbd8sCDRFTiOo3I/kpNAIhAMl8rQIYfSmO8+fmb+BN7fYFqDM8QueS8qcmdE08O6YJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12499,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHzGUCRA9TVsSAnZWagAAM+QP/jt6Yr5lCUrxgOjsx6zc\ngsiwNUe4lAefDKU8XNXhJRpT2S9oTEPvIA3qCnL7VCEMVtol1Zmf7+avxXuy\nqvTBJtPajXuihNQ7AyXrMGbUsAqW+GRIInE8sADvUkxdRWyiTdU20r5/9/Ar\nKm0N3nFmFOe+38dKpiqtTGL+f0mKl+t+EhZToas2R/rKdTQpBP0d0u8x7XdA\n7Cm8hSQLRUj0oOh4+d7mtq4hdVnMMkdtzhUJZsYIoEs0mxXGQWWGAS3MIhdu\nuzBV27HcghopF1nbUrrUSyCmMpe3CWrXbLlWErvsxVZyhsLtYintOi3CKYiE\npeOAmE/XVzyJ8s8T+4a2u1LbPhG/xYqAc72UGk7bCMS9+63acwGdLCztUcGx\n6fBVSFjhSoIJkmE/iQpZY7emKIuV8/b4eQxWq2ClpWHc5FQLYkp07KclpFe4\nipIuCD2BDxDIoiSdc+bBULEdV3qD1khx2gKr7U/AG9GqDNIZzcD29KQyTfnC\nEacd1g029tF6qBRs33ZlsSjAJjDejjGRWhDH5eO8mbXSgsNX7jiNGD1AuhqZ\nTNiZPkHEH1FLamXrsaSp1T1Z0Lcq93zekQFxu0mKnOk6zP+0zwM4iifHS0H4\n0NdBDAGUhf7mNvWkQFkhuoM6enKyLU4sK+prU8nodhflfwnTt+3cp6xRzZXE\nT2Yw\r\n=ZIZG\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"914e71226c9aee0625b5bd1fff56b887e3c924d7","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.b82d0696d.0_1595879828344_0.8973056928776684","host":"s3://npm-registry-packages"}},"8.0.0-canary.c2852000d.0":{"name":"@material/density","version":"8.0.0-canary.c2852000d.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.c2852000d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"df6c0472c3aee7a88f0d4507bc981b286f44593e","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.c2852000d.0.tgz","fileCount":9,"integrity":"sha512-oZhe00fEhtbQutJYdB3q9ccxyKpXPoLBZIadENTUdWM58FJK76fiPcTjf/3FePBFxOfUTdPG4auE4RyBIJjs5Q==","signatures":[{"sig":"MEQCIGegLs/4Ap3Furly8qvf25kDAfnoJtPK4DLZnHtcIJhKAiAiQNm7LgMo6xev48OCDSmT/6q6eldtMYGxYutfpRCiqQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12499,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHz+wCRA9TVsSAnZWagAA1uYQAKTpLuf30YHXz8dU9VvN\noHg1ebiiz7Qj6jDC6QfIO5/b/iHAB49fikyhHaVZm98rzHen0dJVWrio2xq3\njiYBQDlWsgrPDuQPsUfpwFqCmdnTb+igJRWFjIgMc5hShvD/CtD7QEJjmO4F\nkYm8AnjWY8EPgZ/bugY5CRe4MMtyRmrTg2MOhJ1W7+rIHaeEWwrFhuHyzWHo\nvJ2PvXOEoYyNZOc57Qen5aZWhOV7Ni8g9X529nO4FUenyLt/HqEae65Y/D7M\nDrfGUKWSjma9XDdS+YFcYfyPdoOq3Pdnbg/3ZH6m2ffChVpuKqtML5s1crgA\n6tCxXmsGzI24ueQqe4qeFtUkDdQwkM367XSmGnEfmm3IQSvPwXArVZY0d8H5\nbW8o4V5kIAoCdGqAPA8Gl9Yf/9aQxx0pBt1zrdGl06gV6Zx6J6/RAAbud5MI\nvwfEL/q+vn1wR0yDLWxGukQWmJK4GHnqYnIAorlEP/K29KV4dUoe+cInCH7z\nyi240/fpqjVHbFzQ5oaIrmqmyabCO9P4NTNMxltP9GssdWPuJZ+cc2R4u+i0\neYBBw0ah96JuRzunRUhlkxWny2oFZER5IVxkwiDbM4RQw/znu7PZBxuD2PPx\n8+oH9CPGiyWw1iQBF+2+vk3AUlOp2pqUDBnZmgKMO8vmiYQ5h9HYJ4E0U2Vd\nYbNL\r\n=EEEw\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"53080ff99f83ab326fefffad16cd09e449e79f27","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.c2852000d.0_1595883440471_0.41812274159247664","host":"s3://npm-registry-packages"}},"8.0.0-canary.f86f83f54.0":{"name":"@material/density","version":"8.0.0-canary.f86f83f54.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.f86f83f54.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"806d5efda902eb71bee4093db8ad4e5026fe430a","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.f86f83f54.0.tgz","fileCount":9,"integrity":"sha512-Mousf8uJk2ET1XRJnJg+qUdk/3Gy0WDQq5wdiNRKjMF1fSz+az6BSbrYZM+v3cnWbsdkdyzAMw+zjW9iKNhqCg==","signatures":[{"sig":"MEUCIC/lclstuuVgaGDccZQpGADhD8J5gXJtUruAByCFIXUAAiEAxxmDCradNwXa97evH5GT/BOXe572pKkl94CKMxjpb2E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12499,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfH0zLCRA9TVsSAnZWagAAE/sP/RiSA99Z2FAnFT5Wk09E\ngZxvw6c2CpZr2XzCl+LV3jnbhQXLc9vmXCHV98vLmC8OTPKQ9HGGnntXDwUq\nM3ZrenzHkZrGQBNIXGiztRGcGzMcqRP3KDdJrueIbE1+PSElsYTj+77T0BJL\nONZUz6TW8q/unot5Hzc44CHU5tYseeh/OWloPdhRa/qXafCAUwEvvmB2PdPI\njL2WE2n23LoKxat1/8T1abgm4CFqf+CC631gnkXWPiuaJotyRAXNZVskIrVq\nwD+pk9C4A7QPVJYyWh/giKYpmNQlSJfvTsNSNxemYctko9aSCpqXOV01qeUS\nkv/GVvxiyn5cUpmyi2Ly9mau2fGqDJJpGNqZu/HIKJiet7bjDE1V9WCNd8gL\nJlzLgqpBpi2/Bn+VB8FFClqrvN4gZgEGn6EWa7J2LCgY24N4rvtKkSCCDgGG\nUuXimkA6y2J1DyrETjAb3ec6kTSs1oguBSGhRQgnxYIGXSvEcXTalnGD3v+e\nB7TmAD05AMqOJ8nY0+o8CAnJBNiN1x36RKiDqjNnPjRPJQvOWhijdJU+4kZa\nLLuntBmRLy+9qxWde2Rtmu7wTXUl/JyZbwF3n3FXo4WFwW5HkLTKIu8z3BFv\n2XjcaFJEkc1l37gqt8NIlx2yEhyycKS9aLmpoP1WDjA5gQQi4rrqEfYCFyUY\n7g88\r\n=iQWi\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"3c8abc334934dd33ace7aec681868717a4e26d0b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.f86f83f54.0_1595886794965_0.5707768156868538","host":"s3://npm-registry-packages"}},"8.0.0-canary.41eb1684c.0":{"name":"@material/density","version":"8.0.0-canary.41eb1684c.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.41eb1684c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1925b46283a1fe3d209b74d782497fcf608cb5d5","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.41eb1684c.0.tgz","fileCount":9,"integrity":"sha512-Ov/XNvcCD5MqUDGNhsopqgKnzDk0dMXaT0qDQdhdlfV/aYcWmT8w2D/qhThrXRP36fL4BFmHP+HuxKoEPMMB9A==","signatures":[{"sig":"MEQCIC8OsPW0nxOXNHuJNk3g/2YEpXWdqSvkTyG2utHPBcJfAiBziBXSJZl36fuHxcKtXeIXNU1kWqnPyeoebOU7fmg/fw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12499,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIGUkCRA9TVsSAnZWagAAaWYP+gLO/8BFWBipg57s4a0S\nSzREP0azOozyIYtlTx/y+yObQ+ggMjEU8lmv3oiwmUJmY58rERnQpSBHM9Iq\naB9niY9ELsd01GHbcg2kMJWs+JhGPTPP+FlDbSYNM5HqLW84IB1NoQpyBAaq\nUI+9A2WjUM9gPM6qUVak5Bf4r/O8tlqz+A3WJ5MJWpfJMaPUWajws8MJfzEJ\nLKrZMrhWOWupZXuT91Xjdynwf3N7x7kREddzB6UtY47bXmqbW4iHWlp13B3/\n7n6TS/qyEhabtN6TsSxulxC7ALS4le6J+47L3nGiG1P8eZUO0TSiOyHMSRie\n+cMOeyfiiaMge7vtfoH8lSXjAm1KW3D3To7YFAe5Fpc/m+pFFSTn5xnHLKJF\nxCMgUj3BUeMKgiafCDtz59t0wysDuIKQtLcZOWWXZ142n+CzLiY54HsnVfIv\nuonWIzUZU/uGJMWjl3kEDaU6U95Z+52zQ7OiSOfZkpy1MVUS8VhBMMRHhYhi\ncNdIghlratPOi1fb3lpNMpejvoA+8hMoYRS96gQDj29Tjew1Fwn9SbZ9rDi+\nJAsF31c6Wb8EoKlqo4HMMTUYVRkSCHmqB04Ua62TvSR1rFSLsSGp/tMT82B2\n+NaBsVBVN2NWmXgTAFfO6pjrVFpQKp3jFqt0Qg6lNHDH63TRnthU8FFzwfbY\niHV+\r\n=aXuN\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"ca556c545f0bd908ba57eb0e24e99d142cc05b1b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.41eb1684c.0_1595958564490_0.8735338337063161","host":"s3://npm-registry-packages"}},"8.0.0-canary.9e2f6c450.0":{"name":"@material/density","version":"8.0.0-canary.9e2f6c450.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.9e2f6c450.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f39253af0b5e9c3c794868564cbb1677cdfcabd2","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.9e2f6c450.0.tgz","fileCount":9,"integrity":"sha512-bT9DaJAwJOhvJdNOH7wHwGn4eyG7rfmXTKWw6aSSB8b52PWk6Y3s6If8OE2OA7R4r616Rvzv4o22x5fn/BKXjg==","signatures":[{"sig":"MEUCIB8jKRcBdAZd82bmqQ1hMINQ1aSZT9m1dhtjD9/KTK0xAiEAnZG2CXVFqKoXn1+lzpw/yqza73FQ7k5uPB+vZoMU42I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12499,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIKjaCRA9TVsSAnZWagAAio8QAI2TIfRln4/HM4LHnWfi\nHl+RotPYDVypBz3X/JUny7KUHR5xdNURx28mZI+0rE/bXPOEK/G/TZRaImAX\niNnxu7SXv3fgRD3ayjzS4b2JlPoQMb9ZiyWYbgZzQRN3n0EsKGtAIPxGhOEr\nUdQvy3HCA0Z3UrJe5XhlMPjIGNWdf7srK9QPiQqLFoWn3+Ods454Sp6Wq/MS\njaa3vwDYpisd+hbJ5Uh4dEZrhlYkzcAsY8yEN90K5skeF9pPC3UddSET+Gxz\n5rCes+jjld/D5epCMZ4IUHEvAqcVrEbbyUyrz8VqMa/PKoJb85lA2liLs7zr\nzveLZAOaWhFMvHRibeR4tTXU53/qOboZMjC2WyutBHypk5RzrRs1RtLM63xm\n+ItOluJxZi5sgFe2tQ5ix8Wfrl3xORsSlkEY9SOxdGkTKLMwywSp3/Bsr1r0\n4QrtUU7VDYgYFyLC29RxFYXg1JAipxN0zW8bf5AD0OJkr6ykyJLQpr7b+WQc\nFqatFnF5L9m52JRPLw//L4KEuUoI6QjQ4sFGMypth54Y9PuBWfkYG0lMQW4V\nbESyNk0CnSbnCVDJ2G3bexcHrYuMB+liSBGdipebd+olFdsqTabgn1vXN+HV\n8LNn6Kpl1BGLOzXKcYAx3ynvR/RdqLttNhExek48cU6NUHm9ioJEaNyShBDG\nhwR6\r\n=D3Ow\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"20a3870f861650ab884eeffe1d7657aa376a8ee0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.9e2f6c450.0_1595975898174_0.16715730488021663","host":"s3://npm-registry-packages"}},"8.0.0-canary.e6950b55a.0":{"name":"@material/density","version":"8.0.0-canary.e6950b55a.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.e6950b55a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"92f55fd31de0ac1b40adec3224a8e82398bf66bc","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.e6950b55a.0.tgz","fileCount":9,"integrity":"sha512-0/FQpdE67yZaGmwdjD43pBlsBEivgi4Kg62V1fgXzmFFKHMnJs65YrPB8Y0Y6Kegrt1xqXIXyVrGnUDsfyui+w==","signatures":[{"sig":"MEUCIQCFvcIBr4mReVY2K+vm3xCa/Qw1kSGgv10yEfNkpNsX3AIgUDDcTwAk6+pjRpBfl87K/YEthurwuJvm08a4GJnZcj8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12499,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIKvnCRA9TVsSAnZWagAAUM8P/0434X7MrQvtyKGRkPwd\nSRnRnZB6gDVHaXThR+anBASzgB5IIqvNkDWD9BdB38ZFQxtRvMpsLXg8aAwo\ndlYVizMCjgHj92okJRuQT67O6d8dwQCwyQSffUULbTX1Dw+QAIcTOKOPO/vx\nhEwSFX+q66slFenX3Ff0XyyFe33Bt8U8HlkdY5iy2KiA3kMVIApZr5D/jPgD\nOee2PjEeg9dIl7b+wTvpj+k3SpVAZ0iOYcgkFjm8Ng9ImSJ5ZwsaxNCU+D+u\n9x4+N5K4b7LN75s0YZZujrMiWtTj7RWzDy5ePTpsvecWUjFV1aiv3VsAPJFV\nxAS+rf+DPcWs/QLqLe93fskx4U2Kv11gVfAwsGYDDaszz2KuG0+bTVTklaVZ\nRebseYyk1jT0DmeUFddAbgwlcBEcyxNud7UQ/ryBERxD9mb9Nh5Wn/ciO9Dv\nMYmEKhyP36W0bl0IR6dNi10UFxxNosjKMB13kKoAHYKhzA92NTCltx3fgiJX\ncMLcsaNHBPG4OznEYY8uln0oIUKqJpCVScck+dxAyWguxh+Ggd7vNfhdALUC\nawnenIPEGHxxvTo+f6rWq/PkfFZvGs7JIiDmkuDhpbBCWjffBDfxEu4s0d9j\ndqg0cBUBMwm3edZs9mGViLv1dN4mlGkIlPE1KtXmF+iw7nVXZUt5osSiojfS\nUIaS\r\n=Ook8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"c71461d7d95f313de3fe5609fac67c2302432c36","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.e6950b55a.0_1595976676524_0.8250787739929188","host":"s3://npm-registry-packages"}},"8.0.0-canary.5e51ee38e.0":{"name":"@material/density","version":"8.0.0-canary.5e51ee38e.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.5e51ee38e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5f956bdb80af6605f0b3e6077a32f2cc4ef967a6","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.5e51ee38e.0.tgz","fileCount":9,"integrity":"sha512-02xJZkUNhxDn4cUsfYjbIss+L42/UuZXCkYH+jp/PBzD9QxOcJcK3T2wITu+on7jWyi6itSeWhuHLW/fGJ8Bdg==","signatures":[{"sig":"MEQCIBc/4zc9rXvQzawlZKkqLyJ9YSVeZe+1udWAcosoaMAQAiBdK3JdrAkyXkiWbmBjdi9rnwTv0ZkAAXB38JM9rN0tSw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12499,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfILF4CRA9TVsSAnZWagAAhu4P/RcBSo8J3BIErivhC7Ru\nhFAC/5oCIFhnL/TwVRqQjnbi8ckR09hyF/NR6/+7lJY6McaMCTmI58heorPK\nLU6jGmncOJdjJ0D2So88rKce+RWVjkt+7joq/L6tbAv+dwB4ViWtPsm0B8NW\nD0KxbcnYj9awqDShI14RTGlh4W31GdW3RvzW0hBy/4yELk3FoD3O/GqvdD4y\npZPhJExrm4l+dS9wnY9+0uncq14CNlFWsD1xzv/4N2xfNz3vNPcRPsj+j+OE\n7bqXvJNPtbZi2H6sLBwm5EVXTV0uqh9CMCQpTDdNUwSdJs8q4vb2eBChoGGp\nDEIQ9Q/BJbqrkBqO4IQv+SW41/AoTp51djQbLEsszWtOY14+QnbF6PtRe8qq\nxQveXPXNE3GZZSTwfaiG8RkIOND2fSxHVUEMDRiBZUGx4hGg8/dvY7KOcBR0\ncRlZR0BpGn45CAKExlCJsRDvCeiDrf/Y2oQo0tV8t57vAWZF+jUlAOMW+vw0\nOLh9YcRZnHrr0rhiWSUVd6NM0sOt6cvEKZN3dm2hN7IgCQlYpWHgTfMeaRnC\neGXf+YU2mkpjikp4yDP79+W7TOzUFEff8kXHrr96BTuvgVIFAXZL8Xw8x8Kx\n8Rjlg4iJnCfrrEKYF2BGWj/vtNMVKq/7aHX8zlNdWY29LuYk9pr+QzJ+9w+c\nST5I\r\n=cb1p\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"a7ac25d06cd849dbb8b1620235e913c46f5d7849","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.5e51ee38e.0_1595978104005_0.4491960454863497","host":"s3://npm-registry-packages"}},"8.0.0-canary.a3898ffcf.0":{"name":"@material/density","version":"8.0.0-canary.a3898ffcf.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.a3898ffcf.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fd25fab1a7269673c7908b4f850089070168fe14","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.a3898ffcf.0.tgz","fileCount":9,"integrity":"sha512-A+XgKAMvJgFCrjn0dZKTm0xPWGzzdpIhb3GDcyXIcXBEQoiXzI9MdbdcbGkHqhRm4h5agNnkJ3enzPuH5AxYSQ==","signatures":[{"sig":"MEUCIQCH8j9RBToazPSDCPdET4cB3DQRjixnY90z/iBH88PEggIgL05lqO1CA3/22wRURfuHyRrNGtbJvBDW5ZZu13+j904=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12499,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIMRRCRA9TVsSAnZWagAAIpwP/RT/4lnw2/UKOaFQ9rfc\n9Pj47H2GNq9pZkZkeP6OKqIIvcR0QFu9GysyAAH3uyAT5KuIykxx0FFPQimh\nxI4fx18UQcDIxnEimJunku9AAOHDE1tHUbnydHq3QfcHUcvzOzgHlWGE2Zjg\ne0NSkOX5/cITYgr7C/iaNLPNnXGYOS5ANJtjv+0cWo9z6fFWAODmoFkqvpNv\n7Ze8rXxz81Q3GhE8YzijVW/acoSQBEWg9kxk8O2d//m8r542UneK36Ruyw3u\ncCnFbyfJ0UC1N8malHhTZiArlXsXxLZWL1aaTYyadQ5+byy/i5s9NZ/6j/Vm\n9u76tHvpvuWXIlTc5dxeUtFCU0mp4au6jYnbasBFNvLzbFyBrYInCTEZ49h/\nFNoteolXmDk4zMCYewzQCPDMqXKEJPo3IoOD1kdXP1JdZbLedz+/O9zuQ5Bf\nTw3LT66LNrCdpMnX1omoV+MO4TuTSn2HcIWQBfrzD0FIiyGev7z6MnN82/h4\nKI28/x7JBFr3HAYHI2S3ZuoZ0C0tC0k1cANvhmtle4O11q1vvTKMRixJWvkO\n0hFgMiuY9t7uuIk+NyNQ11Jfg8ZeMYmZDgPOf8UumMvkWqCWfcGEnJj98Ht4\nR40pPBBbFxjbSBlTtS9fW0JUh8WJ+RKQurcixV6EsSFg9uWHurljTsFr6bZY\neMOF\r\n=tmqR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"4382580dcbfc3da31d5107a92231aa87122f3f30","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.a3898ffcf.0_1595982929440_0.9071439653314879","host":"s3://npm-registry-packages"}},"8.0.0-canary.bc5cc6c96.0":{"name":"@material/density","version":"8.0.0-canary.bc5cc6c96.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.bc5cc6c96.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"57f23b1913b30c1a82c2477556c19d01a7f720b8","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.bc5cc6c96.0.tgz","fileCount":9,"integrity":"sha512-h+qdX+Bt3ENsTt73lDkOhuZUPQsbe7YdD5j2RxcNP6cyMK29d+6UoVzyvmtXPwbXy86+jncqfw3r8uonZA1H3A==","signatures":[{"sig":"MEQCIHYIql4VwWBYEd+ylL2IfntPasoU09wjTvhseZsxt/UIAiBDUHY5COTxQxhB0w52hNjxkeTbo8JSQztP3/uCfYou6g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12499,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIMdVCRA9TVsSAnZWagAApEoP/19UxZbzL36FaAXH5xYs\nBRBb3b+p0VFNUjXmJUAui4Dsm32gn13VVXXYTgC8JzPd5HaWEBGMAB6v0HvC\nsWBdUjctrLxyEIecje4cu1mj4RTloUfheoeaQILduH9mmCp0Llnl1Po1Slvu\n4JQl6KEysOZUfm1LPbHPbOwfMYjzCe6PfpvOcWAzJfzXh6XuEPlowqYf8ChY\nN4IALAqbm+xPK2GafU2hHzTmNcZvKUCP6BO5or7Kv+45aEuMnw7h8lL+2S+G\n1bR5xply1jxUfinFW8Ve6qc/fkC86Eu3cO9RIyURN9j1DcwMQY59R3sNkbfs\nir2sch7ZUrG137kgmrrHFw0MIymEymtgHpdoDeA3SNsIafH1Px01RUJMxsC5\nCXV09XAvbAWWBXjBXv2scVWy3IBVl5c6mYeQH7C01BAcQfV87mPMXyHWTmo+\nKUqa4Gxyedxk3SX/+Xg0ivjngRehx5pvo6tUyogPf0GSDTU08Z+7CEUCS1Lp\n2jDeJvHNyoYtEliyn5R6n7pjDjejHtQINmUTwQttldqPi1Ki9/BPgE5egNPM\na4dM+GU7Q9GqjhWrKItes1JsGOhAaiBpMiqtN4NX7N8iOBDBVLe1sHtF6oS9\naksNEOXO2gRUCR3sSQv33ABkMzjmgVO2rRRgsTt8B71vasdmuVFE2nhj+zTA\n7Phx\r\n=8iod\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"ef5b32f85df29f3c19f5f6960f0f2e58025012da","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.bc5cc6c96.0_1595983700839_0.029835111067800346","host":"s3://npm-registry-packages"}},"8.0.0-canary.9bdeaf928.0":{"name":"@material/density","version":"8.0.0-canary.9bdeaf928.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.9bdeaf928.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6674f453ca5ebb198272a039826a19a31d77a64c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.9bdeaf928.0.tgz","fileCount":9,"integrity":"sha512-3Vws/pu8gOVjdZKrDdBnGVq1y28MFBv/0BLrUpVYHEu/Z+RqUXgalfoFvprbUqX6U5PiDuEBSLajhBVVLny4UA==","signatures":[{"sig":"MEQCIFCEy9qaXReDQ9wEnhHAQcS49o4N2DnJQITrKCJ0lz4wAiBp27NzPt1ki71NXZRI3w+jwbA9+qqPOD71ya4F3tbHqQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12499,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIM6tCRA9TVsSAnZWagAAbMkQAIXzwLUbSxFRF5lxMzzj\nNuIlAKYpYB9XdTpbews0rJrOsHCvQ8KkeF8RsHZ92pFY+O4TVey2rc0mOfbb\nR3yzlN6SRNgrfmvhAeHnwExxbeUSjhtsfT0HCnUAeciH0jbQ7OiTn0n7vQVN\nMFKrQGKIZrROuAr11mYHFDlODkD467QlvXlEuLrQolWkqD46PEv3LIDJdGwL\nw7Qcz9Bf9osrbae2chnHmyB51+W6b6u7Gr9v2zLREziH2pc2AURnRx+k7g64\nslFYhAt77LVny0KAH22eZVgJh11D1GCrRuAmv+5kAZ+GGWSSi9+fOZCsx/fe\nMRDQKRe9Z+KQNb2GKtSW35zygvvD7ajoG1NUl67GFf0k2l674cNgAr7INv7L\nwf5OHAuY5Ynn9fidjUT1hz9ak52AJgRHnmnVyT0Shfn1G9n3N3zYMVr+xAi0\n2G4QuYcYZrVm7imeJNbJiMa7mUes6jnu+bBzMgzlKovL2dl10+MqBzuSBpQ0\nPAuDkwSOJbsdZF7lVmVJ8NuTfzjAFht4WmbZ269BuPsKFJCfs9Am5YDHUwtm\nw/+nUf9ukRdoXioyfDQr85dezkWbMf0qCWp1XoNOyWgdjL7gGL43pbhvVyAo\nzgB8LRhH6v3MrtjlkIVxlSt7MZr/kWxameJCwsd1XsNBOsI2m5CQMaOva1/r\n4DLr\r\n=5raD\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"0fd3de7a6a462365d56e724dcf32c2c1890f553c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.9bdeaf928.0_1595985580580_0.1602985333031941","host":"s3://npm-registry-packages"}},"8.0.0-canary.fde2c1f9d.0":{"name":"@material/density","version":"8.0.0-canary.fde2c1f9d.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.fde2c1f9d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"19a563380b73e2aeecb147ab35f9e6f28dbbdf72","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.fde2c1f9d.0.tgz","fileCount":9,"integrity":"sha512-xFQSOD0IaJjeaJRZwI1IqvAuOsTwVer0nMfM4BOlx1g0ke90Y33CYkOTKE+O3F1MvyVE1fjEcTKNpx/jes0s1Q==","signatures":[{"sig":"MEYCIQCNr1xCe9FhKKPKMd7UD5EQ0l+ktt24+ZXGhpjhr2EYlgIhAMouOie8NfIzLHPYAyxEnmU8TWVr3UwycMe92qebCqtk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12499,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfINIRCRA9TVsSAnZWagAAn/YP/2/shMqGjncWQFPAGVlQ\n0EC8qWewHWA9zINrGe1j9uTGv/Op2HYk/xpg2zHlZgSsnqgrRjgz2uR9nlbP\nXyHIqn+LJMctsTyZCvf7XuU1PMEjWxI7rmd7pOlN2YfVBpRS+7Sf9UruD645\nfPm2nW8DHcL2hics1rgMtFIyhXT9srZW8tTG5CZeKslGWQVnZfGIgjBPXAz+\nZpe1Yp1hu2J6TPXAvUkWQ0k910y93L6PY7x7XaFmxQ0CInCl4W988LeNgVvv\najeAY8j7VYkL1URWD6iHKxvXm3pZL+HLlo9EA4pPxzx+VgvqzJ0kgkbLa6wy\nSH6zViO2Uis8tQqrY0moh4n7P0ks+nzjbs6LUH/ou8ZHUrkduzRi//sqnBtz\nBKeTup9nuukndbbeuwSGXU6OiJBKnQ43jkHmzYGU7kEl0zl/m05lt8qsE0V3\n3Vtqvw6GOhDtSu9FTp+NjB9ieCd7FeKNuR0F5SM0ZBHEr1Ma9Zl2N6fmuVD7\nOG5tnMP3EU3Krh8JAhnnj425jjZreeHaI2f35xN1AYMoiY5Oki97KqiEEd+O\nqN73kGMMuLe9iZQEbz2ApkrZrc1BihVg+ilwQ0u5mi7UQORaKvNcb1XuoclL\nqL9m/vhBMRy0439XoaXVtN7W+F+spwhPSPAjtkra76hAMQxPldoAuaCU0ymk\nuyDw\r\n=SH2V\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"f2de51610533bd781edd8339c8555a3c03546e3a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.fde2c1f9d.0_1595986449425_0.9220771670368604","host":"s3://npm-registry-packages"}},"8.0.0-canary.6b3876d5d.0":{"name":"@material/density","version":"8.0.0-canary.6b3876d5d.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.6b3876d5d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0405818c616e084e2604ba972cdf93df96d02a88","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.6b3876d5d.0.tgz","fileCount":10,"integrity":"sha512-RUVcIY54L0Q45DahpAlzJ27FerDGqa3wpbRmIgdGd92K6Zij6zfy7Xpq21Evs6o82d2WET+SVGGBR58abH3gUA==","signatures":[{"sig":"MEUCIQDBFphYxnJ1PsOXQ9doEVK4vrvOyszxJ416CMzlrZB0PQIgJ6i3AjOq6zrAiJhRSV1h6WkwWLTxhwqcw5d915vLok8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfINLyCRA9TVsSAnZWagAAbtsP/RaT5s2F9wx7qumUSFys\nviGseSl706dhv2WswB1AVWNYkKFjkwEynwEU0srYYr+I50uFxxNdB9zMNHL5\nfC4bKVcXnUHx8O/tebrilUZMGbC9Kwy5vMGhsmMnpnCWyKT4k5Ch4BdsY88+\nmfo1Pj0LyLp5uTzgKMVLYXnC+bVRNfEmInzVJPBL4ekwLgzmAgFIPyU6++Qy\ndhQMiY+stTamhx+IqxHd4gsdJN0r5XejjlqjWu8eGvRLUpHH4o6jqukTAjoj\nMhK5+vr+yEZDMIG6HksZX/iRQDTUlQ1CAK7k6S8yM/rwQ9E7dU5VaX3AbyzB\nufTk3gZg3npPZS9Z7AXp66aFql6jVFMx9WKel1mSbj/7jhDHdYfx3nYC4NyH\n9gPYIEQycVKhAeApFb+lN+gWKfECdqcaUtY+TqIf0Fi77eZxpOKgCmusjTol\nUaJJsmoCiz2fMVOZhDbh1Do347Kq5E7nij6HUvk8OdhByT72zzpMDvqwzZFt\nc0D2BllxcIt4ErG83QlN1O0KYYnSSzxNZqgPAGbQHme/UI0heIEMH5h8UdKg\noKaQ0TFHirqEQLId5EPJN4/8KKP0cZqbGfvAmQbBhG/sdhmk7W71/1QZoRPk\n643hcvT6RmH4bK5UHbYVThEMkm3QEAiD8gltl0q1prndIHX1bIY1ulGNhsFO\nqDyR\r\n=2TjI\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"3559342f661baeb39f2e70f1172040aba07dbc1d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.6b3876d5d.0_1595986673775_0.5743514431897121","host":"s3://npm-registry-packages"}},"8.0.0-canary.30ce17873.0":{"name":"@material/density","version":"8.0.0-canary.30ce17873.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.30ce17873.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"77f61e9cf82c6736370224f0b29a767082119591","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.30ce17873.0.tgz","fileCount":10,"integrity":"sha512-i4Vq8+YWfFhTwCVMH4CVOmxzJaDKtSTqqjnU55D8cTV2nDexnacEzPE4ssbwYaz5scP2inpGoo7mJi+7toihOg==","signatures":[{"sig":"MEUCIHrtS5oy03R79cTFZ7VDO2/P1m+iUs1LjshPFceySkRoAiEA8BK/QqSFqU9C0Q7USMZTsUZWphCJKtiuqtsvpd6CflI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIa5MCRA9TVsSAnZWagAA4FQP/iFUKK97HckUl0vkI43H\nnvfTwH6blp+BmWbN4pz+zRfte/tGVnzzLYaLrsETtXXeFc8nrW4W0a6UFCFJ\n3hYryeqcKOJqHKFv0dOxatJHmY05VvOr09/yaHoQj0Oh4agFhw1VMzolzCMK\nm6h/7bLPQxu6/Ou3YPOMJRNgHxktoBaYtKKsDL2N2arvzWLX4IcGmFvnFAky\ng2DL+aSiOMI3s8oBxh0Kf49SA/ufMFuUt5K5AQyU/YBIhbnVhqegDmG3lwZq\n2Au/zXBkQr8MWaVKRCjXcxXDWSVtGndwYDRAUWBnE6M8san82GWgvAzHJFly\nZEhxD7TjhIvL0L69paf8t5p/h0GMPDOnUZUfsmy6duACdXkmEnCB3IAu21rw\nE6Pr//eTfh11AI6LwhRX8vOI/9/kyaL1fjRozha7TU+iHqkx/ZrLCFtTl+Oa\nCwsLRsaGmkX7+KnDnl/u7y1VVTB2WV3+uFyvpTHjQOmOL/o2mlWDhL3/xwxh\nPlmAF56lukEPEwDo/Sd/bMVcvu8aLogiJZW+X8BP5NEH/1p95MuuK1cZbYmF\nECkPs7bihsZBO+YVRPYHdfyAuaUuqVxdsMKsGaW1+DCi0rw5daz6aeW25mBa\nB9VXofc1HH1tvX0oK9b0p8EWPfos7+WhiLS8VsE/Z1Gj1BY73syg0S5iqDgZ\no2zC\r\n=STOC\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"88fa0309b6185f09fffdbd61d0c3e16f53c2530d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.30ce17873.0_1596042827532_0.9125890186465981","host":"s3://npm-registry-packages"}},"8.0.0-canary.f6bb43bf0.0":{"name":"@material/density","version":"8.0.0-canary.f6bb43bf0.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.f6bb43bf0.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"abc1f56b3d82fa8c76e480aa2bf6fd8417430e32","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.f6bb43bf0.0.tgz","fileCount":10,"integrity":"sha512-3OEI44fbDvYBGRpFuDXvz1DZvm0JLnqJEtINgwFxnZuHhYxUfoKPzsNT/U0O/g/K86RpcIeyhC3oclSA3UdEgA==","signatures":[{"sig":"MEYCIQCvi34j2LvTVoEUZf7LBe5bBqiM/rHvrpuo8WcVerjQygIhANcUOBD7NtfPbmu2jI+0Xw1LE99bBo+HfSdn/n6rMeKZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIb7ICRA9TVsSAnZWagAAqi4P/RLA7GF09Sbnh4R+N7zz\n68Pm/9SixSupZ+5sMbvQ34P+94Sug6oD8HWMdyzxSxID5F3mnA3HkjVxoGHU\nPWZRGdk4wfCaNWDwVmPMjKJiBMoB6YG+D4SKSJRdzDzu8mtv/C/QGl6CxB+2\n7x3wPakyY6T1HUjD3kNtZIkGD9VNezS+bNAjqUJt88E8wOpozRefc3zE+oMw\nq+pQUlqEwQg4tuTJKCBualgjtyIfTcDNVJOBxDKbtcPR7hplRYUE8T8WRVVC\nVSaRvwxqGqNPhgYGX7o1R1QmTc/f+t7E8TtNg9UecLpEEB2KRuaBp5QYVOJ4\nTFMbey6Ar5LFZmkKfrU1rhecJHgB8E6jzRftBL1iz536Extid/Td7FQSImt3\n4dUkOF9kaQrwwh/Dd/lk3yER+tATrPRl6do2ToRW7ID3Seg3rj2lwrbzMjgq\nw+WYAL/sjd7rYqJqjTe5kxZhIX4k30KPFN7M8Sq6OMorALeok9FCinSqfVbX\n6LvD9wNuVKdOjJPYG6+kgytuy+cH9LcJzcrJcPFZqDkeEHWGyPifsxwihJd0\n8XhYtT09SuRBKo3pBXpi1hR7lRhALZwko+HiLDSK5OWA/VNvgeK4g8s4Sgw1\nJj3f3GfRsceFSiJNdD3bC8l/htUY7nt72a95HFBwz0cTFBYd23RUs8VG2Z2y\nSFY+\r\n=Op/v\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"d511f86ad9ca4460730b732c04ab497fd558d515","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.f6bb43bf0.0_1596047048135_0.19501763707352038","host":"s3://npm-registry-packages"}},"8.0.0-canary.6af75f6ab.0":{"name":"@material/density","version":"8.0.0-canary.6af75f6ab.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.6af75f6ab.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"457e4d156ebb5b638ca266732537c469a81eea02","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.6af75f6ab.0.tgz","fileCount":10,"integrity":"sha512-bPp2Wb6d1r9fRcL785etmnGruo2B/P4395glJldecd8gxSrop8soV037wKINNCqcJDvg1NvRI33UnUbjwxtIeA==","signatures":[{"sig":"MEYCIQD477lQb7Dw7ldKp4sQzDP1vTW6LHNLK7oCUrPZVjap+AIhAJa6g4iFcugMu0XEPAYCgntOl9bHisGl4sLnK8bi1SRO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIg2bCRA9TVsSAnZWagAAxlYP/22H9B9lelGBPicZ+6NZ\nUS2f2c9z2cewizw/VStkGW1zjx988f/l4so2R3J9YUQmXV/2JU9dB4zDBpB8\n6PEZY6vaGCB9ozOvmBztKWVri73rsKTDHhl8NnFnTcFUV15JFLpG9tV9T8mR\nyBg5ntVNQqFExwCrMUX/hxDPsBKmNR+d9Ye1VCEqCCRxZOxz9FaBOcFY0CKH\nOvToy6Ks5wqvnsrkhwznWXRgl9uqZGdqvLU0wLZ3l+Sr5ale7gyYGRdN0HSm\nQD6HyreqJgop5EnaL9xyhEvcFg1pQ0/GpxW4YieNoNKPa1NKdhbfRWPxU0QT\nMelEm18k/6mPV7qBtew9kNpO1WC9c5qhisG+28tr+m7nJanZa09CHmxSOkII\n+ZJYoCXHwMFUX81rvR7RARI5OG2odQblNs2DOmiRzliO5yKuYZbBF0+pSKAU\nis2cIe6domYAg6K24VcAQqI5d7CeyLqiLsdET6ny4lIXGqq58YuJjPmJAGJo\ny4kf/JgM4ObmW9nJ64rIKT1uyQzEYHHOu8HhuX/idBIIrRojJR6ummj/Mua2\nu5LPuhmbjzHs81tTRB2xzRe1V3SVRR1GVyfImkv9XBZbqY/A2Y6tYUSiLkCr\nisdt9O+6VQz4Ou5hl4EKZvjiVGIBx2hzt++SmLuwWIiIJayvzDIcb28BKVjU\nY4VP\r\n=zJN+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"44ee60f895715b8f7c0a7da67637babfd33452cf","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.6af75f6ab.0_1596067227227_0.705385455723204","host":"s3://npm-registry-packages"}},"8.0.0-canary.42d7a65aa.0":{"name":"@material/density","version":"8.0.0-canary.42d7a65aa.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.42d7a65aa.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"32b86b92bf90470fb920fe1e6651f5e7d984da72","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.42d7a65aa.0.tgz","fileCount":10,"integrity":"sha512-4t62M/l9RWj8SB+lNsvLBSVivVU57k+UM131DlyXpH0av25CCthlU4j9x8LStKIzeY+I4h+aKkbM+Pd5lUNOUQ==","signatures":[{"sig":"MEUCIBhOWOzFow4JBAJxLYcqsHhofEKFHXt7dVFq3nRmPunAAiEAkj+Sm3ocLQJpNp+682Xw6OqyClMNB5v5tqmhSaY/YYs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIg+zCRA9TVsSAnZWagAAblwP+wcx9DN2oXyM/9aLEFYW\neTZWhblvxbCbouCUkPEAybx9ijRFryjN6YvKyuBlgcujistozJEvrFv7Ip1U\nllBFKA3VuJ+YIXtXxM8bNF16NQoKj+4NAqXs2d84EYu3YkrA2teEDmqMbOox\ncWj9EhPK3gFH5UFCxRVQAJvlapMw25Kd5IH5C+4NU6nH4VJ2SlCdVeUytM3O\nkFL2GUd5phHv7kCwPMfraeBGsVPvObF2nt+biuuIpp/vd6iOxuf/J79zrV8o\nn0Vp3Y8KVAn3dfytzR45aQm74bA0GZUGdP1GTlM+2+qMIORO7ZtHfHcgBkG2\nkaHYc/YyNB7VFEJOyUN3PWQ7ZGrdCQQu6fZtWOsj5WUXhSKmmmZqz/CI1jgp\nSxzQFK5OdwP4Nqqs9u/80R0uJvASecot4sNAX6acLkL++GTca/LlgHvYmD80\ndL13Ra8Sa06tv9eQnPemFwqW3rXQdNvwjIKwRSEpzqIlDdmuEdgxHVRPnXJN\nfA7L4MDnXoPxfV7xn/3x75pTPr1wizC11Crxrn9iLatyYbD/FntQlFCsvRIZ\nfM2QJb+FhspVv6s+sJfM5AL5Zw0mN32izfZufWZS6+q+R82AOD3zLFLbRYEC\nim4Vm/R+A70k2//fG05eOR6VZeq9bLKMC4v+F8eyQc/JLIeAL/sk+YMUbvER\n/zRR\r\n=V8z9\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"b6645573c0460e7bc8187d1a21ef306b674e1017","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.42d7a65aa.0_1596067763235_0.8341892460470188","host":"s3://npm-registry-packages"}},"8.0.0-canary.85abdabb7.0":{"name":"@material/density","version":"8.0.0-canary.85abdabb7.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.85abdabb7.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"86076ea2cdbc9d20e882c1f452d5c7bb636d6450","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.85abdabb7.0.tgz","fileCount":10,"integrity":"sha512-t05Ae3q65EdmSSKQKrsABsP7E/qKS1uR63eNSgEZWKS+hNNboDmvSaVrGeAEEE3NPxhEkzZIcSBGHvetWIj8ew==","signatures":[{"sig":"MEYCIQCysHcQcgTZwV3Q//zgIg2ci43iYvQqX5GqXFmdJz1RiAIhANy5Mepg931wzNRdp9m8m5HpOtoYCv7NUBvaHZi5Jlm9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIhDkCRA9TVsSAnZWagAAPFkQAItPetA+v/0MCd1hEl4L\nXgNswhiIsV3qfLK3CmFNuA26p7wr7P14t/je29Pdj1ozgML2ol+az28WTWdT\nIyL3kYrgBSAdP5hC367mFaNP2is/dqvDcddv1qJZIsph+7NRdX0xCsB+GUFa\nu8+vvZhRwXC47OncJuzmVvaSUXkJJ4ZEXuUMroSctKdHQmhoNUJ7wvnkYDho\nD5geYTSpMgI2fBrywHbHcTIa+aGiVVcyzNUwauHjo1ZpwtNVyRNkH1EOvUE2\nTETKsAk1Za152GKnIQpcicD+oSVUY/Uq2gGnuZUg1WHxe238toTde57wLGmL\nrIiZv5U5ZIPlHrXVnuUFmW2l5A4XN6wlsHDVJDhLfC126ax3SomgshSDprp6\n4qJTOtY8lgRhzrVv4S00j/QbUzE4QyAADcTODQc3xHxbmS/D5zp7/tijGCee\njXf3edoPhAq9ui/OKhwWestV2Ce0iNxHmfEjybE9X35wVoZAkxVrmI8J4IBE\nVmmtddUuRBnyqRM99JvSwFE2kx/bZas/lawZ6OfYLn5Me9FiwkKeLX8o6mLB\nxMdfiMoCmxyi6z92gKqo181/RFLRbUDG+3Zmd2AP61hrzs98QRP83QMzVRD5\n7RrwBUZwpJu9HRNZzFdnlek9fqVm+oESSpLpsTcUrxxvsFzzBNwox7Zacd+W\nhK9L\r\n=F0Pt\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"4686052ff6039efa085c0d360393374ff4b2143c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.85abdabb7.0_1596068068103_0.05258723061904047","host":"s3://npm-registry-packages"}},"8.0.0-canary.49fb20ca3.0":{"name":"@material/density","version":"8.0.0-canary.49fb20ca3.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.49fb20ca3.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"219c76d5b8ae7740632bb60d33cdcd8631b74868","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.49fb20ca3.0.tgz","fileCount":10,"integrity":"sha512-fkxh1lWSo2sqF4KWRja4Xnk769cDJHIy3dhMA2j/tMsHJQKY/GH2LkxyNZ9/icMQaq92kbkpM1umSelyMmnxDw==","signatures":[{"sig":"MEQCIBBYkKDmf9emS0TYHo174yxsfCGSxW0XSgND4SpmqVafAiAobut6BVGTXIwaWE4gBE0BDFLS/A38Ww19kbDFcs9R2A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIiHVCRA9TVsSAnZWagAA4ewQAKNBFqfAM83qdmczCcjX\nVel3uPcYpCtHPJK+VbY586/D49TMvT2ei72N1YViehlzSLtP1R3kLjLvtJbQ\n2tB/pT5Hmb7UL6Nlpkluaj23JlOVfu8m+dvz9eYz80P824UO5HG1wMItVOhp\n62QMGYP7M7cbk9FLFmiAg0Jyu0qaFo12YwhuQltkkjDbiILS8bUwYwVKGHzH\nbPKUKUwxUPiT1eO4Q1CB7b/fkATmNhSMLUvTZxY8vvshdEVClBCL9mWjUvig\n4GjXbgVfvTS34sil1aeSZSdXyt1Tk/DzkurRwg7d9eM/7z8XwWhMfMH2yYJA\nRh2FnjiwnsX5PIZBiOKiFSbZU6oQQ62DgjJM1NpdVDG7/R+0PgT2hk/o4i5m\npiLyXcKFHOSWCXaBER6CPykEN74wqb6h+zUXPVTQiPdtEX85EEWXt+pdQBDV\nUdBlmeY66JA9T7PMFjhmxdzyfrh/8OD1nVHsdvcGBPWBZgWTtILUmvUpzBF0\nbAA1V1iJ2u09pWmHcGn5Kleq7NiNYXgKUkR+ODpKYafTDALTiqmeKl50FF5X\ngrPPhNibynZ5aFtXwDNr5kcH/C2GJbrBboOFLFSZmIrG50HJ3RNIQtLZgbTy\n5gG0xSZEVZmexSMbaunH/nmbX2GdP9mteCV1YYINJOsitbZNJ8yXY4nc91PB\npbxK\r\n=yJDh\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"9c66ae7fdf6570d9cf334102b5004c5a04b628fa","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.49fb20ca3.0_1596072404933_0.28507284989284654","host":"s3://npm-registry-packages"}},"8.0.0-canary.962d4abbb.0":{"name":"@material/density","version":"8.0.0-canary.962d4abbb.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.962d4abbb.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dce59e1478e5db651cfe9e9244192e9bb9e48cd0","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.962d4abbb.0.tgz","fileCount":10,"integrity":"sha512-M7uEPmjjXK8pXT58lvcbCjTtmrug8Z9VLafuU4b4Eu6ZPb2+2RL3dCObNd1g+cEGSCpVGPt02AY/VEfbTp5PZA==","signatures":[{"sig":"MEUCIDswLYkWwMTRMAzJlRZySj/EsEU9HlXs/FRmK68O7ZIoAiEAlGccfXRTQwuh5Dd6Iap0asLo3/FhPA+8hy/7ADQFl3c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIvCzCRA9TVsSAnZWagAAKSMQAJW3UwkATbG6fVPILoLP\nf86MgWuvng6Hlcs1Q9KnZxLMYL0mjCBAgY8pnzxt0gyaWf36jkxwVMYcr5j4\nV/zqSrd2NMKCzI4HrL0prBb4xdcfn1TEesbddV2H/HmvGipZoQdfxak7x3uR\n31tACzdq72+aZFzZHg3JiLUaAmICIxF23ew9IKAEqRb60O/ZOZbRxQcOZZeM\nIAnvU+DgoN/CFQ4d+pbGozBIR+JI3hYLJq7ECvZfpvsHSGlRlQc8X2eyGFN0\n5v38gUHZYSZs8IBaYYsjumuV8hHX1a3rWeyYspZsDJbn1adRmx7fkegUwf98\nV7QRlRza8yJbLdHBJRyaSksXZVwLBVahAmGZb6zgTdMo+BNZvYVTQccu8DQ7\nl1Ms8HoHFy65KxzZKULxI5j/qW3SpsPgKAFP0qpSg81zxoVfnJXRjKI51lhQ\n3KFp2PNwj9QK88S8w0vnuGc9ca8rCzpKp+iu2uNJtri0cYKHYNWmv5H3i7Lu\nMRcChz9BkxGVLbho9LpZjMyyPyRie7UTDrLgY2gwM9zQrOk8BIg6/9L1vNYu\nbkvj03j6inwvF9tsLM88MZ0C4a0/YQNMTrp7KZVQN50oPG7O7k/Xf9c6757X\nEm36dFJPRJnKCjRBc27kAEUQTWHtTpKmPn373qwdsIA8ObROQd9qclz8ZTyd\ntF/O\r\n=8LLu\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"d373d2867180ff5f61fc4d7afb88a8825cb5cc9b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.962d4abbb.0_1596125362489_0.7822498925709211","host":"s3://npm-registry-packages"}},"8.0.0-canary.2fcee40cb.0":{"name":"@material/density","version":"8.0.0-canary.2fcee40cb.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.2fcee40cb.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8cf6af4aca31648f87206cc675b47d0899c83080","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.2fcee40cb.0.tgz","fileCount":10,"integrity":"sha512-pzrf0Q+hzKeQSVq/p1m2dyhJchS10tlrGPyLvoYfqJPj1i3yIZgkcnpB4T4Af8BaTQlfmACOV+1BwyZUcbHkxg==","signatures":[{"sig":"MEQCIDeOKbwx8Q/VxTijwjRaG7U0DbmO7n4LFxIUo8nSddVRAiAd779YCuDu4r4FawlPZg0f1qK8123uk6hzosAl/H8cHw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIwFqCRA9TVsSAnZWagAAfDIP/3FEBOnZCOsEfVYB8CpZ\n9PUNVSSG4P3lfM48DM6HZECVdDp/EOK19ZyzNGLkygxn8siKTwOEkzQfqQgR\n0rrirPJPyCVFz4HoSKrRoQpOyvk+98MoxKzHRh1LM1PhTYTAq6yfteQBPn7A\n1a2Tlfcb5XLjfVWFwDoU4RCemS/l9s8DKypH8J0uMIosMvXy4kWbv/G18DVy\nmUcVYwD51aeA+XCtsomTnpU1sobM56CSyMU+BqMglwfzqpdayp4oNZqSuobE\nwIcu5vREGu6+4w6qlnH2jcwOAcr09bqcgCrtSc2dhKciAadwjEHfRrtDGIVz\nbgBcOTyosSTH6kIQdXUJN1LHCYe66O3p9kFjNH4tkQ+oGDoh8Y8xQVmmEmSf\nnCJV7ydfr/yFAu+3lUOO5WWmDxW5b+GNid74y6PiCu31b1WgR2PBGRvWJTts\nFx5cY9FBw2eKz0eo3KjR+7BHTZ8UvettW24tH7WysOOA4qkAytk4D1XynbrM\nVgE2Whsyiqecswx4fQlC4p0X8PlIvUrPGXqqHrgFJLZALXxtVjbGekY9OOUd\noPIpRv1rxRTIO/FfjrZFrVm71vAaOgmTRdwdBuSmiLDFq8uDJbK3Tg6XWGIM\ndZJgy+QchSC0fuGROr+eDE+Kjun9/9PqqvoK/4TvpS5DpikyWuCK++yuJ7dB\n//x/\r\n=Wylb\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"f769a8a60e9cefb9e0e6306a96914e8e4b4c0c90","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.2fcee40cb.0_1596129641732_0.31300996585704066","host":"s3://npm-registry-packages"}},"8.0.0-canary.bd5987f5a.0":{"name":"@material/density","version":"8.0.0-canary.bd5987f5a.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.bd5987f5a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"122ed7184567498add60d989c68e4f02ef8f29ab","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.bd5987f5a.0.tgz","fileCount":10,"integrity":"sha512-e5tYQj69wZmu8dgEfuqEP8ensjyEdswyttjuf15HSQV5QZuOtcO6sSfQ7AiyKPMC0ssFuYGDVEQNMxNkxmoJ9Q==","signatures":[{"sig":"MEUCIQCORmyGCHuS3SRj/dANfhrK4PfpKm0+dh5uqe7lWcELKgIgUABi/RJtchjI7ELXkPqX1gVoFuaJ/J1DCjq0Jl7bEbc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIwcvCRA9TVsSAnZWagAAn8AQAKT6Fc8ADkPzpiUV7L5i\n74k9HqeWji9shyUARnsIQ9KBh4g+V8Pw4uXhN39uBQ7XoeyBmDQ/tHd/mICP\naztJkIxAfjtD4/ddBjJG67h9iAqayFNt5UvpLdq9SwHT0QupPhwls6mLkrWD\nyouRTDZ2desz96AF84XSvhlFc+o9MzYOGzqz28V3JPyYIOlCOvRLcONPBdap\nPqmlDMl86ddyWMrbJMb6BWeflZqbgZuOfY5bvCOgk3vMtHKLCBDrO9kib4zo\nPLoQVCjWkx0nmK8uGonh+43wGZ9v6zX9aeSDiZ0c1jRuH5rXHcDRdFZA80FZ\n0eGI+iKkFOt+xZHcuU0Va2qP5uwI7jj5KH36PXo/qM7dq3KfpDRrLru1LYeA\nzz4hJs9G+FfjAI6Cxtbpmu3ndoZWxbXl5LBRWh0VjVhsCsHpd8FRSjzx5j75\nOgWk0KOb+4aXwdhT5AjOKwGQ7HA2JXKSvWQP76xoz4C8fWlCHxoKYm5NT47u\nn3cEY5DnLDF4f+NOe85NB1exwcVh8mVDYzqS0IBCV6nvFZKIDAhvNzxNH8AF\nxl+siKWsgcWIW8JSmTN6KLgKZj8pkarnPjlHs85n5zWHU11XUKkxFetjqbLj\n0HHCTYqUm21izNL6RHhkGRk7/tOvac+TX2SjO4lwljREKXYOypbCP000ke48\no6vA\r\n=huRJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"7825c698a6686a8ea967272c1f150363b3845900","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.bd5987f5a.0_1596131118721_0.13602296129398872","host":"s3://npm-registry-packages"}},"8.0.0-canary.005e86a9b.0":{"name":"@material/density","version":"8.0.0-canary.005e86a9b.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.005e86a9b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"869a4d08cfb0a6db29e89a38e4b2c3b41efaaa44","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.005e86a9b.0.tgz","fileCount":10,"integrity":"sha512-r2xdezv2qis15kmgdXMMlAxClshDPDutrnUjY9CTRhCZfnwYoZ6eeK3km1CAMRlfQbw6z8P3KjYl/imNr92hqw==","signatures":[{"sig":"MEUCIQCalWeqsyzGE6xXONyNDtR+kkJ1362EKmf6knaHzyLkLAIgaw9EBOsHkk9b7ed5udy81apOjWXKnZifaDNPgSHxLZM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIwpdCRA9TVsSAnZWagAAANMP/1a7ewmJ/DRIazoRRDjj\nK0dDLUETKioxZgs/AGnHwpZpEY/Pg83Rs9Sbc1OrzK6BwMBBhmBb9PB7nsZi\n2OCjrtKx9Au/I5I8+RgsZJnDAdrZL15Fis5ZvIldE5GqwpD6JUnDwn3S6Z8h\nuspiOduj/H7IRhJzuRrYmOn4CCPde+PWbmiudp9nnGTt2Vr2qhU3Ltg0W+pw\nDkl12X/1inQjMjZtbPokxgvab1PfEdVr1vHvkb8BGoxk2gnXMdZTbVuXY05N\nZjMheXwqzXHtjz/R1qLkOxVcBdr27GQ3czkkfv2eAS1r/8Ld39qXmR/peolV\nAVzvn/KaWcO/oPiYekU/IicasZw6vdeR8XHcOExHZzYrGzYrlkroXPQA/wo5\nlk18BxIvzfxQtLlJxONzwqwXZkoJBf3meEL//04RXKKoNtxAhIXgxCUU1gLc\nKMD7ihZxFmL5vM838tWUgwxwY7lxeNIWrdwHpKKGYYax3VhPv9EkWgqExhqX\nFunkQ57dN66yxM2+xHSK6v0lKDqzqUzEO+dCfpV9DTKutfu+Y/5vs8ykGxC+\ncF2QdWYilVo99cptQ5hl1jsaj/GHvjwEWfeS3Ok0jmFz8oNyE2PqG8yFuUS1\n6UR3D4XMoTv4s/b85Ez1mSAMtGiAKOf2hb0r0Tvk4EY+3F8ZtdzwaSwZuqc6\ndgJi\r\n=Kzk/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"1c429f861ddbb35ec8588ea55cb1845296ab0218","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.005e86a9b.0_1596131933545_0.7355198517341723","host":"s3://npm-registry-packages"}},"8.0.0-canary.e309c7c68.0":{"name":"@material/density","version":"8.0.0-canary.e309c7c68.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.e309c7c68.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2e485374e043886773836a8d90e818a57818c29f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.e309c7c68.0.tgz","fileCount":10,"integrity":"sha512-thlnD7QbZvCRM/jcTsRdrCoq43NrvGkhsWdw7+2DMkxnBMThz3uMVCR9kenea5EHQt+kphIIeBHUy0ptt/LFxg==","signatures":[{"sig":"MEUCIG5RucJkmn/bLZKheV/1LMEzb4bbSjLtcjxMAw/OChKqAiEApa8rIYSFcihYVWuWGozHSTBqp5IWHb1t3CvO85rXlgo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIwxuCRA9TVsSAnZWagAA4UYQAI2V/r6OZzBJgw14Kx/9\nqQyUL32tzCyzA8xSQypgiloA0E+4eMXZxewwCck/KLfjeU/KWZkM18peyuMZ\nnM+/2/qzGPpf4qk1ESgl/WdcYYDZww59Hpar9sxLi6Yv24myInUs1qqNSo2s\nHA5+UtByzrj3ARQF/NEioufW83sB7VG04P1Da7BdEyfluc9uaucIenpSbSFr\nKkIyp6Ym/o2nFytrIfuvjCbgftoyl6HsxWqDONVu50iEnNylqKyYbF7GvGgh\njOxsWQdlp2voevPP3LZiGP5x8rgcMc6XQAxXe/R74x7NnXWo2pMX552TAqKW\nJJkuaADzgv+lNYDRpzysnUZ7GHpyq/f3LpWFVOumBmhf7/7CXANQQHBoE02b\n3sI0X8NniTBWC1fd0jYgUL/bKEw5aBXzgl2ufnA75xTAq87gBO6kRnFhjQGo\n/vvaJsvSp0MZ4WPH/k/4m+pGGNxNzqVevE95IokeRr7tdandM2dv1FYgsTNg\nSfTbpeTsMVXAS9WehapP7MzGVyNotVhJL1m8rSnDaY1fuUbTw4FlAhaE567n\n6g1NmrvOUQUtVZRotM6LNEU3e+c2YSbl2NqjEDHV+s1meR+7QCocQ4LgQ/SM\n3D7dey4+pcOCA+83YO/mYRQjyx6qPKwCuw0tvAkjGtgcdUUAthVs04IYl9nQ\nvx2M\r\n=WpGn\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"3ea460933f859061781daca3ae127802388c28bb","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.e309c7c68.0_1596132462286_0.07284187894168537","host":"s3://npm-registry-packages"}},"8.0.0-canary.935a51cc0.0":{"name":"@material/density","version":"8.0.0-canary.935a51cc0.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.935a51cc0.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"497e0feb449ccc962b9dcc829fe6e79128505938","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.935a51cc0.0.tgz","fileCount":10,"integrity":"sha512-tiU9xFxQWS19FraPWgvFlbG58v7dlSfRVULPizSdMJTCp4jc4AI8UM0k/Nq9rKgfW3cefG02XNy6dowKRg8Spg==","signatures":[{"sig":"MEUCIQDlsf3NTWdaTCs1Br30vul2EaGdmciGawoEIx9pILpG0gIgJQb6hM9S1xhyCJ82EOIgF7FGcPGyrLeCK+nOzl2QEU4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIw8wCRA9TVsSAnZWagAAThoP/0jOSw/U7pIeu3zxo+XH\nL5Fwf6qUUap6JCGYyuRJp2uqxfUYAObcUWP+E03RFcyc9DD3BoZLXJtEH9le\nJowLXQ4b57zaFJ5KgbFtKR1W8fMFMziCuabG34/TG4TY5S70BDDeJv1jqvsP\nnFOXlfSMf2N4zwEYv8egV/kyfa8FdhP4oqzR7zc0hCvPGaUv8N2rLtx58aM+\npYeFcLfXK/eNy5Oyh2fIitBHSkeaiKIu0VAZJqIqopWQIEBlupagXz4HEB/O\noorFO+NRRRMSAPbDW0/BkYN43WivIt3HC8IWQgJJWgEecckoZdifgmiiVeE8\nb8VXilODrZxeEhB2TWWm/ciQWw1xgOsvCeCigtUxeVO4n1C9HjLOwGbboo/z\nHt84L7/TWGtX02vGvSIRMZgTTc+bVLXPn4Qnjh85+zLeSDKbS5DRH+xMV2B/\nn72d8FcUjhWVjurd3XNPaISqfOxS6hlXk4STVBNqbD7xk8yr4EgMjjca+O3p\nE7KzhVgvmSi/fSUJVa6QBT0FimYAgAik3za8vNiRCzBxHOiodULxNiYeB1AK\nLVkUs7hcamhjd5gtoqsjTtS5CgkPBzB4zFlv33zF8oINmaQZEUOztNRhLVbd\nOOLe+mpwVNn8XTGsMo5z6weeZgeYg6PAKoptVh462bJohfqHrjXuOi8Kt5lO\nKhil\r\n=J6H0\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"79622070723d97d5c4052839435f92189e8fb6e6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.935a51cc0.0_1596133168380_0.570285263157311","host":"s3://npm-registry-packages"}},"8.0.0-canary.74839da7b.0":{"name":"@material/density","version":"8.0.0-canary.74839da7b.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.74839da7b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e18fcff40854511555dd0c3f5b34bc10c298e7a6","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.74839da7b.0.tgz","fileCount":10,"integrity":"sha512-xpdaX1LrpEZi+0VvTwLQSOptoyRLja4cB4l5+w6tzprpZV62I/Gyh/zF6PMo+pTpseBzXAg0V22CMlr7h0s92w==","signatures":[{"sig":"MEQCIHMrfoVY/S6efNZKarR3nizG3mylm5UFvPGuPO6gTpZRAiAgIQULKM23YHx1seSCHpXK125LqF8erSFnS5KGesfPeA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIxHDCRA9TVsSAnZWagAAHTkP/2xnl+m06nxOKu0Ub8X2\nXQ4wKW/cCWzl+s4FUhUNaDZhfE//MlCvuDuZ1YCOc/l80XFgXbTT8FycwzXT\nowFxoHmouT6KRhMIz0NvipkYRzLonIczJdasBZs8pE5DpRZd8sUWHaHnXm+U\nwgz2ZpPrhQbIrzHTYCvniqr5xwUglst7rEWpO+cYOLbXhlZ1S02uczn3dTEG\nLBQ1JR3/u3cfhyVwYx2EjcRCwWU4J7lDy/1txfTZ7HDvLb/fSOY0SPV+uI9L\n8suhNg4xK8HJF809eS9c0sF9aS2/mfwt05U0WO2G8BX2KTXnJnUwL7u0IBQN\nHLhtY7tk8Hhf/b6o4s/jLdtawoZwbwDaFDU4eijVxSpk2JrEapr42+fv5qtJ\nazwZs8CHZUHlOwKeicmpQUFAM7YgoWVMGwwiKW0j7gNxcQGmgEar/OLQ+I6I\nfVggh66V16ln+NkNYCLZgIfdgOu7aJh01YJSzrJXdsMrHIWaQ5XOF4lBb2ZG\nJydcnPRpR3YYmKbNA0HwuVIKFdb7+hH/vtghh5mWFW0XKSewQppz7Mt5nnDB\nkvL9P03+5W5qdCI9MrLpLJQ1sKPRyH2iw8E2lU2Wo/d+lj7lrfseKaYxCpkk\ny2lBjZmi/oClN3N9zIxsbTU+NMWp1dZsGj8/WM33/ryGv4+FM87/2WUDWlHC\ndx4U\r\n=Z+6i\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"ad186768bb65467a86f70e827e74fee089e25811","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.74839da7b.0_1596133826991_0.17724897317291743","host":"s3://npm-registry-packages"}},"8.0.0-canary.f041a48c9.0":{"name":"@material/density","version":"8.0.0-canary.f041a48c9.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.f041a48c9.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c851158b632d035b0aa3585e3d50b4c9363e290e","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.f041a48c9.0.tgz","fileCount":10,"integrity":"sha512-YLOv9YDyPIpW25n1MouiswsLux1cnD9GZrud+o65FjDLUI2F03VU941PiD97HLJGzWYhbdJPSO7UaJZa7QCr0g==","signatures":[{"sig":"MEUCIQCskRYITM9o5giipMJ24PMoArrmTrt2oJiBnyJdj6u+MgIgJG1drdiPoa/jujvAiXmP6x7bmsAv09KtnXaJdj5S0JA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfI1CUCRA9TVsSAnZWagAAqjIP/imwUtEv9blkmagRECT8\nTKGCTgtYcVPXWPSYyimybJy4BZZkXcnYKxKVR6tOswK2RniE8EE3v4cAAM1v\nlWCJcRU3zQxlMEMvsSSjTzUSTL9L/lvm7EGo8Nu/fcRgyGjTtnSrB6bMLhrB\n1olheSRmj0XNcod8bfd+ncDiltTBAytf/OtjDRDH2X5zRKcYx1m8FVLy6s00\nIV51Dww2PchYAakqlOrmozp4hTUqAUVg9d9DiDiMsXTDqe+UNdDilFcMVsH1\nrV7vJRqk3QrxK/lzmTtzy4L7S5Hb5JbabPJDy5CaLX99YW+6SVChdrbR+ct7\n+mv3xvlyhyQRKu3x7PRYj0+v1YZ82lpZMbV7/sCtMDd3WpwW46LCqRnlxO0B\ncmFMFJgqCtsnHCuzDvEgMkALwVvagv7pf95dbK007J4a/F+OB7I2QWWw4Ahq\nK+08qfeAe+9+MKmdd6MTzsvKyfs4V3V10SRRsn13mOTARehv5PDwW0JdoDZH\nh+A0JCN+g4LptZ7bIN317n1tP0v7XCRijeU7YDN+nKSEL8ozsU9Emig1EX2E\nRzkWMBWnIvFiAbv3JWx/eaTwNs1TfoeErwAXln2s543+GHnO3bxSUOenubv0\nVhAIcQKBzZc1WAxcYFrNWRn8eGwZ70kwYV+v2H6lK0Q8tmg5z0NN5+skbTz7\nAMjg\r\n=2win\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"e37611a41628785b7c1266cd53abdd9da0208c00","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.f041a48c9.0_1596149908318_0.6451233982691857","host":"s3://npm-registry-packages"}},"8.0.0-canary.fbb1381e1.0":{"name":"@material/density","version":"8.0.0-canary.fbb1381e1.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.fbb1381e1.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7ab8a3459e6731768ab518d992ec76ba909dcda8","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.fbb1381e1.0.tgz","fileCount":10,"integrity":"sha512-yz2XBTd6FzhnO6E24cqb1J5jrmDR2NIU/zw7nWWiEjNCe98S6kqk9mkFSVylnX2czPWlpNTOslqC8RYCMuzUWQ==","signatures":[{"sig":"MEYCIQC6uyVfkAveLIVPgiVSxcmfPqVLkPg6FB7QgEAwRQNCbgIhAM05j7zt7NlOFizpgwE7N+V1XE6KkERolHdFrOFbCAhQ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfJD2LCRA9TVsSAnZWagAADXAP/0N7CeaZs8SwzQWzP+wb\n9Q9UX7+42ioe+Qbgre1U3WquqrR9eyVibHX863pQ0bmYBYaU0XNjHNSttwKM\nMrJrVDxhJGFJx2JUMjzjt436ZqcWGyFDKDZhm4NWH7SUrViuYzgf427rTl/V\nl7Ota3ozhG4xXjGkEWc6FYoOoVE6saTb/fncWIFNwJSJ8znOtuu0q8S02ttF\ncWymc2/iYs6KGrsPL4TRlea9XnJwj3WYodnMUBepMbH/dymAx+6xz9XCyQaz\nD7gC/KIEMobSkM+6mpirMXBFNMCobk4MMNMWX+JCObON3Zy1NOgt+mjZ6OrB\nQHYJpeWq7cQVhcf/xFsAonDvOJNly5zPEFsJRChLpI78tztTTKbp+lv35sxd\nZ5INnIfyfOl9Ve9X+KGaDJJFaU58kQmqUd13EtqPqWTMOV37xa7wsMWDXFHe\nc4DfMYt5PsIqPmutv8gmJRJP9Dp5Bi8/Iqji3fLbce6w+zBS+Mv6SzilCkNg\nKjeNinI8fjDUDKtQBgA+lgk/T4EGEUSgI20x4Iq4Xdn9LUeCVIRwmqvbJz/g\nb445a2OxDoQY6R378q2I7FhzIJ8FZahGFBLR/3z0ZrvYHXXC1Ct8dN+8Ce4o\nJMsmIS79LY/2X2JcZZyX/aZBgWdT4gHdtL+AaCmTrEJMPGYelrlh6iHKgTr4\nwIFe\r\n=gIQV\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"7c42a890f9b5f1bce3c7986f37f806066e6e30bc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.fbb1381e1.0_1596210569925_0.716503437373665","host":"s3://npm-registry-packages"}},"8.0.0-canary.7f61d5785.0":{"name":"@material/density","version":"8.0.0-canary.7f61d5785.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.7f61d5785.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"216bfdd1292b0b1b29dd1228e7ec8d2f1fb6a50e","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.7f61d5785.0.tgz","fileCount":10,"integrity":"sha512-SSrzrkPspSWE2ZnVJUdUgaeK+E3alNtxMLAOY4hvgVpST8IA4hySg4bbpfiRyFvTiIRZL3Z7nfGteuLGOpFmdQ==","signatures":[{"sig":"MEQCIGHRmm2fEDrRWOyLes78KaErLThHxpqZG0WAL7ofY768AiBINtnvbN9heH8aMsY71tRORycM5XMxOPERjm2dn+hbmg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfJFNECRA9TVsSAnZWagAAfnUP/1DKbxRMNNBcLz2QlYAk\n3ITrT2uUuXPYmVdf2RthEpMHQqDdp6jtom1lCxpuPK0qs+Zq/xGf/8N8GBVf\nCYcMnduPcMkEfBZ54jABPsUNF0QBpCGKyeegYKzpO4H+ZGYsw6y6eJMWZ3v1\neekJepTSZ8yzvlh3PBuLQA5k96X7Zhh1clPT/YGeb52XdnLpf8kBteZQrLqc\nCLDRyRkmkRgXVB6kePk+VeB4u7P6Vkpdr/OUnHVoQviOMoDxuXY8q7gmSdP/\n7+DU6lxOeWUYnxoKvuXaS+qvqpiEJtwh00HKAwCxQuD7jilL3W/gKW6vLeIo\nYpzO01PMKdX23M8XcG1IY0eiT3slGVk/1drN5W/W0Xt0qeEZbMFROtpat+Vy\nk5JYzgu3DFiTTnszKm2TPuZekBr/CqsBvw6KuZhDIPA8RWYP/wG+peZK2aG7\nftDdeb66JtP+HNiubMO0m8d0xD71a8a2+rKh1we3BJM3BY9rb0c0jNM8rWFV\nK5xZiP/Z2k0yyKmSoDn5UY0tFpRqkmViJxUYtIf0fM898BTYSYOdNjeoyLYj\ntSsJMuiEpEcWYHVJTc1io57GdjCFwSUxl+FH9bWt6TdCot3/dQjn+k9v6mzz\n9nGj3F0q+Pq+OWQg8zyjbb/vLZhAH7T4nb7XC7kMlCPeN9L21rI4z8clwsX9\nuuL8\r\n=Se/Z\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"beb77eaf7ccf3f03c6d830f96485010ea9e3d47d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.7f61d5785.0_1596216131641_0.08615881945316017","host":"s3://npm-registry-packages"}},"8.0.0-canary.e1bc84d10.0":{"name":"@material/density","version":"8.0.0-canary.e1bc84d10.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.e1bc84d10.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"efa95da0a0540277f4519fc8bec435b4dc4a9b28","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.e1bc84d10.0.tgz","fileCount":10,"integrity":"sha512-2bQq5NXTwBCsJ2fig2Ztp2sJQmK+KbbIvRiKqg2ulhc3Geot7AlZq3esiD0Fr911AA0eAGcm6wLaQxXemtEWVg==","signatures":[{"sig":"MEUCIBo3Bd7UcHGpC4rdXGb69yeUFt8WQX7VxGit30ViFdFxAiEA6rmFpC+HYdpbBP34XNDX56DKcSZJlSmoY9VcQABmVaE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKE49CRA9TVsSAnZWagAAt0IP/22PsT8WhVUPyfKr5nIb\nniuWnSIF6lN/5n4r76NASEuDgr9XFONHmWmucVLMfa5+5RUxHEt/OQEZOIwq\nH0WkgWtqPWQVIbGrsEo9s0k3mhq/KFvuplQNuxU6Kg+AdFEJOSmAnbZNfRkl\njJLrH0PPDR7DMRE0/fLRpxBYX2/8uoUNVpqFqS8PDKA2Cg4xDMFCWykdQVrI\nVhqKc7o3hl36F7nFfkW5BLHTrbJl1TPktT17uaPkTnoy9IUH/E/+JKxnvkoy\nWLFfdbzFrtZak8DnP9b35xCcyqmbfkuAkt9iv4fsmGCWNUG7njmvV/+5fwen\nwLUXw4z9Z8PKmlC44e5KRJICumWjSMP9gh/DTgikk/0RlIrdiOVBhFkSREg7\nKZA3x4ZTLswb45o3Z4J7SoQ8aZ0gLNeQ6oFkY9gEn+4x1Lin5feRDAKmEwZI\nc882ed+WSHU91giTZfm0zESivhU/w447SkHRczM0vEiQxtPQ54NCcsPVX7QW\nDAA71ZzD0awAngZltiCNoM/nr8LmIa907QUdSECXeXAaaetsr4/lXorKaDDZ\nEwXCnr84G+CKRTQuWbPWCM/fadD373ZgZZ2GM2V22He9vcnhvASb6DDpTnEu\nahAy+VUvLDGs2OSrDajFNim8KVqoyIZ8hT9AyJL1p6XS3aKz7PjnG+G6qxU4\n6sTA\r\n=7uuw\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"4752dcadba6adfeb006ee3689e295db016f4bea3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.e1bc84d10.0_1596476989368_0.7180824758292566","host":"s3://npm-registry-packages"}},"8.0.0-canary.096a7a066.0":{"name":"@material/density","version":"8.0.0-canary.096a7a066.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.096a7a066.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0fc2a54e03bfc83dbe37b6464023df859645ee86","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.096a7a066.0.tgz","fileCount":10,"integrity":"sha512-sGRHzwnQk67oOpioW5NpJJbAPVPZCRZb8RE1pnwn+/6JjtFtnkSMlAGfl8NMQR+VuXkoLXORA5wOjDf0vOZJ4Q==","signatures":[{"sig":"MEUCIQCKqioTPI+JZULTW28Vb8i7Qt2/8Qa5XTxenbYDfxVJ/AIgZQPAvB9BrU2wO9sF+EgmdjC0ExRePtjrWhvBeYrdZM0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKE7fCRA9TVsSAnZWagAAlfUP/jUPkDL22DSfPHBB8EV0\n1UPKZFQZ7TrrygrLRNPXS+QFlrC4pwy65a2+fS47AOKaWGeJozkJAt0C+9pl\nctn6fmRK0FrlEjvOVyzz27181mOfCQwWxrSfavw9wMJwhhiJvezhac8lvQdC\n9nJsYeycw+ZADEovl+BKxCfbmHvPog0ddwu0UHWBFtHHP6X+El0pXYbwJVLq\nziIyF1y0H3ogajW/rDwa7kAnL1j/T0eLqqpJKTyjUpjeoofnq6P6BFMWKyfn\ngTlajJXl7X0K2PcdG/lL2yPHlSMpHuU/oAhOEO+Ef91/UTOH3Rybgt8nJz29\niF7Z+ilN00gUVcZSTPVAYosLa7NM24+UhBqAT90TVH0oiQrZL1zQaIicGQvg\nPZjyXiuhc4JhomqJWNKdTxtMJ8abbohT5qcJ0OYest7PKuMADT6C1/mtaUFE\nYwKTARmg0H15drhrn+ap06Md08AloFZsWtIqK/4CiQ8RpGzcmJ5Bo2N7c0B7\nZntWbfl3PiUS+gkWVC+zN6wz8Qde9JO+SypVC7EuGSd7M45cz3fGkPhZyZV/\nX5ubY4UYwpEn4ZuftIocZj2PtakxUOdm8tx+hEX35tpye/HGrEO272den3eX\n9jgL951uyU84mbPIC9zAlo8qkQCDqcdslxnAs+mdat4w3awKK8bROHuUza6x\nwJ3G\r\n=QzGw\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"c1f4491c464cef40f62d03f687af7b443805fb7e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.096a7a066.0_1596477150723_0.3989661415716774","host":"s3://npm-registry-packages"}},"8.0.0-canary.aa3a3e5a4.0":{"name":"@material/density","version":"8.0.0-canary.aa3a3e5a4.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.aa3a3e5a4.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a4e983179f93e92a5d5a0b123c92d83e31c6eca2","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.aa3a3e5a4.0.tgz","fileCount":10,"integrity":"sha512-fQa+FKjsjK9qSTX7OLYWhuD1xehwOPTWYQo/IiIvQFi2sgUcZvDQE1flPix3ik78EzA61ymmhfGyscqZoTUBxA==","signatures":[{"sig":"MEQCICYQIsvARFQY2tD67PQ+VCgn0zsRFO120M83p+gkSRCdAiAx6vhV74sR57Bo+MNtX9HpCGcZo2LxLzbDepMUUMGXkw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKE7xCRA9TVsSAnZWagAAzTcP/3JR2ZXyZMWJy1j7A9Qd\n09b3nvBXztZx8H4dA4yYg1JJm2hYW2eo86q57FUB5bAgCU4Q67knhGxULDJw\nz3DJLG8f4wHa9oackkCmypGbB/fyJv5LWNpbuAqwDZXTlJfMKB/gLfNPP8sJ\nYWwqn215eDDE0vdZct9Q5wjaGiSrU+BrGi43oZjuwToyuARUfEfgIo/YHmuI\nnHGIniLD4qjpJFSL4o5+ciY4PJ3kTGI0v9uC3sCVGUFq2On6Ci7kCvUWRynH\nku4/NiPDKH/Zg56/zwftIWOybbSMd1RzgdMsBYKj1+058NunZp3Di1IFmNqJ\ncuISvINFJ3pH1VaY4cbyIae6Nj2D9ySfa6THTMId3LCMHo13/GoqFLVf4CP9\nEKuK9/IJg5qgK09XJ4SWq+M1819w0ISb0d908KaxOSklAf2qHUlcS3EvGZxv\ndQS3QcCoMOQaRujD5MHOFqmAW9vvUu5CJtVSu48qPCbBwBXDAzcmXPOx0mG6\nCKuZR8UC+4VT4codThdiL1sP2W5JWBlU2v6klWdft1AHwSXHrcnHmyg78UR2\nG0PQWnV4TpZSvF7y3nFVh0/Qya8AEPPyUcJF+b1iFxwwRBQqCXhcnPm8PJf1\nnJK/vMJf8Gxh7sfwPSvbkQY5fpsyL4vwOhXp4gEh453skdn1qrIcCoxHD9Y6\n97zs\r\n=1QO0\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"8e25515e9c171e19310cbb58630a760408b78c80","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.aa3a3e5a4.0_1596477169163_0.7031771494385928","host":"s3://npm-registry-packages"}},"8.0.0-canary.5903d39af.0":{"name":"@material/density","version":"8.0.0-canary.5903d39af.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.5903d39af.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"36e470d18a37a7d66cca9e99d9fb6575b7cf1afe","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.5903d39af.0.tgz","fileCount":10,"integrity":"sha512-8pGwOO4HRQgP+GsOYlWHWOgWM9no4B+cMNpfsn/cYV0DOpf5RzEnMJUFQX1zU91JWSxUflHmhcmfjkfgBBFc0A==","signatures":[{"sig":"MEUCIGJWS4esXQcPpOkRcqil6lE9X/N9wbpLNudI7Q+JPhPpAiEAzQI+2Sg9SZWrHc13nhqBk3eYaiN0fYvl972NvBAXI7o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKE8ECRA9TVsSAnZWagAAWF8P/2ZX7G+BarpaLSRihRfc\n/BjcnQmI4lQ/XkjYYWmxJ+MbKXWE0b6EqeeHUdNRH5qOjJfMYhwD5N2DdzVp\nXD2UN1Ny4UbSwJb+oohBgEYeGugxM9dfy7mx5AZDdCIqZycZFhie+5EuQ50h\nf1jBKs4X9wgcVRPIo59FC1rWKbulQuhWY7zw6icK64XIuly59lo4X8GBFP12\nGFTgcLmTOUuz75NlbgvD8EutcbomVJoO8rxAWpNQbQw84MKpb8GCT9gxK4wm\n1oE9huQ/0SHX+8xp2ckeUC3BbQiMBQT7i+BIFpDGx4qm6VuG/NLstL9CmxR4\nzne7GzLJ5eKCgFNnpr4N0rLKfYX3Fyi0qc+qg7Zpz8T7Iwm338yWoQ0AjrRg\ncNZioTqKrJcUvD2WCQII8Vv3oIaja8HXmDslosEBNsuPKW4NQbw0+5MgB5U+\nDD16e8BpOIb4doMjuYWXbO/SqfLuqTFu16L1iwNiPVrFwAgByVZln9bN3jL2\ng9rBj6Zi2ZfdFfWXIfBLT/4TvxQS8VSGj2TVz/ToToQP/xH6Rqszz9IyzQXm\n7aZjNHnTC+pN+qe0/JFSoMursl/dKAJZZZdIXJgS3Pk7CksxJlk1gcWVlkqz\nTeGZ8dsEKIjLGpjFlLKgC1B+o29AA/6eKKIazEbYplnoxiUnik8YBQtV2bUS\nsGAZ\r\n=Cgdy\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"8a4f2eea8ac8483e7e0a1c93b141ea9dfaebaf4f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.5903d39af.0_1596477188569_0.2774316869468283","host":"s3://npm-registry-packages"}},"8.0.0-canary.72258f898.0":{"name":"@material/density","version":"8.0.0-canary.72258f898.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.72258f898.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9272794caafb21dcdc6bd9912c5bbca07a16a7f5","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.72258f898.0.tgz","fileCount":10,"integrity":"sha512-FcvzduLV3Bt2f3XkHEK19cnOX8RZRGgpVHlX3ca8Yrej2F2F2T9QQS3x7BNg3SAkZ2U3+ApuHo61d8udTg9oEw==","signatures":[{"sig":"MEYCIQDEZJFq8tIdH0+oNhv5iGCQhVnrGP9dRxnGzdVbfsn/cwIhANLc3Dkxj+yGidGxERHOA+/CzNn0D7DIJ7mdwtO5PsmS","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKLboCRA9TVsSAnZWagAA8N8QAITQQVJQvPzkUmZj0WG/\nbKG7VXPvEzo/Rz3Op9IX65Vl5ILoR1me8XTuo4uMYihskp754lKghxcPq1dp\nUtidbITfX6smvBG4McyGxkQTV8/ux/9+QaifCjqKKMhxNc0zdYpOFDHx+erE\nFXrOGkhAQ+lLNbi+YyiY8BTlTtrhWHkKGwO7mAnV2gKzkZNRpXeuR211FG89\nch5P/kSz4PfAYrrdjkJ48KbRr54HZBHh9pTbztLAO2DceLXlvuImcM87uQPc\nCRJhIGplXajUhvwprLcXiETYAr1VQTpsvm3WH9uqxu/IweE9LryyulP31OlA\n3beMEPD1rlvWYhZzoRltrs+LtYIS7qQ3hKhEhS7OnVjhdFcrTG9yXc3y8xSR\ng5/HLbFXSgdzXLxPwXIdzf7uIPa0OWzGVunx4G+K91XnM5INIkWH6YqHu4hR\nB2FZooJQ65GRt7RKaWCJSLRr+rJyAQHb0iHmtiebxXt+30T6nhWfmYAMY5YC\ninmpO2cyY4yFEWhzZCGxjrtsVxPo1EldnA4ehsYGtBttHPNipptAOyV1GsdP\nlQHZk2BycJgE9iyNJhzah/4EVSGUZqgWI+2/+xKuRdv1OKV2qpTGp1RAaMMT\n428A4JHhtKG4+E5G0PWLne6volS6pBYeYV10gZ15kvF7jDzE/C9MQFdnLzyJ\nXn1D\r\n=1wiL\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"ff2c64799ee2d684ba36b9cebd15fbe0d0ed17df","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.72258f898.0_1596503783283_0.4780944513354053","host":"s3://npm-registry-packages"}},"8.0.0-canary.1b44b43c8.0":{"name":"@material/density","version":"8.0.0-canary.1b44b43c8.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.1b44b43c8.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b20a626ef4d56bda47417235968869ed143b49db","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.1b44b43c8.0.tgz","fileCount":10,"integrity":"sha512-Lbq8xf/urBEnVrfAmfTvNlprBsrqKgfViIY6/8Q4DQnEBxQIARGS0JDY5ACIyfD8ZZ3YkI0IeV5UR152oOqt5Q==","signatures":[{"sig":"MEUCIQC4sqheFDf2QTY55ErgbczoyjiWzHONAZk0OjEWkDJ3+AIgbTMGZd4d3GxG7HETzIoRxYNhrgxh3ZQ/NvzTQwEiXcs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKZESCRA9TVsSAnZWagAATKkP/Av4AYuKdA1nT6OTW5FM\nOFEypllVNcCj98OAxxL4OhpE+1STm7DfzWQow7oNh367rgJ9QCrCD8HMiH7b\npcJyUSjCPzQ2Qj1c7Hu4QVGvIlH+lLS/11xti+eaRfVWhd+xMzH+IjK9TBgA\nrP0PKW/3gOCZYroXf9v1bRSKhdF0F5iFM+mUfWB+pUtnuL2aRuTIAjnd7nG2\nZGVL3qOh6HvkDVWR7Akj80p1Ol6rp/h79JhExQbUQoe/tvYf9CaI3XO92PwV\ni/y/CoOm5AWmtYJFRnpK0Q4FohO6Wxf7DQDw6YSqNuxjphhrwSE5/Z77IFpW\ndbhqc/epg5KFIkv6C2TDUXUw+gNV7hfqlA3jAMQsBagQ/s3L39WsIiwbn4xr\njDoaV5pxHBazoeEi1hBQYRlWbC5Mv1HEyju7CY9fT9PpprVcMwev5lcVVGc+\nwnrsclYdDPWO77dmilpNaOzAdkrybUXhytmuD3IDxCfZeck1oyEkV+cfvqho\nuM3qo6hCwaol+8fd2bjKIMiLp9RJ2E2d/kToZwF5Bjo+Vv74dS71vA6VSaCw\njdbJdc5heXnk29tIdD5DsJEEJQp2jKbFlVjgdQqY161kIjodjeDzRps8t2EJ\nWiWXNAiYwymVGlXgLOUVvRtFUA4GlJ/hVGE6pOCUXc3lQkBrQBSqJNqOmB09\n/nXF\r\n=TjOo\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"69ee70c646249b45b57e59e958f1ca6d8332dec7","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.1b44b43c8.0_1596559633793_0.11832061348261069","host":"s3://npm-registry-packages"}},"8.0.0-canary.e9d2e2f96.0":{"name":"@material/density","version":"8.0.0-canary.e9d2e2f96.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.e9d2e2f96.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"db8d9812f2786bc77f562bbdf46b0718296de82a","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.e9d2e2f96.0.tgz","fileCount":10,"integrity":"sha512-V1LhmDr+NGWRmRlkCP5f8532U+H3q31m9SJVRx0HlAXcnHnHDZtZMp6d/oKvKK/yoqxYA86k7hqFzMWnVLocTg==","signatures":[{"sig":"MEUCIQCELmJNDyS+c+SEYe5bDEP7tg9zcmBH4YBbZdkVd4lYvAIgLAfZA+GqZTdPBFjnYSPTQ34zBB0inj5HY1TXi69cO08=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKcO5CRA9TVsSAnZWagAAjVsP/2ovIH9YKjojKGcFtWkB\n0vg/uGFv7xFKAhOkAE6c0/u/nrrlHFEvOQfYrWiUE1tK3NTo0R5B1dg2cuX2\nuL8bAI//3yU1izhFlNvZh90PTOVSje+abFikSJVDuWMZaU/UXI2SrKCS19Ok\nQcJVhyUmWysLt4KWmEjtnRPkP3zpXAILgs2DAumLSYTFn0Ntm85vfxyJUOXV\nBHFw7B0f9GEE9WuOE/yQqIcHZf00NyXNzpAtbwhEuwge21ESwZr5bum4t9f2\nwJ3956JQDfFn78gMPPc4aTwNRxI1+62PVg+xQIjo1/4W4hUXIP4DfU1gHvO6\n7msrz395rkFzxyOOjjEWaVt7ULuCFn2no+WHEcK1wpI+e4j+44gaGikUcpiW\nTV6LXnbmBsjHwhTl7M41CX3ZLHyS5NfSW59RBTlJTTs24+YizvFOGhhSgXxi\neqIh6K48asyBPjwluoqmxTLuBBYqIf33f3Zifp3bzyt32hnS0+Tw0mwcHNor\nlRq2l393EXcj7oAYH9ZhXpUbtZj5Ustj4jbxDUzeF3QYA4jU0Aek23AXjJZZ\nJrs99AueN53Z3hsEymrwmd43D+aMYfrZaCWaPJNfEWb5o0obxyo0qFoi+LZB\nAQOjJhW/mTCyYnHDPggRmqRBOtrkw+kyUUW8K5YNlI23Go2JdNwM9Zm1Q3yA\n984X\r\n=SkjN\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"f6bf51788bc1f39067fcceced79dcc12b2c59caa","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.e9d2e2f96.0_1596572600948_0.8140677486312116","host":"s3://npm-registry-packages"}},"8.0.0-canary.b9dff0a19.0":{"name":"@material/density","version":"8.0.0-canary.b9dff0a19.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.b9dff0a19.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6c2cb39a8bb07b5922b640558c984b64a4461498","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.b9dff0a19.0.tgz","fileCount":10,"integrity":"sha512-/48bRZrmZghfpCCXtiNqAVawpCclbC4wjUnjT5ZBhScj1puVzYB91mkXR4EV2iP906ON88jm24wfCT+7AeXXFw==","signatures":[{"sig":"MEUCIQDxFxx8vfWAaJa58Q1awZFMwhGbLCuvBlb3ZJzA3Qjj0AIgPYnhaGMk51M53ybldRAcVrIPhchPS61yL1uZRvl6VH8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKivhCRA9TVsSAnZWagAAT9wP/3ZQuwMvt5d1zv686P1k\np0SV2zN326f43O4tHnOcToYxcMQvZ/BBkR8yabm8UEErcUoM73Ayk+G82D49\npYATiLUXXa+gOzOGQ5iyG5P2t8Ojf7uGEFSgm8YiWRSZ6xx+zl21BYiSskpZ\n+O0EzPDf7+6b+TM2wdciNWbMRZ4nzgU2rFLcjmTLxoltQFVeKuLr6shYCnL7\nxvpxsiFK5kf+yR9WVCfgkqPfGjw2OT/F8NaFNmzYXxhHpGM0qEQgy9F5cVSx\njOrrAWkZcKgQOHBsiZsW47gmSktq7JOssG7dg2q5+wbXP20Hj3HPrfI781Vd\nPcbELLu3a6QReOTheh9s9nlK8qNnUE7wEGpKOrT1P+hx1ol4L5z2RWu9Mp6t\ndCu9ya4U+Q0Y8iRp14oB2UXtE/fZuylXlm+NTuNEqpjkTZhBiHHSKBqQcQF3\nyBXactPNEhs9kd+cVj+BCHRLFRvT/RGQ35JJccBDqEn5jaSnNVWAR673bZiA\ng4nJ82ASC1IyxH9iIRgm2LLNxyFjz7cvr9jgzwc/BgYlmhSn6F4WInv0CFM6\nfTInUk6Gt825PhEC8XznIAHuKlBGr9IMEoiqnTYe+HGeBzKI8mEwBa5HWgaJ\nABfLVM9pM9aRtLU1C7EdK2fiyKzk7tK83hMrGlAKnY55JEy8/cEc8bPESAw4\nAcIc\r\n=GeW4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"dec2f9fa4c83e98bee860646fc2a65b134a7900d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.b9dff0a19.0_1596599265207_0.18846478382705567","host":"s3://npm-registry-packages"}},"8.0.0-canary.2bd09a706.0":{"name":"@material/density","version":"8.0.0-canary.2bd09a706.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.2bd09a706.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d416062ce2273cbcd43f134e373049c47e56a1ce","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.2bd09a706.0.tgz","fileCount":10,"integrity":"sha512-4e+xwX3me7aFb2cDf0p/QIGIdrh1lA/sgvR0+3XEYyB8YmDIDKECYGDL0uLncp//YnjUSgKJzbketbTO0eJ8Fg==","signatures":[{"sig":"MEUCIQCg+7+sbWuoxkHU4yabGPTEnz781iwHnop3DVvMZTE1XAIgIa+kQ5P555k8lirY5aauQjEObjwV5QyY5B9MfWGPM/E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKi0WCRA9TVsSAnZWagAAhoAP/3eXEfTPRT5UugGgemuq\nhk0J2kUlf41SVASVsN51qMVqD1aE6e/4Y02hX78mpP35zj2Kc71S0DFYcH7a\nIVgAuRQTHJuhqVb1oQBsViTip8TsuCUgM3UHfkEH5ZtjML1iLIzv2HPOq6aU\ny5sJZLQZm6fwNVlLpEg/Vll/n1Dwm8L1yupIUjsZG+L9NIFncBEUm2djxzpu\noL7t/ckdP5tfOV96gZbLWM7Fq9pdnwsucCgP9Rlx71WaEk2ZrQdwaEXzcS7t\n50fZuj7EjEloB2PKOHbC6jM4FTY+OjLXHPcsliPFOEHPgxaI6FO6aHXCmQxY\n1+Fpiw1oTdjvIZ6JWForU4roY8N7/MWxWa1oMcu+rDIVWnq1zw/1xmuHLOoG\nCXMZ9bm0FVR/ODUul0QLUoCYog8anl4VrRAGA7p5yIFDo93TBzYSYRcfUXAF\nLCiPO5WQcs5I02aITDv2R8o6Rp5iYOdKyXq+ypNlNfH66PsGMGSNOatJooB7\nQBxkKkBlIumMOfXMDfR9Yqy5WvvYRmNRKJ+tTwNbC9j55hByTCl7kCtaZTlS\nVtFil7nMn1/AkLZyLDltB/oMAtUstKAO1KcUYb1WSaBrcYviRNQ2q/IKd5Xy\nISs9FQTuFzfEgTQr4CSBBTxyetiKYKqdCptgn9kBn+fc+cs9DsrXlZCS+BXK\nTFIh\r\n=7tzX\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"c8b061f3fa8ffaf5214e79fe44f6c575216a1808","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.2bd09a706.0_1596599574399_0.29182881661133253","host":"s3://npm-registry-packages"}},"8.0.0-canary.e0560522f.0":{"name":"@material/density","version":"8.0.0-canary.e0560522f.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.e0560522f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7a5d153f162d2ea318320d9dfb7f53c4cffcf5f0","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.e0560522f.0.tgz","fileCount":10,"integrity":"sha512-FthiBB6TUdFC/zsRpvoAU4Zccb7lK+6uOM+reoZFsC1yd7+m7KNMjkVhG1X+KEAdOWhc6rx+vJTJUSsfNVtAeg==","signatures":[{"sig":"MEUCIH7yqxuzgEhVxdzMVhngMDfO+BNjvf3FqkuSA2VBcpV3AiEA38jr3+0w+kNGPoDPfyyGnJ95TTvvvMjQ6KS9Hd7y21o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKunxCRA9TVsSAnZWagAAD6AP/0D77/82J6JXHgP9GyTI\nogtSIw3AXQNHZ4lzl9R1M2nhK5FWJzTNo868aMEQ4YuERdulmCQo2Ct9RZU8\np2/CXp7RP+XPCnXROrnEIDmdYbO57fX6InkyJOPddukv7PGdrSeUGzAY6Fh7\nXnrFgV1MTju8mslspofCWl6pjiqOJQwkIpR1W5Svg60/91ZbkUfNDxUJc/FA\nIUhQcehJMJb3O8X9W2VIAav+n7lIibIoSY5wf+6dDvHu7yJ7fgfudydC8GKQ\nF7IvhF1XVlyaHG9s8x45PJ0CK4Yjb6TVF/Y1yLv0ZJyHSvnYoEGXRTi2E9sk\n7wvRytzX0SEgKzh/mSIDsJJPcDxCduWpgHHOqzaf+Ai/hqP+hgI7XXqbJ+IE\nZNF85lcCpOfgSMgS1unoNuGMg6zHvZ1XRYhRPePPSYtdZHdTUoUL0gpUrLeb\n4KY6XhVlhRhfs7M7AQLEl7KP+Ly6j4uFb6Xo6yh7AtuxNSbw/5hK4OO8tUYZ\nqig3vtu8EVvbCF4BWqdsrmGrj0Fh6bJW22PJVdLUvKX+pvkf0QFYGexaBSEL\nK2SQGEeFPOf2e+OoLXPQ2xQ6EnDvi2cSeWgug+wJ/gp47gS4Gx/P3IN4iPgX\nr1F68u3Bo6HxaUP3aN3AwWUalozbM1EvbKzxU62XTDh0y6rUzcYiK0hbRQIX\na1y4\r\n=GomH\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"f4f71f168da3435c5dd1bb74e7ae0c54fcc45746","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.e0560522f.0_1596647921492_0.007472001914535786","host":"s3://npm-registry-packages"}},"8.0.0-canary.08ca4d0ec.0":{"name":"@material/density","version":"8.0.0-canary.08ca4d0ec.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.08ca4d0ec.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"df4385b1eb7ff82338b4c933eebece649be108a2","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.08ca4d0ec.0.tgz","fileCount":10,"integrity":"sha512-bHpH9gvf5xiP8A0NZxn+I/LHFsCMdIp8m/UIbkgqQGoB6HumVVeEdztK8TFaMs05SgOH6tCwZjNmPOkgUKHe4w==","signatures":[{"sig":"MEUCIQDlms2Aai9/pizPkBSRKbD6HA79NTOmxu7LGx/ABzQXzwIgTGLTI17Vvk2V8T6IDEKfY3DJ4UuzYvbbDy/CE2Hm/2s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKu6XCRA9TVsSAnZWagAAw7kP/jsnGC/TcxoUf91mkx5T\n6VdodRJWYhVxAVbZFA6PRxeGa0J9PUn1tt1olYLHCrg2p7dCpCh5xqNLUq6V\nAopkk1B8jYTu4iqxtnaiewAQNZf/aiyRdCMVCxvg+eEZMVzPCoRqOttLSFGH\n5vREGXSJW+2HOBbDxmTe8tnTcwMoX9J8QEaUdnYH1qwY1mRfbK18yHipFfQ6\ni4x0WqAGBWQ0CMlC/nzV9XG6s6zxafQn5T8zb/nkS73ZhcT6uHFUOvZzmS5g\nX+J7+VIq7ta7H0ZMZ6+cLLAL/Mb9x7CS8HKlV0UBuX04sUgSRE/9kPixQeKe\n5xyArZzOmPRUu5YRVShL0tnYi+g/7DGeezQf5mS4I3wSwSY2PyfqhTSWsKbV\njTrQt9V9KyMPirQnRsHv9DBXRNFYprewcP3drzr/H0/EoJDO2TE67VCFAlTJ\ng1mZPhWAi4MHHSYidii3NhP6FVG/S7HhD4Z9tPSNVuS04aWHPLC0VyxreXYP\n1pnDXSMKSFwM50bwjI7g7mKv/OTsHovibQklHsDkXTBjS3a1ECDqqmOi9LB0\nhE54A4KfbPROH8XCI15yJKKeE96amvUSVtoLMhybYkGpYNBDcAbJYGh99WS7\nLzeIXLm2QpooUbSsajGBFlVJFkVuqTSATxeXjI1OBimVmqnja6dt1q/vKtJ+\nS0fd\r\n=jtQ9\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"e525a44ae67401224e06885b43f10017ae70f9af","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.08ca4d0ec.0_1596649111148_0.40131062812480023","host":"s3://npm-registry-packages"}},"8.0.0-canary.08090126b.0":{"name":"@material/density","version":"8.0.0-canary.08090126b.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.08090126b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7334ef52022328175785b46e34ba01de1366ea9e","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.08090126b.0.tgz","fileCount":10,"integrity":"sha512-ZOQxtcqgQ0tdf+uhlpLcQpGGpY+7Lo0COHmMdRVvpuy5RSRRA9ZJtWDYUzUkq6r+AvA0OQREXz0LOXznyRd6qA==","signatures":[{"sig":"MEQCIC+BwTmTiAnxtZas0UNzc6FUGj46brHoZVpVF3NncZcmAiBUCusedNVnz8vcOgce3GhX+pveDkapRB1zE7f2HGaUNQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLFqiCRA9TVsSAnZWagAAiEsP/jHKRyV+ywpgJwpxIxgJ\novxK/28zHGr79gaJZxfXZLNKP1JbJbUSTSLLTioAY7YHCq/YvMtqdBJ9cugS\nM0rIMZ94JUK0PlM6caYFxliHM+Q6qMvWZ1Q/qk3+ZXxOmbSl2kl7Lt90pDRc\nKYZlY9PuUF1xvpotgwTD1V5e5u5BqJ/b4bQ2KhGVaiLB3zrMaB5flYFcCHxC\n18lYX4wOPIcGoS0o4sia2AtFbrp3xd1RspJjW9eKP2F5/nwszDowTfnAshBm\necQdh1sGz6kfXBXfofXFj1WaYCwhyjDqesLXGpfFTHYow0OPJpCijFNi2vrz\ns4Ldsyan8F9zVg852N1dgUBocbQ09+eTn9YU3dymaqKV+zlD7pPuxAVMvuUj\ndwzoOCvXrQvPqr5DOjCx+jhxNgAqzJ1JPE5HUC21lQGTWPROFWFsZwcRPrsB\n+m0pPeZV5Z6l+J7ipmS+prCrDAwiJ221EokFDQDpgYYrGJ3S21Xk62nLOfE7\nm6bqKNQiZg+cfYmH8QsZSR/J7C/nrDRx36UDrcgf0zYq4qXJLoVIrmhaalwa\nlKwcIHxJX0BTetkXpXpoiUGoKGOZ8wrMC8pb/1Pt54NcV4bUxxtrmo5GkMFR\nGb5k37ICGjKLc1P6UG5vJ6I5D7PTa44s6KyEIPloBs80R21jLNYX7YdW/HkV\nJyue\r\n=+zEV\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"92703c0a9dad96887725176e28a4ac83640a3b34","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.08090126b.0_1596742305748_0.26856182242489535","host":"s3://npm-registry-packages"}},"8.0.0-canary.e8bf5b2ac.0":{"name":"@material/density","version":"8.0.0-canary.e8bf5b2ac.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.e8bf5b2ac.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e113d0dbae4941a9f7054552caf0d5210e6b3970","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.e8bf5b2ac.0.tgz","fileCount":10,"integrity":"sha512-/zXJh3GakHd/z29tRf6koxpY4Sft9m2StnQpKSi5FrMFrULDWMbgM+nPacf/14Y4ZVyDWjbtrUV+h68OuH+77Q==","signatures":[{"sig":"MEYCIQDN5Y2RfrO2P9VpRrAJvfVZaJnowz8Jp9Bpf5zCz4Sf0AIhANJzUjWgPLmVQpe9LSRXKZJuD4P5+uA13/LT6hym+/06","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLHrQCRA9TVsSAnZWagAA53kP/jvrMdIyW1GZvCM6gSLM\nvR+bfgghP4V0bV9/P805N5divBsCISopLNj/q92UMAPjeNYe7NDlbprtyklq\nytKz4mIlvHxKkXON1L//eiiiVUmhgo6kVUqlhjdb37W8uEpMyQ6W6uovseoC\nD8e/OUTjIs0NpxR9yZh/n8BiGVGJJXb+4XDM6xKXQNyTcbA/3K6HUeo+TPg2\nzO0MOE2eZjZAHBilL7MgOKJ8pYTSRdeis5ezOL/gEiAu6LX3fhwuB0r54GIX\numyjs0vAg93yziBFU2s5bkd5NJWP8YP3dQV9e2JKAkcPKiTfVqnS3QWhqKBJ\nQqB0tO+mrWs4Q2j6j7gypmlR7Ka1KGeUVha+hNAI6F5ZvDIa2UnsIsQ4w/Op\nxRoXikZHSHu4GoOaBrMF2Sl81vH4RPfTYEHTPSddwAqzwaU4N/AJNdxbPoJN\n3dvbZWH+WJjbFhCbphhN3eHwLv05t/jOwGmsN9wxLWdEJrVwE0kquG9/2koF\nEMOt50p6/0of+bPiTC7QM2LHoBkSOdcyZktWw37mv3nuIN4+j/ZLDY9Etlxo\nao1qRvDVCssJxTdRUt5ltxwxsLWDI8bUbAJvhaCY/Fz5v0b4dbH9OzVGq1gv\n3RgMxxfvNI67SZgkRHQGW19ofuKkUZ0MfHq2sc6l9AYdOOzjEq3WCWESRteX\nY02M\r\n=kNGR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"d5fe47cd91dcff7cada8ca9b587eb8a924a211d3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.e8bf5b2ac.0_1596750543614_0.21189547614110404","host":"s3://npm-registry-packages"}},"8.0.0-canary.e3b746208.0":{"name":"@material/density","version":"8.0.0-canary.e3b746208.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.e3b746208.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9cd90dfd97dbc36e0c0f2f95666d4078d117ea18","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.e3b746208.0.tgz","fileCount":10,"integrity":"sha512-SyS3JFFHgO+UWBc2nWxiw/l/iwB7h0x6aLxd31Gg/nIki09z9n/5EGar5Wmvv9jqfDH9KN4msvfXGwsvJByHIw==","signatures":[{"sig":"MEUCIG0ZxiS2/XlazCv3u4t4d+G3wzcXPlRpWBK56AADLevtAiEAoELHK/ubdFlAcUQuexPsQ3/ufnlUpmxvKBUclesbpv0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLINrCRA9TVsSAnZWagAAL3UP/RNadDyRetDxAzTH5K8U\n/rLZxRablZUaB3IeVGOrVwExOYsCjPYZR5GuKsqbZBmdjc9MQBunZCFlPg4l\npl+Oe7J4gN/LFrHDfFp/DL09AwYvzFQesVG3Z5Mq7uT13VBNeJ5rkR4gedoS\nhYUc2FqBPc77Wp8ak1foZlGWiaKyi4u01xH6Kecf/i+AzW9fbXG7zn9agOAQ\n1lGASCg6fEYTakGugs9KLQNs2St0PFTSsfI7gCfeKzc2ShELOyk/oc7bpzF9\nqXYen9LkDBFnNyiOmy9kq69sQfRmzOaEbrNtzug/kKZbRGMeAFZby5JkW4tT\n39uHpW5iPDJON6yRu6diFZtCU/9fKH3RsJiHCITzcN40amybp0auGVAu3j9/\nUiSau75X983P1y0TVwmgFFrInE2Eu2VkPB+H0V8ViRxlBP3eHE1vUddiK8YX\nq5ihX7vCtQudogAtv5EABd+p3fl69KqRt2GvLafcQ9zoApMG80LAu2UzUb9G\nmq/OmWVsOzH7cgD/VDrplpYW6qSghK30Ewv/NOP87FnD0FGNfpj7t20DM8Eu\ny3vj6peJgTOH6Ho8NI00K32CX/vxkekjYVArYkaTUOnM6Iz+iXU77Bbjq45n\nzHiDZsa1kr4Acs/jDyLom3vbBjOoIQTxNwRt2+hcPA+odlo1wE47ErG4HEXu\nfCPj\r\n=ChsW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"565f03445fdfa2cc653bce8f5c730176a406e5d5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.e3b746208.0_1596752747283_0.3233329567170542","host":"s3://npm-registry-packages"}},"8.0.0-canary.96a640534.0":{"name":"@material/density","version":"8.0.0-canary.96a640534.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.96a640534.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"03d98febb913f6a4dd4dcf459204e8ddfcf8ca4d","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.96a640534.0.tgz","fileCount":10,"integrity":"sha512-B2kwpQcepAi/4vUXbVozexa3+LLxD79UjHBEi0giTuAo1rnNUTY48JtOrZ/jdDMin/X5uUamUV+inVaxIYXrrA==","signatures":[{"sig":"MEQCICrw8bU/mn1EfzrN+gXepeZ+swu07vbwfTyZ9xp28LGTAiAMYxluO0VOgj4hfMhlHaxEQuOeXZyDSnRFUespuB8Xmw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLIblCRA9TVsSAnZWagAAE4cP/R3EG6zlet5Bni0aim8f\nSauQDS8quKfLCcVcKVnaCevlMqP/gYrOkKdknHHMc28Hf3FjX62ZHN221Iah\ns4+PCZBXwPGRoAQFy+5+EA7bJCHRPaQ8ZwJseMsZN90vmCGcps5tpDpA8vjZ\nPNp0e5KcgJjU7sAGuXOqSL1wMfKsnN/ffbpacud4FCvkksnw2Ve1W059PDkQ\nVyObosn3Lr3WFubZrZADbrKLkghDkAWciTruFN6CNqib166TrG7uwfusEd1i\nJ1asxiruVnI7KBl68r/J8xYuUORLnP9RobzaIo9k+l3jj3S6sXWvOvtZzUo0\nh9RUsgX42mKLEcmYRphVpfoA0xJSqGyUL3N5aCj5i0swVfcI/ccnDls8AA1r\nXMClSS61k2X7jaI5sezaIsAFjzX7hB55v6OW94+TxcynaIjOAL0l2GdY16Th\nVt7ep+Q5LBcL6sZM7f3wxREM9Bh5yXsW2xMJleKKrsm7ACWL1ddqLzQcOXoL\nDVz+XsHC5y6NC+fu9d8nSkTTkXp/Fao6I8wXFcjHm9e/HOZ8E5lWPfbCFpTi\n+WnJfhxdTvFQktHALGSZ9s1HQk0sHTBoUhEK6uRlyKlwzCL3/PofYvWShsvG\nWoZMsfLXbOyX8ce9v1UI8cOUqAkcum54Ws8g70d4sTY8BLSW3vYeE65EVver\n7pSX\r\n=RzsY\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"3363a6ead1437d646dec8eb21cb2d5c5323e8986","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.96a640534.0_1596753636996_0.061859925174013064","host":"s3://npm-registry-packages"}},"8.0.0-canary.9f9aac825.0":{"name":"@material/density","version":"8.0.0-canary.9f9aac825.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.9f9aac825.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6c4933559c935f7a87e3b3676e4365a0fcfbf492","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.9f9aac825.0.tgz","fileCount":10,"integrity":"sha512-OoCjewKYNe++oSSF5+jTKk+FvkP9kh/wG7bdNlz8AObX1v8l+DfE+pMof1UvLcVXMYBajQ/otkbPWkqu49CplQ==","signatures":[{"sig":"MEQCIHYcnYPJm+onzozWooIAbImwkcfDzfowrVCMLARi5AsnAiA76uGNZpnuWjed4Gp7BFAtkI8pj2F6Vwvki42B7LLNtw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLb6TCRA9TVsSAnZWagAAeOYP/iPvay35MrCz4JWPQye+\nwHfh+ZRLJ2PO6iKE/SaSe7bYSj3lDQS1BWRRSDOFEQq53MOxX5hE6GBm6Uip\nLy5rUreIlgFgbfKe/kk2nBn6lphwlEiJSQqWqEXqDEV8Ykql1w31PJNc3sr4\nIjGZvmnxRvVVuLA9SWkhpiamZArGobTEHChN6AZ1cZm2HNZ7SSwV3e8sKvjX\nSbZozLS4gDUlu3cuklYtp2tsB5In6QILW3Q4WnUYqV9FcToEo2IhBgFrBJKC\ntVHdoAEls/FSngjvO+Cet3zT3qph2aTf5861B02u2o70mVdxvpiNRo3tqmf7\nkVy1jVsg3nrTvz2DwQVbXtWecZAuY24op/hPw1pXasZVTuBgmVSGKlwEig+h\nTkM4e0G+45SFBH7HI4VcOuhVkdX74/65H+6V0HQeycsDc6dgk3ixjnnia8fm\nYE0jnZ8OdRdwdPDZZfhp3G+HEvjXLalQxjfeJNPcv49Ag6FFpfQWBcBEsomJ\nvcljDcRz1ykWSLTpB+fTbsB5v7fOd2a6WJbaVYc9BJjvYoi12LounZbK9fZw\n4IVxTDfSUCiS1J2KpwPXuDwLh0tKTUfCBhHCx17SLZYEE9xkqZgjpXik7hhJ\nZiSwMkkrApmEcdbXs6KYdfsIgNn1ihif//x80E2SF1iX+KkvD5muj0boBPK+\nud/v\r\n=SoYw\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"b417a722353dd60a63448761d24a06d325b83f7c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.9f9aac825.0_1596833427025_0.3882661582181106","host":"s3://npm-registry-packages"}},"8.0.0-canary.fc65fd00b.0":{"name":"@material/density","version":"8.0.0-canary.fc65fd00b.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.fc65fd00b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c7d4e02e381c91a8d04edb7f0d11390d366c8a38","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.fc65fd00b.0.tgz","fileCount":10,"integrity":"sha512-Urgh8+1DQ27fkmwm06spUk9DttoYiT1DfA4/75/GYTjekogTob7rKcfk/Al2BRR6AX75Kp4cmX1Z2yL2yOtmYQ==","signatures":[{"sig":"MEUCIQC08O+uTZ2n1GFZPTMUu3L5vnDvay7ZCegBSkikuJEoUAIgZZt4Oi3TmbtExrNT+hljOEk7xDuJwBMbB6B3SyUhXS8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMWV+CRA9TVsSAnZWagAA07EP/Rcpt3BDuy3bi3maMj/c\nvK3y1NOD+730+/lKGCuoWr6R2ag1oSRyVfZdVTKH7U9ViPTNV64ao4t3AyCr\nmkp2Z6D15Xzcxog/fKE+tPnhl3RHlqpsDoobAJ1BauFCCF1dQSuZF/mX04BG\nLwkI5Z3KVWlVo1HN+GQJ12k/Cc6gswTPKwWO1vuJyOEGsX7ORGEYp98mMvil\nWDInswQ3zuU1YE7VIXK/0If7inSQkiU74BrDT/76BtLqG1Rhf+4t6/6r1yGT\nCxJu0NhQWdIFdNnc/m9Ub7OJl0oldLT6BWNRgcjSp27IhUjFGZWrF+ohIRuC\nKtjtm+oVBDR7gIXO4seUQn6+rUV7oILBKEiIoLC8kSpPkU3rI7g5dq7j3AIP\ncp7XqXC/QBhq71S5Kzb5ce/Zd29obEMZu9hcXWRAR/LwQVRP5fy0Z3CJtXic\nk1HwPrfgLHVDWz+CbFNe2q8vvm+5t3up3akOlQeG3ickNmUP962s/FfIIu0g\n6+jWhtcIAQLok75mU2sR06hwUMVHrTai6CTiOxHfbF2ozyZ+C3pzfeUbPVLP\nl1JMUCY/4QvdN+6nyZ4izSKYp12a98yXs7s4t+TZnBHM4ucT8cAnlqU1u+HV\norHrFwv9MGG7g6H7BiA1JLDe3o5pfzby6tatAuBc3/qlOebjJI/aAGVhb3n6\nHZNR\r\n=I9jx\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"fa39d9d1e753796086537bc71b6fa2d2aa21a3c5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.fc65fd00b.0_1597072765772_0.5102949962299281","host":"s3://npm-registry-packages"}},"8.0.0-canary.02e372c5f.0":{"name":"@material/density","version":"8.0.0-canary.02e372c5f.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.02e372c5f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"29717341c02416aade76f45fa18882964b07ea20","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.02e372c5f.0.tgz","fileCount":10,"integrity":"sha512-HAwr63zhZTEv4JGsXKkTXXZGeBCGwGeh290K+Y9g/vr8pd+NkfpaTHqrkO1azNQ/Z5kCejSgzYkXcOLAiiDDtw==","signatures":[{"sig":"MEYCIQClq9A6DVPkkNUOV1cY6he+PDqXyXcvcJlf8azQrd/BwAIhANx1KiwpmCquf6zw5D1k3ncbwXrHgd+ZqBcS9yV53Eep","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMWwQCRA9TVsSAnZWagAA1HQQAIcY+UQByEpxu1z5n3+0\nRF43f2JYjKKwYiKPPiAaMbMtijsPDv7vcKmt98q37EOWCNjXo+ubhmuxsmns\noAWIDeaCuWLrzdREGjRnU7THMRpJ/WJFfhTLvUQpfvVBIE0g3kwEuCFOAJCH\nK0YEbTqP1Fj59bUdZD1jSHMSiREghW4gcMnYncoJsiNFk27BU7GJdfRirDTm\n7yksbbJoz884kyXuReENjEyliBIdKfuSPLJFV8pO5C52mWXEDedLGnC9uABY\nQdtJNIS81T5l2lUh2Z0cpmGdN1fCJh+pg/S0GKrjwwzRy/A3dU5vQ1gUtwLI\nsWqGVV42KlvvZaUY0I0A46ANcBfPENq6aM229v6EcbtjbRKZG28kfCBgPRHU\ncIO18Z9XYKVxYV+4wplzgAUWeuuE3wbFcxSYk2//rxBu5To9n6YZAQNGcOoQ\n2A6x+qE8+ho621SxCSiWkKUwlwFU/okyKlVoseLpIj60R4dczoWj88bjST7I\nXQjHf/kc2BCxR/r5pZPnWBzyStJe0T3tkXA7e/+oHxDd3c3XU5ZxKDUcvxax\n9Ge0YR1UJOUbbstBPyXHOs4GCrBJA4lFDtqBn5SjCJzrsmKcRGYGjyWveZaa\npH+kOiRKAIE3s1f92tLIUvAQp9pRmy32UM0u1uJ/j6egZxqA+6ZOknH3qp+8\nspNb\r\n=ooN9\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"b765f8699fe12742bc2032a8df7cc23807ec94b9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.02e372c5f.0_1597074447680_0.14703677820420058","host":"s3://npm-registry-packages"}},"8.0.0-canary.66669e3b6.0":{"name":"@material/density","version":"8.0.0-canary.66669e3b6.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.66669e3b6.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e5666f62de76387d15f2ea980d6374eaf8d9ba16","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.66669e3b6.0.tgz","fileCount":10,"integrity":"sha512-jOt+gClQq27cNqEYwRNkClNgIIA5yQsYZgu0shptZE3xFrnKqwifl+U7bigN7+TkOPwXMsYQcHLhVDDbCyuwHA==","signatures":[{"sig":"MEQCIEq4SFVAz0kFpd7jnMDdYS0NKdBvvIjQP/DuckfHjgSwAiBmEadYbKdfP2Z0ZBTcrutWmU5fizFtZzaTu98Lv/b9uQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMW0NCRA9TVsSAnZWagAAGgIQAJALlrXsgjOK68a9QJIw\nfgOI11EmyynFL7MDH61koMc4eKj7gn6GnUrYj+SOyGpVbHmZC00P7tqwNVoG\n5mJ+bIT2BptFQPhuEeqR9iZ/Dg3Ewrb+MeOnni7bYqBIN2bUb1t75WSGXZ6L\nzsRrK/Mk9X2YriZareMSM08h2pdpXEQ1vGEDyl6qac3BtMJcRF1fo+KCOTPu\nfo+Xo6EcoF0TTpI8jaitDuyPdCXaMBVrHoXFqBOiteBVNAdftnAmWdq88kBK\nNzYfufvqDPNIk61xtPSq/yQD6OBiaLe8rpMYw2g1qf1n5QgjU4Fjbu1A7WWp\nyaDiX5hkvWnzH3cy7BtWjuwA0NFcrCqPX2gSyhdT2VxYtSyfCllVjQTvth9J\ndj5PpbvDJwRhnIyE/0DSFOf4roWOsrhki4CY5w/wVUinNeHVzwkoI6av7nBr\nacpW052JpRLmSrL02WxOXbaO2CDXyFcyA0hjNp53rObzL5uxmJFPO2M8R6Kz\nSAvN08tsRB/1ENeOS7T79vOFFbrCuSiSWV/022WH8LkKIRIEZd5Vvf8CGKnu\nJ4L+R9wU7TYKpIMJfyNpQdQKkUaMkSfidb1++jrfaSak21cxYN+gPy3/+SOh\nFTcl6RqWWmwAcCWcziQykGerjmKaCuz2TlpNpIaNij4o+GbNzbRmwEXTaouj\n0rDI\r\n=K7We\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"96a6a7d492075777ad5f7692328b3bd50153bd16","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.66669e3b6.0_1597074700942_0.5221422936912394","host":"s3://npm-registry-packages"}},"8.0.0-canary.6d1ea9761.0":{"name":"@material/density","version":"8.0.0-canary.6d1ea9761.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.6d1ea9761.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"15ee1e86f3065a8153d402906a00bb86ef5e2aec","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.6d1ea9761.0.tgz","fileCount":10,"integrity":"sha512-ZK7do94TXV0LcTfpgwP6YsUzHf8dxAQ+TChPGZHxLvig2WcET+9593rrKn8FD5X11dZmm74sjgxa3FIV809J2g==","signatures":[{"sig":"MEUCIQCEMR2toWu50A+N1CGVodhZGqlOO8a7BUqQrF+XRlz4ZQIgUN/l9+Bk1fpQWZXJ3nORjSde1EVFlZq12V0XwZ0Bgjw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMqtgCRA9TVsSAnZWagAAzv8QAJD0XqRbqwV6vDUL2S7R\nHUH0dKzUaBPCi+8vP0W3me5ncH8bGNIVweH4FIgwTrR+Q+BYd6gfsmMZlC7h\n9Q1FlH92S8n/fZkluBWoZ0m0oKETjhWxBquzxeAJs6e802arUGw+gHLtUDbd\nw4E5JC+Rs6MPU5evp6aCcSqXIprWhHhB1lq/ofW7AH1SI13FD+pRDKvFPyvx\nq8n8kr449gFDNTB0n+Wm7ObY5qBD6JTQdbsB1Kcx4rPiblEZMUufGPE3h6jK\n3HwPnP/2j/faBiqW8DIC8kpzZyrXY5HTt807/UBCLXo034nO3EqASeDMMzSJ\n7MQnlsFLUFHkJIsmgP+6wBuCjJaKZzhJtGbZzy7Hp3LDUP8yBvNwImJwXON9\nFlAzVRXFFH0MXStGcmnkzyvXSER/yoYslCbw+O6BiNTKiB8dmrGQI59hMO/D\nJdrOW5fcRNmAWdkit+K6t7DS0+WF9yOZMxxRK0yVQ1FQj3m9Ti/vy58hdz4Y\nUEJexbSORLv9T9rMz2YrVYci8eRToY0WyE0DOfR12arM0PcDMQL0+VBOQGpW\n6NwTkXxqP4tvcGHZ1Q+or8gloIA0T2sUyjDMWGaytMM0pbp4Q0tRauD4Uujq\nZ9BS1g5rVq+8Q/8nA2giC+L+f9JlVoiC+zFEeq3MQS6LzgtFwN/0LGAubmnh\nwlok\r\n=+svv\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"2539ff1cdb03aaa0365880e59b2705e6f6ff4229","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.6d1ea9761.0_1597156191830_0.6886201368205929","host":"s3://npm-registry-packages"}},"8.0.0-canary.79414bf9f.0":{"name":"@material/density","version":"8.0.0-canary.79414bf9f.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.79414bf9f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3c28d253e67fe798683da9cdd78ead7d1c3e2553","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.79414bf9f.0.tgz","fileCount":10,"integrity":"sha512-3jlXAlYQOSK2u9CBsak2QCTw+wgzlYYA/4QynhaTcjNMgoMBivpbiG2IodDE2aihUUtTrYVrP/iH1NvPXQF0pg==","signatures":[{"sig":"MEUCIQD1vGp7q0NliSid4vc+N+8GzSkhSeJb7g2BjmAdhiMHBgIgSgDKjJAoc7PbTAE+kfNb97eVX+GwQOlN3nCqWAt93Hs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMurdCRA9TVsSAnZWagAAJG0P/R6CHQcC7N/ov4Pb9RKG\nao0ol7q8h7ty92BNGXsDMeF+bLFQUyn91k0GQO/MzQUXrgox2hr2xix7jqWd\nmBR1C9SbfBv4n3T0VZDwctIqKO4RRKiWbjQZVKRf+WNm7PhuvRCcnP1pIdHS\ncDqbbMv11/cx+SxwOsymw/jziBUScvz6rxKAQDZZ5PWlbV/O9kzjz6i0L3VA\n5tLFUb5WJZkBti9Y8jp3LB4e64LQyZwBdTnEoN3320C0KDHFaom6RmFkPnrw\neAzv/2gqdEZExQVu/leBNNQNzkCMktKu4eMvbQ8pvq42TTfiq2SKjayhgLdN\nvyR/KWIXK3xi8Q18IwesvrgQkzfO21r+XdUYmJ+Xnv3/fxteWuR/YYTRYn+T\n+k4K/kG78gvRu49kGDuOXC+LJ7brqU3JSZkbgUuao9wrVhpsZT9S6VeLY6Nq\nvd/kuqjpjsZG+tZqw153vAzI7A6lbknzl9d39Osu00UqzknxiYAxO8LzqdCe\no1qhwa7hG5tHnSXL9Ez1P/vi3gTARvUHINH6EkoBaghhqYkFhkGOfx5cBzP4\n5N+YCw3F1jv85WYM00Q8FyqzjWX85dwblR8VCpMlx0DANg1Z+ekZ97GqQ7bW\neaQl9YW+ZtoBGWWDy31kr2oMNVG8VCKx+S/Jjxi6H7wJoDISmUjv28f7aUkV\nvc8f\r\n=gbVa\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"3101c6ef84c1ef8d9afdb44b6b6b3067c2f5723c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.79414bf9f.0_1597172445489_0.6259709126882249","host":"s3://npm-registry-packages"}},"8.0.0-canary.85a5272df.0":{"name":"@material/density","version":"8.0.0-canary.85a5272df.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.85a5272df.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8c22b0e70a1369bc58357f217aa8d73ddd4b77f1","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.85a5272df.0.tgz","fileCount":10,"integrity":"sha512-HK7Ms5V65fio6+gtyqh7hJxcLwOIXXa1bSuwDH+Fc0mK/QjeovRA+cUEn3dWiQ5JvzduURTeaijSfs0xw9UJug==","signatures":[{"sig":"MEUCIElpw4mqvaNYyPanJOBSkD1oGktkvvcDZAYe9RzDwTyLAiEAzn6QJlx5HD1ouIr31kBhO6QtDf8K1aVY0JdjlkjY6GY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMvpsCRA9TVsSAnZWagAAkUUP/AjjGKST0aXOoKxjWoW3\nKbz26PUN65ahUfZ7WzVGmpb6q6pgghRO8ZLOhzt/vLdBWoEKZwerf015VPvI\naGlnymS4+Sp0Q1Xz4mn0ll0NuiTBzqd0MR6ZQ34aS9euf8L1tL6DszZ1ebZi\n4KULKNDI/nAmiUlwFYgmAkY5eg60UDmIcZdJi4DXAcAYA1HlVukZMEv1C7G2\nZhVwRwF7GHq5OQrb9T6ySCYwQcfGBeXTLQYIKmd4GD/6rd+hmSpCTYspCOtm\nGTu7V56YJMV1PEC/VU/JKQnv+CvQRYneMzpO7beayf1cXuRfUqP7onz7NdK6\ndJAjTQVaVP0Ia+RNhrC+rVGIMslfheCq9O2qh4vpJjtMDUv1vlhsonK0Ekwy\nDRkbwpX3izD7J+omocHiugLGwF6HVXa2xSfiq9YhCbNBhF+2tNtgNppalgGt\nhBNlqbSCJLbt769ETCxIVKwcvfFQu+rr7o18OKY/hqdtaG1F1sbB6GSlOJNZ\nWSPgmw1cjhHtRV6DG5swIdz3a9UadeMJBar5/dWasbHACs1/lAl6rpYEKMD8\nIGUkS4ixhRmD6MJot0djZvihpjK2hdPWu46ClkffiWXl0PWbhijGyJZka2Py\nwGqqZqpgiqcDtUplf6xZ/ANfYzowqMH80sqPfzHa3vMucS+S8FUeil6Pu5Yl\nFLNt\r\n=eCi5\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"070016d39c8d62feb1148d71182053d37bc35fc6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.85a5272df.0_1597176428015_0.9811790737893737","host":"s3://npm-registry-packages"}},"8.0.0-canary.fda053eb8.0":{"name":"@material/density","version":"8.0.0-canary.fda053eb8.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.fda053eb8.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7510d6d3e58d6f84b4490adcc9197dae8cbd3aeb","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.fda053eb8.0.tgz","fileCount":10,"integrity":"sha512-um/HuSLshpIr6NwJhXsCCrUefDrb195zgiPfWCc1n0rK/gxn5Ou+SucvySmIJbIIZfEL1qeFNhQyYBrEY/k/KQ==","signatures":[{"sig":"MEUCIFTFeoHqVnoBsp1XpfuXclihu3P6UqnnuN1iLHW8aQYfAiEA6UTGzKQTkFat5tBWsTlb+NjNwndBhcYlaVzJt3k3Mfw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNEr9CRA9TVsSAnZWagAAnE0P/139XRDCruNHEJ9aM/Us\nzaRWL4Yf+kYofsObO7wrqemM+kfWSHoCXNJcIcXAIvzr6jxzJ7khO66opk9M\nvlqqZFtvcblv/nuId+gJNXwbcaWyWI0L/59YzR0/aLUS2yAOMaEwbYuohwGQ\nHYk1zKhPtQV8vyPhN9s97bfmV0WJ5G47bYt4Zf/pMP+uql9z88hS6BpD3+MW\nOnfNIFFcPSFW9lTf9Hz/9k6d6gSlgUBvQsrjMLm9aZq/AxwCiNR6IlOLdzka\ntgSDnmr7G0cplJzOQR1cjjiFTqZCL8jKbwsWe0kRpq23FPH1WsZ/pFBDbKkA\nD9I6n2GN45/qDe3ymgubIaSw/CZYW8UKCI+ieyfiNYjWn/92TIf7OGjQtKOK\nn0lYkJ/sZeOnLc5xHPzs8ixXMw79bqyAT+221jdqpXYe6sPVa1YfIIlH/62u\nvw4giSGFOYvjYsG9Bk2XImfypwTg1bITDZWW/U9sJXcLNStwL+nAhS9sOON4\nLM45JguBjrdbwRWz22P9djiHFFe9L9bEkADXRFRMLZ3CO43j9tI9zZtFwFpj\nqTz51XZRFMrb5Ev6PMAC9/E1sgqwiC/imullvKTdlAc2/hEJpi9ct6U8GFuZ\nljhG7ueBNRZo+k1nmGvaBgLcfYfBCSUczMu8V7TbNTfifZhV3YakXa5kFimt\nv8sM\r\n=BfUd\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"b92b594784940e2fbd248c33d60198f7f2e0ff71","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.fda053eb8.0_1597262589400_0.7443296503349994","host":"s3://npm-registry-packages"}},"8.0.0-canary.760873445.0":{"name":"@material/density","version":"8.0.0-canary.760873445.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.760873445.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"635789554df58202fffb41c8b328354793f4182c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.760873445.0.tgz","fileCount":10,"integrity":"sha512-03G8MfMlP4SYLqi+wIcDaDpB9V9kgwsSMUe0yHlKdsAXsQUajQ/pV2E8qseDX0mwxwWV4ORgnsr5qX5RiIVatg==","signatures":[{"sig":"MEYCIQDmbEckGsRLcllm2+o33iJMd74SKVgIFSHoAm0ndg25sQIhAIe1gEeK8bxkWLTm+s2NGfZo4KZCDDRDLNZqG/XHJzqx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNGI6CRA9TVsSAnZWagAAgB4P+wXB5TSMQpVoO1tGDSKM\no76Pc2/929NRN3u79IOAfDQ7spYjZJiRrAr2E5jhg3sguqj3yvJ0XSljN+IG\nIzG0WkdJvI8TvFvSOQxKNKUbbfSJE1hh4YWdlMEzjgzr8+zvp7jjIfRrpHt8\nLxz0pmBxtTUYHSUnjMMyf4P7thmEtjTw8WbRUGpolxDm1CX65bxywREHAhoD\ns7YZ8V0khu8z3qdOKRnsnB2O5wpi2Agpm5Yt0lm0jvzm/hJ1Pha0taekq5/A\nPTotMFhzKFeproNrAfPlWway7NmUh2VPrjoalx+2L6rZQ6zhIRREihrREkJq\ngVVEmn9n9mOT/AqExQFTnyfvhT7EbgTKdGWVPBkp8+9ZCx7oFXUw6JNi4J0T\ntg9FSi08Sd9n7u7GG1ud3X0uNSFb0y2hafXxHIK5DZMjvtf+EYyzt3pZ7gyq\n9deHWO/GjtQzm1S9MMAWBjRfMPYsFEklNmc24a0hvWSX73t9Zkg21MpKcAmD\nWBM6CQT4qn7Mr8dYet1mpMHKmHi7GmKkz0Fv9eFfyM4ZO6ibIvcOloFnFGtv\neU1Nx21sV/Hxf/k45VvmpTxDo7Qd9U/Nm2n8M5GGTEPU32E2MqsVogagC42q\nU5EUFNCvxn0gePBLzLw+nfzrhzxh2WC+5TSR0Uqq59oeIb1YaPXDcoQ3MdOx\nqwJh\r\n=Htim\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"a830629b92051950e9e15bdd288ad87238b7103e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.760873445.0_1597268537529_0.07057752398758588","host":"s3://npm-registry-packages"}},"8.0.0-canary.2f4711a30.0":{"name":"@material/density","version":"8.0.0-canary.2f4711a30.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.2f4711a30.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"805de3d954cdf2347af6ea45bce9df75531cd26d","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.2f4711a30.0.tgz","fileCount":10,"integrity":"sha512-7nU9Y8umxnMoRjhumnn1bhr0bBHpjXHj3Hd9gSjJ+ddUB+ElTeMjRjMoMCKWY8EPSE6mgN5SEVBbUuSgu/v2zA==","signatures":[{"sig":"MEUCICo11JMVFRTSUXFuzzWZ/LvbvweOsgGR1A+zXOUfXu53AiEA1tq1ZCBpSwnkwoSzEjxqF3Zw+Ss5HyACw4Khs3K2IGE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNGSQCRA9TVsSAnZWagAAu1sP/ApwH+DpzOrqeauPLFVP\n8tPvDQPRV+yDg5dW8bq/F9S5JQie+bUiq7M2zJAhgvrZiHxYilib3tNpk46O\nZyt/J3+lkvDE6s76DYLVpFnBWyAmNt9pRRZF+EfHt1PmAtVikeqv4ZaQ4VTL\nWUGCygRrJvB1aAEiUcNkcvYcSy5VUv+Dvbj9kOLBwiEcIVPc6SGgiabRiFnz\nd1Z+nr4c6npCywX+iovDXs+oAn1B+hqPOnpZXKk0h0U2aKB9tItNSNxbCJFg\n/4Jq+lnEPT6HvMq9IQR+ecNfAzIfyzTexWafFLT6zfCg/BlmGxGxPIIRhbaG\no4aSbRsyhpI4n3deMYZLzdqqVL0wQ3j34CmrzoxuS8dgcgMoD533RHr4jmPq\nfBvFKrWzcFZgkHqVI1QvK+DsgyQgvCxAf2dsAd+8B9/s9PIYDca3FKaywmVZ\n4xljhm/5rR4WnYsaKCgF/ZNZbTGMCZIpPZwNLC040nPfdtQ7u+br70MTwrZn\nP9M6rAyB1/AflPSMIvbzB0aImA1/kQpBwe/DehJ56kvECs8vuSg4QYDJvm2f\nfflfRaZ9DU4txyhcqv9rxIdcIZBMztDAJSjQIg0HnYKkWjwico1a62bGC1uq\nBA/JnAxQyooORKphkIJxM0AYvigArxyE1I3MBJGYqkH2CAul2Cx6OBv1fcls\n/m5O\r\n=z/NY\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"1347e5c15ba848f3525dcbd08fd0b11061e94116","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.2f4711a30.0_1597269136358_0.39061059162719314","host":"s3://npm-registry-packages"}},"8.0.0-canary.2d72f3659.0":{"name":"@material/density","version":"8.0.0-canary.2d72f3659.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.2d72f3659.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cd809c52b2889d31df13a0fc2a0e910d5cdeef16","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.2d72f3659.0.tgz","fileCount":10,"integrity":"sha512-n90LgVePsmOuuij9P7QUdEvdlIiRQBwHmfOkjymTU/ItXZn64lCoJBs82mdcBF65sfQ2Il0NPRf3UTTHJua0fw==","signatures":[{"sig":"MEUCIQC2l7JJddaY2ddOfpDa1f9/ResKmSuaj4b2HCjbrOsziAIgRUD0eY/TW8myNzHn82cHqRgorcpd2KNVYGs3zZZJ2bI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNGZNCRA9TVsSAnZWagAA5X8P/j8BXvh7a8s5OStpz9pZ\nm2JGElnKmqOjPPlpjToA1zkNt0UCumO256QPanACsw+0mWNz7KesQFAdYErs\nEsvCc6netsNMzzCPcEBnes0vZ8JHfr9r1YyHrVJKuWpl9PMlkArLx/a0MtlJ\nvlyFKvJ6DLs8PPHbqC8Ar8WUTG+8T/F4scgHHhEpW3KMKSARPag4fnMBKOAI\niDpC7AIoYAdVIYriKX6pwlEn28EHttSG2I8ZHm9OCd8fhhaeYWz1lhoAclQB\n4KrZkOASektG8VKtM1T/0w/C6eAlJt0Le1DGhV2IxUsQZQe0tGcGhiYZpTXQ\nsL5QGcwrkkXv2igaUJNTSWF08db9dBG6u/Jcg9vFvQlh672kICln0etG0Us6\ngVOH5RVi3he5tYYQum14/F1AcBY11sn/tFSpuWv9r10B1mv7l8nTaah6H3m6\nN2+gC+JNOYh2hVv+hxsRj6pDTOiA25mrD6pIxa5+XA8G4PIXnvA2IvrheTd3\nVnOEhzq2N/Y53vQdEgcs9fdbDya9BjfaiCSK6mDRbyPacO5jRzBuHBxHmZCd\nw+IWEuCXT52QYPozsbGGyUMBk0k2g7CVsbt4ophxUBMsL4JfQ8ZLWoeylTrX\nGVDUyJTgziH/E6UT9wNDGKJFs7xte6P0OtOgJ2kUH+1LtyU/f2X1ckVwa2Hj\nIkZz\r\n=ITVN\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"de40c24a4d850a3bd4269dcebba821d972e01c19","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.2d72f3659.0_1597269580956_0.6711648690640148","host":"s3://npm-registry-packages"}},"8.0.0-canary.1fee70a5e.0":{"name":"@material/density","version":"8.0.0-canary.1fee70a5e.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.1fee70a5e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e4ca74fc08d89898b434860bd73b052130c3edfa","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.1fee70a5e.0.tgz","fileCount":10,"integrity":"sha512-nn/NhJN1b3a5mH+Kyin6Tp8IcnhNexz0uPmLF5YddYHYV4oTNwdMMNx9PYf9chSpLJHoBjvMf6/BVaUk5ByTUg==","signatures":[{"sig":"MEYCIQCnD02xPcORg/VQjICDWhv3po1a0RbqGxq4PU/qV/ebIwIhAI33+k35wm/ewZRK7GqqzoK3xdItXr8OiyjlydYmtsBP","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNHrxCRA9TVsSAnZWagAAw9AQAIrfQBlyMQzuwPokevLW\n5fU/ZWMVTHQTqhpQj+YqqS1z+wwcdY/hYVsDX0mBqyIAkMsUlgrDhiTUGKAx\n5lM4TVJ6n/KucNcWaK9mkhlKzNq5HhwAvNGDuW8zouYFcLkyPheoGK0qh3r0\nWZHJNeNFY5cmiyEdD+zM6RLjAKXdruzP2Whelf1V+ckrdxO6rOwe6pLrcZ3z\neQub6q7sfqMGRo4ZULXRdRwQQ1U28JCjNWyp0GrYdJj75V5AteaAE2bacqur\nObsAEQr733PCGyIWikLYfwLJrgtrqXI88LNazq9K6XO0es3k5F4lsjK4FkdF\nLLCrLP8UMtoYlaMvUjzxmBdsMVsZeaE9uiHG1WAIvS5434/Porwe2ufzJUvx\nNcsVdtzhP4O2hZAQ4jbdvggSHMu3wgg9c5pJsiadhpFNmoaEuQk+aGmjhs99\nDlBFKTuyFwgsxAg1OXh7W9gu4qJ9p+Q160KhSWwIVVzBdItEyb0yuSO21NdP\nE71yc85myTgrxxOQOBbdf4cIp2FIVTmohYKb0q02S3IEzaP23Sz/Z5apOELd\n5hRPdLrrXybQpH1R8+WM5B7siG56Hxqxm2mEVMLc3iQaVnBWT2Ur+QD95Dd8\n9HHTTWB61Q87Uec/NJ/Yd1xpouTGW0XsMBHOCi7tIhzu35pCCaunkAvxQ0p0\nZjrI\r\n=Tb1X\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"2e5eed4b73395e9cae47d93ed6f34f0dc0467c28","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.1fee70a5e.0_1597274864738_0.7028032507555924","host":"s3://npm-registry-packages"}},"8.0.0-canary.023f3fa34.0":{"name":"@material/density","version":"8.0.0-canary.023f3fa34.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.023f3fa34.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cb7e796cb757a3b34822038f976a5d90fac39e14","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.023f3fa34.0.tgz","fileCount":10,"integrity":"sha512-Qk1qxqv8I+6i9lbKyGgu1qmDNNDZiG2tMRxxRKanGrmZ2OX5SadSoMer1pMUAHANWH30lNE8oyl33xYV8hELYQ==","signatures":[{"sig":"MEQCIEmR7nwbez5pXZNnE0jPc0nDiUikUGg/YVAOREkQn/MAAiAQyv2v/BAb1EcLmpZUR7nqURo1MUGKV6a5w0jXGav0LQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNJM5CRA9TVsSAnZWagAASEwP/R19bhIrP8BnutL9ZWhD\nlFTJjtiGo6E8mZGyXChnt+CBa9W8LKtaNqgaIh55cuS66+yOuC4bdmBj0hp1\n6Oj+NEuCc3Ui9toa85TZozpC8FQyDbzChbV8oX0bt9vISZkqPWtcDxUKmOrh\nSWKwBdeCipPO5Qfhxswgj+1aVx5Hd52e/z7M0n+nJQdbRSbNlKLSPwu3yEyt\ni1oim+XssM+NlKwBHaWUuAvzKpPy3Oaw/kDPOjBDeoz1YUMnPS+wpoY4wi3p\nsFtA423XHg0hkzY1Lw6H0DTZ5kVtPQGfknP0XeRP98V5Cd90Fu2bM8FPTFN/\ngARDcaECi0rdkpiH7qXaw32cQbtPB6scGs+fjLJVwCbqReDpxkhSP0aQEIjP\nzN4MqIAOq0J5wzEu6nYePXcgI+x0AZPrd6QTt2m80XO90FGyxOt4bHjTy62c\ntR9TKaF/3OKbGsiNFvkBCOVthCnpxnNJbyXQffl6bcSceogfiLJgRWYNEVFl\nhs/GPBXVqJP7GQTYT8AcocJNXSCP1eDn+qojPRE/H/aRt07+rcwcrKgf8VoF\nIgYBPlcCQjo+UaOMERR40iTK2ppVaTDYPfVLB5uZ/1vQyECklG5Utgt6vsco\nOxp/jKwB91G1aBtTFhCTmIL0jfYwKz0/bjiKr2yFJ0k7GBLxAEqEFvin0gHC\nLhC8\r\n=hS91\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"1a6538d0b407fd8e7a7de8e39b4ed51bcefc560c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.023f3fa34.0_1597281081411_0.16899626929413292","host":"s3://npm-registry-packages"}},"8.0.0-canary.80f3a9e5d.0":{"name":"@material/density","version":"8.0.0-canary.80f3a9e5d.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.80f3a9e5d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8b63f075db1391f2d7e10addf59504238d023361","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.80f3a9e5d.0.tgz","fileCount":10,"integrity":"sha512-jgWxuUA6bgCQX9TnkZhtkDVRbjrYU2POL89Nw4RuYZJPyMXB4S2qHQWw1kv2brvBP2Aolu7xiWjm+FjYN09GBQ==","signatures":[{"sig":"MEUCIQCCFt01/DMO2jgumREvTMA6lnUGDUYVujhLUyOH6vGW8wIge66c/x9Sz3siKzOmfx8w9hNLZJ4a79OCNfyYldVmnM4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNJcfCRA9TVsSAnZWagAACzMP/R39B1p16gNYBw2L1MBf\nIQ6Fc4MStmzKPihpk5AeD3pjpljtwndu9mqKPEbhqx20kV/rMT6l+tg/L/bn\nojXCcrpWeR68xOKLFmaYrxiOOsEWw4tUfOeOYPvtTc07vbCIrbtrbj0EMTKS\npPD156RVCqM1CxAOm+rrMsWIsaBm79o+9G0GsLmhFCfujKZFWBFOEtcax24g\nHQuj9psTriFRnPp7Ws46C501qar3D/GrdE1VDKgTmw91tUX3HXUXoc0U64hc\nVWB4u8Zm+TAy4o2u9feEsHKLuy6YhO4pNnQhC507q7BpM+RNXef2eHlP7egr\npb5HXb+pn0VOpm26lTWBMCGTTSqT4BkUtoPbJHaDIitnpLn2aCAnYNZ1K3Jl\n/zCKrD8OnR7sl18TCN2iqqo81AfOtz8nNS+ISwmkMqxuFTAhOHMgvy8m+akY\nIiJD4o9DX9p0ODxRaue/6XpsAg+ptGmUIdv/+gQTKsN71ESqCApujJrc6Drd\nrXW/1TExhhIWbmEpml5nzh/GUe2M4iFLOuEVHIkCP9uMdUI1imO6I3hmfrbf\n1J57T/N10DrrxzHqwZwEk5mJMFRs6F4uEof3y+W2TEq/XCX+aDd844f5JUUB\n+T7ZCNPxTOKJa0UG2EV86TiFovapzDMzs9hIjkAuofAqe61L4vdB2oKZfkFF\nUU/D\r\n=+v5B\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"e47018f239b51581a67186dcbea3f4167f5ea3f2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.80f3a9e5d.0_1597282078732_0.7366297162253821","host":"s3://npm-registry-packages"}},"8.0.0-canary.a1dcfe97c.0":{"name":"@material/density","version":"8.0.0-canary.a1dcfe97c.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.a1dcfe97c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a733f7ab99650a667de2700a0be31e9e31e5cb91","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.a1dcfe97c.0.tgz","fileCount":10,"integrity":"sha512-Jrc2Qkgjgy/A+RDG9/BNhsck+ydQ532D+xbPzZI1sXkvow0/DM3OKC9pj4HvcGi25h7MDNvqxEAJa5XVgrY73Q==","signatures":[{"sig":"MEUCIQD5L5xtjh4oDKZCbCfo2n2RD/3Qfqs05u8UT5v7ap4WIQIgYRT8VgHx5SbKpEKafI67e2nCIG32jbTJjKE7rOYlIE0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNP5YCRA9TVsSAnZWagAAMkIP/0ACG4eWIsx0ETgGXCqs\n2x2yK+n5mapvdBbmCxCkjvTFvo/Mn1/vhw7kTjDAQfUkJOQL1ztgrk1Cs4rs\nUE1+BqHJbiVhgw2nl9wQbSo94fxlkR+898KVVyOir5rbGPi33YQEwX45z/92\nOwBPNXgo3ZExM/L616MwToV8F6F6xDAbml00HCEWRYjO6P/LcA2grxW1bD+B\naQk6hRLzSI1+jI83/TVnhhd8lfYyivXgo2q67EqwK+MgmGe32tZBmbw4ynkp\nsq+JSBAdFij6JQ9ROE+hbpB536VpvJpBTOeI/cQ47cKjGexKerOZXsrsdrYu\nbR+uRCw1vPePBIfxJfNzE4Pcsn8oTuBffSE+BBsdr6oiQ9df/Tiojk1oygHG\nuv9k0CUQMkfOhKkp4uwQppOWQizX6ICZTmYNeWCyvlxYBIKkeUBY5KZTNJ92\nSGwi80i9fAcAihI/TdFHNIn7koSG566yo60WHiYjjyZFRDOwTcDxt+FYVMde\n+Hcg1znGHVXotcBhaxATrR+ffuozqii4TvX3MQEiH2aET9zX1DXW9p6QdJzQ\ns2nJsB6t0WpB3dJcW4OOFixjBFuvtUB0gs4e9NvwsVpH5XPiOFXL7s/Qj0cr\nV1s6HWTWDMI2zhl/XCXzAL1dia3MQTIAIUwRjF6wGz3Inmkun2oDiJMsvJwG\nOTVh\r\n=EfJm\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"8ec1483dd23463f0239974be9a65ec22a6b54715","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.a1dcfe97c.0_1597308503697_0.1368146387905813","host":"s3://npm-registry-packages"}},"8.0.0-canary.af332d5be.0":{"name":"@material/density","version":"8.0.0-canary.af332d5be.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.af332d5be.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9eb193a7890eb83abee6df86703b0cadbb76cfee","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.af332d5be.0.tgz","fileCount":10,"integrity":"sha512-iYJA5jHuYiMCmC44N0K55zlJ/9Ynth7Ee8IZGNYk9wdcZpjO7MLKRUrVTZQKPXEx4tkR89NqLMBGox49LmCcuQ==","signatures":[{"sig":"MEUCIHrRJoloIaPyzGI0QgUK5J4jHOZKlKZyu7ZttXOH+4n/AiEAzZsSV0pH6DfS9upJNMZZDll5UKd+Bx7Z7VK2xCpllX4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNa2pCRA9TVsSAnZWagAAOoEQAIQj/zlS0fN+9B7Ms02F\nT6rlapPNcAlko/lk6kooi7bKRJQz+Mvb2BThYfzsz8N6tNq7dgcsnnKMUd9O\nRfrd7+8QMwT4Fo0JwAPt46Q3CcKl5TP5sqLBMWrvXgtJNtxPLokaOHf961j0\n89DVp+KKfnty+iu1ccamaY+VTi6eKdymyXcYPHoClCtdOBBpsBHnA8SMucgn\nRbb1rycXAkNLU6HEdojmjXeH5xXKeMNALuXn2X8DhqXUSDbzIDzsnD9hemhy\n5hcg7WRGyT4E/Sy193A2F08DaowMWZEHeTtOgI+hsHDJmGLysquW4KG4TWPu\nM1wQil6/4FB1S8e+UtugDFs48AEl10eIo2BFbS1Jb0RxFpniw53VG60Pfb7x\nke+qSCvwU3z2EztYb1J+YbOxJTdH3xsWCVFswcONWns3teHMABuJciVKv4i3\n5Q4yZVuQSfSV1oR1dEbNqcWoGo29MZx4hRFtYYjo3EdRBSFHdgjQydDClho7\n4MOvvD1Fl8bpDUO0zX+qY4qkDgMfmXIBkSZi4U2dQZ285xowAlkE1LWmlotx\nLfEHWfgCx/DfPPUSGMnnxLGiFHd61+t7gehjUBtb56GKZG3DA6zbQFiBBGdo\nbHWjCWrB5sncevpa1tFu//wYCQeKwxtO8kTsbNTU126/TbaDlUvZ9694lqpt\nOkKs\r\n=PFJC\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"ecb675d071cb76738aea95a2d43ef88a134275be","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.af332d5be.0_1597353383160_0.896373294201714","host":"s3://npm-registry-packages"}},"8.0.0-canary.7dd4567c4.0":{"name":"@material/density","version":"8.0.0-canary.7dd4567c4.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.7dd4567c4.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6078b4c3aa756fbe20a217117e8e782628b6840c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.7dd4567c4.0.tgz","fileCount":10,"integrity":"sha512-XTYhWiM+Z9YYfGAISSbyG8h4dqJD6ALD3ayitxYWUThEFuGbDTmBx79LOv90ooBENf3G5wtQrQik4t2JSBWZTw==","signatures":[{"sig":"MEYCIQDk+iYYaRHncrk7laFoKFlJlnUVHKiPHR6pie9C1H+5QwIhAOtSm+l5KwByxIPw+f82Kipbz7cN3FE80EIaDOFOzSF4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNd+yCRA9TVsSAnZWagAAwJsP/A4edX1++8hio9mSm94Q\n5Yf0BAqIQpy6td0QnIiaGRpwW+innBGwDEc5o/hMsfMpxA56x2tRv+eRoUAw\nI6NCsYREqjyI4IN+tOfQUKzDFFnEUHaRzTHn2n/PICKE1qbKFzsS/1bbpsKZ\nHncCteu4vRYr/BV9/R+7QljaDN/DcfXQBHvTrVcuzz71IbOtO+Hc7DYQBLDv\n4Fi1Lh7sb40AtIRbUAiVQjg76mguxoK2+Y3djCpjuVOkEWcANtI23lVvBgc5\nyP41xvwP1PtC6BFruQxbcu830sm2TkMxc1FkuNB61h9ciTkiOgDwtP92HDmH\nLChydkjmPXxEYE45bGBvHzgGZsB8Zqz9tWQvEmG4ftrYQzjQ3CUV4iZd3I0c\nRpaz0/OKF2YFs5Br+UvIj1annqMP7QJu6NeuLWfqRbzlsfAXNckyz2sIjA4p\nHJJ7X2v/QJv4gHgYLmzFND473RkZTYFMKq+CKMQI/JJdaXHgz4a5Dy1HPCQa\nHVkQ8cd9seIujbeFZ/reJuXraZzSCm7p924d8oxD6spSTJ6EDr2AOmp7GFE9\nMWJV659gOqKKtgnpPw1XP83KxxSp28/MvIfweAgEVwr7X7VVae8ZeXz+8s/U\nryWZX8PQWmbiiCBdtQ3+SokK5sbhzGfRhmKcGSR3TX9NFaXdS9RNdshLMzkA\nn1un\r\n=Pgz7\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"515ae143d426f0329f0a745e0ad35113761376e1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.7dd4567c4.0_1597366193789_0.3314980987827185","host":"s3://npm-registry-packages"}},"8.0.0-canary.ff870005a.0":{"name":"@material/density","version":"8.0.0-canary.ff870005a.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.ff870005a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"291771c71ed1144f2110c8467e44c3a2bc4ecb1f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.ff870005a.0.tgz","fileCount":10,"integrity":"sha512-Cw3ZJnlcch3ln41xgPHYQ/p5WPU+u9FHkBYV7FEi1E43YVakf+Wl7fVC9JNbBTVe/lEEiev0+lfhWo9jZkZAkA==","signatures":[{"sig":"MEUCIELgmnrsx47LAvYWur7Mpgtta0rp560jKbLXNq9W43bJAiEAmqXv1d8xliVlOgUfyGss//fvzWtGIPfai1C1R2vJYTA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNeWjCRA9TVsSAnZWagAAXtwP/0FYQUfkZ6vBJYkxU3g5\nHiS8cI9QwKZSDfrkfn6ADLEKeHKhgqAILcYGrgy9mlxwndZ7Fc75+IuPp6CM\nxhOeJFg3OH4fYaEi+sgdjfzmduKGDXikVFlOWOZXXyY68Cjl+qrPWXx0DPam\nrzmKecKltN/xX07CAF/7ofMhZqLG9YD3SVDov+vJ2iCimQpq6aNr6iLBIwiH\nIKKSx+ujFfQsC1jKcTPZLQiks4s1NeBMaB5P4C8kLaFjvruJqumKMNGdrZOa\nn0aMsTdf46BuW//Gurv59V+BmqvX2WrOF8t4670hwhBoKvfeW3uh14kqxM74\nvx5eqn/ZsW1iMlPEIW8HIi10AGkIkwUyUl0yfiCuooEC2T46xwl0CuK7pVBH\noDcY9lRb5NXEuiZUeW4G72/GFy1FKLcbyYfhbSkLgh8lxLIOqfa0tPSj6315\nSiANlJlK4BNgCIHuNmSIt7jCjCerSgEuwjHWVqpiBkg87wDB4zwPNS2PbHU1\nUceGj+s+35wtCyihKsUhi0sO8oKQs6bnEwt/mvizncghvCdP34ror4cQKMqg\nctw0YdF9oG3khegBgSrcohGkHiprprpmUZmWzpQTltpt3sdwHjcJ26rE8sIo\nMalo12mGNrVhc5kDByJiOHB+LV+QQqprcc/aj2BlqzVpRtQzIFs8Noxbq8rx\nFUdB\r\n=PBtq\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"885c1d5e1cf217db1bcb8176917a25d6c74575a5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.ff870005a.0_1597367714436_0.029629613438440172","host":"s3://npm-registry-packages"}},"8.0.0-canary.150f427a0.0":{"name":"@material/density","version":"8.0.0-canary.150f427a0.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.150f427a0.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"47111c20949a4004db61513930b9fe4a8f55d07f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.150f427a0.0.tgz","fileCount":10,"integrity":"sha512-ZW/D2CMGnrXtRpDh3tGtSZ+FaAUmZWlT3IBYlm+jIk2z/gUY6gI0EDiza8q59RQCFmK5QscA8WRAC31mtY0lfQ==","signatures":[{"sig":"MEUCIQCAq2clU1ngoZ7Uph1ffVcmJeYgzsOs6lnhlIbDD81JIAIgdyGHSqkW3kb1B3UTgu6fmBHa8W1eBP10L3d2Sbl0gTY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNpFpCRA9TVsSAnZWagAAXewP/1V6JYd7lDI0s6t/TLBD\nVhPQp2dq/HuGGRVGxl2b6xNsxkp2eQOgAGpXDG5D7J8ev5uONSl9GFou6utj\n0rsfzl/4MUVs9cWlqwY1QHN6dlO+h0A7py5eLefWkL9VayUOSpzmWu0T/GBb\nMda6IiDf3YqaBCXvFlzdTdLUak8OSkW/02PJB0HsGTeyRQpgH3/oS1ZQXZNK\n9RvLP+kXZGtPWOy4hh2KixNP2jIOaW37qqqVivDFNssTLcjsdDYV17YKTShe\nBhZTz6COq42LfEjZRHn4ZbuxJox79TS0bkrXNLB2+mff4qdJN+7+d+UmeADY\nzWSTqAP3tvBt0vxIgYDOTlXBVwynV6jZWsfoo7Pev0OQILzOM+wELAQIG38m\nc2By+PItTzVVtCTyCdfZ8jgztMZR3JbqLaS4sg8RI5P7J0TO8/vUan1afdRp\n7JrnzSRYAOFtjb9ifyS9297NDocjYa/jMyMJek0Mn7nxmuEriiIkuSO8t1Xl\nrfzJcAw52MppNjBcqkQr+/hJmIYj2KwNw8XUdrN8A8MbHuELzCVstgLIcs1H\nqMUZns0gfUaQodzDHItTUU4fu+/7U/dn0MyBOTgiliuD24tdzG/YM9DN0LT9\ncUZg+fdaVLyfybpRy+Kp1Qh8/jgIhXF53eVHYHxHROS23YINw3yu6+GaOL/t\n6nGY\r\n=LO/n\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"9250d38c39aaaa2210225133bd9fa4da3739df3e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.150f427a0.0_1597411689296_0.3710570679208669","host":"s3://npm-registry-packages"}},"8.0.0-canary.bcc58290a.0":{"name":"@material/density","version":"8.0.0-canary.bcc58290a.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.bcc58290a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0f4ef7e6ec4f6ede05d658670e0bdded0c2d01d6","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.bcc58290a.0.tgz","fileCount":10,"integrity":"sha512-C0QARkf48FJYX/vWQABgSVV8+04Dt7nYYsIhBCdYl5gpNPDrN3M/19wftFfvs2H3CrJhmDQjv0fH5s7BXyO3tQ==","signatures":[{"sig":"MEYCIQCzs8bhGfqHXzgzzZEY6Rurhaob+H51K0cNH1iPh4NvMgIhAKN/9cFMrc0UqT0NSwulOk45o8zA0opd60LkSH5t7wMr","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNxx9CRA9TVsSAnZWagAABcsP/RHP5fKwy/q6rrg1EqjN\nQ+fPysrwcmco0tlRJ3jjNnWptPhgYnj2t/swyc4/MNXS0I1YFN/Zp/VDYBbO\nA45clGVp5r1STPKXTbGum+dF775hlHNNsAS55Lgffs96pdiZxN3xFdZ9aM4i\nK9CrPJX5iQbbEQcX4zAhxd4Ue/U5KfLr1zX8yXjlUXFM4HIENZAIxBgMBALz\nuwLzaTEmQxTCuZzYMjMHbm0uh4NGH9RzeKHB2dsA9/LARYvYH4qubgmM40Sq\nvGHIo/IzfVBLxIzNrZlpq/kETZcjBgDqZKdDOhGOTVWUCZ7GADtdDxaqmF1e\nuWRjPOD/KBf23FA/JG1hajfZv4EavoMF0zAIOqj6tCLWWdh36/2dCXuy6SWH\nsIFLx5aKDLUsOHBSmBbFHxsJpYSZmTQ6Nn9f4+uHFG8ZWauZ5q9k3Mkdx0iU\nls7wjpPcWRjNuzC2dLyk3wuMs+GIGPOxHAqfLGglOc+qYeEaFVxN7glbZWr+\nFLWA8Bq5puBT91TlWJB5C31DQ1E6NX2ARUBUbeQlEFg+i3tYMMHxM96eXZct\nOkixVE8t8OGra3EpFXXE/1AN9RO/54Obt4MgMWQOoIu68fF4ZV+tZiK4ha/Y\nT0rDlgDQ9HGnQG/tHfS66leGsympV9Yvl7yHlR6aXVt89oF9qy+S94DSN0K4\nYNvY\r\n=y6Ax\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"ba12c8e781c26c6169e16b167798237b5ededb54","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.bcc58290a.0_1597447293245_0.13106327302859366","host":"s3://npm-registry-packages"}},"8.0.0-canary.4f55400bb.0":{"name":"@material/density","version":"8.0.0-canary.4f55400bb.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.4f55400bb.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"606c4faec02cc7885a5824516f6c856f5a841780","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.4f55400bb.0.tgz","fileCount":10,"integrity":"sha512-YPPsv+MGXBzN7zdYkiK9v1JakszmpSNlRPmwIMTm6rRKAaAxOu1Bt0ShpoZ0Nu7DZysW4Q9tpzDqpyd38JCHwg==","signatures":[{"sig":"MEYCIQDrV5Gvd1sn7X8tzF/FIF1/KMRG87tBPk1jFjWmvwbiCwIhAMIgAZFNnQYvyrH1MsTYg0EIZIsxUsF7wYWJwkSSCyuV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOrJICRA9TVsSAnZWagAArLEP/jZ07jfqhGSpCfQvNVku\nDSb7S5SfLKKnjFsxrU/NJ8Vq347GiIoto/8uOfRIK1PU4YzpWkI23InL0H6A\n/l5nSJWXQZkBecw1g/5KR9Vu7kdMYL28Nf7ZUgGwMXNYQnIz27OostV8tQaH\n/tc6QT+lgLdWJZ+eMPFQoMXyja/OtsgWRy2R8AUh/OHAQz1mFHmDyYd1gqn0\nQEUYpytEkpunm4PK/fA17q+x59JZEYLsPWDn9c5CB7Jbze5yTyIWfSMtaFWq\ndL8U+VdvKN6so/9c4/9H6NwqihIl9MFYBkSYG2z/7OD1Zep/CXJZEm+tgyd+\nB0NjLiWCNiJ5j5SCg3e/1tUJnezsoyomqymd+9XeFcrxVTjKNOwzEANf5+fx\nBZkOQZ4Yd+lMOPu8/ky0a/r9lvxEU8g/4K/avirM8zaZvG+vpajx2Mk6ooDm\nic1vWrbAYol6bq6WyXWHSGkoLqhmK5LIcm7WOre9NVKKpyI5S7z+PsYQiAT5\nsxKpuxiJkY3tV02QAwWPMEFur8tTNLT8KlkVA4HXNTCgMxFYsJQtCalvulZl\n6CUXX3IxkRrOTV7CuYdrePb7MzXJ2Gv9PsKFgH2Gp9xnpKr8jsNnJeqJuWMa\nhtFHAQVI2cOcCPXSa4qOYIOmRICytXi7FhUfcJJo4QtUluwzt1EV9GC2BCAq\n3Fox\r\n=uPmz\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"a9eebd86aa2e631b994a71291827e602b842dc36","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.4f55400bb.0_1597682248413_0.5631354545714804","host":"s3://npm-registry-packages"}},"8.0.0-canary.000d64815.0":{"name":"@material/density","version":"8.0.0-canary.000d64815.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.000d64815.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a435baa1f1d1614192c202ad923b6113c379894b","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.000d64815.0.tgz","fileCount":10,"integrity":"sha512-WbWQmz/Dq68cwDL689kLrh0TO9DYHMluZZSBblfEmWLFAh5bRe63kUQ8QzLqWUBQ3gKaCCh28xoJ8boebTygKA==","signatures":[{"sig":"MEYCIQCgoY/nZrp+3OmBvZuka/atpl1t8CPabE887avJ2UUeiAIhAKjP74QFPG/SeVPWwStz+lhks4zdTVes57aYhyoZLLrW","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOrhWCRA9TVsSAnZWagAA2fUQAJmpAZhRQRVl27SiBv9f\nQBWwJQSsW1wmrNwlE89VnNLSa4TtFJX/kzgloJMJNYoyTLf39ohof3dfS+ut\nM6osmo22dt6qNIyE8d5BGu2VsxWLrfNqj9vk25Baaie6pAMtPK/d1sZPKIL8\n/Kh/+GihOKvRqdDGolkJaP6VZJkYsCzfQQGcDYiQmOa5uODTdARCbRyQjzxc\nrhdwbVsuiOo6ZxYb+lT9SqEpXp+sltZACEIsNNG7hhvcE6sP/0hCSbztPIik\nVCVH5DTAKeAwbaAB0PZ/WXGJkzJ18dmPoETjBUGxZYaUPEO6glypMG0OnqxQ\nRWLsB5savGInn88cqf6rZkKfmjpq+6M1iK7e3VxBwxRQUSBk5zefXBM13xnF\nVZ+xg8rzQHZD/S5TeqlcwAj5njWDz70rd0Q2CaAxLN39E2wbfJn/8QFt8l0l\n71Kg6PALZVYSFEKs7yVHCSnPwAyHbYiCbd49WxIIMok3QxFdnTFNtQeCljPG\nNdWUNX/sX6UkK0vomXa1ULFiSd0c4/D+RDBuRE/ZZ98aptt1JhTarUFWOJlK\naBBYauVs7RWOLZvynOydICO/+ZsmiVN1j2MPjSrb4MSu54/fmdDXPK7qOW7v\nqX2waYh9FaKDUhrLIAkVV0g23P8XmhKS01ET/fmU3OZW1EgjpVOksSS4NCEI\nTB/e\r\n=cLCY\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"c8a69943d64e6f468c2edeaf1fc6204d372a9fed","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.000d64815.0_1597683797602_0.4124464709477007","host":"s3://npm-registry-packages"}},"8.0.0-canary.defa599a8.0":{"name":"@material/density","version":"8.0.0-canary.defa599a8.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.defa599a8.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"87f91eb3a382418a0fef33ac0fa5d533faa3afc1","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.defa599a8.0.tgz","fileCount":10,"integrity":"sha512-wKpgmP/se8xJME/K+3PMvYI9GApxIhSK1ucFL9VQhxIdS+vhJo4+uQODV/h4OAdo4GvzTjf8++4dq2jSRE78gg==","signatures":[{"sig":"MEUCICi1cTn/DP0fTpyCePEq2rER+1k4eldSiaEW28iItNjJAiEA+DxJ1RL9iDc7hLyj57TBoS4yJRu5WhEAybkNmcmNE+4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOuj7CRA9TVsSAnZWagAAJhIQAJGg+iHH/lF9bjK2TKuP\nTD8yS8ZBZyZacIUbP7LBySJnYAd6qGg0Po222PjpWcvnqqX3V/nMlfFF2i1u\nGoNBccd2/egjGyaDQuUJoxa/ejfMGy7bvxCBcwpRQQjDpGJljQDolK7YNibf\n2BYZcxmLeIATtLrvsz/4NNBLeOUUn1Ev7zzqphb0NJaIksH7OBhLeaOLDUVA\nmfo6vU6CrDLeZvpR1UZAM2hDnBsMNyju2VQy8W6X5kDdcn9xAsBxY1ZL4SfS\nSRP32nuDmTSWH2GH676auX56283Qdqu4WO0Lvi8dyLh5OKPeRf++2hDRoSvs\nYs7Mb0Ey2XaGzCDDlnAjZb6VRXZjiW78UMMxvQEpkUhfUPvlNSmVntuJonva\nDiqRujWKhsphx3/jGJaY58y9XXrACiriXI+EJUSpIDEGEZQHOnBD1Wm2Om1x\nkU+yiswNdLbpbIc+QRI/huu9FK9Xb6chRrJPk1g4ylORicw4lVFXPBU3T9yo\nAM00DU20Jx4zhjgTqjQI4HNhJZ8DQAyRB1VEnGutA+T2iYQzm+u73Ljqjkrr\n0f4sM0/x144Xq0gG5ERQ454BKWVkRy44nJY7f+h5PGxx+/EDljqFIdOTvc13\nw3FuMic/qpQa27zZH+KQGK/b0zWuXjODzYGSzWR7zOJGMB8327V1WG7Pjh6U\nqbbQ\r\n=8q4r\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"d3ddc8cf9af988fc4a02f26feee3e4ca0184dbec","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.defa599a8.0_1597696251123_0.08888632670801422","host":"s3://npm-registry-packages"}},"8.0.0-canary.66b8ed7e6.0":{"name":"@material/density","version":"8.0.0-canary.66b8ed7e6.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.66b8ed7e6.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a53caf23f041d7d44103be392edf6c9fa9490016","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.66b8ed7e6.0.tgz","fileCount":10,"integrity":"sha512-My8br81MCZkInJEgoTsJ6uH9Z097ETevR2179D1vFuZtycWdUq+299CZkvA1iwGamrCKY3BYPL2ij0iszo3Sbg==","signatures":[{"sig":"MEYCIQDgjehFn6qxv3FgRr/gDNmAYLHQ/kktJRqyv9U0GCtUnAIhAPxfpVJWdGTVTa0p14uzxo5OQk2GstM5dswhWbsw6vbR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPB+ECRA9TVsSAnZWagAAKa4P/RoJA3s8jThlqSVXAA0f\nnJfF8HbezBxV2UIAdYRchLhQ/UnbDDZ3u+KgjCu2KK8xHamsglod8vHtM9uR\nANbmJ1l2Gf6uNEf29vNnjqTVarq2dH71TE2rNHzvJb2yLf9Vx1/mYr/HqkjP\nFgx6cXyi57yBXp4cpO0uh4ZgRkYR9D8pmxTw7mRGM/51fwnTs4OhKJAlmIf5\noQvsROsQt5+s+fF+KOJ+RyjSOv0By5z9BJmS9elwJxG53QQsIiUcCxU009LG\n2eFJdFsfvPuxM7rbF10y1ZlJzR8VEDmQUKZVPrRXinILKx6FdtFQcJyhx/Ix\nDBd0BU4Atd+4//GxFuXjIsBMVndlQy4Ej738ncCeFpr8cqwQwLIzHzQGxiHU\n6scB+hBuImCzNTKecQnVWTQbPcyUGtx6eqfdlXNAspT8jezfzr3meSDFO6ib\n6MAbEhk7Rk+hpqLNrRZoJ/kKACqitRFxnSR6rWmvu0QZeYLlZTop4sfJtL9z\nxaGTdq1hex952k6DMWS+vuOnpAR7C6klUOXXuP4cKPEmYHeFq6W5lHsbqzeQ\ntIUE8YrX0QQE5hMyzDNR7UXAofiqs7itGYqmSkX9/DGYyooi6lSPCZ3s9Ss2\nsvS6jY/dvFWGflKju93EBCkOWr7YMjUGXzukVNy3g0Fa7iy8wxSHRWu/G04F\nU7J1\r\n=exUs\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"c23c9dce18363cb6806c169d5a516da2a0fcf89f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.66b8ed7e6.0_1597775747524_0.9840535044799741","host":"s3://npm-registry-packages"}},"8.0.0-canary.e2b1033df.0":{"name":"@material/density","version":"8.0.0-canary.e2b1033df.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.e2b1033df.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"153231ca9caa6ed46589c69bd633177cec4c827c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.e2b1033df.0.tgz","fileCount":10,"integrity":"sha512-SwJmq/bZ5hFLBWAatBqmR1vyh4cIeKYr7Tq4I3paXWzh7+so77BneV5Pv+q/Sa2i9sy2LM2QTvIxAHXKGeQCSg==","signatures":[{"sig":"MEUCIQCO0sbKyAQIkzXgvpl+jJHUA23BcC6kQRWzPSBTf2lVfQIgE5XGWRYctPpVHgdqoap7zYaRrNJvzGnZs3h/dXg5g4I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPXI6CRA9TVsSAnZWagAAOfYQAJj0PAYvTOMNTuM3E5qg\nS6I4T4axnEX7HkWMZwcmIeFL/xdroBeI4HlICWsqbRmKQQUtFhfXJ+IizkoZ\nTjpb9jEpeUHEjtDCUlhfaDA0R06T7d1/X85Vm75/fGZkgpXaYx4Vx8AsF2pu\nJbMpBFfHI5NRU+wPYCn0UphVrOtx6qqXe7s2/OpDBgLE815BTwr+SNeFf6Ur\njQzn0agHaTecsgRbiHE8zYjj0plqnUj1+K30ggznR8QcID7Jql4GShZiiLY/\nNaCfGVZeD3/xVZ9m3VnnBK6Zq/zmMmNmqaU8OPJueFhE53jB2fAOqOaRZK0A\niohZoi+/HReHBC2taJRlUDPprsqwVCN4WeYapkZqSwtFITSm76N37KKO00ZG\nj19euxF4t/3bXJTZ9gaRmHMDlS+5LCP7R0tODewesL+igyDsGboKnvbxfl1E\nrzbGsTjqG1V6iBHspbNdujjZ8yjM60XTLFUGc+9M59KQraIK1nkNb4io0b91\ngby6OKAv0fMBeUNpC6nwdBEWg1pKYIYysGFxv89LCGFJwjV7N6oHO4MhbEgS\nYD82Tw2H4LFv5zIIdzGcF+ODjAdzPp2PjzZZ7kr7BaBv2GAAw5/QPGo1m0Oh\n95OdQtxLH42q6HLSFV0vj25iVnxPoQlZKCWwdZ1RwCzKlA4Bpsuunmm9e5kO\npsqO\r\n=viv4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"763ba6b73959bf0639ed8d0c9656a53b18e30c1c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.e2b1033df.0_1597862457982_0.010961210742935767","host":"s3://npm-registry-packages"}},"8.0.0-canary.2e8c3dd2e.0":{"name":"@material/density","version":"8.0.0-canary.2e8c3dd2e.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.2e8c3dd2e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"38bd70e133f042dcdbdc8e5c7decb12b74439785","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.2e8c3dd2e.0.tgz","fileCount":10,"integrity":"sha512-M+UtMcUe7JzydLgdTugsnKsTI+7TzLYc4NzzKCFRaR723+XMM76Uys3d2Nr33pbGkMITHMYnodSJxCzS1e+pyw==","signatures":[{"sig":"MEQCH1PIiPde+C4aLyelkpRU6Zmj5GhsJHs69j6t0IFjLxECIQCNYNFQbUqqbOmCPuMYE9N1eulaDT2ORCN4bYaYET9TLw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPXwQCRA9TVsSAnZWagAAxN0P/1OI3O1G3S2xIUmj2joA\nySr0kcnNTW3kiq3FXGrRB+aapGZ+VSb60kHtQjeU0HH6uCJs6Xc7Jj8A2V+F\nUqLX8AJg71O9YCeuk8lJUoh2as8uzoOOBDJ9N/ITw1SmFRc/fjnEiZb+QS5W\nzOAla/cr43jR0ugCHEVhJK7qKtTaAi3Jj4xyS4OqcbFpv7naa+iSmlZ75EvJ\nBRqKEz+f2jb9MJ7nnETzmpdjHB8PdMG8jEXf3GN5EPw/bbBhAjo5D6Mv+gg5\nxMjKqektOK9k4Xu7iHdzw/5ZMYeoRD4c0yzQ7+rDEhZbopx/+enGbyrKohSK\nEI6NVfE4fgRCuw4mB1euxqQKA/UGwR8UFITdUO69ASDwj6yjhk5oAw5RcVPS\neN5tIzE0V4/OyMWnijzOMdvrokVFvG7Vag25fT4JBYnDHDeTXU1cR9atSmFX\nLH6VHIsxMe/lAzXKwFVkbbDY4E/OpFJdcUecYpzSguAG9pHzmosqRGpYFMy6\n73xzgKWzAeAEaGtSFYOnRU78pFOImOTwrkJ1cAf8G7e2UZDcpGpXliREnBVG\nMRy4ywDIMbSr5zkREgE+A8AumAdoJomWJanLXUnKs/TOEhOHMOlUyek4NXne\nI3o4UubSyqlOppmMiwpVkDH81r/ywRMSVFbGDO2IBnhHdVYklKU49hadbget\nTuym\r\n=igG6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"237ca1e061b4efa53d623ea5dc9c9d670d5c9da0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.2e8c3dd2e.0_1597864976179_0.14571995098454105","host":"s3://npm-registry-packages"}},"8.0.0-canary.b2e80a5d9.0":{"name":"@material/density","version":"8.0.0-canary.b2e80a5d9.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.b2e80a5d9.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8ee55632794699fff34eae7d94acb036645129ff","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.b2e80a5d9.0.tgz","fileCount":10,"integrity":"sha512-XGgyW0mABB9lxb7u5XgwXkQzvguy8nQc7JBmWCAahH/quRPz6053IYdk2E4JkikcB3FBYYZjLyv306e2FIUGzw==","signatures":[{"sig":"MEUCIAWOV/hRLbm1qr0EA1kcrGFKXoKKn6cY5Th5mkgS+hvQAiEA+PDGIw/H6OBTPtaZXiCCVeD1XaMVHKNj2rEZJTb4VxI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPaWMCRA9TVsSAnZWagAA/tkP/1S7ldDgVywVfCwyLbed\n5nS/ZO7Vv+y269x92PwPz7MeEZo6CBCnL2hGP2BBpG0GVM8XQJoLwKzsW5NN\nqRUGEKL4t/1tzUC8MulUeNShZmlTeRZYJsr5m+jtB+zSdl2k6Dn2rgb7rhVD\nzk91IVdiLEDAa2zCyCczxc/Ui/XlpJO7TIEP9oplm0NpmRkLiGi2oLf/z6W+\n+4ABOdF+nJtxQgKdtQ01zsb3EoqFeXa/IyuIHiiiBZ/PxIWbNUPlWZKpzWYB\nM+ONz1mq7RSVGQiPuVE0MUmy2KX54TWK77Xkw1VbDMZRZoS0JPTxMj2YA9jb\nntMP9ylhNCWdThHucyfp3y9RdAfRNmhD81tQqVTuLL2xbxf76nHrGexyccED\nZ+DDDseSXsPN8MdRQ4bo9jmf5Qie3I9G0wfM/t07WwBGGnOFy+DQO/dYr5GA\nMs2kx7At82rlQDPn/LZI1aXVg8sPAtXxnd315Ab3FoZJpTh+/AYZ8r/VSszi\nCEnn1tj1G5y4XANOZwZDqpwmsu/VjVVzhf2Ap3hizuknPDw2YYwekyxiblpq\n3zaS9UAVutBBCa38VjXsWed677kxOi1RCCnwbEWi86p02ob4OrU6cFtLoY5K\nawjrcRWGY1LaxxbIHEbmOiomGvPcu+TBKL5iS/wbOpqpcuTpdO10yl0DJRDl\npLzZ\r\n=8SGj\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"84085f6b072572fb6b09623a5f0b35bb95db6fca","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.b2e80a5d9.0_1597875595659_0.5574867380980955","host":"s3://npm-registry-packages"}},"8.0.0-canary.ff88df637.0":{"name":"@material/density","version":"8.0.0-canary.ff88df637.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.ff88df637.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"366a5dfa963375c5e77bef5de914898d364565da","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.ff88df637.0.tgz","fileCount":10,"integrity":"sha512-bDBaDIqcdpwruRxG+suWKgxGOYfKPhvpbrBO6RRAZ84zDzso6BBnVPgrC+Wuv4eBKW10N+LyTl+qAYNcIla2wg==","signatures":[{"sig":"MEYCIQCvPt+NZyOcihc0JgptexjG7l0aZRXWKdn5h/zoZYp76AIhAK6QbXWL3qlq8dfgkMB4xrsxlymujlclyXMPRCAYmsVj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPahZCRA9TVsSAnZWagAAKZ0P/iROAefpNlueEMdl7aeo\nKrkFrMBYiQi6bLGy/+DzehcWl032WyKBZnEXGvQUWLNW+yo+JH7ITIJiDhZP\nGZZl0tParnfbNoxtCN51hyRazXBQN/OYqXaqoy8yFch+sag9Kbco+TJX6H9p\nd0536wMibmzN4/ZXDtsWq+sMerkHX5oHjBOQVCLWaaucPeEpaVOb493pSVKz\nFIUJsPtYbzrKjDvARQs9xT/5gBhNSBjfNcz4F1iZUcOuR/FOz8Xu3yOQ8car\n8fYM/4K+y1k9yy7suaf9rN0H2nPWiNxFJ4bmvi7IWLyo31AYPzYvQrl+NRGZ\nyGVGsp1rjeppTPSqKZ1ORV27+i56DtF4mDavCCaUP/xu476H9H6uVQEUG2gQ\nT1zRu6wU0ml7/M9FvkHFaTSLJ9NMjnJRSx0BF8XMqlyIR+uOdsukl0hKyvxF\nqCeRykOFj02JG1Nk8gBI+4FrXcVwfe4xe+Lylj432Dx7z9FL/xO0Y9KRdmNk\n0gLl+vprI1SdEI1TTe9KVhEnUYxUcIG1OfBlwA3T8J3OMZPU3PcM8uzsy3pR\nt5SLgZuYndOClFHIxSMRivsq3ZHYOaklNmhzuDiMr6vAsoe3A4/ppclnXm3e\nYClgr/94JdYFVBItw0lKykQCIWNNq/0Wu2LaqKBlDihpxVJirfoRQNKmDwTL\nOEt6\r\n=K8TL\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"36ba8daf061692c2f915513485e71707d8eae239","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.ff88df637.0_1597876312900_0.02459186862991225","host":"s3://npm-registry-packages"}},"8.0.0-canary.32fb314cd.0":{"name":"@material/density","version":"8.0.0-canary.32fb314cd.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.32fb314cd.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7f2c56c542a341e1b8bcd21dc33090886f25794d","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.32fb314cd.0.tgz","fileCount":10,"integrity":"sha512-RS0rs2/MIbWuLXyxMm0wihiw1Tv0/CUQkE4EOjYMujLRqPjEkkfhl/TjUetrgmH+M+kQP6Evht3zHAWBn2+9HQ==","signatures":[{"sig":"MEUCIF0tgOQj++js3E+OuXylyAhJB/i372GbBN8anxGzY5uyAiEAgVJ71fORlhoD42oRKLuouRbt4wqt1g4OEjPR3RYNlD0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPlIrCRA9TVsSAnZWagAA2YEP/3Lm+V3PbovwlMh5OHAO\nbogL9FnOVG5lsY+KsNmvEpOoAOBvZW/nFVGXZwk/W+6GsrjgZzVf8Omzi5sg\nELz46Amnj8mBlKQaOAUHgQBbxWrlQwM8RlQy6niJkIaNHybXOXs4HwaXjswZ\nwYQ2JBvAskJ0w7k8E7/diXvvQI+I1sa8NWlIq3cNAUeLiOK4w+tGIl7BvUft\nZsqxgZKPE1A+XUhkK0aOGCdP5XAkIC574AevdF10OPtUZrJlyONIyxJzWWct\nP5+ujKZsndbpLmSJXzezJtWf7If8WcZ3GbN+Rn2Jkncd1tIyRM8SNuDFHKuk\nP5ygHPToCfChGO/eLz1LnD+92fO/nOag6KFEGS6xpohMt+h9d91Wz7shhr5T\nBb7Z7DA21AlEwFprCN07lFf3PtR0INQjhDjC0PzjWQa8IFOPnM9XMoZTlupf\ntSdNkIfQ016+vf8kpQ3r0iC9WrIkeMFEFLc765gNzL8wzxUOp4FHUiqItAtN\nX0jycMhjK+JtnkbqDdMOKBJaxSDw8JJ5kXHOYvmpmeQSVXrGzuEvSQKACHHs\nXUHE1+bGgCLKTAZ1o7ishVoeQNhMkTKm/GBpCTYFSTYwhKn6DNh/yZiVjYCA\n0o2RcexGrxtqQewTa5v2KNZy2WG75vECAe3J7DQ5dLIR4gAK/2cIX0rRJUon\nq1Cp\r\n=c1M6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"61108ecdbe311b101b1b87763e8f3283dbb9dd50","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.32fb314cd.0_1597919786773_0.993170030138669","host":"s3://npm-registry-packages"}},"8.0.0-canary.546277d32.0":{"name":"@material/density","version":"8.0.0-canary.546277d32.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.546277d32.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e2ae2123498a646f6c1c961d8ea3bbf7ab58cea5","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.546277d32.0.tgz","fileCount":10,"integrity":"sha512-p7oi9KBIgVktANpJCpcvzzgnpnesmTQTV3Ypl3B08lAkFhAgrLtwyCcN6p3iC/cjuHZskJG/Eu5W/IhrCyoThA==","signatures":[{"sig":"MEYCIQCJRzgB+cP3mzoZRSkrzAHPm6rXHreo+hsVy5atYOAldwIhANu3oq0ZP7Cj27NXmK2/QvFgjs6vp2443TBDnZokrBZb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPqfXCRA9TVsSAnZWagAA2ssP/RtWWYDe1ParCmTddbKM\nPdjljgXPgzcAMdmkUHHBId0j8JMOL6emm1EWP4Xh2QZbkOJ+W+CqEh7EWqnA\nNxV16CN50RMKaAwuIMTXok3FvihbxNKGIbrlcO4hDd+6g0UquMVIL38sfWkP\n+ne3g14NeyJJyLQ+5sN1KSl4runhA+1AVTw/yYv3e5P9220II4tCQyzmq9R0\nlwwHMCIGXGOScwBO0cQQG3jg0OMicri5lwnhQqpK2NRJ8WM1Fonm2ZONB5Hq\nJATGGBN2sv0Fokhb2U83O/IPtaYkVEgX+UQew5ST22WjC99OVTUYTLN76Dgm\nPA7VJioQhZC/PI9GxzNHMmi3V4OEdpZfYwfJmxrnanByodO9yI1lhB2PF2tm\nFGKsjVraioxN1E3JKQZCd6r9bo0VJKZCFKxO6WmxeWNi7dIBbrVtNPYeLvDx\nWNuEtgnmYUqTI+mM6W05hbbNcnVrKAzo+5pfpMCFwE+fW8z/RRHJiTPCl7WZ\nyXXWCY+kW5PL6Vptrvr9085Uaz1HmR6zlifuvPu3KfT2Ywz8e2/sj1VSlYQA\nYauRQXwXusOOgS2PjHHNMiOCjQ2pTafvEwp8Y5AgMKPzh820QsFRQmIHRXAj\n8sHB0XlxX1K1/CYdXBfiURQvha91Bor1JZ5gUOwHQacYbGF+V8PDpPjripb8\noJWQ\r\n=gRuS\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"1d97622107fec59bf3261ad4f1f3bbe21fb1ff62","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.546277d32.0_1597941718707_0.29720449511321334","host":"s3://npm-registry-packages"}},"8.0.0-canary.da72839f4.0":{"name":"@material/density","version":"8.0.0-canary.da72839f4.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.da72839f4.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"148c3fabe92687447453819ae59f25afc97adba5","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.da72839f4.0.tgz","fileCount":10,"integrity":"sha512-5PkMnV3Ze8hm/CX9/t9jPShdl1QOlNIIxxfsJcYEgECRPMLReW5uX3kkrq+WeibDxqMDKnhwsw7VaCm3/oTcfw==","signatures":[{"sig":"MEYCIQCR7IB7bCHhLE3tJSnPCbZcgaTSyku+xFpu7g+KgdGiwgIhAMn0QrlD79SQYaK/mBpvbOxT96RIpri6FCxY4yocwmAF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPrndCRA9TVsSAnZWagAAtW0P/2qs0AbW9EzqaMlq3KgZ\ntKbJ2y0ZE+rFGGn0/I4NwQHDBIivri91ypKKrlbH0Dx8Z2BeRPW83crIfTSa\nwFMqradM3gP2CRdQMlfl6pMiERatjfss7npQkc7kH+TIBNQ8PmewjvikSaVB\n02a5dtZCPcdEiKFhssMwmT9tenUiFoOyU7eLRcGUQehcIGRIxsUyblsuZGOK\nTwsLxqE5HovmQH8HpJM4hRUWsUj/uzcoi/d33Dk0oaaVaQ2K988GSHTspdYq\nacjI1zjEm4SV5hz8tIUgJcgzfE4xy3oXxHBSpti9MxVCVIe6ojzmh4fhGSS4\nPEDgEbBlRoRf/YSsncXVzfMusLS3dsiot1/BpTXDFRQBmlm7oWCqgKclRGBA\nLAwRmENY1xq/p2WL8ZEGfMBU8ibKzuSHlhq/ZGED/UGiX2u02er5YFFoxxI0\nfWEyIXQxcMQ+Uxt/73NV6hwi1BK5YFJ4XUeGcuucVek2YMbErG7tEEhT7Ak4\nEFuNXRR49SPWybwbkoj248zc4RGAk3/Jo6uG9mfGZei1zbEBXk/zPvM5o8Hf\nzchKauq36m22bDeRnxG/UXFW/4qThgiY5/7vN04o8Mpa79e6FIahW87pWJh7\nzMHxonLYmunixfEgap0t2hyiqaeKy71Sepv+/0OvybgvbUIaiY6kRUfLoRLi\nA0CJ\r\n=s3vp\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"1b42b69de51cf24aa95c09d0e08ae1e644c71335","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.da72839f4.0_1597946332829_0.04660396436125014","host":"s3://npm-registry-packages"}},"8.0.0-canary.346069ccb.0":{"name":"@material/density","version":"8.0.0-canary.346069ccb.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.346069ccb.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"887b04617af0fa803f2031f7eee69f68eeb4d9b4","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.346069ccb.0.tgz","fileCount":10,"integrity":"sha512-6FfnvJP2SDsVMExquz7yXkLt7nMMxIAHM+nP/uiFuW8p1LSHpCSCv8Wj388rsRoPP1nrgpGUgfliGhPofRcCaw==","signatures":[{"sig":"MEYCIQDGKjE0bfOQ8OjxttdrFakkvBH/EQqIq/8XRbI0j1BFfwIhAIA2+j7t3YtcE7tsYb04hMRoYO9pH7sqS6D7AWNf7Mcv","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPr4yCRA9TVsSAnZWagAA8ZsP/j9JLxcIuyMKQ5CtSPRm\neBT3VDhaZPxkdOHlTqjTtJ8rKXTlgxwg69znWW1lXlqbMDXpa4VTR8dwxXvJ\nuwMJSwnmFfN6YXu5HVB1I8YC3ndq/2Cw6F9yP7VVkdW6jcfrI/v/oJwvdjYp\nU+r2r1VxFOODgzHfGH6sySUXnQrgIQP0v7kZbFNyc7186K0X/SScXHAmt7Ex\n+FzLcfnCSutpNfk3Hg7MeE/jVZ05hzVb9QaqbJovtWooilZTE4w5i/XsQbfD\ntGNxo3upbF0JiLOqTtayKi0ctW7/ENOw/OrZ0fRHKeG9zhKYFZ/D8VEkubvo\n3VrRvM8gnkasYJUpZl9votFnlr7TTmU8NuvbQrG/bEUTD3isiRDww7nX7Sj8\nMxTnB+du5Yk77G7llPHHod3vtnhZ49IwuEwMYkjGf26HFInjJkmkIv50WwWs\n6Sjltrbj0KurF3UcEi1JkA4EY3HEw/o2BoUr0F3QWWxySOxnRetDcQDZ4l5l\nO6CmU3FQiPz4RxsQ0h1oExgXsU/Pz5wscd234IjXb+AC71XFdCAsLPFomoed\ns+7oT5qdaXgKHSWv5N1bXVwBosnHbQGb4CiD9oxEMUW2YlEBLldncMuYJYR6\nCN9RuZY3T6oW/fWsN5CdditXudfFzixpIGCdL76ZeQ7aWDbWtjAHGuRsUYtV\nqV+d\r\n=CfSB\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"cf298389e23ace16c7e4682ded1e492e489011be","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.346069ccb.0_1597947440505_0.059606795549211444","host":"s3://npm-registry-packages"}},"8.0.0-canary.e27c5802f.0":{"name":"@material/density","version":"8.0.0-canary.e27c5802f.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.e27c5802f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"82ca7e382486ff38c30da01730380ff0bc0190db","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.e27c5802f.0.tgz","fileCount":10,"integrity":"sha512-7UtYd4Q7oXIxBJJQBXllT3ftF5JHulOxCbDhwkpby7wAHPvuTLt1P6FaqXA885FJ6xOi0CinM9c8vyGCg7j5Ow==","signatures":[{"sig":"MEQCIAF1gAdZKnTUoh+RyJMJIxGRWzohEH44b5RnyWGm5gDNAiAxwke9upvora4juGxuRj3GVoNKJ6rEipWoR5XxEXr54w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPsuDCRA9TVsSAnZWagAAXI8P/jy/HClF6bvJ7fFnXoQ9\n32GbLABQ+hcq0ct1Yph0QyIgMYYa3BVL0PZTxcqtqPWxTl9DEy1oBgnlJh+p\nGoL5JqO/X82/Y1Zt2acotUtJllSHExavtbEoyVccjIE9rcCzEOGZ4BqGzUzo\nz+IWoFLqGFXD0YZ7VOPw3Mt2NzNv3Qvi1gpZ8aXnUTjzmmG3DAjc+TrCno4/\npj7/Dftz+U3JuUyAjPxaQweTjrswqrdLr8GIaAsNSmECc+10K86WVr/W/MWf\nAHSny48CgFPj4mgJN5L7/lpFOXPlayO4yCXGRTOWHcyaGqRyBA0Zhy7sg0f5\njkM/Kjf747LH/PHbZQ0xSxfp8asz1f+cffvbxOdJmovAjRBKVHESUG4egaQC\n9Q0/Sc9qOjTlhvhzkLReleOcwM50+u2lvNWdkFEr9ZFzyEda/onfboZIIHWz\n0V72OnxeXI9XTo7OxTfWWdzkVFHRSPRw41pR6oerrgJ1c/JYolI9vIcuY3id\n8u/tIdYFZlcfYQpxqzSmKvAZZHrRtPf2GKCngsIL2wYihX0oraILfHT8af+v\n/6vPp9SQ7wJSMxwMqiCWySxNu/prlYtIMy3dTkHjO/qtAodm9GFjzpp+ffaH\n6FYKu6vyGZUl2EPHrE369yG5Z6JwTZSNfI2EFlECYGf8z26jEjMIyp6KjjGZ\ngAp4\r\n=8xKj\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"2c9246ec446246e8fcad54982848f7cd5839f69f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.e27c5802f.0_1597950850773_0.6190033122170266","host":"s3://npm-registry-packages"}},"8.0.0-canary.f4532b9c8.0":{"name":"@material/density","version":"8.0.0-canary.f4532b9c8.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.f4532b9c8.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6740de49230b3ef500f5f14dc26fb58ebb6ee32f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.f4532b9c8.0.tgz","fileCount":10,"integrity":"sha512-hdVU84UuyV4ujnhbytpKlq1ZdolNR7sw3M8AVyKJwyxup8jVPSQiQ+VJslMI+9Fp1bLpkrZLk3kjHojIQqmTzg==","signatures":[{"sig":"MEUCIQDJC1baQwmQT7yDcI5kPOjyHMKzXjrsauUZD5+d1po2CgIgNsO76+4Ok+0/NqSxmng7JPSwesAEMfkgxjcQLiAlGYQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPtV/CRA9TVsSAnZWagAAhhAP/ROvc/KFLHNHHLdjEemu\nCi+BT74E5s0oO79G2nEhDe8hbLjsKQYjkF9Icd8LnKdBAnlIEZ5TgR82cWrs\nUA8gzSXCtJ8dulDGkH+S1l4aLYrk6aj6Cl5+MqTBZ8lseghyBDtOCgum1h0r\nilsE51grXoD7ZlzMmMFcGjowpeQXYG/urQ0mMCtEpSphVEvxNszgevQ2gLw9\nIs5J+x4ptHKDbbyivdzDzWnNGCQw+hKiZJA9HxPTkBOmnZBah/k7JlglRcgj\nXJgeJSqToNFhDuIo3yzQFYQ6cu3sKDD8aJuamjHS6IycZ8c0j5sPnkuaSH/t\n/LNj7+ZpghhdSjgGGlZMu4oyknC49w6RaGb6cnLeFww97tB1sN2ZC47P9qeC\nEKdzNvP6xb8k5dN3jERRonlTDv/a+ws9zfrv4vCsfNGbjhBBC6PkhnZA4+r6\n8JGCu4YoJ3BqrXpZZAbAe9AdZEodL//JA6kqDcZupDKpkCbA16XHi1RpNex3\nyLf/tg87EgOFoVWXBwk/brl2jc2Ed7Y65sBrMlK6rXMKpyBfYB/qWry2jWgx\n3dtVStYH899N4c7HPYuX6ptsVAOeZO2mDYYRRHTw6D4WWxDknQVdJE3JtqMl\nuCOs4eU9RINcE3MqfB1JULalcNxFBaY7e8lhLqqJDASg9L6aqkbWLZKGDbw6\nBhnH\r\n=6UG0\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"be56493a06963f21f1f5343fc6db3accdc74216d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.f4532b9c8.0_1597953407213_0.5221726963268991","host":"s3://npm-registry-packages"}},"8.0.0-canary.fbf73c2a6.0":{"name":"@material/density","version":"8.0.0-canary.fbf73c2a6.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.fbf73c2a6.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1a2cf6c8b27011783e86be6b8b30f44043bbaa04","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.fbf73c2a6.0.tgz","fileCount":10,"integrity":"sha512-h6LkQdj6RigpRbAYz7V3B/ABn0UqJUtJ5Lr1Z53KS0zz697Ue9k3ULNWllJo74qrCPl5dewGFDatci2NQrPZaA==","signatures":[{"sig":"MEQCIFvtRY5l3kA1KV28Hd6dUpEcCdk+pDlHB57954BDauT2AiB2IOdCEYOIjreqGRCaY0DLmLhPa3l2K+4gHTchu+DIUw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPuWMCRA9TVsSAnZWagAA5F0P/A41RbhQllmo55ykCfJ+\nplfrvYJ9jc9Yj0ra0L0IKXium6mZ52EUHBkxhNOt+nTmwWOTtH6zV8AnZ1fC\nnOFmc3t140ZXm1K2tWdnwntOypubq6E4jqGnw8h/mXCg2r/hxEmo8MHxcODx\nV/WoPtQ5ZOvW16a5nXM0GnZg8WsOZ6XeK+HLsV4WglD7CElOqSiL4pp9zdhg\nu0+Uz18k5K0H1D+N+h2UFu8Q5RBJYqLtt9rJIMR2xm4/qkb6Nwzgy8O77cRU\n9ErKG9td0g22UHK0xLvVx+IjVN88Lu6f1j8bUvRRRmiCzl6YKMDvR4UIXG9w\norELdANZU98TTdldxPl0QWU0zXr51bm8vwQBVtTolURu/2YEXlSyfwaL5fPp\nJDkKzUNCC8R7aiAKa9RGQuytk6SFBuPj2DSg6Lfcc1sIxOfWGhfNH3KuCe4I\njrlNWIydBU8dGYZDTzmo90JptYxyE30B1ccdS/WZVi1SWBxsLL4o25sGJyNK\nUpgEDjGfLh+GhmJ/sWw6zmZJlcJ9GcM2FbxiMRaAVi7WSLMRQOepuNeRJtYk\nCOg1ffdiPTj6J2lL3LcgKRm/Ducf12ahgZOn6dB6mLodk9BlnPzWNV4V7suN\ncaiDHHj50LfxJWq+XWhh0kAhZxO7cZB/ftOvEjuCUVJrWpfsZaU9Y7q6f5U/\nyRKu\r\n=MCdg\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"64db59647b6d726098d0871993ac5c563d92be26","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.fbf73c2a6.0_1597957515520_0.9423274723995663","host":"s3://npm-registry-packages"}},"8.0.0-canary.cf800124f.0":{"name":"@material/density","version":"8.0.0-canary.cf800124f.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.cf800124f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b282c50aeafe9180f1cdeea9a6b1df7a01d7c31d","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.cf800124f.0.tgz","fileCount":10,"integrity":"sha512-6UWFTcXH0K5I7LEtEMV4kzkpvsVo4A8lDIR+YqfkFqW1ui8s+Z4hKBrkmeK2P8hqD+4hjR7CUa2gUICBdFOqcw==","signatures":[{"sig":"MEUCIQCTRFRaxi1wB0ZY6gmg/allrwgzGkcJS22lb2b0KyQoogIgOkNE0wHtuQ8x8HcsrCd7FjKOY7hwL2VanI9XTkGJxDQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPvBsCRA9TVsSAnZWagAAXiYP/ij1GodpilrFHsCWyUBL\nZCdzI/UhV5fUQfrr9+Na/qB9UQcc1/0hGFE4rRAa0daFOq3Z93I7Uk5DZAxy\nIR81wfGXRayO0b0e7vffbwUrq6JGV0+6DVzdCNAz5Xv0+g3ZJVQU7whRb/mr\ntu+oqjL+a5prDotdWIl0Xz5bzBwhcEeZT2JtGkD6bYRDMAwr4gkxp5uSMvOM\nSlDbuGI/UbDuT9UXPAiFF2uOgKN7c6UIORWs1xVmOaBEHdxL3GvAxAxSkKIY\n0Z8aiJRoIGOSYga7rY9kAYOA4cg07o0Zz1lZTvstS6fgG98xiU1qr+OFY2OK\ntUQgWALMyZtgIpt2JQbLQbEs02GRCFqdPOOoINTR9bkMyP53BV3kGWO4ikCj\nCA6SliYIMTYixQy1f7yfXXYUHhkS4yprf2mCElwQZyKaaAj+IYuDQ7WrwsxQ\nusDevHYzVY6X9FxlKCXn7uZmwEYt5DlHxuRBlFX800KBqJWzIInm54b0Yn97\n3/3bKlhN3Ci6IfnA1DpPYUK1diCMWwi/0RSA17sVw9SFnK/WOOG1/kHsXCNv\nw8NwFs6z5FyZN7t0+awnqjE1FxPWUf+QpK19NZX+dTNmxglNsjG7N6B+4sbT\nY4SqkiS93tvGHcCuwG1T01HukHfeiupspD2rZlT6TNlokxx/Wudw2jQVQwfd\nqCww\r\n=ZmJz\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"b15bab8ce97a47831c29a3b0acf1c34e0533b8e5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.cf800124f.0_1597960300335_0.6642843979234134","host":"s3://npm-registry-packages"}},"8.0.0-canary.95e4eeea7.0":{"name":"@material/density","version":"8.0.0-canary.95e4eeea7.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.95e4eeea7.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c744c47178a79a7bc2385dbb2e402d9ac6404b7a","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.95e4eeea7.0.tgz","fileCount":10,"integrity":"sha512-0/G7vkv50fCnBPWEv0/GFHcPI1XZlvfI17XSVfQKbAwm+hz1NzbA2WsMCj4opVjzQ9p/vsd3lEYplRt6A+SUYw==","signatures":[{"sig":"MEUCIF0j+VNeS58mI7+pftB5Dt6f2Zh7zQLaw3/MSJu2EmkSAiEAmo0U6nN6bId5oRMwu6JYswretYnrIzPpbt0YQp85aho=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPwb7CRA9TVsSAnZWagAAvwMP/2/wvPg+aJLFbks9cMAf\nObgyjwnxYfCgvFJmXx8yynzzA9gO30LzOUff6x+n9hDI7LWWEfj9bLzYlPMt\nVlNc6uRD+pA3AcuN92PdmvTha9457Um317Q095E6CFX8Q0Vi35U40Gc2KMrb\ndUW+h7ZuSOUy7F+EvaHzNvzU5XZ+o+n/+J98Xtg7+vOQOVkLDM35pPj3aXgs\n8F3oLPVdM8S5Tjs0+XW0F615dr7wiTuFCAJVKQVkmBy8rgvozFuS3g8Oq8KJ\nx2l6ufeJ6usPpuQL6+JOpfoI2+BpI7GiU4NPKmUEAHngPCI3dUFW/7w0Ukc6\nbfKpUgsInRKEGyaMxzDBzTib4hV+NqpnHCNcJTdiD4wb0J6uqYr4jOb/hBs0\nKBcuTep28p1fQiX7qGkFIqfp0n7n99MwxZf6/sCpTJmw7+vQhQaKkKaeWFlq\nHCp8FCF6bS45NYFOv8ycloWdxkDz62VZ4N/bmUKdGIfRJeCNWB8q6j7l5PRB\n/PXzficdV5/nreB2639mBL2/kgQs7tWC3kwi4feT+MiS51N0A+FP3UueNO4H\n5O3s1c7z5732FmHHC6FFil3cF+Uh4H4CH1CXnUjP2x6N3ESCddK+2AtBHLSH\nhV5sYwcVDb2B9LKwIP5EO76UyNRZkeGVhv4X/Pc8O4JjsHKvhvfTu9cMLxxs\nRDmh\r\n=5wP3\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"be1ca8dd4a02de91f796aff6f2a9fa745f02df13","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.95e4eeea7.0_1597966074488_0.6172378639843066","host":"s3://npm-registry-packages"}},"8.0.0-canary.91ab1c62a.0":{"name":"@material/density","version":"8.0.0-canary.91ab1c62a.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.91ab1c62a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0a37bd349fce985e0078e36fe5a254401a282e41","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.91ab1c62a.0.tgz","fileCount":10,"integrity":"sha512-Jw2WjtInerL5HK5SDImL8p2NcMAFHqAgTx/Qu4yLxwnRVTu+4J8LTYkvWqZWVa/nf41azwlAcYChJqkhZxKPKg==","signatures":[{"sig":"MEQCIE4dl2buUokq6Jy2A6FjgBdkI/wozh1cOVU/OJyliFgyAiAbePatRsPMnrt7iXPZJiGg4kmOCdgd6UGwuES+sS07JQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfP+PzCRA9TVsSAnZWagAAXxYP/1dSvezogVAcMM6Puno+\n9yByRai0sM91S1HQY/KhQIn7hZWac5JowpmOkMPEAAp37/N/2Y8m8px85BgA\nLcP69bAsiDn+R+knoIJGg0AERkxBGDaQf+yIu1cgwvdTlQUYT6aWUdOG18vn\n8g+VO10yyhfZPx13OZLCIqAUvAizNjdytoZ5txBxBlAroevmcGcgjc5DdsF+\nF7telcMphpii+UNO7jENjVPAL80Z0wYcTFEvBFXMtrexy9z4IpA+wIp/cgFO\naCugBuQ9ZLsfCaYPSVg7WBKWL+LtjJzDybDB1AMXiLBPmGJMHwRSKJNU5be3\nDRCM1tlboasK6qMsZKDp2HmkR4/ASihjDDCn2M1ZpxNZkENgf4d9unvR5gof\nbj7MHXPeCBJ/0+iBAIM4PmGosoASzW00YHWIGI8/IajceAo5lQyo0M0pk6Fx\ngWPMJjoOhtINCbo/4AsZTRfBQifI8zLOphlQAMl+59jVEkMSrgaENu6NrYbJ\nOgSN9pwbYQlrfqNDl+tdWpXoH0JtsJ1LNqO9NUD6Ytx/PtDZtagN7MZO+ZC/\nothjQKRnjPnTGOQNyFnz686KRbSY1CSwFYGPoCXKGdY/SIQF4iHA4BF68hQ9\nydTXhU8EgqLxSL6enko5Hi83/nTkhXmwMT7Dks6BHmuoL1cIHDbPc4f/iGqc\nhf5h\r\n=TQeW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"389b1e8f2b60ae90730087557ec80e133f0e0129","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.91ab1c62a.0_1598022643222_0.5629184804948757","host":"s3://npm-registry-packages"}},"8.0.0-canary.58eaa9f02.0":{"name":"@material/density","version":"8.0.0-canary.58eaa9f02.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.58eaa9f02.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e847926bf3dcaad3327eb03597f2bfd5960dd254","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.58eaa9f02.0.tgz","fileCount":10,"integrity":"sha512-Oisfcn7eL6Qn1JAS2T/QyXhn3cJ8lTYDYMZx1CPRtocvgzfpZTtXMBhyyZz5KcUbBjZjuxR5bSYt9TqOXg+27w==","signatures":[{"sig":"MEUCIQCoZ2mN+4/ta+vRefWGs/cX1QwyMYUV5evNxuEYM1zb1QIgWYFBCWP1HxRNt0ZXk7mnOwaUXAtXsXh22fFDiKpORqM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfQCeeCRA9TVsSAnZWagAATlsP/2HkK2sXbHkhdyqg88ig\nxCzSy+O1iuIFdGE08q+XTqUjdMIOxsjQbA+MAoIFnMJOQY4GJtT+LQLlgLP2\nZ4kTTH0DFPU964TjQo1cgVU2GJfboYpFgHLl2cEiHlTiX/5wtTEHaK3e72cA\n37tYjFW0OZWj5p6ryozdojAq+F3M9xgH2wS6KSKrn8FP20CKVVocStKmQDoa\nsR+QEqVLUenSUwLGvvYMKqm46AZvc1x+c/E3PdtBwehMLM5tTGxI5mYbcW/m\n1Ai8rTS4aHBCKtIET1KX1rO3dac6Ygof1DlIBJ5CL4SK0F1pkSLN5I7dZ2xk\nSyh+wP7rBfKA2WlQLftj2DRGrNeYM8WxFF+12l1jNkFuG3SoggcOlhfD+uzv\nz6um0COu2fEEsh1Q/WySxiJTXOa1DgiFMLSZxg9+elfhinBrtJSh6FkVWlic\nO6gmO2m7TOpEIKp/4ws62cosoQTF51/oAPsCoxsZ1OB6ScOZw3xbq0Exsi27\n6iUC38/lZe8dms0bqAtvkpamojRvsKtuFFxI7rBNJZQHAnVFgoOxEcLBUAKl\n962r0vTsJqnowbXHoNHBrfCtJ8L0HE0bTms4/qdUIdteJqqsoUW9ls8cQxij\nN0nIHgEgmDgEcI4xoEDAGxTrUXP95a7O48IeG55oy2Bla1LvOIuxa7JH5Pog\nG+Nf\r\n=VoMW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"9f3944d638392fa39379eeb30bd7348c9578f67b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.58eaa9f02.0_1598039966435_0.19628688532716776","host":"s3://npm-registry-packages"}},"8.0.0-canary.238216fc4.0":{"name":"@material/density","version":"8.0.0-canary.238216fc4.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.238216fc4.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c29fd016093a2398c15e4f284c0c2623dcc4eda6","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.238216fc4.0.tgz","fileCount":10,"integrity":"sha512-YyQbAyQafbI4FEnd6S3RCmPwfTzhft5tfXN9zEP53JxAnEDoCrsY14G/WWqAn6CjJzqvtn9SBa1ZaS+ZyfxY7A==","signatures":[{"sig":"MEUCIH9MguKKpZncQcSJkdYMBfB5chbDLvl7SkPEm0WK3dSIAiEAnwEqDxO565eSgtQqdN0/PKFBp08Y38S3PyiIgQVSk0U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfQ98+CRA9TVsSAnZWagAAPDQP/2F5xkJHzavUS5BhobPm\nqUxY5yGuSdSFjA5juHzjyjxhCzQ0sY44HMqtqnRkQsqRDT7zPzyjHEIREzrt\nuCJcFd9igbyjzexoHvWm8V4mUYvMK8Z0qrVjVvak0FkNvd+1203iXVxfG/J2\netWY79K9NNoW/bDUvJbWgTcsWn0VkdqVBTSAXB+sk5cMNv8uFHs+Tq+NV4hy\nXQO7VKYaQhOX57KcOTAUaUAesUebtUpBuXfVMA0K3dSk+Vwew2GwzA7pXYTO\nH4sh41UPTkeaUiuiDmnvkzoyz24/8G2Dn1VQlNURc5y7A8kTrUtMxu0h40Gc\nJ3/ho5XC1eluK2YmjtaarkKDgQKiwVfd1JoR0lNKrh3CKHHkMEEjnkso95w3\nLwq6mszw5UQLtf0W/yVQHr4HghewRKLQZDFOCam9Yr7ZMwlewadYHdDfQ2X3\ncp3fEvryF0CH0OmFSVxMYYOzCJXJ11zLNRwQ8TeFsPSieRcnNpJOVD/8gnme\nTp1TPJhKW61PL8s7JHv5fODXH8EhE64rd0Yi2DW7ocdW6Y12he12nlJwIzBY\nsd5Ay5Co1xdD/rrS0vQXOBBjJ+NT4JmcVocHImfoj9FrOIIPlx1oFiSNVgkO\nSk+h9RKFRwCdO9HN9MP6I0hpgT/IGbQbos+SsB9Mkt4EEafAeokHepXzj8cb\nSlrx\r\n=nX7C\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"e224b287e176f866661b15e2ee791e17fcc44aa3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.238216fc4.0_1598283582399_0.47113694024996366","host":"s3://npm-registry-packages"}},"8.0.0-canary.a1c65593d.0":{"name":"@material/density","version":"8.0.0-canary.a1c65593d.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.a1c65593d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1ec69ac43d64e056fccd58f2bbf0412b07b16bd3","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.a1c65593d.0.tgz","fileCount":10,"integrity":"sha512-HWbwdTiSP4HKmRGbKKxTnCSkrVv+JF49ev+Q3oFCVw2OnpjDl/PhjQ3iM78UDZmf3vuEioUjYGseRuYz4/kfBQ==","signatures":[{"sig":"MEUCIQCFxcTBk9hc+HNyo/xzqwQonVAlzGfSTM8C4jI7hN+CdgIgFN768gWxlg9G6zdj2jwPJKLewZkF9gCaluwI24ja/kQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRH9eCRA9TVsSAnZWagAA4QMP/jVynhMPieQXjh7agSrb\nvSrEO3vrX2s33tLc824z+UHnEKyKTWkAJNZtecRdqqAueArWZbjfRywtfwnM\n8sAx7p2OQiv3LfOqcnlH3Hzml5PkFYyjAuwtbrCcw75T6tXa9GwYaLamzoNe\nF1XW3fsXlYbnx2s/TZacAtYRE0k0SczRf5zr+XTJWOgEbAYCIPnZHpnWPswi\nObmUDMhyoUfh0n8trfHIb92c4Hk0yne9BnCIBgeQqWthUJRn/sbtAQpriLec\nB5K1kYxODB/tBR6Cigagw2PyBqyDzmO9WbGOhUPLa42jCU3OuHpUsDQflkp3\nxOBQ+lxw0G8h0qDxxgvXJpF1IbxES+2ytkN1ljdQOhL38R0crrKkx9cEdki3\nD/ANOF7UL2bgXr5IVd4xrj1PF1+OcY3S1DXOibQq6TWGHnIxdNdIMXg773Tt\nDeTDTMxJPJvKgkHSsiAGHmimEeVbnNhCwwKnzQH6Y15/8uZwDY2h3Hc8a6OV\nPIUCqCfGhbiiH5mqnLWGCnVZyCkM4nRXdpXMQdCfWQKNEysW9+U8olU4M6yS\n+RswfzlEsHN9IFjombo3zEy8zWS7TSSYCq6xL4HAXO/AQjq9J52NsJ5Rg25K\n+flE5HK1PHDJfA9h8b2wIU/gxgjoUlmmWzTh1bikXAzRLN+Nu5VdBhoR3YkY\n/Iko\r\n=0wNv\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"71fc6b5e7b16ba7f6d37b724ad4982780c9c9932","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.a1c65593d.0_1598324574254_0.7169948328771161","host":"s3://npm-registry-packages"}},"8.0.0-canary.708cc09c4.0":{"name":"@material/density","version":"8.0.0-canary.708cc09c4.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.708cc09c4.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"30d914fc62cadc47d244b3e3e7740b3d3a060248","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.708cc09c4.0.tgz","fileCount":10,"integrity":"sha512-RQWHBMcW12uAR5GMrKwv/U0QW6QxGC3Yh0fbfX+9DkBmbYUuZcni7prUbxT0NcgZgxV6nV18KtXcRXQK2mPg2Q==","signatures":[{"sig":"MEUCIFYh7Nq8BDhd9DjUq6xcbqoTlaodG9kpLIkk/9ljt9PtAiEAqrOlmUBJ+pFmcTWk1OUvwzds8WKkbXJ03dJY/EwbKgs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRTRsCRA9TVsSAnZWagAAIJgP/2g6u/qEncn8J9UAabmQ\nT8vxKhxZnk+M20gut8NkEzNg0iyrU8l3HXUYG28KyhU7HYVKU8SrEY0shYU/\nuQDR/0OKj+eHMeTxbqESTxUAnJm4ACraFU/EZDASXbrm9wa1hR5DZt6f2ZMd\nYkSYGF9AqarmncjrtkIDj8zi0V4jRBgPkKY4JinDqNCjsfVmhZzmbeZqKNws\nYl3rDPdxWW0NkvnJMoy6daqYdaPPZjo8nTCxVLo2eJ7L63DhPze413AP0EXI\nPgF3Y/6oxaxXl+csqH5wPXNFsUhnrmxRbhNgMZQe6FkGHWl4Cuzw9GAvXG/3\nlzBI1ZQexnUB4hMDdg+ktzbMc8sKNvecyTd/+dl4bmijq7aDosu5K/SW3ptp\nO/S5ZElNm/tpUzy4/QS87WzLLTJl/SFEb4Tte8yMmG/fjL//r1Oci+6PAxm6\nNyKBh1xjQgPbIS0NGyYIQOD3fqjl457ddz1HiD/2R8npZO4qCDDXF6Jqyb3/\noXJFNQ5LdGQQQOrQkm0dWJjMRXKwmbsuZrngE24JDGoME5KZB2uA+4LF89pI\nLhIHuf1qpjTfPHy3NDs1asq7HjgrZdSQdhNXNOXS981ZMuaUwJI6vaGkRMMj\naZvPc6mwIZo2jqO3tSGUqzcuMB7s/1cj+24JC+Sl7SR/aMR2I1ZPC/I4/U37\nXidO\r\n=2x4f\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"41353a40a8a6a80ac6438fa702cff9ca690b897e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.708cc09c4.0_1598370924075_0.8251569964764016","host":"s3://npm-registry-packages"}},"8.0.0-canary.19bea2ad3.0":{"name":"@material/density","version":"8.0.0-canary.19bea2ad3.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.19bea2ad3.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aeea95f86e951b147202ad97a75e6c1376b79ca2","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.19bea2ad3.0.tgz","fileCount":10,"integrity":"sha512-D6qCmrSE1wBuIK7hME4Y1a87TCbfsObQI5XjS6iCSldU0PQuOy68Vd2kakvu4IhzdHuvCfn2dZQJlhNZZ4SKKQ==","signatures":[{"sig":"MEUCIGIlgtPqcNwEyk5kv0t/JLCPTQY+9HpJOZry/BNMUTNsAiEArXQ5td+sEjtAgjUZO1t6BZwkp90rBrvwV8fbEtQCbEM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRq51CRA9TVsSAnZWagAAYFwP/AiEh/SkpleA+9n9jOUc\nnkvWI8jOQvJ4LsdpJ8aEOWzSWb1cgAPBWhHoPqMhkDS34R0qLl9SpDPyOsFU\nDlMDEweGYOWJ7Kj4VhNDMcMRjrWQVWFNUwkPL9Qp4nWZe25AbChZwRfV1aW3\nPRPqFCuNlbFveAxcSrQLWFSRceHZkTJ9EYAObvBH4Ld08nVScIP2aoq5B7OT\nTpIX+vEN+N4THtAglEbrysDEdx4hmmHi7o9axCe4EqBMrEiu8FCwKaCONiNp\n+gYps4gLSHFMwM1SIbqnczu82LxWqCdq3eL9B8sjtaA5gHlFvPNuBJXh94c8\n9e9B7ZJtdrey9WCFdKOPG6OJq9kaRrhkz9Eg1c8Q2gHaxZG/xjHpfC/fzmx0\nSjN9NaCqplNJ9BaEzT2+gsA/O+gB7zaiDl05Mj0c9q/TGvCO+dWzPaNoBQow\ni7zryOlKm6lIbRUsOqD8fJ75driuKX/3rBuXZzThuZOrnjjC10blAdg9wW0f\nCwzFCVBqMEo9kv6xWVFPS32lc1f7+B84nr6k73ydjOK0kt+lWJDG1PKRn/AM\nnkvPhxhBkOGG1MxZRNd3KXJCrvGFB3iX0wQ8ytyXknbUqpC0ksnE79gT+JEo\n/OOv05a0C5RlR8l6J1AgFrMH01K+q4rzSdY4+TwywuahyUtGGyvzA566VKtk\nYARd\r\n=vGrf\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"4f1ed83b6a09dd3e7d24508d420cd99be9dd3893","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.19bea2ad3.0_1598467700718_0.3440034522886921","host":"s3://npm-registry-packages"}},"8.0.0-canary.911014711.0":{"name":"@material/density","version":"8.0.0-canary.911014711.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.911014711.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b8bc34aefc6555d6f84c3271cba61e39bda00097","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.911014711.0.tgz","fileCount":10,"integrity":"sha512-de4AanGrzsOry4gmBzEubQR5qbVcwIQO9/9rPslTrtdPbPp10fyLvaCeYnaKNwg+F8+wVgiIbbA5QmV3Bkp6mw==","signatures":[{"sig":"MEYCIQCKARUkMdYeTAVTxpenamOfnHSpZTCBt9XjbTUzpZKiyQIhAMcV4ck5AVViHtGjyUwADzqmGVH5G+rj9XC3TzLDB+4y","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfR9okCRA9TVsSAnZWagAA9GAP/RPe3sTbO+tL9Zu8uaBN\nDbZMBA/13P21ZVoqyOElgx+o3vn3T3PI+lVEq8zQmTysnEI4ALQMEvo2cQRR\nEwXqnNVYgXDn2XTE8NhNVS3qF2jh7XymqINE42Vh/J85GP7C8J9x03gAhZKw\n0F32E6Qa8H/8sdw2Rx21YNRc1sskCvfV6U56W7Skv3dObPBMLoayWqUJIVOa\nIDU78ALfHfbD67LRYCri7iir8giG94S6XnJThrNXxlqBcbnvO0dt3SixW7PM\nAb0IIWGJHVQ1+9cdL0sQJvbYI+TLwZB3TPMQ4JVdNn64WXFh0f/uBJCwIJAf\nMeGOXUtSicIYThYnsWWUi2YPxxKZVhrc3RZaR7mcEtgbLhi7mwA7Ydv8qq75\nZD/lJb7qLGelIxs1cvYjlPG989Re5GYlQErPI1T7/6Z6p5abQZfmWpLt617V\ncW+hzuwMpf5xmmEDLKWAq6L17FaGQ7yh21/tR1oUulkJIufR/AsXKZwffvdW\n290ACfGIiJZ3DJM2zfnca2eS1QzCJRKpJgTjY+t6i9ktXrsH86KqPVj0nfcW\nxhsC5/a35SGny0lcfMTgZoOtpp9Z2BF8Q34CzNweOR0C1TamTbDNhTCLtdn4\nKSfbfu58oeLB77AX8pg+39uAPmq2/qUqdfC0BblNIqXqfAKso+0TpJW7VCp8\ndbd+\r\n=X0yK\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"e0563b839594887804244d231bec5f415812fc4c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.911014711.0_1598544419961_0.9602183515640714","host":"s3://npm-registry-packages"}},"8.0.0-canary.d3387f54c.0":{"name":"@material/density","version":"8.0.0-canary.d3387f54c.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.d3387f54c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1c232f25efe104df63fda698575dc808883ebf5d","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.d3387f54c.0.tgz","fileCount":10,"integrity":"sha512-yF5V8en6v7lHT/mFOHEeF4xSclFIz8Bkz6LDQ5OeC2AevH9uqVHUJ1EN0m3bR4nGOPm7mww5EqTctKuaaEt1Aw==","signatures":[{"sig":"MEYCIQD3QVnAbu1eUKoBXb8HEG81Dcaudph/mbjz059qw4uqaAIhAIz4y4lAR0I98wGJzLkE1TgCOQn7wnX+aOsS9TEHZZqA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUVe+CRA9TVsSAnZWagAAyhcQAJRBJjevsiUOxGL3iueX\naX38+0uI9dcbSiEmTUVfKtQbnwPcu+/bGexdmnoxUDVNlYB3ov8UhBgfQb50\nCKHDpokJ9VINB1jEc/47kWFxShZymqKwz6VnJ4Mux/qCwKgNQ61hMAfKoJkc\n/V0QUp5KZLU00eahDr0Pq6S/gjrFhR8HUshu/JBRQGJ17sU42HF9vE4cM35h\nXul1tLijS0PKnbogj7Z9RVN/m68bV1GwwfbLKYBuJCxKi0h7REUDcI16WhnN\npxpqs8zNYIOXaw5PU7llTkahDVC+W+iO2yCBo+Q7Fgt3uGeN1VQsrNL5jwAx\nHo7RfEOEk2QbHlFBHSFHbwzUhwJTzHrBiF4U/D0q9MxcUdZ29tthxdiEYGTw\neY4W6rlXGe3Rbpov4fQfnGnSA7/gG1UHTjFcGahx45kdLNx00/L68lKVMAHI\nxmNlrdXihYkxXs7Klm9oJoCBfpfia/+JFlmePXDuo8uBwg5bun4K104359H2\nce5IgPtg9dd+cLr5jO4H/JQldpHjbTjm3jK2qc0EMwt4tI/t6Vws5BNNLiio\npXP2U2YQJA4++JxPb9nNcas077MTIH/Tc/rgcofeD7aZ7suR4XDvt7Dh/RUg\nJ1WzEElvH+W7IrTjr+LLTx59bAiA6yPM6qvQljfVO1iDzvW9bej/KyLLDVPq\n4NjB\r\n=ykii\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"b8c159d735641688e2fc1631ac7a98134ac5fbc4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.d3387f54c.0_1599166397762_0.40657585489463854","host":"s3://npm-registry-packages"}},"8.0.0-canary.2ccf996cc.0":{"name":"@material/density","version":"8.0.0-canary.2ccf996cc.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.2ccf996cc.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aa05abe06cf2fbb1cedd68668412831827ab4865","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.2ccf996cc.0.tgz","fileCount":10,"integrity":"sha512-qWy6o3Ttw+hquTPgf8sjd0hTDiNEMV1ig5OZhk9YFuQ14KF2iLHFvYsW4Rf7THIzm1ebsGdpZHMVhR0c3u9IgQ==","signatures":[{"sig":"MEUCICkbm1CHUpNH/0ctic9R3fzpKQbWbtFFkV4P2ix83mXpAiEAsZmE+WRVGL4MaH44ZtDztsHDrv1fFsuY63wpzo8v9Ko=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUVfSCRA9TVsSAnZWagAAM/YP/iNESVDptKWxWkOd+dL6\nM0B6PP4osKAH9Y+lvNTRXNNcx0/eyAvcti0ccrmCvtI0FAWBj8s4jQ/nQmgw\nxR7l+HDbtdlYa92UwAQ+bOHY19hI4Wh2tP2pRP/+S42AfKNQwyqKsNhxg5gj\nQCaR+jGjyjqT4QsxOLfKuI4HAurXgYUXm18AWuPlekBVC3/YJXJSvPXZ94D5\nSy+cYiLVgS+DU9UEJHKO2Y0aOgqZLc/jxSQ2PPHw+TDnivKdJ8x5Cz90LwTP\nzIXH14ivXiB7YR/mLIaf9LFSESiZYnIFWLlMXytRAzUPutNDV3KB2piceity\n8Y/SNazfrAhPEeFj2ctHfXQBotMSFOuNJn8+AlUfE+1Gg0Mz+7+m6E/3IFQe\neScL+V6V+NjFtB+AajOZvyXtyjELScys+NRuiYmC1v61CZbb6FWUO+5ZfQ10\n34tvud0oG0JPEhLj9aia+rQGkE9/zxGLeQBf92RxoC3IIN2vB/OjUMDSb9T2\nK5a0z3CYMGKPPZ5GusDy6goFcmR/luk+8wDCxDGg8Cz9kRa7NwX4/8/BhCaE\naRDv39e/yR/v3tPvYdF5vLvtEEo+Nz6lSOn1TsvITPa8Ie22AR3OiDJQTMPz\nQBS+UEcgM/UuO+JevPkt59QS+a/ryXVLTR7tlwDzDqBeFsJA1Duky5ykSrvQ\nublN\r\n=UFIk\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"b295adf5299f65a654963fa774da90dad3e39244","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.2ccf996cc.0_1599166418482_0.19097646867101914","host":"s3://npm-registry-packages"}},"8.0.0-canary.744bfe5d8.0":{"name":"@material/density","version":"8.0.0-canary.744bfe5d8.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.744bfe5d8.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"38bec4d949823617ae75e39cedab73062e58e3e2","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.744bfe5d8.0.tgz","fileCount":10,"integrity":"sha512-C1lde9T5Ow2RbK4Bs1iGxY70UQZXvA7cXmone9gp20jpCiIXTz6o/+fVYnV3lP0ZcxsfOq5a6WIj3DZncYLg4Q==","signatures":[{"sig":"MEUCIQC0sc4vWfxEevWV2zQhmpezX3LdqyFA62hy6W+aBLucqAIgWXYGv8hp2BaVmlheRQcbiMQsRYwySLQi/n359tVS9VQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUVgGCRA9TVsSAnZWagAANHwP/2116DKchj6oPefORsBN\nPu4LCqapZ0kjCFQVXVEeaREK7LP7ToRdNJVSgwthzloi0JAKlukwXotKPfHp\n1PIgZaMF+xHpYfk8C3b3u2lRZ+XhAzOGQX4HB51w/+2ppFzFvNUZh220YGOr\n2kv4RhBZBPfhGbNEfldRX1scr7o/yirrUvUjhvIMG55n5AFLydu5lscLJXdO\nxPqQ/1BNbJbfmiOLhZq1QIsqXalJWKro12TVMUKnAI2/MylZE8LReU7jhViv\n3MHO5ESG7jB4cSgUKo8WP4ZsTaIPYXb7Z3Le1TZANlzLc3O/F50EvLOupF0p\ni+YQ+jB7qsFGDFSObMOeq9pKI7/GBS3uxP4CiB11oCd2li5qeWtSaiCQO2le\nDtlK57R+GgVY7HI3nedA030UcQENobnOZwagXWo2TSujVERaKtskFkDrn2bA\nIIL4BBmsMpHMpkDk4JJm21dK+zSFZda2QRff7cUkC4hMMwKzpJWF2zk2CChZ\n3/mtjxTQKfkTxdBFhsbxkFZY9OKJja4crkcxCvwDn14omULteOu2sWdKzk1F\nCUO2nXtVMb+vpzIgTPHvGR9bOZBJ0bno5NBTrioVZjbo0EuESAMxdgE+Po62\nNRVZaGzGqVXqN1T9CgjRP0y5FzFevSsp+y7nIaUvKr450zDKuvrDww1tOpgp\n7N8a\r\n=B6We\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"e8e9d5605e05fdd50b88c6ce659dc2ddd8ba768d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.744bfe5d8.0_1599166470142_0.23818567877377683","host":"s3://npm-registry-packages"}},"8.0.0-canary.78da96eaf.0":{"name":"@material/density","version":"8.0.0-canary.78da96eaf.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.78da96eaf.0","maintainers":[{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cdc31e05d30f66b46727413c166a53c7b4ce14f0","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.78da96eaf.0.tgz","fileCount":10,"integrity":"sha512-YQJxZ+becc7QhQStO/mvEiMJLTzKIjBecIHGFuUptAap2HQd/NI6IGDKPFjypg820Sno6MteY5f6b/hyjYujHA==","signatures":[{"sig":"MEUCIDGO764gNBjHJMNJjgqZ9duCOmBhUg7Ak1nU4Z2II0fnAiEA27xc9lHakv4I8lAFx28LUSS/HVImFUFd5xNWISBn4HY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfV9d1CRA9TVsSAnZWagAA71wP+wSa8HawwmgjH8kS0aM1\ntbapt+76iGG5LonMMAqBRV5krThFa3Bx9T4rfCKBEDwAbwhgtEN/kQNRdD+A\nP1+A7cNvuBveW1ybkB8K+ME9HK9SwYHuJBsgsxTCWnGUzN5Pz46lkpGS1xjL\ndoBbPDQtJ3xsPcz6tyhaNRsIE8CUKwkqg7OX3uOnMl6DmvkFPrGb1hOPBiCK\nU2Cey4ljFWy7ObvbUzBQeEg81uBjddQH8fGM1qQeaOUrhImNLWWfr1DKWcRr\nvTF1fQz9bFPc4HUJ5Lq5/7YASyhf+wfEBV7ZTCizmX7iJRusoI9551w9BuN2\ns55gdMG8RDjlrrUK4wGtY2QZYCqtnQnUcCuD8COsOWm8S5asPWNTGOSyVEfD\nigXtcU2fzaTWb/3ZqYlx/IrjY2oeKboG+5y7lyvG5a+oZcuNxUhP3EOt9a46\nJxninjv/RbqD5BNm/GvyKfHo7qCmPl/xzAGwPrZMTx7ExG4euxndt71zFblt\n/ALJzJB2BIwhnP6qbIu4c4bPnSQdYqDX66owDpkIrVhpSIvJJZI6CC++PfAz\nL9I4P9Eji9IoD3HcXgzTnRh5CJZ8Oh67I18hr/ddJtpXB6cekHgFZE0N5Q0x\nqJ+rtCqMoOCnj/9tM2z9ubRElIugQJBp2cm+U9CiflC2U83ChNovn6Crmk09\nD1V1\r\n=m3zh\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"e9750a8b0ebee9367eee7e514953a1b1ac6fef7f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.78da96eaf.0_1599592308649_0.3907907496565588","host":"s3://npm-registry-packages"}},"8.0.0-canary.b0ed593cc.0":{"name":"@material/density","version":"8.0.0-canary.b0ed593cc.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.b0ed593cc.0","maintainers":[{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f26ecf7d21f6ad23bb179963ba4df86ab8a3500c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.b0ed593cc.0.tgz","fileCount":10,"integrity":"sha512-tAxOY27Jj2myXOWN1eM3mqI7sufnpnw66zPWeg+dJtXGaYj7E84s2aoZpzPcWyK1aPm2tPRABbZBtoWiOb3Ufg==","signatures":[{"sig":"MEUCIQC/cRRZlsx0QpsNYVJycFdZ5GtV3lDyf8oJQbEYpyWzHAIgb+VSTGE0eBlZHdkLCLu87fHnQGVaE5jsc6bRpVJdNco=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWHLlCRA9TVsSAnZWagAAqB4P/iUdO9tySYE395H2v/Fo\n65TbEtxsTEwtIo4TkUzFkA/go3SIng/bh8PVsErEqju3ao9ufAue/r9IJrXB\n0/4wZ3PVbjtXL8HOq4ODOfsh5Wz2vI+qG1s1m92SvPIKAb/mskzCWQQrHId6\nHW03QAgqdekvWxmaXvMFjMJrhgqmx1HOYdp/Q10fPlVEK0gqjYbB9NTFu+QD\neGv/XTNf4kJRiLUGQo4aXp03cB9uU3P8G6iXWnn7TuBqnSQJuJjFqSRNHgZY\nT695hxpEYWmL0NNf9/UOWEBAb4gRJw5CGBswNnrFXYVjp+fdTshQzCqoo67x\nYa4o5ra7JtUkT1Nxf2WAc0OaIVXrMaOV6f/+36DY6316ynSNI4U5+u1WJvUm\n9VNupCaWetCWptC1KJi+MpUYEUBlIIoiNXFY6CLPes/LODXOARTDZ45loveE\nLr4SIw15yyc/tDD2ki5ba2FWy41e+w3G3Gdz2vvzx5cpkXd+qjg9i+9MVi3i\nEp3AGkO7Y3gxv5qC/2qWwKIHnzJYY7jpxow7/AwGxUHzeMsvgFGC0dB0v0+/\noHmtl6XY1BMq66m0AADBxHdRraV6g4aZNohKoGvuttb2wMUyI7J31zJ8uRGV\nYrKu5k8fzMCcq39uCPZhfhXWg78Xcjg6zhNTDfpsRYojBudYGBRwNGyOOqzo\nL49x\r\n=Kek/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"d4dd3b56db446c52c35f891f9a19896a2b762f0b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.b0ed593cc.0_1599632100828_0.41754790993146274","host":"s3://npm-registry-packages"}},"8.0.0-canary.85a1fa9ea.0":{"name":"@material/density","version":"8.0.0-canary.85a1fa9ea.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.85a1fa9ea.0","maintainers":[{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bb2fdf8a102197fd95f953e08ee127c99eb4fa7f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.85a1fa9ea.0.tgz","fileCount":10,"integrity":"sha512-mfFB1sa0tkpOHvIdhBkd2OyTIT+xeYic2Pa8lM9nyM1SsZgm1Oy76q1G43FN1/jq4GJMSY/HhGZO38Aw/IpAzA==","signatures":[{"sig":"MEUCIQC/KXmAlYdoskrGJgN+F03K34bTsHBl8xQqaZEgKTNaKAIgaAy8fyLiIZHCfcOc8P2mkiexTeyW0/DV32+IWoZ3SUc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWpYMCRA9TVsSAnZWagAAXeYQAJCrL3PzNVCKvG6d/bU4\n3Zn3yjVdVP6LrKJMiuYC85fHjXYgphEataZdhBOtkY6UCYpRhqPDCH7rwD10\n/QUWjzh3aQWLDG3fJTwmJseU5xFANsOqkjUG4E3XYxwZMhKySX7ZtsvGgCAT\nc939q+yjGn6rML5DTBxCIkM4V4gFehYBELzBSK4MG+aPUzKPxFV0kkJ/mnOw\naKj6KxIF9ojxybX9wXiwR5igQTOwhw74hWtYQK5SHGjmMGaO1ASnA5xFXG7v\nyVEmPwqSyr6E+eu2OfnVTFSDMj7Vtnmhto6oHvQGTR0Nlm1/uVrxW6HNk8hi\ndrfKaaDJDgfMjRdj5MtHDqCU5mh/52IjaS+PYJ8Gn6j3077gG6P9/L6YDLlF\n3fZo3s/3DPu1GeFjngj8o4s6vlhTjl3luevW3v9VppD6khJUHl2cB9siXiHb\ny42viBBmgEl1jX/obDnVLJkbMYeZhrz3muSs09brUvd9lhJJKuCDzC6dhYpm\nQV4JWEdN33pIVA/7iRfB5eecP4UbvRkRgVeWtBlWcDwn3nUQ1m68eYCk5K5/\nPnB9+X7CenHDHOnOlFFO2oN5J5Y/ifRr2ZaEVRrrn4+UGy9/oWwHmP6rYfDZ\nTnXL62la4TyaUt3C7/jTDf+ly9wUfj0laaOULg9zi8dxjjrRVhiax2NRiQB3\nR9OD\r\n=FojH\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"96441cf0eac61122c48c43aebac2e249d5bf492d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.85a1fa9ea.0_1599772172190_0.3699317085906175","host":"s3://npm-registry-packages"}},"8.0.0-canary.0bc41a9c7.0":{"name":"@material/density","version":"8.0.0-canary.0bc41a9c7.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.0bc41a9c7.0","maintainers":[{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"371b8dc2ad20355da6a638fc25fa995a3a4045d7","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.0bc41a9c7.0.tgz","fileCount":10,"integrity":"sha512-zsr8QdoBO6yxOfu5up7K/VDE0Q9PVxRqHA7p4TnXkCSCvTMn+j0jEOFQ/XX60keCYVh7WqwHGP4QwbNrzhhgIQ==","signatures":[{"sig":"MEYCIQDJvTvRcO9YIGLRyjx/jiRfw15QBRqOdgO/sFQgDu9oxgIhAOJ9ntcO+cqjuiIlVkXZsX3vijfRiUJkk4HVm81PHbpC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfW7h4CRA9TVsSAnZWagAAFJcP/3/r1c0BgCC1R+SVeNiC\nNJdz7K3kwuLoiRIE87d3LMroHP71y9i1aFjGPsSjJDyF5kkmWxeIbmFo6uui\ncg6YsTSGjqdzI/j20Q9HEBcJRVfXLn9DMjBrunnUt+nU/sz01LhBiOkDHPfN\ne6G+FOeSLnKqH43ps0OSwxoxvZ8FCSoDXDFROz0dd+s0pO6f/qaS1gtsXMBP\n6KUhTBcj5zuRA9meE16NmooahyeT/qUeOXZr+EqNZIVRb1+HY/yo4tHmE6bb\n88G6wswFDn2psYYOw28KHOIAS5TGJfi+U/BcK8vVjAhxe81KoK1tae55CqOq\nv+qxkMIYFk+2PHzwAFqdDSB0CkhrfQ1uoOpWxXUpv1LEuj7VNOhuGlcZnQ+2\n7IbheOs7fuzqqtuQzGgYIsW+P3LdSUwv0SsBe65L5EHS+JlODcR5y+27FiWL\n5CpYQujot5/un9/j/cp5HfVMrf9N5vAArU0oqEStyfJh/e0tTw3PIo4Y6hYJ\nEw3CpOvu2KzGEbnENvcvcPXMrQUtZG1tmh5ciQ7FH+CoWrXabunGUyh7PwfS\nopApue9E0VFO7eCyVqrftGNmihTDcr+T8NWOzHaASJcPjYQ5KV1/so154Yu7\naKCjEex63sEMEK3Bc8qxYqLNQNmzKM+XwDIBU5w7Jl+4kIpmi1g8qRCR/IUO\nbNW4\r\n=S/J2\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"f9e2c4fbe617a115d220d49782884d15a0d9ff51","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.0bc41a9c7.0_1599846520167_0.43458343402304567","host":"s3://npm-registry-packages"}},"8.0.0-canary.fc0eb5013.0":{"name":"@material/density","version":"8.0.0-canary.fc0eb5013.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.fc0eb5013.0","maintainers":[{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"295a298d64d08b2b3822791d2fcc90c4d022623f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.fc0eb5013.0.tgz","fileCount":10,"integrity":"sha512-FsWftsx9uClX7WUjjTIryreFckHDDRHgI+X0Ue9nSNCdhvvoUZvUB1UMZGBYVe0Tmzif4Jd0MjhVtB804zGqZg==","signatures":[{"sig":"MEUCIQDNESj77xt7c4DRm7EA1ZmxTfRs3e6KEwHHXKIKI6cZqgIgfIET0JXlRdnhRUGt4vSML+mutYW1hYojyOMDChUhovM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfW9X0CRA9TVsSAnZWagAAjGgP/3E/BJNnRWyC2skn3qJS\nSu/byjXRjoTk2DSyy2TNYqfYhj8PGw8P6klnUXIKJd0ZAb27Ca3KHuMZb93k\nAN6aBB7BivcRC4Qu1f2IVDpW1OuTta43GrCWTBNAFYcrT8657wRzVjbJY341\nLPUs+aOLzirU48RGqEeJEZVXXFJhw+FBQzEQ9xznVEd8b6SRgg83zJKVedzm\n+a3wm+8gOK8wTTRRuc5mMXjpMYUz7Zm6OUj1d3n1/misn/99U/BePpwFG3zj\nGDfmlDC1HW9LZ8mNMqSRzR15ohmj4CLp6tO1weB7vQ4YHg2pihvnqtrGRNYG\n9TAn9cbcNcC4xqTGCHuoBbByC6A9yayCtBZ3joEAszya9Rb1BS4O4r3LA0SY\nc8z2I4auTok1i+4ob98Nr55lXztyDhcfqJ26IIxS4sRiAXUExXmxK1K822B3\nf6p41uhDB/ZwmTgxiFgJuASHNVMVfOdPuAAvAw8KEOioJhTvCB3qWhGCDxfp\nFqSRQNPzT5IAer5B051WxPqUO2xdepxtw9rWfIetXdJF7H7cvu1iPOdqPzwl\nCURDzmoOPi/Uqpq1m+aZZyqo2YnF/DoyAcr46ip8WE/npwgad9V2ZGz+zUZ1\nnypxMqCpg/eB7+ccoE8NKvSeg+2kPHTVTq9BGnl+tqWtGKTr7qINIAFMTSbY\nl5rp\r\n=H/RR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"c6572140acfb45fa86b79570328d75e3869c40ef","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.fc0eb5013.0_1599854067757_0.18496037299230328","host":"s3://npm-registry-packages"}},"8.0.0-canary.319bf66de.0":{"name":"@material/density","version":"8.0.0-canary.319bf66de.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.319bf66de.0","maintainers":[{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c323dc446c636c43dae22afe64c61311c5eb5add","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.319bf66de.0.tgz","fileCount":10,"integrity":"sha512-DiOwFTt5nBcGav1eiFaYtvrM6nH4Q67ehyyAwCSX2kw2R/jUyCDO36zYQRcQUm2mDnAKA4sw5N7kZQI5wQedfw==","signatures":[{"sig":"MEUCIBhGcGUaVbBAA6/GNJLQOKlh7+BhjhnbtjCVR/R6PIQ/AiEA2Rq2h+CNxN3pvXGG6KGXpBblGg//gRPxuy/fO2//zwg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfXAOaCRA9TVsSAnZWagAArdQP/RP65SBT55FIsHXhJHRz\nsD5twp8jYRru264HNZgNJStc4Wb4d+6LSNai3zpdSX9rqSeg4dZme3gJXSI/\ngbDV8V0CG5mWD4nBwh/4DrcILkDwSNezYqSG6c5UYWEL+viyNf9ds+T6200x\n+e8UuvVH3ktBjjWBVqw2cFyixs4QuqK9sqLkwbjGChhRfI+uG+yGz0CC3X/0\n/lT2D5woF2/f2sbao6q8xavB5wASUSIR1Pm8OYW11K+jYK1n+AggeFp14MAJ\nVdFhB8OZCN3OS9U9E9ZKA1+WPdRMoF79BwANDAXMOXPopsw0JnDTAm1Vd3rU\nXsCiC925dFCGNnapmfotpb0t5aEQAPr8o2UnxgfDACPEGFdHv4N/7kECK/pR\nADRnzagwMymljsSEtVlOHbn+YV/hPigc7yVpH1h+Ow7ee8eu/msdL9GIN8JW\nIQfLCIxRs78S1oOxY/Lzguq1IIdwup1QR31MEMDUkxhs+fGuxaZJY985MhEi\nNT6Uds85oE8rzvhnHg5YXpAM6mGQ8eRBG7FTC2eV7vx88Ib+krbV9sWCVD8v\nqTvIRDpR6Lm0XxY2f0Fs0Ed3Gd04lu0h+3g1tljI1JzZeDXhgOohRWGpjx4I\n3bHBvCcEvdFEw23AXDKABvJXfa0GFqBxB3xRFE0PR3wAsa+JcHdveDey5a16\njh/R\r\n=axvZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"ba4054064292bafde40e53fcc87405c8dcad24b2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.319bf66de.0_1599865754408_0.522472083876089","host":"s3://npm-registry-packages"}},"8.0.0-canary.5bfc305ec.0":{"name":"@material/density","version":"8.0.0-canary.5bfc305ec.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.5bfc305ec.0","maintainers":[{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"981019629a50c3edcf661f4a2d84150e2ef31f7b","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.5bfc305ec.0.tgz","fileCount":10,"integrity":"sha512-kTLse/fdHh5ly4+db+rf53Gru0Y3s8SqjH9TTSEC5UlEwui0faLVvAqIImAFXICJh381aOfS8Koqd7A1iAcnlw==","signatures":[{"sig":"MEYCIQC+FvDDCtH3v9wyT9Xh2gW30/uHRTLBumpXFk0UHo/FwQIhANvrTz6WH5xQkaBZdFcSE3gZt0I8AHl4W88Oq29UOHkh","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfXqRCCRA9TVsSAnZWagAASzAP/i9uaOmDxSXw8Ow0kiEz\n7YpZaUQUu2csYEg9X7MJRVf4ZkR3q97aUkLMaNGjd4opY3ggzVyeq3deJP7q\nXGAar/cCHJz6XZZ/GXytwpwWEEzdOeI92sUQXgbN39X3KNmmOBAZo4Q09wWt\nC7cYYjHH5t4wAaLfoe2ueirJLVeSWzbhF2uYa32cXLEd0WAfPNNhxsztCNG4\nznh/GqdLjM0tO6c+p4msdLb/gXsTWgxijEiqPOl+XztIW3ijN6J+TUkTP7DT\nh8OUMm4gLbf9zJMi+sFMhJbX5DU54FU7NV4jld7goBEOugNgdQCT9FZwN/ei\n/jmen0S2qDbPQxZU6ARV0a0PeCYHsaOmoO348lF5CGoFhFbP2vgAVHb6Vg/H\npzVmCI+Z1niiltaKkpPbSt26JVVaGHxwngZLGirV4G+k8lkL7bd/YfiOAi+6\nEONJX79SJcTevHwVNJhUcVmhpqWFJVzwmW+eXtq3a4pu2bDQQ9kot6IjgyaD\nCFT5RmQp5lW0rybVS9jpKo6tFILYoV7NfHrxxH6U6Sb/MCKtvBLe4o2SQ/fL\nBqqZdNQeN9KqR+LIdPTtwqwEVsngc9s8o7U3ZBJTGpUvdy5F2fRJ7aLGh6Yh\nU3j27Z9ObveoPQLkmQpxGKQDWRGOUGJMOqDCGGXAS8nEV86OyWAqxFukfEOt\nENq1\r\n=GaqJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"96c0c187c7fa544c1f5303e96ba3e85cba86e5c2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.5bfc305ec.0_1600037954457_0.1301395844770954","host":"s3://npm-registry-packages"}},"8.0.0-canary.83d83f131.0":{"name":"@material/density","version":"8.0.0-canary.83d83f131.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.83d83f131.0","maintainers":[{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fd811bbe1c6fc9d4ffc761915e3b3d8d83d41be4","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.83d83f131.0.tgz","fileCount":10,"integrity":"sha512-/knFT1SpTP9MVjJAN6xxJ9FHDFokruzm/SjyXJKkS6x/Ff/CaCjILO5At7V9MtJBOa3Zzz9vnKBrt/k06pv1wQ==","signatures":[{"sig":"MEYCIQC0h6O7VOvzRg63w98RdTgvoXOkuIgRXWfsF+y42q4lbgIhAMKdnc1hHnu0zg25AYp62w7IbIg3m2lZUX3seMDjVAaz","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfXrnxCRA9TVsSAnZWagAA+UwP/RWkMVyhCqdpx6RatVFJ\nVoGQbP0fueWxCzrpxbfa7ddTMf7CEw7efPppgziko92qCxOsrHT4ZKHdxfN8\nhWSrGEKc+ULhBFeZ5rsd2ZHlC0+3pgt7IZdqFRqueDuchgZ8bk9fUuzqcY7J\nIH44yD+MvN9fuiJ3DCq9nkgxk7CLCc7qduLVxOjMlrmwc/SBkF8NhBqBs9ld\nRhx4HoIV9P1xHzcHZN78+CB+lLKgLPnDuW19ns1O64gUfRCjzitUAlJJWddX\ngTfTUU32dnFmTl570zQZvLLoTOpTlt6yiV11wMMIvE8uafEYcuCXh4IEdTLd\nb4K4WRAOlFM65Z0pwIn5K7V1kR/k4mWND1C2xkCXwOrOxrw2YEp99PUE2MtW\nJgjVwKQ/a0kMug7bHo+Ki3MjeyonKX69e4Zn1rJgMwknht69JUCldPnIZGFG\n8loQD/TpU0kQQXw2Yw/ZLcbsimA2ec8np98zXqKu7CCHz2PGl2H8ZH6gp8nB\n8t4PvMyhlYvYcL0csjy3v/wPYaXJRuCmqoUdor3/I3bYKZiUmr/fBtofRzxO\n6FHkIxo8rrd4Re1GaxAu1QP+NfRpazlLy+vzc1tnT4mOOESHFhSiCMjs8ini\n5KNwaVA+dCyroAhZ51fDREuHEATQxobDh7dO73vXz+bjTKjwgys0P6phwvxh\nwnvo\r\n=pqex\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"520e8b604c3cd3e7ce96b30f4315d576bcdad3e5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.83d83f131.0_1600043504828_0.39569703716376714","host":"s3://npm-registry-packages"}},"8.0.0-canary.40d8e4726.0":{"name":"@material/density","version":"8.0.0-canary.40d8e4726.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.40d8e4726.0","maintainers":[{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"77a88441f870628fe433a828f5a7a4166f83d32d","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.40d8e4726.0.tgz","fileCount":10,"integrity":"sha512-XS3D/+s2ADG3RbDvPQ5dBhnQetBjbsrheskTxE9IolIfaNxlTv4DUgXoXFP8AcHwr3MfgkQV9nLqJaPkXPCsVg==","signatures":[{"sig":"MEUCIQDLVOM9ovfQ+eVmeuDMcTemluSpZXwvlVZ5cogn3CHztQIgbRecxwbVIgItesCTEb0vZgv4chdX+Zv8GC1M57kZ/T4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfX/wgCRA9TVsSAnZWagAAjCcP/0XLC4DEvenZZkdogSLI\n8PGKckk5RXE0Fg+FBUj92l8aAR6AeZM3HSW0YmTsjFfC58HwUSF4m8EY5ePf\nR5SKjGbcMHx/iFedcCbvanJcdqeBY/mA1JZ3XJgXZ7H/F9A8/JQL4V76TeFZ\nN0pjhJDe8QOxKW7HkiJ7pJPNxVwaoJKHadx4aSDAvPBSzzGktDBrB90nqvWX\n1JohMY7GxHSgwa2cvHhIH8xqfbkywm9cqBz62XTV/MQBenCkUmDkoYa5V/+E\nw+WMmo0khy2XpvLQz/Qdvj6d9gGwto3gUAUvJvJG3dUQxs0Vl8GpH5ZN3SPY\nGdNj41wspKd2dNMPl4R7E8WQBe8+90Y8SIfe/a98/gt0LVnBH562NOFCZXxu\ne0DMk3XMUpkIrEmaQGCHtjVOTArdxts8gM7IfVu2vQbTDoIvaDcuwMjUSpwZ\naGER92n4GBlHgYmrfMvm3XuZhRBn7NRbJbD6m9YD2GzjNy1GLOZU/LCjuwfK\n8MqgtpDz25MaDljb2Fj3s8nWDoB8WNfulUBlsBHyxkymZJAaGneYXulmjcmq\nyBTgFhokop+734dRbfSg6p95ppmfwYT0106MrnIRMpCLEdmIi0xQfPlcDVyi\nSM81Ldo9CisVX6iCIaDZ+cL5cIrlFzn6AJr2NlSRMXFmKgKUlPD3jaPWpgE8\nuDGF\r\n=GX/U\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"ba2736b8bb826dac383c6f8f237a6584247d5198","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.40d8e4726.0_1600125983882_0.2881025071849048","host":"s3://npm-registry-packages"}},"8.0.0-canary.c25d70a31.0":{"name":"@material/density","version":"8.0.0-canary.c25d70a31.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.c25d70a31.0","maintainers":[{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8437c00f36974436204af2b2e1bdd72e16756618","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.c25d70a31.0.tgz","fileCount":10,"integrity":"sha512-4BxpDbaH3q6fR8geBbkBN76oo108c0oeO0BtOpO+2JNDVV2K9ugpTl9MF7o2/bWFe1xrp8Qi4PY5lym5rM8emg==","signatures":[{"sig":"MEQCIQDLq0cNlJxRZfjBKg8KI7Kfckte76A1JYPHjjFp7RZ4dwIfRa4pB/Yg7siJZPBSM3hFFlaacEvkw2OERWXWNfrCVQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYCZcCRA9TVsSAnZWagAAUhIP/10FJSdo2o4D3NuYmxxP\nJllPZpTBe0Caqce5Eo26S9XJSMMdCZao+q/aY+4A2TE+fq0CdFxkI3dGeJyv\ne1Hy7w95+gxrvrWVWRswaigeoO0erRyCjcCJZr487IvsDFVurCrmM0MdfSy3\n3MtvGZYOARUojQD+lkcTlspTC8Z+q7fz52dJY4KTPop/pVDO65/kWU7uasZU\nxZBw/KMqzMACPpbTd6YeauW4dVrnI42ckRre1B1Rph7dGjegqsMNlwAitU82\nI7IWvZtyioRP5geNz2mbQUjVwKiDZ1320qQyvCje4bsqy5qVCIBIQBa64zRW\nvGQLPfumHEcZAvvazy2cNYk7KINEKpSH8f9VAYEIUT3yJ1KihbbwwWCP+56f\nqt6R5lRWpBTfmkbKxbFNgg71t1XZUoU3UaaZ2GinwfYknAV5pnWRaeH+K9H3\nSET+ulazDjzQIPQh+K0vUvkouRQYlsvLFpx/b6eWImIawMZMpgCTEGWNzoBD\nSZN8unSDyrOF6CWgVB7gc6+XEp02ZHuK4liULyfTYr59U8HGgsRYg/dYh930\natsMeU3GtlCbn0xzLlB/njTtxQGjdp2gbyv/q4hVvv/Ufzb6cCAlFG47T9qy\nYC6wIL8M9Jh2iocVjO83gBsySMDV1RFWMS6Xb1t/rDG/prF/6+GJkwbRIJvX\nrkVD\r\n=LMRd\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"23adc9426ee1c32d146e601987be4165e56c7934","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.c25d70a31.0_1600136795542_0.6198262103671468","host":"s3://npm-registry-packages"}},"8.0.0-canary.2fe70126a.0":{"name":"@material/density","version":"8.0.0-canary.2fe70126a.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.2fe70126a.0","maintainers":[{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"01c676132bcd34676ece7b59a7f27c410c300899","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.2fe70126a.0.tgz","fileCount":10,"integrity":"sha512-PMLLS+KWBKLYur2+HICD27JKZNwC5cPCFCPV3bsD4sIhmn2wYQWn72PDzADjAUHV5E8cV3QTYSHiAhBF0WMPfg==","signatures":[{"sig":"MEUCIQDt0Zbg0Y8HjH4FOGb5Wt6IWPh1s6fdmA5779HY82NmGAIgf/J0J/VZ41vEPMNH1uKmcO7+Og/SM2QjnihI2cYkDeY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYEgSCRA9TVsSAnZWagAA8+wP/0DQCnbUsZuJO6rMg36Z\n/GziT3O7KazwO1UBetkuyEHmwruNDuFhHkOHvNIa9+9cFthhe2CCvtQLjDKL\nVCVqcLOgJn1v/BNt35tCYtdMB9cP5CEpim3ilFUtiPUr0TFwvEewndONyOzZ\nU9+uZt9g05M5LTXApbmkz07B6vIeU2zQ7KfEBS1xi/hE0ktdGUb1I6evl54f\nKnonAK1bfZ92OQH7JxgzYEvDN4xA1YXuVPBLuTpqoBCcEkbrdHffqdTDhZh4\n0XbG11hjGOqeMGx3gLJK6zzWlybF3rAix39kKSUCLKzDzjunQ2r4lOQ99V//\nQFUdL3HaqLZrvjClJ+n+abTCiVwCbrxFPqwsVFVsGcA1aDlHl30siKZBoQ2N\njsCXQj2ENn2t1xReZ5pH9rsIo5dOXzftmmXa4OrVK8msh32PXpl0vdJcBC7w\ndr6zBgFFOhVsCkRRLe6hq4WvD9j96f+pceZ+3g0nWMByJnwjiYI50fD8PAvv\nctu2rOKBdnR1ECSHoVxqJiXy2lL4EIpsCWLsRqSF7K1S7Px4VA4SjM1d9haN\nyHYMW4SEZnnnLm5abBQco/CwOZgROVkOXv4MT4AVPu/NjY+ynEjelPwUdKvJ\nhMyAYYbijY+MC3o902pZ1VeeV1azd1omfjI3MaCYrCaHxrj/xWExZlT5oCRX\nkpHR\r\n=mVWb\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"050ab201982039e43f2c742d25ea0710801515e3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.2fe70126a.0_1600145425761_0.27096228573202774","host":"s3://npm-registry-packages"}},"8.0.0-canary.d52b165b5.0":{"name":"@material/density","version":"8.0.0-canary.d52b165b5.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.d52b165b5.0","maintainers":[{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"332b425748b1bb94cbb8dc3d6a76bd4d595fecb3","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.d52b165b5.0.tgz","fileCount":10,"integrity":"sha512-gWeFWetaoE/e93FvKHnUXTDdwFrnmJQrewp2ihPLLBOAsaPQFjHxBCPsDUmFGQfigWoMmusUK1tJy6Pzsjbc9A==","signatures":[{"sig":"MEUCIG0TEzXozjAr586yMMUbsIFCn5x+HJC+aFpNyNiy6MHjAiEAo3dTAfR3OZY6Mcnn48am7XPtu/SK1aTeNZLcrGNCCfo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYNVfCRA9TVsSAnZWagAAJpwP/3nAK7s/1hXmAtFDyl7l\n3w5LVjaXc6MjjsYOkD0B3w8DQh/DvX3Hbx6iMIDE6qC+mFzWx7sWRnDv6fIg\nRcvaLptFN3CkGM/y+N8Kj4WvaObWAUhzZQEpm6hGOEPPn69ZDMzQr7FxbWiE\nf18Fp/veKuErA/5hDwkuoRl74vn5LcNwK3DnL9ebHOdX/nvWNNROQLzjam/Y\n6pLld5gSUxh8qBLK+kuWRrVlslLHp8M0Vn/8uJcDuivUkLJ/SQddzrTMehwk\ngyJAhFiAOKkmuaWreras9sa090z5qAWKYFEfrysUor99rmqROaVwa0KiX4jV\nQE0bmgoscgL6RSOnN66yyLzVoW6QKTLNs5kegNiEN3fjRv2Jd7xZH/m9Jcvw\nUWLKlt55ovMYBi0bGkBm02vK1/ew0An7lFtBwCSUVd3pKqlnp5+1ny/jRAo/\nmMOufHdruPc86YgjotQ12hdj5p3OE+XSO4ZkOWobYXHXG9gzc7SP+zwp5N76\neBj/ecFidvoBa/hedxDwUf/DPAuw3zJgR6tvNxd+RLyD5LRXsfJZZMVom3oi\n7TK3TI40PhIHbqNT3sfGnn4PYu6plk8zLkkSiIyaQNc9lg49lhGh2AMaD1dO\nkSWna/qw7S9v50fxdBr01EMbgbi4D10Ya2u/z8JW+ZzPk70VFalRYiVB6i2w\nySzq\r\n=CSaY\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"19ac3399f14583da3b2ca5e37a0ce783539066ba","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.d52b165b5.0_1600181599077_0.6283975738532437","host":"s3://npm-registry-packages"}},"8.0.0-canary.a831d4799.0":{"name":"@material/density","version":"8.0.0-canary.a831d4799.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.a831d4799.0","maintainers":[{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ea6d0947072ec8135d001a0837777b195d7e687d","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.a831d4799.0.tgz","fileCount":10,"integrity":"sha512-4R+XbQoJXLTbEgrOJTPRDA/B9fkT1byn/VQYTWtlwFTUcJRm2cw1U6MXrT65daaj/A/EKTF76v1OnN3xP0BsRg==","signatures":[{"sig":"MEYCIQCAW1rzCGRLpFUaSrJWyrGNaAIAUfcLLgNwYUXFjYMPswIhAN+YhwXL0AQhxyaIdzXvv+UQeMSnkZ09GVDAaEUueRXw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYP75CRA9TVsSAnZWagAAVyEP/3FOtkBeaFXPnlDtJBXQ\nFc5dV8rczRakySi4SIX47xrqpGN2hqgvcjFyJE0Z+bZapOWvZUb/KCtkGqcN\nK1V47gVdnWTFASQedvtGhJbvJx2aQd/L++9zUGH5eCNOZ8oWTZV1GSD7RwHP\ne6EB2br2l0l/seJicSxISf/kjv804UgymzJivWneN/B9wZJdj9iKuHXegEMD\nd6r8JIZRlJZudAMNm46SkMLSVM2QKVV+oMHhyNRsr7nygSgkqLj8kxdWFFE3\nFR9hyzilYeUZ3jPPO+TqpQclFuZaFKmH+VFuq+ReXNerBiwLTiGkFVn+3irh\n/uwesAbjzdlK9XE+X4w80zDq2UDR8l52j45XhMKt8HA4E9vgaKkq+smiWjLa\nodvLpTibkvBubs21J6Qn9JP5tDowHHpgxExr9GesQmv65a61e8QuX+WKXbCH\nA0D2HugUwruhMwgPfp63t4+6T6j9UGelIHp5bldxvAGV9tfJp5T5313PYicq\nNlhoqaRjMVMv1kXXUu+/r92CimIPXip81s0/RX0v4QnOC3k5t+hQzCxOiAdn\nXQXmF9wyj5RUhPslScOmWuSExe1HS2kDRG030XbVGXalmgMD7z3ExRpnJhz+\nlQYJjD6zu702Igq+S2yX43ZpDGKM77GT8Ddhl7ANJGnBSRw/p4G8y32p9bZH\nMVHx\r\n=6Sue\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"fa7f461e7963e1bdb73e7811d2f70b0a07acba16","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.a831d4799.0_1600192249385_0.10324995538412196","host":"s3://npm-registry-packages"}},"8.0.0-canary.a306aa488.0":{"name":"@material/density","version":"8.0.0-canary.a306aa488.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.a306aa488.0","maintainers":[{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"115e69842e1b13099017aac5928195f737629116","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.a306aa488.0.tgz","fileCount":10,"integrity":"sha512-r/NdI5KDkIMSRclUM49HQ5PrmhDoh8dT7keD0+vq9kEpmkeaFuezw7co3fNM21U2pW1sKd/7+e8B3aHKKAZWlQ==","signatures":[{"sig":"MEUCIQC18p4wyIEHKeB7HK0tvE4ib+PLCMW8bpqotLhSj2zucQIgSnYTzrH2a0PU76I+9/zN2QMb9+4noULevqxOu0c6Wps=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYrR5CRA9TVsSAnZWagAAfK4QAJdzFl6S8laCMjmyp5do\nDROQQL/g4GhdiSMqInzhzRXSA072WiaxJHaBXggltcpRrK6CnmrPgvI83KEZ\nv/aSjbB6yWAr8mW+8tUJixxtogPPG13+asWTdyFLouSb8pqXuFtJ+yCk3iNo\nz1KhCdHj3TVwqYitRZ/PIRoABBJSb1IQOIQHgDw1UQ+Vidoh3lrw0qFEPMQU\nunPxVIC+7vdb5BmcbZ15kH/HKlnX1I5r9afuvKEL8fRknvdSuL4jCTBAobWb\nj09X6kZRDaR+Lljo13JI522ZmHYcx9m4kuKE+AXgriGMxtCJFVW21fahHqAR\nRXnXANxaTGDYMR2p9GelDRbnBeIgk3PgmXetPBtX2tDVr2zWn/2qH0lY7GAn\n08A42NDpHMvpWEVu5c++juEj4EbFb+YEmyej/9JccPbxGHCo963WwgUV3xTE\nePqdh1wyHYhS3ZmJt6hv+cSWX0UcRH7dF7gEkYh5h8fSnqQ0j+J2ADAyQw2u\nVnrTNwCXtbc4EuvTDvzMPC/XKmP66+h9np+XtBnXeKwN7SfOyBzJLuOv6JWm\n+1FlGzcTU0p4YILan5Ghe5TfrDrrL3IQY0MEtQGTL2OQCRH5bTFj5Oflg0e9\nWVM1WW2ShgTCa0L5wW1RBj0DvUDhNmYiFuP7ru8n/hpQ1gWlgRkddZpYUIS7\nDL7T\r\n=Q0BX\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"c6addec60d43eb106ac774211ca2af4b04d40f1d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.a306aa488.0_1600304249290_0.08025527949568678","host":"s3://npm-registry-packages"}},"8.0.0-canary.fd608ff66.0":{"name":"@material/density","version":"8.0.0-canary.fd608ff66.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.fd608ff66.0","maintainers":[{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"300ec1315e4b2e8f72ef93ae54cefc10f943a14b","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.fd608ff66.0.tgz","fileCount":10,"integrity":"sha512-WglEZ+CY1ryzVwJUus4RRngjH4BJQAM4xYf2KKjr/uYV9U30huKJU78trnTyT+00+mFhwpws3jRoqGo1M7zA9g==","signatures":[{"sig":"MEYCIQCgZtYgtZj1ILFGyywSCawF+izVTf7S130wCOBLP31HrQIhANGF6BkDE0o1p5hzlzQCBzfbB4G3EnLh1hENJ4dsWEQK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfY3GnCRA9TVsSAnZWagAAMVIP/jNitv+B6oRQPCc5vWL+\nLFm41lqZIeirdovbaXVt158rmeTBLYjwvgimUt7pYWwvlgl3zVG+/aAcXn6T\n/Hhe/Er8NQ4pU1pl0cZYPvnJLZBBOd86PpoChTa+zv8g0YLS/3wodn/aUQ7p\nfQZD0LKY15bzWHSWbPdgxbW8XjvoqxMdGKXxCBD93DRDh/52aN/GUVMZPpMJ\nVTQawUxZH052FPw6PyfLLN2EQneO8moZ7aqSI6wVMEkdLm60Pa3wb4HlMXCz\ncUxVFXT5pd8AEGukYAC97mSXrZJeEFNI1aScNkNZG/4yTIuYDSr7txqWkFQA\nr6gsrXZIgWOKnLrvVJRCNaAYUG6pYfWi4rS1zxCNnQQBMF/j2JCTIVPuEY3+\nQE4oUdZDlkJVsS115SA3Au/DTSQT8lxW37XD4IkJAnL+88LsPi1TFJ95yRbW\noU88WGmos+TmasZ5IXDvXjUXz8OLQTz5EfALIj1WL9UQO6TEGh4IGajYIYz9\n6k05Ate7S1rQMr0WP2zNmx9NqETcvS9gw61AI+wFAxKk9GTM7y+I8FhcpzOf\nQB2pJiH32s/dFPE5asy7ZiHun5prS2OIM1sldZYeu2CT3zgw9GrvxswbXeHi\nOBU2/Op0TlFJ1WAOX57afTa/MF7iWm3M/tK5aI09NWVnyy54OymEs+xImiz2\no+3p\r\n=4EI1\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"03ec88b3967ad97da4309b1dee0b9764edcf89e1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.fd608ff66.0_1600352678753_0.34471349226496106","host":"s3://npm-registry-packages"}},"8.0.0-canary.3e435ba57.0":{"name":"@material/density","version":"8.0.0-canary.3e435ba57.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.3e435ba57.0","maintainers":[{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"22f22b051e78863851d112b57b40333fca50d286","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.3e435ba57.0.tgz","fileCount":10,"integrity":"sha512-gSPW4mqfoaMzzzgc8z0m1YMrokuq6y2tUjMJmdr1POHrtwMoYM76/YQi4eMvdOHV7scj4qV8KYfl8NapszHJvg==","signatures":[{"sig":"MEUCIQCdIsnHQt7UNMZ7/aqQzbGHwc54o+Y217/v3DSObRd3dgIgC0iPyEof0osY+XF+2PNjpQ5QITADcW5/DGj3JcI0pr0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfY3W3CRA9TVsSAnZWagAAr3sQAJlM/wKaBMZlQpzbDHAp\nvlliZBfcI/QQ23k56eWbFFEhlpRPl+x2vrTpI3qPjat7bWPdpe3gAghcCTx4\nKRBq/sXmt4Zl7b6gF0ckYOr1PfriqBBGkl1TPcKy1KtAVmPkjcpfTgfBt4Q8\nRf4ySOz2kasMW56jxElC/eE/EybYu2tt/1z8f4jzrU4TNKP+nx8Ki+mPCbks\nn0ULOlBhUipwMvhNlXmwEAIutCFbeixsTkddgGhfhyZbfiyUJ7A47Z5QjHHi\nupvqpt11h/sCaeysqQKVvQm9N/cVI0SUi6mGH5nKTPsCTVWCuh3zMts6ocnh\ncxWB66f2gBGWyFCaMhnfpP21XihIMqQwI3GUa+boHP3KI34nH2xDxbDqnq4R\nbX1vMHKpg8lQ6YG6AJ4q8nSFhwaa0n8iT5DMKmhUU4IEnVdxXVgM8rugi796\nYGN9pE/bSpFqs/3MEYZ7W0VcydY5VaG12caYoOlBYxW0NxZlYmXlOvKYq34M\nzncrp579G89cS5uqsbDHrilL/t8nw+Ubbso5plLs97QGMoJzugrDoHuQEjD3\nno6lvHKZeHr4uXrQReLjtj8YsVT549kafXHflTPkB6KSY/BzFnb+XqdFy6RC\nsnYOyWnZMxrMoaAVrc4ZTVCtGFfXheOl5GxBgRb0r6LUvs40B5IUVe5gR4J3\njYYb\r\n=zFLg\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"15ff2ccef4cf94fbadfb06cb750ee6de035cdd19","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.3e435ba57.0_1600353718929_0.5746652424950331","host":"s3://npm-registry-packages"}},"8.0.0-canary.c250ec52a.0":{"name":"@material/density","version":"8.0.0-canary.c250ec52a.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.c250ec52a.0","maintainers":[{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"add92ee5f7fe307d778562d20d0d7e2b94d9ebab","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.c250ec52a.0.tgz","fileCount":10,"integrity":"sha512-+E54rgUY4+74jq82oo475wv4XHnP7/wiamnCbMsdXWBEnzhfceCByUWHfDxcHr4UWvHTZkkjVpSlsRcavn7mIw==","signatures":[{"sig":"MEQCICM4YfVhKvsc/Y835fyTeVmrWBtq2IkkhMdF9aGA8gTlAiAmNhhvyh9agZrpi51CPYQjUhOerCDzQOtt/wwCmlDZHQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfY8J8CRA9TVsSAnZWagAANb8P+wXU1MDo+CiJoWO7Uust\nmT299wBNTQPQW/lMe1V8NgUpMc/QJGIeEUrZ/Ud1Vn1QCx0prKZDTNE3mnWO\niJnE5si0hGgcEMKAsIt0JF8FGqRk5ncRWfGKrXW0zrB+B1mNOjWPHqbVezIu\nTRpJYYe8huvA1fdFoosbveEe5pfKcYuT23qxTIBtuCmi9SjQNHJi3IPmMEzI\nMbh+NW/2MyG1SPv+N7WjDjt2NnVHhC7QqBYJPasEXi5SL97gfedLHMpUucwG\nrlunZ2i0nd4mE3mn2j0k7XeiF13HJGtlLL8jTpOMdmcM5KBNkRYfL8prJJEr\njkSt5usuwnVLKqGgNvdNmZ9EE+cfNxXC555C3iQwd8llkZyYZ1/3lTL8SKn/\nLE25ojFYFKEIa5teG2qAcp0eLmIEEvfahFkGEytmgwrp1mkfih8L1GrnbxJd\nZReEwmm1splVxXEsz0CQ48oi0LVz5lkn9BR8DVasSvIkRXgq4ZcRARCg1ir3\n5bTyaEBlrru4vwr3aryYcoxI82y0WbI+HsKFVtMqlRb+TtyMBIIqO/gR2Gwd\nL4TZe76qXJqplKyBRYcp9IVNigj/keI9aaCiDQduDMEXOYo/YdCvb/gOOB7p\nBVjMbc7c24btXVrxhZtBw4duKN89RJoVvMYLPw4MJ90QuUcKkpZUtw1jDf4m\nYeKV\r\n=y18Z\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"e214ca7cd3c1a65ab89d2fe2b4fc899aca418adc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.c250ec52a.0_1600373371747_0.18528667544094612","host":"s3://npm-registry-packages"}},"8.0.0-canary.e34e411b1.0":{"name":"@material/density","version":"8.0.0-canary.e34e411b1.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.e34e411b1.0","maintainers":[{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bcdf36cea4ea29b1413619d7727f2b635b792292","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.e34e411b1.0.tgz","fileCount":10,"integrity":"sha512-uL4sILUnFBAFKgUDLcY24376/W3cJ5A2B0rC965RmSieqe91tRuBS1bf7Jawb5ktRsroXMAqIkxGLgw+QjT1hg==","signatures":[{"sig":"MEYCIQDbnQdFMbWzDHM0voo5KLBONtooTFu9QytaqoxiTLkp6wIhAMK6Mp4GrJ5BoJIF44YIZldo2BfBhfodEMT/BcY5EdOv","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfY8Q3CRA9TVsSAnZWagAAKokP/39LvuV6E3fj37m68jv9\nUpEUgeJ3bBwVUCGet6Nr7wmgqrOs70R0NmJ/qIo5XoI/vWBPOjSxZbo8THkp\np7hDeV2Qe4xiv192KVYh9tSN5+ssgk2vJG6ttOXAPZdgSM69kVJ7nKhuUcAR\nqQYoYf4j4Za/ywpJwyNDfvAqnLktZz1892glS1lFi+aNPH+RfR6zHqcbnFku\nzTfnDy6oVzjI/4e7qyVlpDmarPbdWX2YOyHGjirTvKraqTXABpchGoBO2LeH\nOARrPjyQZRKNiKdQJiD7V8nWG3DnNxCYKMMabftRX0hZndmnn0LBf5A3vn9x\nuia6pQhw2Tr6r0eiN1BUzVLxP/TDstibTsvvj2oIiv9tcmZaIXuL3X2SkyU6\naFcJaaukYV1URY3pyP9nhhYbPjI8mAT8lpTXXF/z0L75Dt+DBgH7MAx/nufZ\nbkZbMBFlPsT0ef4qp/5yH4Jv5ITWx3v9rh0HfWsBv5XMSxnvrlQgXdSTmCVw\nnVulRtIq/hkOgjHdAuaU1rcLc5wFlTh5NlGlevf3Jlo52ACw8JVm7S9k5CwU\nv63rZ4PuyGPPP6hJPbmBEylTXpDzsCRWTONYrfzvwsxpiTXKYmYblp1OeSCT\nZu7mCIsD0KjEFgheHs2/nNcvSc8WYCy9rQdVGtX60/B+ImpvvWqvJ9euIbBO\ntyml\r\n=05iz\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"460337b237852aa88d59152c38df2b32b73792a0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.e34e411b1.0_1600373815516_0.6837297236756885","host":"s3://npm-registry-packages"}},"8.0.0-canary.4e9343929.0":{"name":"@material/density","version":"8.0.0-canary.4e9343929.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.4e9343929.0","maintainers":[{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2ee62e26ae8c5655801b17bf3ba72d4afe19c135","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.4e9343929.0.tgz","fileCount":10,"integrity":"sha512-KppBqkjwyECTGrysyeTyjUB5Iw3VAC0fEVqId9Wo+DDYItAsMfQkcO6o+2gexUlWsEdqewhjS9AdMM5sbhG9AQ==","signatures":[{"sig":"MEUCIF14GzSSI4cIcFVbPb0SiEX3orp4wfA9biLyIVCK3ITdAiEAoblSWmc3fEvq1ZbcbejOM5scM0+GPkxVGQaCMdbewIA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfY8oeCRA9TVsSAnZWagAAQ08P/0KVQg3gUB8lzyrZjlwG\nchfDH6BfskgWPvGKaApsGJwui7ZMNYM941O7f0eyoBh3IeogEuMTlvVaKH1a\nL5Y/oWVyTbNUiFOi+jj0sp5eTGrn2aaYSUIeE0mclaoBt/x3A18Cc36rAKK1\noRxVv+6bP+gK0YE4vWp9n+UBaLXMBJ8JfkB8P8h5M+P+0bWyTXc/ZWfXrC3a\nDdmvquEe4/lsb9WChaULW7uL4gzDruQNXdGyAgH16DkCuvb2x2gzNq+VCxw1\nh4cHzj6/XHKkrnfZy04lBMD66sfr9VTsF8Zigp5LEGF7oNmarFLNxf9cBk2b\nmNzPKDLZAm3sk+2vznRgzR8GkSQ5GjYP6KAc0CuZbmKal1UIKpXpiSnd1BHU\nlKqmeUjxZrd000ajBRmxBMccau/YmBBvQuAfbktXkHJJt/h7lo9aqiIlE7TU\nCF3NtB8SH6aoVS92dJTPE+hMQEq6sF8+RsvKTPZoa+VgZ7Lh8pt3ZXQ/VjGo\npV+Is5yHTfVE8gj6yTDw1myd7DVkPKPPyclqMqkctJmfFFat7cT6SyRQHGH4\nI9SyYqxk07gGf8+nab/+1n7qpYSMZF4hzArqmkTPizZjz9KosidvgJR/4A9W\nStmb2LtORahPLRRcGyU09Ps8g19zgPWt3evBj8uYal7dc6sr8MwnMxtAJ4bi\n4my9\r\n=/tD3\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"7bab75a521cc7f81a2f78587d2146ac140e3cfc1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.4e9343929.0_1600375325970_0.0992247984071446","host":"s3://npm-registry-packages"}},"8.0.0-canary.4e5c350c2.0":{"name":"@material/density","version":"8.0.0-canary.4e5c350c2.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.4e5c350c2.0","maintainers":[{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"948478a6da01598ef81f1f14ca5eb35db784842a","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.4e5c350c2.0.tgz","fileCount":10,"integrity":"sha512-DOaDcaka/qNBnrTuw3VsF9BFQ/uYZSpOEAguaw3Lf1EjWFWxk3MJc2nvb+WmZijk+FnIXqBu+0A9Wd+/1C2drQ==","signatures":[{"sig":"MEQCIH/sE3lF/fIgyRsg07Ksyfmx1vrQaEWQwxu03B0zOkIqAiBjvmf2MrNFDmb7ss1MkhHJR8W1nGoPMLBdtmtXUtUUVg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfaRdmCRA9TVsSAnZWagAAEAgP/2qgJTSthyU0RnB/P6WK\nHeqI/8r4gyxt2THN2YtoFYSyeSP0L13C0IfAfdRRVpX8oa52NxfFVxE5dXK4\nB4ZshuD3E3knjl/ZC+/vppMmYhAuJ83oRflu2DFDkPptkR3gEEEy5eYjegm1\nVgOw+VIvYCkvYa9UTWb4V78w3xv0yuWoOJvZ+dPBKDU8DELgPCcE8+3ZTIhM\n7rBb1R89Xqlq9qp5muNVgLs5NkDs99fyUXPYBtbBKCupjxXMHBfWkdQL40zm\nNYksr6ITfK4dH5XXyxtLZPonntvzeGQebtDV8WoW+SaM/zBK8UcAundrLaL0\nOK7C/dVexntuljO03A1d19Ijsnuhvxp9ZE3QXWK8zD1bHUNGvBHMJ1oHLQ6z\n2C76ezJZN8wd/TpYCUEgk7DLp05DCZ/bj7shhqvp4XH6GFr0yl+5GYo+L6dB\nMwCABAcFCfQL80wR4gwl6eOveEsJoMyodUKiJ31u2VEE2fuNa1WLcoZLP8qR\nR0Z0HMQwJxNhBK6VNr+FalQesSyrs2DzEx8uIfDhBQgyhMB1LGHPJLaVYHty\nXihsRxrlcGnLet9otA3KgRNR8smb5WVqOWuYcKTizu82Cha1L0Q5DXEbrn+C\nvxnOZ+UJ3Fq7SSWpXT51ucYgYRtkWTtuFLRq6JN2JCl7vVhNTp8PSbGcxZUz\nIixT\r\n=Ja8d\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"c753481bcbad808064a366112868670fca5381f5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.4e5c350c2.0_1600722790434_0.6958645071773357","host":"s3://npm-registry-packages"}},"8.0.0-canary.16c563ef7.0":{"name":"@material/density","version":"8.0.0-canary.16c563ef7.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.16c563ef7.0","maintainers":[{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"784cd2883811c63914007f27baf841b1afb9a8ac","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.16c563ef7.0.tgz","fileCount":10,"integrity":"sha512-I/rqB/a7Gjvxd3GCrvQmj6/PbIa9LvLhFgyT71g/qaE02iBXE+gpx9LtwomlzXbu/t4GU2vnx3fhRwDBU3iWcQ==","signatures":[{"sig":"MEUCIQDG9t9fY7D2XAsC/op5sAOQoXuyCABVXLwdXoIgpMUU9wIgfEN68YUzhvrRfPBl9wgjRFT4aD7Rjn40RBYNnoa26/o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfalRFCRA9TVsSAnZWagAAxegP/1aNPaROTko3q3Wg88ff\n/kkSVMJNa9z0rgL8I+2BWqdYayrZa/DqBR7OHkl96T0i3YTG6hvLRN907MkV\nK4sVxM9+3Yhis0G9Bnvz0EDKE05sa6THPDP0I5p89bjvaOTe+EhEoU0DvTNc\nHFddHZdItDYxYefhZ0SjT7gMMu7Dk41SG84MFRmrKJ8h1hT2zmjADa3g82li\nhtnAQ516Ox/CnfTFKzeNk1udPwZU+1yGxiX/FJNZZW/TTi/kQHCciS31czmd\nUMexFZu/wSXkCI8Q1MlkvsdTo2asj0p31Ig3dwOCBRW3s4AHuMhDwnbtPWld\ncpHSwIdYSHN4L9n1Mwbpxj4x+hHKTA8pJdjgt6O9NietAAvaiQptDHEZKxzJ\nnOuX3aTLiuXOabG7wIt9nSiSSdzibE2BI80OnHUKZPc0wtQPFKs/lQjsjXob\nrSxm6cbmFEbBE/ppx32PWcO7xXJNg6qfEcIyVSoGlZKPWG8doMGJzKMJFoS6\nY09eeACFCiFhxpATYXofLZO+naIHcYZOISv1OxDjD5+uU+2amKtKUvBwWXT8\nuhfp3rni/EgRofDN19b4scjM35/n5hN5thOJUUclifYDuiuiPe5cYx8lN3QC\nUvFMPg6d8naHdXYAC7Qpb09LQnoXQtbKso+UF3PvKRl5DMuZ6GNF1n58/uvr\n1qaG\r\n=o5GW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"e3abdb235aa76184bd5171f68c237f58b8541f7a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.16c563ef7.0_1600803909211_0.7141000435549507","host":"s3://npm-registry-packages"}},"8.0.0-canary.fd8af3d43.0":{"name":"@material/density","version":"8.0.0-canary.fd8af3d43.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.fd8af3d43.0","maintainers":[{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"358c14c7e901efe98ed9a630345f3ba87a47ad63","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.fd8af3d43.0.tgz","fileCount":10,"integrity":"sha512-h4BCtlvbeNTHZ/QRvm3hVDIum0H0Ufe+tXbIaSMviaS+2fz0ADu++BsnwtYgQmfx6kghzrDrnF0jqpcW//hvMA==","signatures":[{"sig":"MEUCIQDutReOMWZYwPN+Ft+Y7zqIZVwEfI9cx0D/W+MQJsEUwQIgOK2IcRW2FR37SH8xsEUyoV3W939GIe6ln0MAPwscPzs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfa6KDCRA9TVsSAnZWagAAMkUP+wbIR2NOCnuhTPmXNotP\n5l94PFf/aJh8ZtaxP2iLWtDfMFsHJadYTLJdlRZ75XH3O5ZPfOtMAnq/JMU5\nkNnWMe4OFNMjFE1O+LmZSreq8rLNiSCSLXsjF80RQ5jLwtMFRLPJ0x4qMx4b\n4csNraKbjgE4c8fXusNnwIR5hZNWt3xRtAXXo5XpDdHEo8PRPg7vcPELySDQ\nZwbkUP+FhOFyv26n7H+y8M0FuVr8WO+4NjBRFIDt/8atkqwjNar/sOZp/GjM\nNif1x2ysd7s1mYy81/qLpf36WYnPdasCeTMe/mXHLD+oTKC2bl/9XigY2DKn\nLefq9gp36gqLmP4LB17rFDqMg+Ig7/2mo5bCajaCDbwpLuXDUpukg/uRBpd/\nW6O5uSvemOkXGTBphwe/eUH64Yjb7FxGZCVMVd05NjtzmoP/ITDzCN7addc6\nI6zplZmX+ERFOhLnVi5EkIhqigZ+RSi0psm6p8yrw44A0FbJDN2pkPG0CUFz\nzWf6W3yAVuDfMnh+wpx87HojE3nNo4pDAoUb7HP3bqpNesNUgfkiTs/jCfWs\niVdYoEvS5q3bL6Hup4TimJgmXRe2X+jirc+DWxPnQlVrytE06+bnZaIo3x8p\nplEQOfUroUdz5rVsp/9+oiM2BP8YoGsA002h/lLCrSZpMf/umcYToAk8RmZ7\nX2gQ\r\n=WxwL\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"0f295a5eb9518e726dc271a945985bba278bf9e2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.fd8af3d43.0_1600889474941_0.2578127384387183","host":"s3://npm-registry-packages"}},"8.0.0-canary.d4cd83a85.0":{"name":"@material/density","version":"8.0.0-canary.d4cd83a85.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.d4cd83a85.0","maintainers":[{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d17d251bc6d9a24cbbafaba1a200088a30d5375b","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.d4cd83a85.0.tgz","fileCount":10,"integrity":"sha512-bixGcf2Fc8l/EQGeDgS7dTmhyhs+dCq2AJw08yf776ryVShSrrURnO9+wZGNzG+JufC55USXERWNb1k57HGhgg==","signatures":[{"sig":"MEQCIBYpTG1eLi7LThAXNalfjAsdMKFZw8WwoBsXLnAb8tnDAiBSWm/q9iPLPvlBGK3joEKHVADTc2ClnodukFpCaJwu0w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfbTr7CRA9TVsSAnZWagAA7VsP/jCB16goJLqgCFUzigO6\nvpB7i+dxigqONPwdeW7O5xqiK1a8EIIcKv2PEPM1HGyHqI9DiYOnDPwGVefY\nNGW+GGUAxMU7eIJTWNtgvHlVUfK/sdGDUjz9jPLE75nZMuZFhMvJR45Sb4pm\ntENcUAcA73IIDcxAgplqxzHb086MiYHcYZJ5AazQvRmsVvfSiPsOgEoBCgUj\nqAqz6Bw0q5gO0kz6ckmO0tVtmNKw4spd1IinkYryBFPrdpVNqsxmyR8/CbsE\n4/MS5m/TkwQ0oxoZlp9wa5gwpgYUKOS43668CD7bYHFiRRT2439l94TCx01s\nbOvJlDPxQDCVTMPSFraP8BaTJ6cnLp+Eyr5OKf8JtjH8wqs/bqXB/1PIJULR\n9+W5GUHp8edTnPVgVtuT/AXRhW5S2i4K1Yj4As8O5M8VZ5q04mBTMDHhU6v4\nGZQnK3TMJNnE3KTvf/ALQ3b3Ing0mmNMqggANSdRn1m7yFYDXvM2yIxiAsQe\nQQa/VI64zS6sYcYI8483uCta85K/RmSsDu7wnFFtqkVW112fq9sOVoAY/YjC\nBJka2HuOMAn0L1zupze4KqsOUkPXs1ZpPHdSZnmtEBtySd/r8YydlMpb5fMj\nxt1gwSj7NvfyQTb4SkEanT5mC/6VwMjvB9eDsmx4EYGufLV1lt/dU4VYw0Hx\ntEN+\r\n=7x8h\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"80cc7639dca83570a37de4bcf4d7501246ee8eee","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.d4cd83a85.0_1600994042632_0.6520248092179923","host":"s3://npm-registry-packages"}},"8.0.0-canary.199aecdfb.0":{"name":"@material/density","version":"8.0.0-canary.199aecdfb.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.199aecdfb.0","maintainers":[{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c8af7a08e53d545381fc24ac4e56c8fafb61dd6f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.199aecdfb.0.tgz","fileCount":10,"integrity":"sha512-Hk3NOqQUM15MJSpT6rSMgpWgCwbjrQY3eHaG0CppflBVqyqt4XkeeLEZETXgrciRrTfbZqb/MIQ38BckOtYuDA==","signatures":[{"sig":"MEUCIDfvfXIl0HrfAVjXG13Uhv6tHIJizug/DY5RMeTyw76SAiEAhi+wZy7BM6Ly/Ax9jndEYXUAJxWL4AirU9W/GmN5Aow=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfbhG5CRA9TVsSAnZWagAAANQP/3amXB9/U4FCNaMbqRR8\nT7Kly1DwjB4YrOmAjowydw4KJZgr5D6PYGTyBGDWKxV3Lflkps16oNJTLrEZ\nmPnCsEiuU0mEGXmsy5zECdAAkfsDxHezj4fXrD9m0ym6uulPIkT1Pn2V2Vtc\nH1/9F2zUBlpC2cWLlHwmi041CGvTtBefWNmuYzV4Cj/GHDhT29cN9sc5SLZg\nEZp7LRYBBLxQay07581gK7QvraHg/Itfso2MVtU0qG7HgKuHhX7FuHeLgH1h\nM514SgLMsnXeQJOAXXizvLeapGEuqv/AnGvua5l4cTyztK1emknONxVTlTTO\n/6aSEfaLpEQ+vwu9CxGeWE7BORkot6kZbtgQNKtPIAMYqcjnjq+j1mlK+LTV\nxGtp2HZl1FUC6OVIv2muA+bv8dqXDHvqTkOFTTccWmSft7PRZftt662g+Xmy\n13oCV+uCFTnPiEEE/5J0zgy1ML6LiQbT4uX7WvlVWns+X3SZVihMCBQq/JVD\n+foGMfSSoi8yiRT4wS6zcaXTKqNbDaZQaETzgT0Nc+nlbP1kJ/EM2pKXFj4A\nPe13/qUbpSUMkwTeizin1WsUDuL0Q4tZFU8hl8z2iSldlcb40NyxR6PKIqv7\nFLpJYn+n4sRPoZyNIP8pw8VkYyV5aYN6UPwPcf0Wo182EA8L9tqc1u1NzTHi\nyP/2\r\n=vBVk\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"2ced06dc0aac728f58cce508c7393aec959895d6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.199aecdfb.0_1601049016521_0.3049951538581299","host":"s3://npm-registry-packages"}},"8.0.0-canary.38ef4501f.0":{"name":"@material/density","version":"8.0.0-canary.38ef4501f.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.38ef4501f.0","maintainers":[{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0ca442014b871c08778c04304465308ba4a26d14","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.38ef4501f.0.tgz","fileCount":10,"integrity":"sha512-Zg/RqOo08CTG7ncxllTjntzfp+6eLRC+IQ8brJBJVKDGuS1dijc3vzUc46Xu0Cve8o+15SRRrNxMElpL1xjr4A==","signatures":[{"sig":"MEUCIQCe+GXRG0i6YfrDawBaVzTYQ4kqkNw2UTrTx2wq5InBtgIgNp0L/bY6+RNz91868ThxJ9D9LK9ek/UpCygSF2/Fndc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdM0PCRA9TVsSAnZWagAAfdQP/3t24Bkpt+RBeRE7zYcL\nTQul9soOsOYw3bolwcSTZ1Q1L2UJU3d6iCAQrasL+VGh0Cjx3Vf6i1OQaDm7\nWQRHdInUB0DWhRPabfo+1yF8pQsujYNs2GL7qCBFOkzJfSND1z0xJeMapQz8\n9jIQ1maLfaMozH2rcvZLAhMCJYCEtSnzl/F7+YTB0r4vm9bboe/HL5GLmE1W\nsRuIjJRY05WiYz2QVlgXVDUN40mVSDtKaX0q9PVqgQPQtrp4OrdfGFGIUREX\nBH9fCww88jJKntsEwJo/PJdxZhlLD/hHyKzH5fQRmsP7t7o8pxx0ZpbOcV4h\n4LUHUJAsWXVHKPIKxGzW+VJ0mWBje07LlNWcHuYuoeIx1Ngqiej5Xun+s0sa\nPDg/LoDRqyF4a1ewgG8pFfs2xFdUU8Vob5G2VJu717e1k3Zz9wZs2kOqHemD\nlF7jVic8rg4k3Tgbdh5GhsrOF0Eo0Qmuts0n04JDqoAMkSP1KGyeCcM7F2RC\nTcX70SNatOpNt1oVVIx0Om2lyUKi5b0G7YdZ0wlroFIjPLRHdaiAeAVtE7/M\n/j/37AqXSt1FgKXEYh5/W+hjgz10HWtiY3wI1lY+GPaVTBHj7cZeS0t7NrRB\nnpn/An3VBC204bZv3yc8p2XP+O2f+xBMxzkECYgzySwwW4Pxw533X4Fxg+/u\nC2P5\r\n=ytal\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"bace3094edebc680b12a257aebfe6170928076ab","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.38ef4501f.0_1601490190721_0.5118085800292618","host":"s3://npm-registry-packages"}},"8.0.0-canary.774dcfc8e.0":{"name":"@material/density","version":"8.0.0-canary.774dcfc8e.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.774dcfc8e.0","maintainers":[{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1fdfb5f755c91f1e8079d6675afc6fb09b8deabc","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.774dcfc8e.0.tgz","fileCount":10,"integrity":"sha512-vk0RK9Hz7Lfvz0tniAlY6MgbVsDoFKeOwVM1Y+lyfpoFcDkWrrUg499cAy5n7IxOeF4noAuXYpWFztUx9pPARg==","signatures":[{"sig":"MEUCIQDDUCd5tp1iDxHwn4Qu3xxoxBqbiD7NGOzZki0IwPS5CgIgKytjAvYp9oADZVQPhZSUurBLRf5g8b/fviRSUNACJUI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdab/CRA9TVsSAnZWagAA3VYQAIik1p+XFYTxAz1jbriF\ndlFrKPeJrPbWhAK/VFGmUgk8AKNMKL3KftmDiZ9uwuFRSrPNG64WDPfEZQ6t\n78yTIyB8wzmDPxklNhOZnVdxlbZm3R4u9VzPjdzJi22OkH4u4S9T4zc8iOi4\nmNOW4RVCJmMXJ+YKQMTYJdfZbdPykx8mQKpKIGQUshoMqMXxBBoWjusx75eH\nLv1Nwte/EL4ix029VlOtxDX+mS0MmlMUz+HGEx4mi5ApYu2n1/nrBtpzZVdy\n6fEYACepN0nnJpY/N4SpH7R0cTOpjHQQBHIh8iA2hZIQT1DEl59YVW+qCmoX\nPxLBFL0nDr+wtXo1/ArbXvrDEMK9WolXOQ+TQmqFpFl4lp4r/G5wliIH4Ip6\nRB8w2tO57Mu3jQyoKHaq+WdfdYM/oybZMD41G89gzsOL6g9ernNnw2j1ddrf\nkIjg+IwVb1lnYqnAXTvifgPulAN1zycC1G7p7cL6kAj7k5sXXfe9d5gXyuUv\nqm85yL5B0vC10kxVytxrXW4FKKa5i+R4XSk5ToOsDhkAx3EM2FdUAJ9+NYlN\n9rXpF35XnF3exajHtgJRMALcOdmFSVfmbBZMl5IKWxBDFRXX/XSJed+x2lEt\nESWO1twW/nG/f5ciVUByzGuaFhkMBLaS6rJzkkJm5vlEiHj7+h37Fqx6vf1H\nNG5U\r\n=vm5Q\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"6c37b80b059fbd4c815253f3a3868578afcc1afd","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.774dcfc8e.0_1601545983111_0.8834321978768016","host":"s3://npm-registry-packages"}},"8.0.0-canary.0f60323a8.0":{"name":"@material/density","version":"8.0.0-canary.0f60323a8.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.0f60323a8.0","maintainers":[{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9833eb8361e93951e466dec77132aacae394b8c2","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.0f60323a8.0.tgz","fileCount":10,"integrity":"sha512-9mc3Ndt+dslNoKi1Yna4OUkWTfqXy0wjsoIxX1/LE+iullchG696tIG5kZ1AwQvPAQywIEXR0jd4DQyCmW0wLg==","signatures":[{"sig":"MEYCIQDQ/qcYEGjD83btcFDjrQY1VceaulS7PKfBYJgt+cmepwIhALq+FYOxPlXE9gCA8+3r7oaF3uvD0gl97FLYUfhzjUXS","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJff3/tCRA9TVsSAnZWagAA0z8P/jLficVQaU9YoDF2hsWw\nGxWPfey1dx4W0f36r64RJ8pbg/mZ1JWRnh4eqc9DxKI6w68J4Imqr4SGyDvR\nnengl9ZCXOcnjp8AxyDQsn6Nx+Sr7SzReIVHGxSr4WS2cNKIXUj+NsCeT+zh\nida3EXuOiBy//D2+9dn/JB2DINtek4/+QWQTSpOINcyvuLKpONOZPrqjY80/\nY+YuusE7n5KhYEOYBrS0vPSpbcdsCN+JVak5bnx4j/NMkt88txMOhbUGaAl7\nTeczf+sw+FHyeZvC64MthZKrIc4wZBRyr9hanBiP0H/8FWHbVEeRbfw52RJh\n4lI/RxA0jHZVfkE1ur/HUFLO3Vds9wYM0X4ISbOW2b6XfrSQ0rw3oXR66sLk\ne10BdK+Hgm3MvYUx8Q9G5Mno6dirYiCFxj0OG+wFaspe8H4Dg2zS/HeGF91V\nVNO733bUyqL7Tj63mcQjEa9nCnLxpBVfNTbuU1azD6Mp7JYB90Y6Eh1M1Tyk\n6MWg6fdSFAHAR3F9XfXMyy/nEy81gPzop5LYLjkHoiydqTEzIlQ80w2OUAbq\n+ZeFP5f5atuSQMOtq5hQVLTuUd/t+44J3JQMpDCmplAFrWOozB7Y+yORwmaq\naRH6JedCcZvd+gnOSdDVlTupfxjAQ+Jh0sxtmLsmgCiEh5BidF28sMRAmpOr\n9BKZ\r\n=cnR5\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"edfdb55487a31cd5f5130aad32b3fa8f369e6d0b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.0f60323a8.0_1602191341398_0.8441095931654357","host":"s3://npm-registry-packages"}},"8.0.0-canary.d71622574.0":{"name":"@material/density","version":"8.0.0-canary.d71622574.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.d71622574.0","maintainers":[{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ecf5b2bf68644427f3b0f39631c352006b79a97c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.d71622574.0.tgz","fileCount":10,"integrity":"sha512-Qk4G7fi1FPGrbwS6WyirZ2SJKUSrhXxZA7RwB1n3yl0U0eiNHWKhcR4lZk48s0UV4zXqdIK2jDJ7QCtftDnc7Q==","signatures":[{"sig":"MEUCIHSw3pv184agl3EeUDNI8Fh6nQI1plMuE+QQl7WoQrmwAiEAjISHvAGQxv2EfPZTu55VTA2jGKAivHYP8KFq3jb+ycI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfgJAjCRA9TVsSAnZWagAATkkP/21zgguBIbvhg++5ix9s\nK4LYqtYCJ6hlorqyJcySY24lfoxlf/URxp2rQJTr2j0v06Du+x1yy0s6Gamo\ntikWtyXN1HbmIMOrC4D3ZMWUgpbJlNg6aqjxfFuHCYHykL5bLQmiIVkORAcp\n4Mb4rZFGUE3ueT1erSbC/B0EMFfwoN7S0SCyffcHN59p1cywSSeKbHj+eNqZ\nQ0td6ub/ADzPmtXzEVAfM0SMmD318Qp7h1ri0rw2zvFE5unrLzeOUdqSlH5h\n724uYE3MYl9z5sBWjfb2Shum1mvUcIjYmpYEZnz6tnG/RhL89ljBDqIx5r7l\nx1RIkjjEP+1TwemCUoBcVRfzhPGYEofOnb7cWbbNBHoqeI1gTtCYNZd9Sk+1\nY1hDEAW6z1A3ljpqzqrF21qgXBxc4HuSxv0H52S2j01einz/LrM72DHhlpV+\n7xMGhA2jHpWi6wzXM4pd5B6s2enj+JyhLsWG0p5fhNjpRuGNfV0pdtdCuY60\n8t0zdxlENKpiqVgdqTwcTk8b27EZK8zGThNR7gzNe6jPD7ruzFibYNKcYa8z\nfTBjfLBfUG0ewPctvvGRdjl6WER0KAP03OOdj61RSkzUlin7jmEc46ujxUc0\nVnodYk1ETWfuuY0VWiMUsamUV4CsGX7NDMdQblDOondk0MQF5q2vIR+g0/8G\nLJGK\r\n=VJLI\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"19a45f4824305f22d61cbf9deea0fef067dea3e6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.d71622574.0_1602261027327_0.15362133281079826","host":"s3://npm-registry-packages"}},"8.0.0-canary.7a9afaf4b.0":{"name":"@material/density","version":"8.0.0-canary.7a9afaf4b.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.7a9afaf4b.0","maintainers":[{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2e6f8c0dde77c6e599d1ea4a0dd4a41c3dc49e90","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.7a9afaf4b.0.tgz","fileCount":10,"integrity":"sha512-MWa6cMDF95gRLHwUFJRWFBIaWNoqYpu1a+jb47RhZGKEkhqnCUg6Bh1LDueOR6QQk+Vdwe0C7UOiMlNbHdX8Cw==","signatures":[{"sig":"MEYCIQCVHn0IfMmPSBPW+Nd+rY5uiCu5SRQdm4YE1jeRhpk27gIhANxjyxlY1WoEU7RdHoEOF4WwuMDnTgv7lAWz0PnpLwT/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfgOm8CRA9TVsSAnZWagAAvAQP/3IYIVZZyy5agZarcK35\nVVfgCAcn438GPh9wIGj4/qnWZCsJfg49IA9yKin0e1vX4NKlBob31tohf0L6\n4A4h12cMxnfX4LtGqevOzhak3K8Ou2RfxqRhlKET0i7hSr92S4b1Rxt6EAfC\nyz3Y6fvkX0t00w/SCUYA9xkjGqfvPhOJV+Uq+yx8Axhn8pE7hTN7gssIH+HF\nmJh9gJepJEJVy/5Cxvr9E8lVjePVZc4SmZ3buzp3Q4rl9KzcPiGO+ew4jquz\nsZvZ7lbXH920RPTvUBOqa1XJ5eLcFrnKfwEGST1/y4NYwMdDxSuC5RcUKv40\nmU/+tQj0qIUDg6+umt1fEPAfreRIO0LvU2rw75ewhw8+6BfTZ8C0JrvDu0GK\nfRXJsph50VoYb1c4jv5O90Rmb+MkSCKi5ubJxAejb6Q0GNNGt8l1GhMzD7M7\n2U52bugm1lJc8ByKGkN5Q9pbNGdQ4NQlzxlZaZqyvZ5riU6Y/VD129TvnCjq\nnRpV1BZllL5Lx18yjALDVe9KAXxtc2iL+xMdiC2Z252f5ZRy+y/9hP3ZCuEq\ndVZbn97BhHAqMShWqfzp/n+XiRNWTYhVcGoZgPZCc4zvq/RNWgt7R8mqpL+z\nNlW9/tu+qXdR0tZCWdQUljlGN6WJ0FgAHT0ONfmeoepkrrIt2EOOkeCtRTpc\njOHS\r\n=uFfv\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"137d6fb8ed93c50312981c75fb37199ad460dcf2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.7a9afaf4b.0_1602283964560_0.6052643329350129","host":"s3://npm-registry-packages"}},"8.0.0-canary.8a39352c8.0":{"name":"@material/density","version":"8.0.0-canary.8a39352c8.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.8a39352c8.0","maintainers":[{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0fca42ca22c3ed156f744daf331a54148ae880d6","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.8a39352c8.0.tgz","fileCount":10,"integrity":"sha512-LIUh8kUw//2tGxTOoRp2o8KwlYecmj8HUx3r4QRLZ1pqHnQ5MgedkUn2KsLpoIczquEljBSpaEO09AIAce3H2A==","signatures":[{"sig":"MEUCIG0/700r+v9L4hy5mI5s5SNX5XRxloptCk92IO/p4rIaAiEAyOq6iH07RK4UNa5nDgJRXoX33uHTHoz5m8UpT1B6BWA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhJY1CRA9TVsSAnZWagAA1P4P/i5trFz8/mWK0lTOb4Zd\naadfFM/iQ5lUrmlxUDoPg/L0IRNgpV20g/78+r4C9oOz2sKYraKGeA8bzVc0\nMTjsEV1XGYABkrbPdWa9CfjvTQosZwXVsjk7hbGpQj7zE1lRs+RNm7QB4Wh+\nwi+4jq7bCaSfqZJGvQL8Pvee3tQ5jKEooxmNfIeDBspwrZemwy7LtPJ6dQIR\n0MEdgjSBOnz9ZIyNG5MFbohMC18+IOL8gYVImSbEW/vW88QRc3/uaWImtawT\ngE2MYqq/kMrSu1LfhPjNwjegK0PBgcoQiTNTPmuDISae8UJrwFI51OI/yTZM\nLWOqJeIsMFt9EErwKKLABybPX8UufedmMtuWQZXzpmONP/qsyDKm8dE+d43K\n/Pbxh1jDxetx/9+/RfQGVDJa7qemhE3s59YQni145i3HGpPv/lQdLKP4FmqI\n58fdYBhOMPqoO7Y83/mXjK9fEqZFTfoIg/bI9kgYxn8Xn31Ej5GArMbLAvVt\nvdd6onMHuPv8vx1M0THtfLgObJPcQK/xBdUWZd4vHXpBP2Gv4DKHKFZffzJl\nOTyJF/hRFzE+95A7yYfDML47sjv5usYXSvpw5PmXwSY9ZtZaL/dyxVzTY4YC\nHhhg631o3FhxvLxjHU4x7HbJHHnnOlhQe7KbKQYZCr1b8A1vRvZ3/GD7bogS\nvkOl\r\n=vccL\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"cedb8cd906516b8d460c813039351e951b960c50","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.8a39352c8.0_1602524724998_0.3957173206476228","host":"s3://npm-registry-packages"}},"8.0.0-canary.790ca85fd.0":{"name":"@material/density","version":"8.0.0-canary.790ca85fd.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.790ca85fd.0","maintainers":[{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"330fe9d3415ca18de1bfac9b5bf2634f6fd64505","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.790ca85fd.0.tgz","fileCount":10,"integrity":"sha512-rnkTWx98UQI8AAbXl67zzmOZYCSvBYb+kuUKY40jXWROPUNQAaLz61xG9auOZ9nPj+wo1cS/Qh+I9Dd5ONJ2fw==","signatures":[{"sig":"MEYCIQCqXXodJfvCjdksNXSzyfquXaBPF77KVCiPrqT3lsI/gwIhAJca8+mAI8s745yDNTV0mzXkrHUsU16u1NPoVDdkDzPn","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhNDeCRA9TVsSAnZWagAAdz8P/0MWLKYdYXK/0k48uARA\ntnXtFeqXT53dviQbNKKa/Vl+Y3V4fkb+Z1aTOOydako1lVl9JAyME4zo9rkB\nuyOedhKHziSzOXKEWEdjNRW+wf+vjFm+G2riHLO29fD9HJWfkco98QXsVnfQ\nsMJhzG8sJRSLrpMcGHMmnySOtEi/44PT+hHC3Pk5ZF3/Z2DXTmOuPhsw320o\nXFFeteHt+MXdB0bHLtblxY38Me+X1j17F+LMn33eU2BOaVKO8LnW9dbz74ne\nyGSKWxq2wRHJx+cCFkZKLfqX6jXwGqQmeJtiwKaTXxeTMA7d2N7jrq+t387C\nhstFOj0sHfV6XNSpSev6Nuo0q94+zB2gFB6lZQhqmnSAtScEKmGspRLautmA\nhtLhpmMSpYaf8O7J7huQ0/vXjv/yqY/1HT1XFFMk6zhN7h8rG0IxJLGUqyHM\nIAV0IjSG9LoSXJSaoklPeYDU1K5lmtkiF46idKUaWRFaqK+tI61h+smfisv9\nXg+ABTIHd3hcn7WYm5NIIVtx3Tj/MisrH/L4Q34oVqlGutcGa9D72RFOpXIc\n6cNPbpxm8jlpr006XCKNudCYpQEOoPq9OcdFdd/eJJ2mCApiJdUdkA2k4QE6\n8+LbFnmPQYxWOZvYALEx4IkjXYDD6vc5FaLEOAi1Lx26WjsPD7FS4r3ph8ez\nrji7\r\n=HvwX\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"8971e891898c4a8ca082beda756a7b93097f858e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.790ca85fd.0_1602539741635_0.9228691130289768","host":"s3://npm-registry-packages"}},"8.0.0-canary.174c0becf.0":{"name":"@material/density","version":"8.0.0-canary.174c0becf.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.174c0becf.0","maintainers":[{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a6455dfd6e99e27cb6ba88cc0942efe706a522fa","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.174c0becf.0.tgz","fileCount":10,"integrity":"sha512-OEY5Sos5R+CxcoOZ6xkmpGcvyUn1j9Mr+Nx0v5wCsAjZej6/uwvteTEqCnnZM+D5pTrOC0dsEn6YLXkRDVN64w==","signatures":[{"sig":"MEYCIQC6dlLbLxoznych1wEFoiE107GnUeGNEVsq5G2jDrcJLAIhAMxqak0ReFj6BBN8HaIhnbXuPz9cTPBNCbo3mquUbCpb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhl8ZCRA9TVsSAnZWagAAFPgP/3eHesBsgow8TmgVRR9q\nCPpa5CnQFuqNLsR1HQuJSHMGo2t4iqko0B1z3ViKOsVePC6v/a1y/TNC7MNY\n652iUkw0aM3Hh4TGcZ4Q9vah30kxG/YBzo+Akclv2rOefLY/cISEFXb2rVDL\niXM2tZMXuytvt18KdFm7c77yHfaevGepYYGpSVpUVwxzC3DtRmMyAAYfIihk\nLSOqSGykTrDuhNR4A0rXOeHbkpcoJLOBZRMJqF9KCltzi1OPSUGS/a+vbPuv\nX+6UIcxoHos+yTAE6keQF+70p17G3BV17YdqzSQo19D3//Ryd54/a7Sf0DR1\nv1xGZQtIyWwGR0x+zp6KX3piudt4PRcZkrafJG8yAX9qQgb/OnYjVDxmqT18\nc/Is5lq0wouxFGcddndbt4rrUPZAt58790a/atUcGxLCM0PVQMBxbwo1Gpmb\nPtknf873M6jAZwXnVvcIp/ujzlLLORhRXJ9mr8RhN2d+8lzJJWndWoHjkhUe\n3vz1BXuiO1Ds0T9GC1eTL+pzATQdP8ikfwmHt4w/VoAJHdQZ5fFHRuK3tzBw\nFIOFzRhBEpbSEursZM2vCw3gUHrkpKxMtkVd3fuRHHsKla7pqI82FAu4vOVR\nj6oHGsdwoFK+oSqG1lrrmf6O3vVcOWkUxJ1GZL3mtHdLPbF7X2T4+w/2Un+2\n8mIL\r\n=4BlU\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"6dc7561b8695889178b3e884e84f5d9c3d59e100","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.174c0becf.0_1602641689194_0.8206844928922381","host":"s3://npm-registry-packages"}},"8.0.0-canary.c71ebfa02.0":{"name":"@material/density","version":"8.0.0-canary.c71ebfa02.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.c71ebfa02.0","maintainers":[{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"77c9344cdf38386fd5139e823b4df9407c0b8d76","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.c71ebfa02.0.tgz","fileCount":10,"integrity":"sha512-mu9Atnu2UK6dREFnnMyYhdTJ5OS30Q5yBMP7gue7bxwHegjf7djNyBF+rAkx5bCkbiaHaS42Htn+iLqDjX8cfw==","signatures":[{"sig":"MEUCIHeY4NhHG1oY4jgf15FuCPhCfKEgYBJRPpjeiShsquWdAiEAuDaNyWeDcJIXOYI8juBOVhdW230BSLXf5HXi4Kr1j6c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhnubCRA9TVsSAnZWagAA0UoQAIFrFAM+51pIIfByEGSZ\nZZtSb+z06D3WiGnpzKEQ87X+gnuD7negTfUzuyyPjuH+xSWcqnkg0ZhU0Vi/\nC07MOrinCxpZVeKpzweu92hAC4fD9YRAwekPCQQnMHn37wLxs31aBPs6Sh0r\nYBdoplephMi8b1DAmAekNbb4ytEeW6e+AjJyvr6tWBncR3rmliDBmuQ+BcGB\nCdbg9QNKZf+vxlM2VTSX6s4PiP3acFgGQneQmQDBMJsZmv04i8Pr/K62FC1H\nrdboStzvKbNeDo7El7oRHcHsJf3wwzUR1jLTK0heIZ+U0ZSy38H3r6NObg3W\nmCyoBMNX0YRO3E++nDikxaVdNCkFHJjD0eWRKDLXTax6ARUn9gthmDNgX/dV\nefkabwMiPuF4U9IY2EsXd5S1cOfJDQWaRWXYaWBOGwKBSrhgJV5TqB7SqYLz\nVOEKK0JB5qhXTqpyDwJ65cFeYsB6Tg+Wx/0ist6gNKYQKeoAG3sqLAR5YCxE\nG4dJOkqFCWKowvo5SQk3DJEZ1Pw7cB5dFT87Jucf++4gqzwLBB2GY4teM9O5\nNk+LsOacwAs6lVTxxUfz00LyEQ8mUKufWu1SZFySD3Bu+Ft+hSN7fTZ5wCc0\nU1FLkb0AxCcEJKX16oLA5/PALFPmcIN/2KkG6IIEi7a/XywFhrI1Bgca3rYS\nwXxX\r\n=ZvI3\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"d1158a184d234471c81501e838b409c54f591268","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.c71ebfa02.0_1602648987206_0.543744574185766","host":"s3://npm-registry-packages"}},"8.0.0-canary.2ab716cbd.0":{"name":"@material/density","version":"8.0.0-canary.2ab716cbd.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.2ab716cbd.0","maintainers":[{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8bb178695fb41fdaecd096ed61b19c7356a8dcc8","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.2ab716cbd.0.tgz","fileCount":10,"integrity":"sha512-DvGE5cNBUrzfC36ahwIVxlX73oC1N1te25J5X0wZGP09lTvYKKlNspYEcXgkWgU8CXZk51RiEpme0LTHlJ6dog==","signatures":[{"sig":"MEUCICSVTU9qL1Y8/ThU/v6r71Qr0XJXZxhFQ+i8Oa/jgz/QAiEA5FkOiSY1fBzToUG9WTgue/5GoIz2MF0/Xlzn7oPllzw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfiONHCRA9TVsSAnZWagAAjz4P/ikempLJ0uFb05vzww/7\nuCtvI1WOCk53tur336WMvK96Xp0BwQNnWtM1Jj9nfS3R58beOFdCjzdp+18V\nEhNLEoaPQ1Mcq4w1xiCsGURtyYFT+wPJ2jcVf6PftRfq1C/pRwc7aBAP/z33\nf1emVgkxZde0hLhGvxMCZA2knRDAdtj79pOzFcIKDpiyBMIYnSTLdRAL9TkZ\nRrvDfk8fnllXvOAygkDIemomAfS4KvIlBvaQdfhlcENYhxk/JLYauNECSQnm\n04sNNrEmqEWk4Tp/4BhN/rnq++nhlz2ty1HFKMz9ESWDImT0Pdx0oYQ/aTWi\ngG0efejtgtVCT+RbCkxLESVbZkbML2AXohUG3J2OGHJ88rJ2yV1vzNWRXlDH\nX7gLPo78sw974j7W/8EmOX+dRvs8fcnNKigFkw2X0u/5tYCqEMIw2Xeu5ybI\nWWP8oqh/sWBVKYMNkgRazi3HyoO0EPqlGyJmVMklxV+D2Pd+3rJDeiJVDEt7\nq38Xv8UgY/YGVj8bzfD0kIWOfWnGWTCOgBI3oqqoh0h7La9gUgnk87LRo0Xp\n6/AH96rLWrqcc1d46LW9rWQsSAHJJ3pl6z2SEVpUT6O7xg8ZOAmXqPZ/YFe/\nbL3AaX8++t8g/wSm3RK2ILSjU+fvaLM3/abhvNlnKFPre/Sy9G0ZuT//Fxi+\nh/8u\r\n=ADuK\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"a3f41127e9d90f7e393ee6fa5e01829e52160131","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.2ab716cbd.0_1602806599390_0.14422958399128882","host":"s3://npm-registry-packages"}},"8.0.0-canary.43c1c5e2f.0":{"name":"@material/density","version":"8.0.0-canary.43c1c5e2f.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.43c1c5e2f.0","maintainers":[{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"598bd111f2cff2b10359f63b0be7e5f41bf72400","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.43c1c5e2f.0.tgz","fileCount":10,"integrity":"sha512-BZxnhKmSVrmwz5T1cHb2hrYWckwq6xikixzD08z9Xj+UEJMjE40E+ZJ+ZOReCWrF9czDR3SPtIDO6b5sKYhjig==","signatures":[{"sig":"MEUCIGLJkikA2SwoehsL64GK1LInfJv1aT/I++xTQTu1BS2aAiEAwB/5cVAbIBeMDn4FV+oWBpmVM+T0aEKSZfwGr49SLyw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfjZ2KCRA9TVsSAnZWagAA9fwP/AzvuzXZZN7ieXqoaYa8\nJ220Qv6ReX96kyZd2YkSEMIDJRqyMbP96mIP/K6E09LJjluXYB4pzQoZW+xw\nK3OrUfyOPmCU44o7TGIjfWEx0S2ydGsDmvkA06m17r69EChqgSxRGuH5enTj\nEhViLLz65oiXBYj/ASRnSWKqomJ1bdSWTGZb3/cCdErz5csQD/Kv7rpsohk1\nSUB3KIY5YfzqPscyKNmAAv87X8ORc7e4CEt/gIvWvoA33CyWbMyoX5FaC6XH\nbXoUo/v9m3iEGw8R3QIntxuZh1vdG97Mkr89eBe2Z7bvzaDdeKH7LSRDfh5H\nksbHACyM+6khrKFx1jDmTInFfgVpFFlM435Z4PM4dYtL9ScpL56SMPXDMVQ2\nt44VPW8rRU9wOwzfZ/0ETKKN1a7QzYOobMQeD9Ee4733lPoqaZpUmKfjiLvT\n+lZTcusXLQKDE9nAvk7MVVF28VgYSNp3SBUR1AkDUVhe6ng8Hnmq+3Aa394C\nzsBort2ThmBSUgoD23sdTQnbWppmSTnW597AAYaNAH353H2YIGPROzXvcLdw\nn0B/jr4f81QqNyoXWaUTq5DKhseozrhsrlXtM7NdjIcAuQMNUXV0wBzI2WUG\ns+EH3uCWEWxbBh623tFdUVUQYjdfzLYhNqh+QtIdl3xD9tdvtLU81lhBIpp4\nl558\r\n=mTDD\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"bae89543d5336b4583fd1519cb63078d2a5c39f5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.43c1c5e2f.0_1603116426196_0.5713079031269981","host":"s3://npm-registry-packages"}},"8.0.0-canary.ccc64eea3.0":{"name":"@material/density","version":"8.0.0-canary.ccc64eea3.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.ccc64eea3.0","maintainers":[{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cef6868d587069c050b169ff3ec91ef1cd994c58","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.ccc64eea3.0.tgz","fileCount":10,"integrity":"sha512-gMN31FwIdF/q6RUaWw64Pb30hmXWXaj2SIn9Y8CP/v0l8olXB4R70H2xVNagyxHFpPf4hzM5kiE07u3AhBiqwQ==","signatures":[{"sig":"MEUCIG2G5H9qWQRlrQ7E9Kz3jQ93pQgBw4P83TcI37GiEizgAiEAoUXPV3oiXjgIZShP7UesGnf5V4cHtuwV8LEUUcV1Nco=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfl1K4CRA9TVsSAnZWagAAyPoQAJ/f3j5IlK5CmzxIg1bf\nlAf1F8VuuXoNuOx8uzOJyEAluSTziiDYf2RA7tMzsJxosH2B6MMbWxknxtvy\n+/bWCqWrEJHIDdQmqEL2J5XW26ygtMjpJf1rDzcib5V7cp9A8rcuWxGY3oYf\nS7Ae7Fiy1I2uNz/nF+wpkx9VKnI/fVADpSps8wa3aSjUu1ZXMgHii4BT0vMa\nYvoZ2d3GMKc1ktmXR3g7Y0yaBynZIrWURHqLMpD9dNkhT84UgzAFB9OjPBxn\nvC2w0+pq/UqDW1+fxvXX/9hSS3WPNV8gTMQJzqBZw/Q5TKi2hFryGQz5n6YQ\nDURHioK59Ef2ZMc0LWLspeyIAc459HmYzX/oXXeI1CM1pfuVRwG0bJreEdSf\nM60jr+qZDclrcLZEaJCAhQ95IfY7jCyqapc0HlLlFvMsu0Kjm79WlAqVpwTM\nZ9xri+YNYLnUdTRaENpFTWPiaYkApeAaSJVdvhmBtgvhUCRYd7iVLQDHgNOM\nZYykzAxDb7ru23IBh5hPzwDeD22Y2VoKD+28sYnG82bmVgll4NHOVPyhad0y\nvvd3159J2lovtvKsdjF/uHdDUI0BUvDpZK74fLZ7CdfeELws60pTkCp0Ofr0\nzm8hgQ8B8mJfGG77qBpN/9xqVP87nhSTKrO4kd52EzhMplpjzqbQHFs53jcm\nNWi3\r\n=+J5I\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"26df299f75c86dada6da463cae5df1b0277d5c7f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.ccc64eea3.0_1603752632143_0.054350721017523806","host":"s3://npm-registry-packages"}},"8.0.0-canary.a79cdd019.0":{"name":"@material/density","version":"8.0.0-canary.a79cdd019.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.a79cdd019.0","maintainers":[{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ced77ba52ff9b41971b17b627238af2b18222184","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.a79cdd019.0.tgz","fileCount":10,"integrity":"sha512-eR4cBByaz6TOgFtnQV1GPLA7xhcwmRGozkLZVGoDkHpxI+WmF6c6c5CgvmRnip3mpFo5ZqBPXos2SuYJ2q1IQw==","signatures":[{"sig":"MEYCIQDqvC1p5oeG3zMo68TaBgELFoxslWBT02fxlCLkoEOvaAIhAOjQrR+JPpYif0lw+I6VdV9OgMMlc+SL6zR2klPlKEg+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmEsVCRA9TVsSAnZWagAAH28QAJH9DPjEFY8j2wncelfI\nLB7QM4/leotE5f2mH8a8zElUMJp+9/knmblEogzqDFNa48WxUmk+BLftszW+\n6q5QeutuHxcVRSaW9PsnB15jetXbURROY9my/Hh9EjqdxU+gbsI168LsjynK\ndlHa6XcG1AtCeDpThtPemu19cgzJSIIjm/GZAqMwRD3RPDEMksMDnkrd7QoJ\nZRjDsF1Yvq8gzfX0nQ0x+uZwN/Tg8db0fiAOP61qQF5OBQyDDomgC8Pzr823\nCJn3c9ZTI3NWAVydYEFE67zYbjiomIPZP2phJZSZtU92H/RZ3fd/6FEVfAhC\njClZjM3okwN3jEcGXDY8z8MEqIyduLzAHEZh5jj5FYXeOdpxoBJF2uFNPwp+\nZHhdd407pLXQ9s14rgXhfFI71ZzBPB4qs28+4/RQ/Tp+RsErNsKXo7nQbVns\npyxd/iXDaLn2wV/NVqcg75m/DD1INqIRyLlZyi9v1g6XujJhXlGeP0OY4txU\nRhPyp92oHFuksRKfxkX0yXiTmACYrcQQpJZ3qe6R8VyQ85yLCQea1yEnX7Sf\nUN4MB9pgfilOPvY0YECsRb+VrEcvCd9x1FscrR0Ty1XfqSQAWuJANY3SQ+kK\nF8PjJQFgXy6avrVju8K11SPKvlh9hEYYtydYdZTzC4X7c+3KqKJWfp75CO5x\nezYn\r\n=0dWQ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"c54ccf71e4018e84948fec32678595d974f80c67","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.a79cdd019.0_1603816212682_0.83238348977828","host":"s3://npm-registry-packages"}},"8.0.0-canary.596e98424.0":{"name":"@material/density","version":"8.0.0-canary.596e98424.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.596e98424.0","maintainers":[{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a0d5e9324499d27bb88e8b3fe3d6ea6100373952","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.596e98424.0.tgz","fileCount":10,"integrity":"sha512-R/81PJt/k9xw9q2GDAlZHhMt3OTszMEeyQXhxL9KALCb40DvX0smvL6SCEIdNUA5J0xoV/0B4ouxh3ELXyXbKQ==","signatures":[{"sig":"MEUCIQCbVM/zErc9LBOMIgfMlrG907YtY7MCj3rhW/b2Q1wuDAIgVIW23+CoWU3fLq1TqgEy1iQjdiXHxSp/Vp+uMk8yyy0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmZYVCRA9TVsSAnZWagAAc0YQAJInssk78sVIzXYV+6oW\nAhm1Db/idOXhr4/gGVoZh5076r2SEWkY4tzJbJtriZVyAihUYY56iOuP8raw\nvmRDQVFd9xPUuI9hAOchZfnpjXQDkQo6ewB150+QIjqqHd+ebNXW7GiDjViw\ndKNNoqt7ZivogepxHMwON0O2MvaW/yhYrUprckqujnQZMbm7na6lQeRVHTrM\nsPfIsvInYUpusZdGfqncE59HkLafOdUY4GwtMptyAzIfXSK6lCDW4FVdJ/DN\nwvLsygaHljKeC2/2gD+5yNYIjDAAx1gwPZSHtw5Z4tKRX0PyQaRd4wTruots\n9UQpDWVNammEAjP3ig7RuZDA3nUQu7osT9XAKopGSs5T6d4F1OP++dBq5kkO\niYeja65tVGB+LBK+r6jzhV4uB5/f3MVZaz/OE9Ko21F0JRpQSV4X3DeyriL6\nw1Z423bAuMVV9d21aDU+UgF95i+D66BBigrtBNPMzhjRoglDLBFbO2hUcL1M\nCde3ewM47DCEFX+PqwVBx9cxGHF6NgomuPXrx1SfxOjTxvXiln8UW858ac2O\nxM9b6ARpAIkQQQ5v0QAiEBjqgBqTvrezx+oG0b/JCJRJDlVJeaIuqlhkxKAg\n+d2jcIwbNMG8TqCzZZ0+2VU4mfCezjKBIdxB8FDjmLufhV5sL1w6FGv2pAGD\nHUx2\r\n=gtjq\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"8fdc1f444b4540a876847c7c3fb4a934e75fee2c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.596e98424.0_1603900949091_0.14858591063169269","host":"s3://npm-registry-packages"}},"8.0.0-canary.05d5facc2.0":{"name":"@material/density","version":"8.0.0-canary.05d5facc2.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.05d5facc2.0","maintainers":[{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"827e859a9e80e52c3dd8ccb9c696c8101345220b","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.05d5facc2.0.tgz","fileCount":10,"integrity":"sha512-tvM+xiWPqULJPGpSP76kZn4bbOd908yXuzpAIUCjDa7VDqLmJBBTtovevSW/vOkWGEVR6TLrRaZkFIuNerquBQ==","signatures":[{"sig":"MEQCIHcOMRFq26Pj8ZpU8kQxAIjf1oeuoDGxj4PknHz71D8dAiAN8bkCtlQdGMEYtHyilayt7kBf0AJGEo7FH6TxAjWtSw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmZgQCRA9TVsSAnZWagAAkp0P/04xj1lnTanygo4KtUaI\nLczS+I1a8WmrtolgqKSF0syTcGXJnYH7p7mepBY7wx+9kVjeI1tiWZTEQLDq\nAkfoVnl1ukU+GJDR9GI+P/e2knCSi/YQ5217yEVT/VZKSVUHpeTHZ4XSXJP2\nKos/MCu4dsjOf19FRFk20ye4l8sJE7nU/vrzunORPWWLPorA9ufTixc3aB8p\nHWEKZ6Y38Q4qPk0Pd3forxfK0a8rcUWTLUKcp1d35QzsoMuZSoHMzE2pqYLL\nDLawaBJsWAItJ3jrNfbVrqrXkQB98KNLjnzP8liZyXFZO+YWZaCkF9aV2n/E\nudNnvvaZCe6uAA/LXkSRKUPiQWJQuSNBKZTf/3aeEfbZpADu/mx6ZalKD5Us\nB1b2tP0yHP307H0PejrK+XJm2j0APYOkhAoJnH8tm5buJeYavNRzzPp0xdQ8\niPx+MH6ZpDrdirTnWbb8lndW3f6q6qu5w+XYZ3ur3GKgrMU9pz8e5KbtBBnp\nejtsNj/fSR6xfUcUzajppouxnEh7kKfFwgmcaM0Meguku9koVGZ7YfxzQEOZ\neAyzX86C+nbyMpMN1scqUoRVIGVFnrn2sgQNbgsM3J58rs4VKyTrRGCRWBJp\nIpB0tcbmwHkroPazl4T0VE42FGPwVGwdNBz4/3ZFpkiv9eQ3w0FRGd6zLVMq\nCiAI\r\n=1vNB\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"db17092b19dabd6628edec5bf226f0b6a48e4f95","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.05d5facc2.0_1603901456186_0.4235761952058157","host":"s3://npm-registry-packages"}},"8.0.0-canary.291b3553d.0":{"name":"@material/density","version":"8.0.0-canary.291b3553d.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.291b3553d.0","maintainers":[{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c67386c0dfcc238a93b38db2ac7f05b6a9ff975a","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.291b3553d.0.tgz","fileCount":10,"integrity":"sha512-OJNstTIqnmoKLt2UqkYtCGhy0L/76Pzx5PysA+1G85qKm5Miwir6rx7SMZDFSC+InNWZnaNUvMF5EZZPr9IYfw==","signatures":[{"sig":"MEUCIQCe5bDOcTrY45KKqI8F+qpFgvbwPfcVpFmvxMLU4vTp3AIgL380Zrj3g5krtkEOwiERBjDXcgjRytOah6bGwiCwf3A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfma3aCRA9TVsSAnZWagAAgkoP+gJmF+uAnBldMUNeSJoc\nLbW3VNeKaZu4X+n48R24lTz2vT2zgEf9y4fETPjUL1QVvoIaLl0AosnCZaOm\nc46yo1qYuBrSffI3TR00n/QyxreddnL8+vAn/9U29E2sdRfFVazqLGhRoqa4\nNJhPXGkYatBfYm3PjzUqq6sXczhXiCOiO83DBbITTx9mY/TMIWI9wp+dtzYB\nFlBGMJbtsSGNt08dES6Ax3YHhrUcl62K0DpEURmXkzoYQycdskXnwW9GKHyn\nCaxioxkYzQSskBmcYC3HmgMxUEitk03y5kk2y98yZV9iQtjUW0+txeAWgbkO\nHrPq0xDu5BeGtbdJ4Vu3YpR7P8hIRsyY5Wb+Ns2pL8PDRsU9eIX0H73QCeMp\nisJNS20sNfNVX9xMcubEIocCUzDycVr9gyGy656jY1iZgQOSPBo9/IADyUdP\n2SPLqxXQWK9W7AHXOKZJ5UBur1qaVnSFEozAeksMiLh7caM6IH5k6Bty0MoF\nS0N4FwCKklnwyNG92H30ISenYJnN5j8GrdchckNWXJFJoep520QvS0g0t61Z\nZtt9NTh8BH5D510H8GZZHXN5kl4ByAbykZN67lBZJBtSkkXP3PePVuMStqhg\nIh9VqdElsZdftcweMZA2OiNk+5SezXy+TyPjL0rZwD9yxDnlB6hO7H3xcmgP\n1XJW\r\n=VlLK\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"bbd141e6c5168a84cdf50ef1302c9f705f0eb283","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.291b3553d.0_1603907034265_0.9412763785920559","host":"s3://npm-registry-packages"}},"8.0.0-canary.dbc449b09.0":{"name":"@material/density","version":"8.0.0-canary.dbc449b09.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.dbc449b09.0","maintainers":[{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"316cc899b8a4786ed61f6dd21e638bf79b3f1ecd","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.dbc449b09.0.tgz","fileCount":10,"integrity":"sha512-FeIei0Y796PWJ6nPYw4/pgoEbj+P4pVDONyhGsWVCqf+uONmhN5+KNfoCCOsKeGxUUi5ZnTtRdE39ZjkN9g5Eg==","signatures":[{"sig":"MEUCIFi1eG/2nsR0lrlj8druVVKg5cPmNIDbejnJLltFCY6XAiEA/he1wZmYpulBnX992BkCHM6gVkT6mD3DRhgMa9fOE4w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmbRVCRA9TVsSAnZWagAA+4sQAJ/f/DSA+600CoWP1FKS\nPONu2MPDDxPrR8Um6/SdlMfGDfhbkOHAqppgb73QYSt18vk5kplm09Fcb4o8\nOzN3e2OKQIFucfyDxIT/TGPm3rBxSNbKruera8pilk3DEAHPrrpW+bh0piVk\nmmaleP3d1U2VGFgWIobwIp1na8tKs+L6YVlfwfCwLHIOBFwJJCnrRjRvO5pR\nsdOB24yabrYeXzv2hTSNxLJtXOA8FlEKg0pWcYczu3dWWEOkj2fLwpMA2/0f\n5A/aHu9lmJ/NE2faQ8HYqMvNqi0hRZ4Nq2ybt8FbX553yVwCilk+EKM+4HRY\npcPPuk6JY+jXQTwPr0WGH8mbb50YVo19boP/jyV3j4EluwJp1yfvsaRBTXnw\nkVPGCumJlJ4YZkyWbxVzl4hqpL2Mxok1GVZ13lD3VztyDjNb7cxlmPGKUVIE\nmT7Cq2VEbcwxUE2iiyxIVzTe9kLkfOhbfL+QUsqPmfOtFn+xwNVTzZhbPtNS\nYsxpdlOpA7EhzxZ8lpu2QSGJVmFjx3KntL16qXveYbOCO7qd6mPq4/KatFwQ\nHcZSoJCPBtPdXmk9OpFoZOC0cMGL3vZt1r0Tty54YSgYWQf5BsWU2qzGm1fd\nHjDAnjN5VgARt4tNVgbS4mjWwqE5mwZMb8afUBFtj1vRCnLkBttQz+/wz/lI\nc9+/\r\n=g/ph\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"7888f3b13baccffea8b2b02ef5c25e264ae321e4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.dbc449b09.0_1603908693291_0.2861201563109679","host":"s3://npm-registry-packages"}},"8.0.0-canary.4794b25da.0":{"name":"@material/density","version":"8.0.0-canary.4794b25da.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.4794b25da.0","maintainers":[{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f76926af7719567bcaa7455861843a5791a18a00","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.4794b25da.0.tgz","fileCount":10,"integrity":"sha512-WZme//X80P/uIAj3F83QISg1uY65qeG3deSlOPcaIsJx9yJVd4H78LH4w1MniaorU+ejsZ4k3tDaqmLwPMf4RA==","signatures":[{"sig":"MEUCIACcaNUqo+thnsBRFuoPj7VpRQ0scK737S0LW2vdJsCEAiEA37eM3VT3TL7hxsafaQvugCoolD03t6hssZHWY5t5los=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmbsQCRA9TVsSAnZWagAAJ68QAKQvJsU/2tQz35jhy/2r\nUWNOtZNYfvXrQ98V+tfbvJSDBXpqeqp+azsXt7gPrbL1gnND0JVpjXnPisG4\n2g6piZR2PUHYPKMXakg64BZ0j7Rpgylq0Y+bwQgz18RnzYlf/rtZkdXKR1Ai\nOkn5PXJjrWkEoGl3sl/yypSvhlwTR917YMczwhVS06WrIUxQj3JGDilFVZ9Y\nDwM22jQMs2dSHEhVqyPyQT1jyNY549fkPLwgNGPkYwLpipCqn6Ro3uJ2rguu\n5yUr7UClLPCxxzzQHGlpVllOlkwjJfLJech4/Q57j61HHzyfkGzpIE6wbsD0\nViFKXuamKX9wsXclHAyF6ELsGYgevBCzIuwycNKHZiCAbrgeDJc/WiNIZe2w\nalBMofReVG1w5xBMtgf5pAtgeNszH4gRQV/nhu8X/+xLRNlVzA0eWecXewJO\nntz4ssh9Ph1bV9lXlNgvTVnpWUzvX844YEBlA1LKCxooDciRzpt55/yj21S4\nvzjQFWJtdQCLgw6ViiUFMmgQ/JZ+9uAVo1xqI8iUpS87WELABUoi6TkG0kUv\n37ODWttYb3TVOYOvH1/08WITUsGJ9yQyj+BpBWwSVgjV2ZIpoy0M6l2F8O/a\nubx33E1Adlv9iYS3X1E27bmX4PbWqeJf3rMMUmdNeiJp+dTwT4tSvPvxwd9/\nddfn\r\n=YdbS\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"0c2eec6be7b76adae9376847043bcde093f59d3d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.4794b25da.0_1603910416142_0.9815857555340601","host":"s3://npm-registry-packages"}},"8.0.0-canary.c61db90a5.0":{"name":"@material/density","version":"8.0.0-canary.c61db90a5.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.c61db90a5.0","maintainers":[{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ae987e8677a88903f0e1cf1246e74aa537fe8c8e","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.c61db90a5.0.tgz","fileCount":10,"integrity":"sha512-t+li2Qj/FbKv+T001x3I4H2u3V5z2JJ/gvGrzJToKFWcMsKakini33lWrNi73pUcn4a+94xXDkHJ+0L8YX3UAg==","signatures":[{"sig":"MEUCIQDSnQhMqbJ1j7NoHejTC+/aRIHMp5/GImtzLPre0RtkcQIgD85PRPmKft7sSi7WXERR2kEKCFL9k0j7El9CyjRGFOM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmb9aCRA9TVsSAnZWagAAZnIQAJxmEg0072baRRydNYaJ\n6bcBEWFJ84e0P8h0lcZZzS2Fgv6SK1y2JjJ7iPlEMl3MENRGW+XQ6i5bVyYV\nN8IebuiAwOY1MwbO26/SUeR6INSDm/OReCpDdfWDlTfYyvpgocW5xQNIYxM8\nlQZUD2u5PoMUFmlVnWHOMd2BCrau478KGuanxim+3YWvFbCDK6kEOQYCloZH\nhBTkQ9lTMMjUXRqWW+4JFBqpjTLIyfA/Qi2jFd+EBvP7K08IuIdSPIvd3l3o\ngE8HqajOTFOmvwNTIqVNLMvwaM4pHu6gsC/H/yFvRHx1licL2qzONMjKIzr1\nZqCiCHqF6KQJpeUo5nqHjYTCjdCxEDwjr+JLpoBbwwUiGVrKLZbo4mQXF+g+\nINM48SdWCod/Poc0u9amz3TQU7Yt2mEmQEDMQE4F8W1ySv2u6g1++RycLcR9\nc2uxbkJmfyAyLEJKPZndpr9scNfmrhusK7ClSuzIUmTc+vsL9D9JYgrzxXNI\niAvfdTHEQAsak1nT5M4j3sgStnL1yd4q/DqE7urO70qdQEsUhWXsBknH7IKy\nsk9ygO+1blvBGK1OJi++NvYXMQfX1j+qoNqKR5XmQ/pyRUzibBgzeJBPqs2c\nRk8WO+mHOKqP51e86kRbVrMpj8+GPJbO50MVp2e2nUltkeXIfM8Ea2wSn3fE\nw+I2\r\n=JGza\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"695570eb7478c283510b9174ac7c4911866e0868","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.c61db90a5.0_1603911514194_0.5260003915918907","host":"s3://npm-registry-packages"}},"8.0.0-canary.6d9648ab2.0":{"name":"@material/density","version":"8.0.0-canary.6d9648ab2.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.6d9648ab2.0","maintainers":[{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1155172980314199aee0f40a336a1c33683440fd","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.6d9648ab2.0.tgz","fileCount":10,"integrity":"sha512-sqvKthnq5EISknZ+CFoEQoejwZ4nQr8zHtIZfV6NmXSJL9MLFRUOGyoVLAQ+GFTObr7anmGhmg0UL8HXXi5dRQ==","signatures":[{"sig":"MEYCIQDBKvoASx4roS1HPHaIswIFO4srMjlGzQu9998UCwzwVAIhAOB/QJc6s+Ndmmwr8efKtUsiXwpEiHNHXAcW0i7lvhoo","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmyagCRA9TVsSAnZWagAAxZEP/1/6QB9FGFHGyQkzRyKl\nYnuwtTI3ahy0JxNnyjXveg6zDgwvLSO6GB2qgazMqB2/AMPtTSRrLPcBXlpy\nvDgDYO6RFuRWNTsZSS7UlJW6fF2e1uzb2RD7DHcci/BcET/AbBFgHGRJIRoq\ngQXqZyYQPUYegQQMYgVzCKXsBGsUOIgc44sb1iBwY4QyP9A5pkS+PcGEhgYN\nqzY6skJiPKD56TulGPMIq1D0gr1CuMp2m1Z3dor39LoW/PeLAHFbZlPEMd9e\noPFVr3c6MSk+xg5TehqFgP9l+42RJgve6ZtsQMqLorfAqWonRLqNbY9KsBOv\nBZvK1bCGmsdWFGhH15shDoVpTP6Gmpn1yrs4v4kwEjW16gvDSZU95WOwMg18\nXrAhvFiUpHy+UBvadgGg1XfEVjeBsED9Zgwwof/0a0JE/xA5CL+t7mg1UZta\n7aWJmLxeCErml5KhWaDEfufGVdhAruzcPwSW8UerwtwKyFI4HQSKFPeCGVOX\ndP0Xdv6bFv4dXyyRD36hrM0c21hIw5DmP9lhT8DqKZuvd3Y7gEJFpfLo0A8h\neYY9sbf9j7nmyECoGVfgGycph9AQbj5xL8OdNj4jhPlPRiB5qNUbF/WS6rlv\nZC4IoMEUiCL0icvNJNIJxcj2wu4jFJz0lEHw61+8p9Z9pDPz2Mkguew1yqJx\nHSdQ\r\n=98ZX\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"5de6a39d4b70a98beb71cf8243a219f454b11aa3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.6d9648ab2.0_1604003487879_0.6492635452365307","host":"s3://npm-registry-packages"}},"8.0.0-canary.5511c5254.0":{"name":"@material/density","version":"8.0.0-canary.5511c5254.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.5511c5254.0","maintainers":[{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"487a7f7d2d8836f1f824b4863e2a6d98e50b9412","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.5511c5254.0.tgz","fileCount":10,"integrity":"sha512-AtlIG4vu1ilM+lWYvrg57npJ4+FDXw2fA6lgINagivRlDpi8GUJPOzrJvcYGO+1V1fGJHlnBAt4/VbuXMsNMzA==","signatures":[{"sig":"MEQCIF5eZPnPLPSKmPwwZ5yyBqvPWr1BTzvzhe7vF/KloLZnAiBpGXPKR/mdrD+y0w5qKQ1+MO1a/YOExjLBT6pExQ+AAg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfnFRyCRA9TVsSAnZWagAARn8P/A5nB5Ut8n9XRo/x3onW\nXUptk6cba/xXHBJh1LQJEj6i5mwKcrflUtvEIJRaeNgiFdXp01E27LmpxHp5\nyUgwvvFi2nYhs5W6gm/opKYmNShhykAM+ztsA0Kc941qoIfh1yqpnJu3sCwE\nvrYmRoWyiS78ZCLb8iEgL9MbKMvCVPxgAEc0j1J8GIBVoy0BSzet3uWIAq4z\nEqNxDhy8UYs61yIS7WL6Ef9mUqTXhWtho9yCZt9lAwyLRsVyms+20DPMvNfN\nNXL/R+kdh4NnRlP7v71vf8CX4zdXs9EtKSGH4YmN0yN2SNImWf6Y6OHaXeWB\nI+JtCv7d5MDyhz0X6VtBkOCKCsSKgVl43M7Vc24Hg+otdTWXcgea1A4SBWCh\nelPpIy2RXkOgQlOCWMCzQ3cySHGcW2vqL7aW7UHwP19rvyGXbx3hf/OD4oW1\neXipWpUgXkLdcNxvpGkklJW3oNz8Js1f1aVBh1F+/HxTi/TlAW2BC2/lr4uh\nlRe48m8htdauvP4y99MSV33bc16siQxH97sVguKKICPePoPpo0iuKrehun2M\ng6NlHW2zjmI1HQh6wvP3exgJyNKBv/fZImXpQadkWYFc517o38slKt3ec+qk\nN8i6K/Y5dxmt1g+vMN/F2AN2cQbRbGdv2F5+le3hOOcvNllrmwOZoScXcWGn\n7sMP\r\n=ZKaV\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"e847a627e044cecc475be1f0140e17a4e2a68dbc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.5511c5254.0_1604080754108_0.10332312733029525","host":"s3://npm-registry-packages"}},"8.0.0-canary.bd6e302a4.0":{"name":"@material/density","version":"8.0.0-canary.bd6e302a4.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0-canary.bd6e302a4.0","maintainers":[{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e71d3849d69fac65ef5187de87f66462087fb053","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0-canary.bd6e302a4.0.tgz","fileCount":10,"integrity":"sha512-0whmYDsSW9mReZGJ0ZAuX8cQOBgLO3Xqn+Ti1VeFxqiLaztZiqLy04TAVyf3FP4F5XLnMSngbyzhOQGQLt6B8w==","signatures":[{"sig":"MEUCIQCDePFM4KMeFWbCF9OLPXSdED0o7Q5qKp3ceYQmIbLM2wIgMMSnrByhzEyQceA/vanXoA1CTnPnfHpfg98gCs7ick4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoDvsCRA9TVsSAnZWagAA1cMP/iUy92eSam4JZfhWshIH\nRxem39INUrNzCAhC7bNpRS3J6tgu8UookatekRMFbGV2gIKXlempjomnbH3J\nkOI/7zCGg2t7QOnqNtA6EAjeq/yWcrOdG61J6ItQuUS4VE8G8+rqTbRbby6m\nNrz9xDKx7prZlpTI1txSSHrrxJi5kJUmn/SrsJ/sPV5jS5OVuc5NLwTHIk6I\nrKEadXZm+SHy+/ElS5Rb+csNQNswGBevOhEJEikwqTE23KpzNvc+n3dSeH/S\nTXUEUToMM7GhRyEgEaVhx5uXlPk/QOxlse2nXc5ObLpqAKRO/d6pxq9+/1xr\nINFaRlsyD6glLpKNseRc+LVnqZxv+bAgXBtDB4u585N6YJelFa5KxIL2o25u\nMpsWOMWPIyBoIZM2qHa7gLTk5+2YbmLQEyywhKnv9qPEenMTtSXU3ZaBJiSR\nPko/Fb4s67+LPXnaryXmI44zwz8axDM572jdACua1bWP3dJYNwhDmbFWnGHv\nhCJPoV1Ccsp4WrrYSRHUHto4T0rvaRDSjTY32GT2Y0AzdULkX0Pwf7FfcVwl\nNsjIzx5cofkfcG3xDCkd6W1CV15m/0Fk88Plks/DwQR/NgQcJD412Bl712ay\nVbMFD9zHkZUtiaIIM0cPa2rl65jutC6NPVjkYVdd8vSQjQaZUaX4CsQ8q1C4\nOSJv\r\n=qlJJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"b48f791b92804fe77eeba96f057b1baa89c48e3f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_8.0.0-canary.bd6e302a4.0_1604336620399_0.4494116655034195","host":"s3://npm-registry-packages"}},"9.0.0-canary.d6b5cd418.0":{"name":"@material/density","version":"9.0.0-canary.d6b5cd418.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@9.0.0-canary.d6b5cd418.0","maintainers":[{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1dabf86feebd2511568e037880f5575fa9f2f05f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-9.0.0-canary.d6b5cd418.0.tgz","fileCount":10,"integrity":"sha512-7BHne9AWQCu9bCzU/tUNUvMC/Tn3d8wq0tl15Crunlis7OOOHyPL53l8pVvv0544oTDMB2laxvA5f2QEr4fJdg==","signatures":[{"sig":"MEYCIQCC74QOlHOf/xDCwDWiUU/qxRKeNv+rdN6ilHYTYQz0PwIhAOnSotgq1F+PuIIqJ00YHMbBMec4U2OjVKgycBZTszV+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoI75CRA9TVsSAnZWagAAsKkP/3wBKuWLv8IxMVwVfTiD\nXMVRoGVRxSviWRag78yuS5nwIatrxcjcZwfHichFjS9h+8gRUXml0/d8/tKG\nlkkCBk/JMvoBG5eryYZZa+GG2ILLhjmj4jxgyGFCOTSu42Khs1JG0Z7J4oHi\nhU7miIDuR84+f8TYSSQSfwn88VfiAgsg848zY6F19BpMOkm9rvD+uDvoCVD4\n4X3hhqbQJ7MYe0reE+wYo+deQbfb/wHyp4LRT8PlO7bngDUSfhGOoVmJiMbx\nA1Du7fPIxby+iUWZe2vCQ7KyPKYJm3hpIIhGUkJn/mWBxN+A50aHXNAocoug\nzl7qrMadqE+3GyAUWr0Qf0QgJ4tWfHnWIRVXAama7oo5yb42XGnpLTmw84Tw\nv4odYNUJgXk+1F6oLsi/ykvHVNqoxlEFTmwGGwlZBnfPXqsNS3UlM+eO3kk6\n8e3+iBR1eohGCuWPdj+f6PI+ScfAzUn6G1tlYMA0gMKEd1y07PU+FbDSpHwX\n3S1ykNnUgpRaKFaoiszxxNk/t6/YoChpRA1Qsw8BroYx0fthMSoy6b7vlIxy\nGTyeo7On83NOSWaUrmdpFIJI+vFuaHzU/gmXQErhbN02ngbDZ9NiBba3GAYD\nAisvP/eAHxM42IezjItBIVUFsrHx6fUb6e3y49rUka57bo73C6JIZl4YKSVM\nYry/\r\n=Q7H9\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"4fd5e4f9dda92417995fcc822b1d02016642b511","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_9.0.0-canary.d6b5cd418.0_1604357880748_0.23649761152171855","host":"s3://npm-registry-packages"}},"8.0.0":{"name":"@material/density","version":"8.0.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@8.0.0","maintainers":[{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f9dc87e5ea035134be5745b00a8bf440d05cca65","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-8.0.0.tgz","fileCount":9,"integrity":"sha512-44g0S8kZfVw02JfMCLQeYxbt143xiQvouR1mNKqC6+W+XhdBNS1IxKtk+kONiEIXVhb9JKnEp5zag+aC589RTw==","signatures":[{"sig":"MEYCIQDlRd5KsrX8Uo6WcvenMnP+uC6gLaaSBG3j6qzXzzjGewIhAK9Nir/L1c/ZUNPpSW1/1g969nHdQpgUmrWpo9akV7TB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13328,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoI8LCRA9TVsSAnZWagAArjIQAJmmgOUxct+tbK+b+DoR\nulOCM5yFsNE9OwzNMROW6QKjot+H6r2603LHfHYSJTLzDeW08vgpKv3o7si0\nhz5D/DiRlvNn4ZUE7ozKpFvyjT9UKkIHkkM5BmzgqOTZRFS6tHQ/fbOX9S9p\nZTcFlt8fPwtXeNm73YME6MZ/STLWwdoSg74iKcVU/QlJhtwGZlySgBvYxfq3\nYaUrM2J5uNwjlMt9fZOgqWm0yd+3rx/ty83n6yuBMfqN42hNthsueAb32ul3\n6oQ9aKX1ND62D6AwYn1mN3scE3x4q2h7WlwIOb64yO/85hsyrVI1ZewwgHNu\n3pwzLfH6XDiOFz2vMS33g/rulDjUcyfoSFqh35H3aPtpjypw6amVZHh86WS6\nWbcia7ZKLkzc6BlS7EVitVzIHxb/OkQJbt3yITbxFAuJ2ZtNiEtlsj9tdH9P\ntLWqAwF1NXSOLJYEJI7K0jhAyb6RBwdTo5mYgvYQs7bjOvtuX4xhYpjhNqU9\n/owrVlynnPQow47Tikv/hZnFbCL7JxDodLTTnQARm82Y9ihChKgqh/gAy8ZJ\n/tlN7xLj4apUEonolSmaNDPyDcwp8onAbc1w9Mbfb6RlqHrCxsXJwON29ABD\ni3Egvgg4cOn+jLGIwTYZg6MUmi3svM0WY9niIN1vNSCAraTUlbK68xCB9FwJ\n5zCG\r\n=gdx1\r\n-----END PGP SIGNATURE-----\r\n"},"gitHead":"d6b5cd4181d0bf11b598b5ca142343fbc87976b9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/density_8.0.0_1604357899548_0.6197993238645114","host":"s3://npm-registry-packages"}},"9.0.0-canary.fdf9a2634.0":{"name":"@material/density","version":"9.0.0-canary.fdf9a2634.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@9.0.0-canary.fdf9a2634.0","maintainers":[{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"641b398fd0336de1778488e6e4f9e09c9ccedf04","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-9.0.0-canary.fdf9a2634.0.tgz","fileCount":10,"integrity":"sha512-65SYDa73cBtDvKuT90cYpC3kLvnrCmhJUGvjfmT1LIBqzNXq7eLOl5Y7oxy8R+pqiTo/RKGnDiJm5hEpGQlCiw==","signatures":[{"sig":"MEUCIQCmSjS6rfXzPQkzNAsWWmQHa0YWf6/nUCjXMpVozkO8EwIgAitM66+qvNAJDjoOZczuqzl4ezCrqnScAtn9eOn7qEQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoeWyCRA9TVsSAnZWagAA6OYP/jQvinBd/WQJ6nBiocwX\nKw3hwujgvb0SQUtahZHfmJdcccnRzMwwQy98jKswVwH21bHZBbiKQIk6ElL5\nZLd9S2vRt7U83uq/bLbPVJg3IojllVXMUqJiK+SMVoXzyJ6kY3haQXhMy00/\n30wmsJ64GuJQnfrUMv42aaBxEKTGIULdtl4NkR49GXBecBbJfnwVp7C64E0f\n5+0Bo8GosXjeQsJfhIMbKm0hAH8DCcKZ/i8Ar3gyfF33z9HN8s3y4MDM/Zve\ngeC5Bl377AySu19msSnL+8zzsEdggygKnYOvuP8p0TPIAd7cDJKVsFBLf1qj\niu5gpHW+PbZS/Wv2Os1YrCwstpK9xguKnx0yxrk1kWCDl6htGATHU35aFJzV\nGVkOBCB99obeghasid1kbMs9fQiXSOb1EIpRtjf5jaM0GjVW+mMuS3hXHyOx\nSAJZEXQKqeIVHosUoRSjmUOh8qhf9EVtgRPp4ley/hlWwgc6Bt9tXNjXm2eR\nIdnugjaorjovKzrisfZri8q8pWXE1b+/w5ugRktaT886aS/y6P/ofA6E0Y7w\nS9FgrzI5OdCQwQszCByqsTpYs5XLF8+LG5MPreHIRlkXGI/0IBe7caWF3TxU\n9CRzPHTX3F6fCSN9FoSfIhUM0UZEOxMVzvCteQLuAYcUIhfhim+K7UsjlwPZ\n3yQ0\r\n=9VEP\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"7d38b3b1a677a24d709697b68fb697f1367fb5d0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_9.0.0-canary.fdf9a2634.0_1604445618272_0.15604151291033386","host":"s3://npm-registry-packages"}},"9.0.0-canary.4a86f30a0.0":{"name":"@material/density","version":"9.0.0-canary.4a86f30a0.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@9.0.0-canary.4a86f30a0.0","maintainers":[{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"63d95dd4a6bf088f4476aed4c761dd6ba9eb1365","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-9.0.0-canary.4a86f30a0.0.tgz","fileCount":10,"integrity":"sha512-pxauqpOfO0YaJLaj7Vr5YD+JOp+B2KWID6l7zhe8Dy4W4e2+Ykgw8p9gHCGuKUXnSpz2TuuKEjFdxsAuJqes4g==","signatures":[{"sig":"MEYCIQDgd+4o93D3S5wOJmsohvVrFnfzKXPPqtUGsNo4MqCwjgIhAKXTTV8xZ47iDzWKBE6TosljrUr1j/exT3tyP4NmuuHL","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoecyCRA9TVsSAnZWagAA9xUP/3wyEDst7uwIB5ubnv3s\nYVMqhYXZpxBc0juB2770LmniNMo9pme3IMJBigj1ohfkRbIwRwUmaf4lbM3K\ncmC1ws3RZ+YNZChRuHHf9TT7PxdnR+NndbZXI67q0itdWWQ5AGZkibv5YQq0\nJhDuFeI3epvxRxoylMPgVtTM9VU3XXlUSnOg1a42DjccUAojM3jyYmnYI0QJ\naVUGjaZfGRNbPmm75RrxJ2W5EMjMrdkry2/OA86LKLh6rcUhTnb+8/5KtXfj\n6wjF8z/ZhaTxneYP64mdVG/mjJqg7T2vyEtIj0nsr7pF/sti7U4SnJe2furZ\nY5z6pC8n1gfKFiWjOgw4ASf6hHiIcCDOpXKlUGXbTLEXJEUxSOLPb6mJXPng\nf8gfSKdh/02NafrEAFx5YmNOgQZMbs0CG9DtQnHCn/3XP1vsW7OHAmxFVQei\nD+iBxrLXGIqoiyQGRsLyd35ZK07oRqckv6uAwXYGf/1G6eQ/BdbrSS8GoklA\n2df5Zw0oqyHktNlU6id3tllpp0/T/edtS4e17dyMQCtvXvRWNsaMquTR0c30\n6eeHfbMZKMoBLD5Bn7sw/A9RSaGaCtpBFihDWrhSKpVxPNV9niucUfvjneXu\nso8DrhXoknPqcBozvRLuNZiRxfnsJwcvIOmKo440BHC9pHxj/Rxz7oTXj6Dp\nAv5i\r\n=u05O\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"ae1cc15cda11f90ef629a1f536e69a9648db906a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_9.0.0-canary.4a86f30a0.0_1604446001855_0.8077355932175578","host":"s3://npm-registry-packages"}},"9.0.0-canary.fc8b045f1.0":{"name":"@material/density","version":"9.0.0-canary.fc8b045f1.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@9.0.0-canary.fc8b045f1.0","maintainers":[{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"89710b0a79e2015dca3c1ece43340e628fc07812","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-9.0.0-canary.fc8b045f1.0.tgz","fileCount":10,"integrity":"sha512-ifEkZZe6ClDAovYXh6KLhq1+EiLK9tN1t3EX3IyD2gA9ih0hLwVVJFwT0xB4dh6Gc5deUonQuCX/e8T07+ZPug==","signatures":[{"sig":"MEUCIBkYOyqY5ZWGLx8uoAUcOnU58sYmQhXHkcHRU2ir34KRAiEAwGMJwZQniumrG/R2+xq3YrwaMPf7e33uxtRBuVAecy4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoelrCRA9TVsSAnZWagAAKMAP/2ap9RXNvy+HXhq5k2JE\nD3uyi90i9AAvhakO4JBY6Lrlcds649xv2dkRg9DZPwoG6ndCznTEydY1BhPL\nQ51tEnDFL49mr87g6Syf6p086OdjqcQBNwK+PeLRmlkzSCKsni5NK59EQa1Q\nJK2cbaxODxxMCxzzwqUBHoBE0qkhQ4uSa7AW3QAaXzAic4BwQ55lA8UE340T\nCzN7MyR7AtJvY21taUxV8DoQzh5Me6oENGE9Icnpvomy2BJZBNqe8iVrrspI\nM9Uls07PmqM0tBYJBGdNnqM17oI1vZJwkM41SsTz9GGTEL78xGYiectLjEjY\nLzGedsFFkZJBSYfk3i0czRMZ8ut0mu9cFcoqrHP6fr6UJRp21+FCQRtdI8zl\nbjVikoVY4nCiiCJQHpa/wtfd4GQhzJ+NrYt4NjQ25wRlfrKsuYiqP6SKRRIG\n3pNqDWSrZx5/Bon89jIhHkSszXXa526SennlzGjmNlDmO2sABtXofg/a7Xhl\nLpXeOy4kyL/RRsRJKYBzs3jT1jhpq6eNrpdv+b7UaojZ7UC4cBXqG68ThdYG\nISnu8WV+70YidXJtFsB1sqygfFsIcJze/4HhQgxjrgMx45XLnDF2Oj3KmpQR\nom1Pvsgj3ZPkoqvFCHiBc/ebcrkOxabkvB017wa4DFFlvVNeR/60OopiuL2g\nv0IS\r\n=QPEp\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"7df7659dcee84f0af6a1e7d8617abb4056acceb2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_9.0.0-canary.fc8b045f1.0_1604446571450_0.39044575105657886","host":"s3://npm-registry-packages"}},"9.0.0-canary.a0b2db26b.0":{"name":"@material/density","version":"9.0.0-canary.a0b2db26b.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@9.0.0-canary.a0b2db26b.0","maintainers":[{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b06fce71bd64226a554fe21c7ce5a503550cc750","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-9.0.0-canary.a0b2db26b.0.tgz","fileCount":10,"integrity":"sha512-mEzRPc2ncCv8wi2J7bBw01ROIkh/4IMY9lBj/GqNymyLabgMwa6CtpPzm5Rx/0iheceMOK/WFsQXitOcKZVxzg==","signatures":[{"sig":"MEQCICcjK65J4vdM8U6VQq+xJA76554r2zw/YSO1rcdAnSV/AiBGZsUXi8FyNe0BxNjCh2DEZDeJnlHjXdB/X8qhx3lvIQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfofDUCRA9TVsSAnZWagAAZnEP/RKCLoJSXablxvMOHZ7d\nf/3E6gd5jIs2h0/zvhGAstsHExlOYuSDvP7Jfspm95lVpu7dLuEz9CKTB2zY\nvq/DZDZ98pVqERiizsX4MQIMTynAmiVEbshMBY5akq7kh8NyPu0c3xIIKm24\n3rcaUYxohQy6pAy2Kuf3EqNEVQo+Un8QRdVnwGqvuwmGOt9JpFQF5nkrdPeG\niWWKj8Os3noZGhnZCJyhiMWAA/m5biHAWg5DUwPHsA6BihRgJbV9C29DHI6f\neruM0CV5UZAmg87Oe+Tre9xQM1G+jx6s/gukacnqCHMtEUT6tCoMxSbcCpx8\nJWTGIsv2ZOWV17q47VAPIu4ZFi0Zv4PZoogtIcTfeZb7rJZlWSg/PcYpPe0E\n+VCNnQLNa0SuF/boZmb7TssFYEebQuW+j9zKAqn9UYq4oA+Rh8nmlu4pBD8W\nlZ0SGkzCAPRfUqS5agoRh4l/IFkUC2DdUo2rX+0zOLb62t3a67bwiyfJi2tq\nv0G98bFpRTMGJklpCBHFN+EsuRCbkNCFeNYA3wkgfgpgo53PgoryQ9AlwMWf\nR0CILThrsiYxNeQFJgziEzDNrKO6y7Y3vJPrd3M9BjuvqKUpw4/jvzFd0HS6\nPDwpGoKNhhbF8maHe+rAqpuKwB8Vpc9WD7k6kS2yg0awBwYBskGxo2gZ35va\naN5V\r\n=mEoe\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"885abc8ece3b0c3cab58996fab25be733f65b5c2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_9.0.0-canary.a0b2db26b.0_1604448467863_0.275181050408535","host":"s3://npm-registry-packages"}},"9.0.0-canary.419e03572.0":{"name":"@material/density","version":"9.0.0-canary.419e03572.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@9.0.0-canary.419e03572.0","maintainers":[{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"41c51f2c026617679e09af247fff5ae08b8145c1","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-9.0.0-canary.419e03572.0.tgz","fileCount":10,"integrity":"sha512-39v3FTYY3FTCDJlaqCfuEmMVb2d07ygI03eQx40kfnk8qnIVTcuGhgMiIpE837ecwHEk7o6wgj4pYZIP1skgwg==","signatures":[{"sig":"MEQCIBuVtaCXa56i7CsC8tDhAVUo9D9TYqb+gReu4Qh86w3xAiB03qI5MGukW88lji7H/4k5joE+086cKwPjGeSfP5iCmA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfogSXCRA9TVsSAnZWagAArGkP+wW8EBij4ndRkGv0rzQQ\n11otgehPrOAzwv8Y1UIm/oZEVgS5HCWQ/KLf1o+OIBAJuMLJ1XCyte+77Hhh\nilE08LoKvFEwivy1ISX5e0AXUby8KHx/+pBJf0ALBOdORm0+qSrX6RGvoRQR\nw7LJfu+62ZRtMqPtKp9tTyNvNEU008MPcB81LNE/6U+2tPii5WpbB09b+2/n\nO91wv4uBXOtf+HqWjz9s5tV9uvE79SnB7tjUwKoINXH2BxJDDpOMbLsFrwZV\nCaAhKnHjogMbSl8EZye8eifx8lzfDF+dmwa61X2R0QqDLfiKVcgDhJSZhmqD\nNs3vDeerkSzrekAHzChKoz08ioEviUVBG/2xGvlepoNhBtbiXTETGHVZU/IN\nzOuVFnskrPRQk+nxCtkvAsI8BTqjzYa15WeNU/z7sGjiXM7CPaXgx/Q8yatt\nCWaIp5yQc4D46Bk6XVLff4yyIse2iF7U5oA+W374bWDvn2t1SbmPJRiyy4Wi\nkRCFcMDpQ7eIW8NSei8LBSi/KN17lInY1zyT3JT0U+BXx6nVwtkQps4xMnF4\nJaNqv7TmFZKlvSmjEXPqDzOlNuP/XL+TFQu9inXwCyZs4M0Z5tLwzSltzej9\n3UekZy1HwxGZyqzxmarFvqOC5Qx1EsaCvup/CV9nyitTaEOa5e0Wfb4Nx9NL\nJ0v9\r\n=+RsC\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"c9528e0a61f88c4fa2a5bcc6a5e406ccf027d7d4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_9.0.0-canary.419e03572.0_1604453527307_0.1664714812667274","host":"s3://npm-registry-packages"}},"9.0.0-canary.a432ad542.0":{"name":"@material/density","version":"9.0.0-canary.a432ad542.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@9.0.0-canary.a432ad542.0","maintainers":[{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"beed5733dec80ed4a97e31214cdf1eb15d5af666","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-9.0.0-canary.a432ad542.0.tgz","fileCount":10,"integrity":"sha512-1wST0Ac0oHvYwnU6MpNlY8ysZWXC3ehx5URdtGqtLWvz+li+b7k/XWOKhXe8SZ/zzpE6Wn8IR+L5AtBaVohqpg==","signatures":[{"sig":"MEUCIQDnow5q8iEx3lS2mOCc30sjTt9oaohODCCleGiIH+UYGAIgPtpQCY6j52+J5PNA/dqZqy2jSKFeaWeJM9Ge9aTtGJI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpKqaCRA9TVsSAnZWagAAE2gQAJb1KC+6vi0JF1QGYdeg\n0+k+fDbK+yWOQhRMMPD9XrgaxOKA0UNp6p2sYSXZ06HXB7btfNi9yXU/ahvS\nJh6EdA7bUgQkzcBUExZUudCwH22TFXY8tjdwj+XkgpvWbiJi5DRizmIcmNBH\nlyT6TDT7HVGBqNzHj56J8AeqKS/UqyBVfrSW/Z19JR/EE5cTthCWjOwT+A82\n/KraNa5/DwB6QvbMQpURZGTKYDFzU3QlZPn3EQ0vlCcD7VYhWxblqhzCI9YG\n4/zGS+B+kai6zwUe/F0HnOMOMsZhEd639FmxyRJt3JXAfv+HgqN2dUlhOyl5\noCUFOKJiQVjtL1e3vL7BriZ+UTwW3J0pLtNT7Vkhx6JmPduCSLhMvmkeTuI2\nvKODJn8hfZbwEI++MwmkG1KyBnZJ/aWU6yYWd4lxVwrr0eexLclfuhy3QD+l\nOg8A2aKV1SmQW3mcJSKWMpGTq44T829Xl9f6kGNJnNxUPwHCInZ+qwR5e46O\n9w2ktr7nYqmYmsH/Sq4KQyZJ+WDpJiuTecY4ith/g+quEjFty0+SBP0894kC\ngc/OD6hntMOv6biwR57/MXOn+1g/F4KxNWfoXz3JHhs4iwagGK+U/TB3vJj8\nQhB5M+GExHIa9dBBVbuNGWCdcurbNJ/8ayMr7+NzNHMCb2vWTMornym7b5dq\nRjav\r\n=QmrO\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"b873a7878b871d2ced45e7f04055b3d4ef0c7af1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_9.0.0-canary.a432ad542.0_1604627098364_0.3282595389105407","host":"s3://npm-registry-packages"}},"9.0.0-canary.e2e8aef1e.0":{"name":"@material/density","version":"9.0.0-canary.e2e8aef1e.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@9.0.0-canary.e2e8aef1e.0","maintainers":[{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7a71ff4516e617e8ca8e747d7ca7650241cc2da8","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-9.0.0-canary.e2e8aef1e.0.tgz","fileCount":10,"integrity":"sha512-hyksoQ51tcFnlHngNXoRsF97klnaJGMliyV6N8+a7b56Zkn7fEWTAPhoXrLZAOCnAxruVvjHziqmzNagYJHCbA==","signatures":[{"sig":"MEUCIFw3jIdW0VibOnPJ8loLQsZXej5keEtSnXde1l3G5/PPAiEAqUFrsJnE9DThcCklJEwFyDa0dY7LJg7HWJBj9kakMEk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpK8gCRA9TVsSAnZWagAAGcIP/3RDRrVN/eqeVovF4iTV\nbQWY0Dxaa/SsrX24+oS3O5C3VuLojCUXQ8nG/KeQBYURSPWcsvsrJQDvMyq/\nCmXzg1Ur86mZhRv0OcfcXJqEsk2bpnAv2T8qwwpUdY567VZo6u1gLAWU3AqJ\nk8O148iNS+Rq+q4NSPB9Q1ESqVYrPGbXv8c4sVPwY/oWTxIMYoIsW95UEoYt\n4xTjHqSo72xyVPFEjNp5K3yeTyVT7KBiuXp68V8h3PvH2N5SdJ01ROM4GiUm\nY1monjmroHz8ElYSjaYIDSG1jADiqv4BMg0lbUR2XTACnXP0jvGs17CgXww0\nY8IiL3hr5b4s1KVUyuIj66pF9c9JB7ZpqpzXg+nj7/brMyxN7qI/JeX6tO3I\ng2Q6mkZFOFEScMRM+72XfcX4osxzSgY7HgqRs9rRts0jAtY+iTXJaOuBYL/J\nJA+vR3+rAQA2pFbot8h8Qsm5XawvJTUP9PxCjZb0wdpsbQOaI/AUw5jtP7I8\nJfmVpkS91IoQfRJeo2Zdki+kn977aUfy1oYXZEJQ9KJbiHgi1ul9Oj5ZSs9g\nlieqkoSyhBjn5AJmSzf1PnwNQfMXIzdaTCklcTikrKZVx6WLvtai0Bz8B+L8\nHNo92j3Etdky4ubTWCHwAdZg57K+iO9l+UzFGfMU3SE7DR6i3EObvZUgfhj5\naeXZ\r\n=fWN+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"59b208be2f946b47ab6905d82c0135e81316f2a3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_9.0.0-canary.e2e8aef1e.0_1604628255746_0.342272832956487","host":"s3://npm-registry-packages"}},"9.0.0-canary.ec6b68b34.0":{"name":"@material/density","version":"9.0.0-canary.ec6b68b34.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@9.0.0-canary.ec6b68b34.0","maintainers":[{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3284d4a7d0353f10bbd6d0f6df93bfbf9470b266","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-9.0.0-canary.ec6b68b34.0.tgz","fileCount":10,"integrity":"sha512-rHUEHuJHeHGouTnoQQsuhCJdi7wwqZYZ9ugNiNQ+zytx5X6duwulyEXABOj3I5+d0IClac2LOrPgigO1Vdl6mg==","signatures":[{"sig":"MEUCIQDzJ7yfMnGhFsl3ghKhqPLnhWwDEdkVDwNuaFHFdvGCtgIgOAlH0GvtbNQbRMfNA6ttX6JP7Qstr7xndgbd3hoUj1Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpZwkCRA9TVsSAnZWagAAu5AP/1dwX+TSDITzN9It0euP\nGGYMQJ82hMz+u277ctNrONn0EM4SLh/BadMY6SK/v28LIIApLURp1Qn2CmJ4\n2UbuODuS0lF0seLTNuzo+BREI2YsYvBchL+zOOdf/CRaVAugshwSoCTjP+W0\nODrP4H084QbqvpoeT5YD8DeoP1Gx2KnVSJDt/vsT16gIcueWqALesfYSsZ9h\noS7fFy3Rsf0TvUvOWBFXrJWXUdMRsV9ilCNdZS0DGkNqNbFLPAs8KzktdFT/\nMx3uJrr7E4XYPYdKqYO90yDwkrHCxQFpSEuCe8MJ3hun9WPflxLaweFb5KVk\ny+YhUm45+t/qpKERxFVQJjT3/OPBiwLAmzmPGzD3dZINjtt8YSN8mxS58WUZ\nF7SLmnn0TvpNeGoBwiE8yC9SSJ7SPjTGvEkdRsPDY2LXbfVxnFyh/DBKm2Sq\n7uvhxpsHjDI1Pmrr2weCDgafNzQwLI3k96NyksBNksqVlLEtF3LiS+8Pco8g\nFM/ilfeugjtvReZeNoRoAJzHVyzuAY0jMa6mO1WZfSiE6o5/m5VtIwRbHUcj\nVaDK2UQ9hgJHIeISyE0SNTzMhVR1w4KtJVVExDGvQKTygH09281YDL00mIdN\n4i9csI8sx1edUjd5cyZtocPek0zUFcD2ABF55EBjX6xdcM9FDwo/kApY61bN\n7/rD\r\n=B7/4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"a5005840630991931dd5d6aed79aa4986773a5a4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_9.0.0-canary.ec6b68b34.0_1604688931886_0.5396694501512653","host":"s3://npm-registry-packages"}},"9.0.0-canary.b39094d14.0":{"name":"@material/density","version":"9.0.0-canary.b39094d14.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@9.0.0-canary.b39094d14.0","maintainers":[{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"85909ea476c5ef0d99bda94da827e5228497b6dc","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-9.0.0-canary.b39094d14.0.tgz","fileCount":10,"integrity":"sha512-Sy5v1xnFHUKFLnk7cwQqM/tI/9+XfTjJmVQCjwFNp0jOv1I47/oei4G7C3g/mEH0qUANhUQ8RzBGGaFeyVJvKw==","signatures":[{"sig":"MEUCIQCoVvnZD/rYTUkJltvKks0L/sOnBY66YUulCOprrKLjEQIgew8QghEY5tiE7Wux3Z1Oru2zQ/oeg/4K+hK9ujpA1T8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpbzXCRA9TVsSAnZWagAAyqMQAJ00D+tThpWSkxlbhwX5\nZwdKfmXLT08FqnuwOf3v1Gcqe/8OeY8ml4TIhAKKeMO0oKgKUhK3px4MK4WX\nY/IUfvAR46JeSeAldKVUzw55kls67BAdKwJ6ishmktAkPhkAtgm1ZYP/+Zzv\nEW8/Vy3NnuXoB7bIXiCdoXyh702JCDDevz2Nh8fReCSAfuCufL/YpWUD04sW\nDF0buw4VZX1vUZZKLe01NCAL1AdQaJbFdXqUXRbrMRcE/yQKoTwC3L6z8XNz\nB1vUv5SiYfDh6AAHs4M3fs4bli1OD3bthM7Mig9WVL1AI/tWZprPdjDuuZIH\nx170+QD8XTJVO3Kq8PKuYQZmRp06aLWk1p36HbB21QehDQ0il0qOpATD3V2R\nRE2KszfkVNAKV+3aiFEQ9O4IQjvS83j5OqoGiO8i9uKlWqktWqjHZBTfNR7X\n3uHWyliUXsDycz31bHODkh784sW6ae8NTzg3kk67QHLHeNvwMEejKHNl/pbU\nL9/rvy75PjYFPt+e+3ZbiH6b3jb9B8dEWfsWzHOt248trAR2uwfQltgLP4tQ\nGYzTBK8aItYbJcvUAvi8Fez5AQBXHSX3CTicyq3d+6UJMePqnP0IqHjJ681w\ngcIIVw4G1U555VFD8Op+29ccrRsgsOBDGp4m3++QYedWvlTv7t8SOyT68rrp\nK6a/\r\n=CrIJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"f8c5ef7d8cee2d0a63421ee4afe42e4e9260cd47","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_9.0.0-canary.b39094d14.0_1604697303469_0.9966246140736452","host":"s3://npm-registry-packages"}},"9.0.0-canary.8648b8258.0":{"name":"@material/density","version":"9.0.0-canary.8648b8258.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@9.0.0-canary.8648b8258.0","maintainers":[{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"465c450384dd2fa3194d5e62660731a54b2d303b","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-9.0.0-canary.8648b8258.0.tgz","fileCount":10,"integrity":"sha512-KxKvSI3cnly7MGxiDrwHAYI1WkM8eua7Y2iuctvYiDMq3tgUDRV4X/xBPyf3P82Y36CF4Of3Z8jDudBgbZRB4A==","signatures":[{"sig":"MEUCIHR8IK6ApeZtyzeSnxu0x/1MDU3S/WOnc9fIwuWYQRrhAiEA1oFNap5ztN1NGxqqJ/PLyJJqHTgFifcreywjHxCsIx0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfrRHeCRA9TVsSAnZWagAAeEgQAI/lU7xTe3+syYO0kHRU\n2JkFQ00e2cS8Vd6vr4bA0M4bk46+h87hG4ta18yoTt/pZXs/UQGS1ipLcpYu\nRZzM2HWKfBS+piztX3ketrD3OJM5vA5sI48PkKirTu4PHlgWeV0MuKDV/V5E\nyVXuWKuVAkFcIz9IHZbmnDlSGbO6NV13OCWmIQH+6vC0ng2ivQeIv7b7UBv7\nW1ZCPBA1a7p04knKFwsC4ebNmc/ex0LN5FbKe2nnTTVnh3YyzejFdzfm02Di\nLOoTNvm8iraSFa9o8OO8rTdWUXksNIFib6JoWf7IfrnKkPJEipwuG5CzZ5sd\nmr/80+jGYS0lYoFtqhlMN08jPDjwnjQhScWbvoXoAXJrr33qq48ySKIPewrc\n620SiYCr5TkljlnlpCrvHuAGLDnftmRSSaoe5JeUHXUM4g1XTWsyThUCBgXW\nSsq+wv5TrUGcLRn0NiG7GEPAL4WrBiFMSQFhBZSwTbH7+w73kNhn69lZdBAD\nTHSNLZT0awoYwhPpfg4SZLWfm5MJCTrKef676pfQ8C4nztOHqWhO2oQGwLFk\n8HyaPXFM8JpiANMLJtz+BfhD5uLh1lJo3PMVYfiU1bD7TFSVAwd+QNVoK/I/\njE8zemrJU+fiAhOlA6nJWYpOti6k7WAZLONYWYyRzevqltckOPCtVjsZNm3h\nuTaQ\r\n=mVaA\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"d98de60dd3d91dc14a84abb664678188ae936030","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_9.0.0-canary.8648b8258.0_1605177821885_0.1340174907737719","host":"s3://npm-registry-packages"}},"9.0.0-canary.240c5f74f.0":{"name":"@material/density","version":"9.0.0-canary.240c5f74f.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@9.0.0-canary.240c5f74f.0","maintainers":[{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5f19203aab2f7e2fa1477fc75fa6e08be345a5a8","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-9.0.0-canary.240c5f74f.0.tgz","fileCount":10,"integrity":"sha512-fmG0grHX9nk3oRHMgqS/wuf9giGz/5k0k4sYrfZeDwYRgnrw3qaihbr8enO8Y7i8oDIu7ovS9hZr2IIt1qzlyA==","signatures":[{"sig":"MEYCIQCVsovCcWpRWtFZ91WwND6c6HvAT9XQN3fWG4QZqhaD7gIhAJUx7snE57Ox4krdwlYURrCKsy/6dsYNlfNoXzKhFaM3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfrZjYCRA9TVsSAnZWagAAZxAP/i1IxfmaYc/NxsSRBhQn\nwpdqNVSKJ2I90wjYImkvWLlsEwkgj2KU/W5pUZ5viGiNQe1bAcmKwzC8pUtj\n65ckYSx18TMNo82DEjtJvfBPmUxVe1ig63qQFMf+NXKFFDwtGc7OpeVqFyPY\nQmIyPnCd97htS7ZzMBwnTsO2IzW7WMbTbIg067/GL/90rnkc5BPTVUGB+Kc4\nvMYNzgxH2kdyciqv8jQlaGQ0rtsx0iGhOP2oqhDcRCmX2lHy/a5Nk1s3MV9s\nMUb5WyZSvznmOnesWFCLs6e+gaQxM3HP15NlE1bfAHCceSOpKimdY877y65r\n4xqn2wJp+ohC+cernql0yZg20R9YUdDdi7dl1dkI7oFWpFDJqGmEbqKnbGCB\n2iT+v/bB5u2Z2R5FSxDt8ua2l0H4sqdgRCIPSvqYvR3GONhKNjBuurS9ElC1\n59uI1R7YzRoQQTypIYqE/hw+/Bz6vonPV/bxAIVyd9TGq5Qo8Gw4aOYLezNA\nJaxOEm1IXRMg/i5+Y+Gy4ty6Bwk+Ih2LG7edS8qoSk3oNAOkUT0ST3xevKm+\nTLl2M8P6UpkyCtxecz5X2hw9MHwwMwhnBm+z1jhYl6eyRC/RzDoiaDEDWDZT\nRuymAqQERYSQ8rtC/vEVJRK3Fj74rWbwxTgR0Z4QUBUFyGCvOaCVde1gAoK6\nLq9/\r\n=oDJh\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"33b77622681b24909d892ec906f608e75f5e9809","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_9.0.0-canary.240c5f74f.0_1605212375879_0.16325441511032568","host":"s3://npm-registry-packages"}},"9.0.0-canary.6cf6ba4f4.0":{"name":"@material/density","version":"9.0.0-canary.6cf6ba4f4.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@9.0.0-canary.6cf6ba4f4.0","maintainers":[{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a2c1f131996b00f7ab8eb96dc942e5cc34608395","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-9.0.0-canary.6cf6ba4f4.0.tgz","fileCount":10,"integrity":"sha512-oJZmDISbavtUoHUWlENgKkzRCeFTR+XZyKoEAkhqfc8eeLL9sJGNzEe3g4Mu/i0pqlBED/o6C9bmi6P02bfqcQ==","signatures":[{"sig":"MEQCIB9BBgrM7JWPLIfKPLDevHOtS9s1h//EMVAejZH/2fi0AiA/pyIba+lg42IB09+zJAYU6OwNTPN3g08ST+nnKRKIyw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfssmaCRA9TVsSAnZWagAA2OMP/0H+twTfQwDE4Wei4jmN\nw5umiLNCNjgxSMlATdivtG84XuO75IFeZUkIemAkQiAggUwctAhRRlox40o4\nSy2NcgcB4tNCa7OFyNFhF2llD0m2uv+xpa9GNbELda1Ab3DmQ5PnVIelD76l\n/ohkPbCAofVItvtVS9suTMeXcLRxjG4BDZ3OYZpxojGDXYupebfcXuRwC6v/\nYNE6wbdEPuQjYDAdH7AdLu61K8N59mASWzBwZxsDW95x3sNDruV8qosMXF1u\nM82yeqHHJ3Vpr0p+cPn/WVb2r0v1reP6tgf7h2ssF3IPOwCMgTmZAlHjXnCw\nqyK40nc5Tv0Gre2gSUMhnlAeo50vvM7DrWNjpDqERsd1BXYn9MlNZLFpzyqD\noUwhS52oQV5/AuGsne8zaomHZLwyiDLdvXc0LZCcO3+e8fnvMutyHdx9H8j7\nKTRfG/mvZx8OM+r6E2HPADedmRrhidGkixLBm857pLLRsGude4MyArklS0oR\nk3FWFZ1XHW1Sedb5voFb725sAfR79rc5n9OWexxk1ViW4ahYxf42Q2KFCbLZ\noj9DjIkO23i3kurOvHxOOK+Am3cxY/4ztGorjgNaCCU3L96T5h4Rlrt0EBHF\neQkopvHDJYYBHYp8QloHkWR8PK6GYI6G4RKeJdhShi9/6xSLJk+Lu/BjyeYi\n3WF6\r\n=JH9s\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"d2d4890ac5812ec797b5f621137f4e8a077c3c0c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_9.0.0-canary.6cf6ba4f4.0_1605552537498_0.7813480258372831","host":"s3://npm-registry-packages"}},"9.0.0-canary.07f3e01b7.0":{"name":"@material/density","version":"9.0.0-canary.07f3e01b7.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@9.0.0-canary.07f3e01b7.0","maintainers":[{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3112a5032c5ef4074d94a2f9b88e7c7e8bc62583","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-9.0.0-canary.07f3e01b7.0.tgz","fileCount":10,"integrity":"sha512-RPc5yQ81Lxovqc2caXHjp2YMHASmw5ePMVfIj5yWdzNZD0sjwYCTxZ5K46VDozwt8iPUEogfCMBUj47iY9aCnQ==","signatures":[{"sig":"MEQCIGsVJ1+Qe67i1tYZBT1yR4PTQBYpd168uRS3O5GpKCj6AiBt7Vr0mhSE94243bkaZTVyFcfvCuIUanG/kpGS4xihJw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfsvLECRA9TVsSAnZWagAAtvwP/1UhIVxvJzlusOwh3Y15\n8ftJ2VKqBgtAJ/yzefzaeg+kRusEYhBdzf8ZHW6IVC7jdLziv545PY/+/M6b\n5TD7PiLnnuB+SAA1/3pEIvIDN/XJXlFkClTlw88fLniBjrWdg795Z6twCtpg\nr/5Dq8VI0cNuBdwwO4ffNYvEunIpsdz91ft02QYvWJV8YUcmJYqfu+PZYM0l\npiskxiFnjsmpKTmmgwMbmf17A5djZelKrYu4eZU8Q5Gm8e+vhjVlvKY8w5J/\nSA86/yQK+WTmlnC1sNgI6sg0wBREwJPp8C5iDUkDxgULWU7Wujounyl6h1IS\nZQz2kUBPyw/xAeCcJTbee8/TjGyn9jwE//9QSA0E8YAz7N2Lp35+Ir/QysD3\nbELc7QbZKTU+OyqSmjjsUYsp8HUSyR1NqfFTm53KN9gCVMB9ooIky5vSpj/D\njhw/RufDSCm6G0gjZXVRLAV4Arv7i5E7WnqtdWTqrOpY6C7YBrKbX3lgyVBB\nCUfurEQl68ogrZl7fH8nImoZMz0+laCSBE4DO1qOyPLcSUYB0hk6IdEeq0kJ\ndKz064t1ij4zWkqnQIisSNyD8au4eDK7f4INb2KItKWSIWw4IYCbSW7ziGYo\nm0wzM8FaGGs3lCcNBUMaDXkmsM7JO9Y78bCSN7BEC7CZ5wtteY38a+kcJDEE\njb1s\r\n=pO6C\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"39f1e043d0db0c6881d84b3d7b54423f64cc8c0b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_9.0.0-canary.07f3e01b7.0_1605563075964_0.3483961806074498","host":"s3://npm-registry-packages"}},"9.0.0-canary.23491cf85.0":{"name":"@material/density","version":"9.0.0-canary.23491cf85.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@9.0.0-canary.23491cf85.0","maintainers":[{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6f5c7adae4a4a00dd5bb862a30d4b7d613e8f0ff","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-9.0.0-canary.23491cf85.0.tgz","fileCount":10,"integrity":"sha512-7Vwws+mLtROi/37elw4iyCXuS8SzSdxnZs8BXV8GkHsSQOpwRfJHG0GYnuz4XJ71aSkp6AT/1Ju3EFg3FPlp4g==","signatures":[{"sig":"MEUCIQDD/M6MaexoDr6OnkJBABpcuC7uJTzdt0lgvbNTcKLK4wIgKkZrp92dhXLcIaTBbzAMK0JMS1n3B9cKJmf1Zn3Uehg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfsxZRCRA9TVsSAnZWagAA3loP/0XdOz8UiQ1hQ8mS6wZ2\nAMyv5nffiFW6UQBa1k42VEqporKqohGHOQZm2DEyWcRRb9CxPPZhwJOtdbfP\nfll0TzUZxWtXO/fYtbEgGAG+h37LA3aNFJ5r5lWhFoPaX0Dzh7Nlx7VwY8QT\nNlbR1ceKHBMrnEoembUYD9qjvn5fb3mfk0sV+v9AqMELqGzwvZD2lBLGCDYO\n/NEIbUvJRhUD5E+uhFYtlfbmcu+pgerPyJ+kYU3JioryXoyZERGGZ+0RpJlp\ncHiLPvlFZZVP3YlJAVOWJ9cm9RSsG7PR7zOV5KRMvYh6xhkxFKIZarlibdEt\nYR/C3TJPpo9R4kWF4c4R14Nvz0JJWjoMqUHvMYN/ADj4XN7uF0eZaidfZus7\nj7EQwErnOdFAqX2KIind3sE95uqf3cO5vCic4BLEVkkLIudbOT1gZwqDIMSW\nEoHzxucoeAjnlIXf7xR6YdGnCZIu5d0QuoqaoXjpkHQ/XqPt0Vu8SIz+2gCs\n8m8ganEuFe2Ck3ofEWrQw2kbeKi5Ig4b4bV2zioIBSR8UajYeqHvnWwfgDon\nj1YfXk1+gK3/O8s5AguFc/njL2xP6jbNf9gB/ggmUvXdBZL0GeiyVWitqsSO\nqnIwRGNqPV+eDnS2jZrOIZUh05n8pBd8DVoUyd8+rGZZMu0sr3D4NEB7G7GL\ncKYr\r\n=/ATn\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"cc2535ba5f66f73426d236b8a85291d7395ce589","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_9.0.0-canary.23491cf85.0_1605572176908_0.17874373114503728","host":"s3://npm-registry-packages"}},"9.0.0-canary.b659d4fc3.0":{"name":"@material/density","version":"9.0.0-canary.b659d4fc3.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@9.0.0-canary.b659d4fc3.0","maintainers":[{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"78cacb83684781dc760f4477294d7fdef9e6fe52","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-9.0.0-canary.b659d4fc3.0.tgz","fileCount":10,"integrity":"sha512-9Eww4m46LRcZxh1IvAJBVQOd0wsYH8KKrIkdhSi6WZAAch20LVrDE3sq1Q2RUqIKm8VLrQ38VkepHtBEgu4Dmw==","signatures":[{"sig":"MEYCIQDZtRVgi3aHp+rztIp9dakHMZTqZ7Kl0D/i3QUaSTA2AQIhALW6x5OHqadtIxKd9xlCN7RRK+DgPsJpYVIpvaEcgIux","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfsxghCRA9TVsSAnZWagAA6GAP/3xXsnSgjC/ytzB80Npu\n5JZLiAdKDXelBt7T+KwM51yiZLSzlzl3H5i3u4lzuL8DO5vc2rsZoBvp8kqI\nOudvJ6+WgX9E0Gc7rNf334LUjKLBpIpM71qz4y/u7yh5046IxZnRwG4VrcH5\nm7cx/EAEMQGnetMrFX/lCm9Sdi9dYrhwJ/HYZRUgo1XV2i4G6dtWZjdGJWhM\nWU9x+xdJEdDkITx0VNJMKrO6jUO/NMp24CEtuB9vIql4aTkf7qTgAN8VGv7u\n8c4qR/OIbKtafj8MH5kYl3jybSHfDP4soAsFgF9CReqC9wZk+65zdeIFfY01\ngCOMLJErlhsLU2b6zI14Jywe8+yWNEB8eFeYt2kqMCPpyckDlebR+zYXPI1v\nhVSWYE1RX3eq34HRUIJAbwnormkLM5GiMyKWLJlXsrTkzAM3Pa2zGJ+yHFbz\njf5VxUJcNbIeLvhpS4mbZJMdbJe+b4Jbtw7u2R7jNlkxpQvl4KpWnyRDLNtb\nDYVRXi+c0PiwwSBRvBxJcgHmifx7kiDTXx8+ryoXG4guA/mheDBSDoeCb1i0\nRc538E2HRa3E8VnafmfCXL+U0SuhIskSk81AsXzzN4cBoP9+wlZJ1aLhRZ8f\nRBJmfYE1mkUq2ygmSFQDNhGU+patB74cmARlI/vJxr6pVOF2QFZjQKZbARES\nbl7Q\r\n=dMM2\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"da948526208886bd05bb015d249db8d19d4b3f05","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_9.0.0-canary.b659d4fc3.0_1605572640840_0.48337596643535075","host":"s3://npm-registry-packages"}},"9.0.0-canary.d8a3aed67.0":{"name":"@material/density","version":"9.0.0-canary.d8a3aed67.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@9.0.0-canary.d8a3aed67.0","maintainers":[{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"23c8021b47bc1fa73a8455f6b0f74f648ba3ddf0","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-9.0.0-canary.d8a3aed67.0.tgz","fileCount":10,"integrity":"sha512-anU4zomdKbFfaylz3MVf1hUkcPYWY4JtodH/ow5BS1ZEE1UDdnUG6n1WlQzSEhwWZ0XJuSQUqhcEVZQeYxXhIA==","signatures":[{"sig":"MEQCIFtGcsS6kXmtievj3Up2ugjuCXXijNmD/3kDCZNcTWnnAiAiAjMXhwAMPrwVGsAIIM/FjdRXe2D4+omF4zfKLChG/Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfs+uPCRA9TVsSAnZWagAAiOAP/2wXjZwpgippeU6uasHv\n3SB02itjAC3rfSEG3eU3ugPTG+iY+2N60uAgKIxwJBEdNVU9C0bKmIkNFAuL\nJBMOIxmBIUd7yFnLAnNqUp39NFcIS+O0dNu7dE2g+gFgiwwVA3IRX3GFDRDR\n0YaLsLZqLOiBedHawXZTHh/tnztDqY25aJO/p4uVMSycWTtxUTmZ9dDrtlm3\nLPgYkAhAmfEsJoi7LFBVr4dp+Pd7Uitxh5HO+4naQ98bn3WN0Qth5Zqvf8Ta\nSvqpELbIzI4ta0fOZlKx4/LLnhpRK6Wp6wpSj7ZBTlFlK/v/Ohs/EVtlh0Id\nKjkgh04WdoH1DyBo1oiOIRdEhHPAWE/aIBrh63P7M6vdm1aClfjicIhtcI+f\n6dFD1yBch5T5R2T4pQg+3HvQWRv8ZuXaYxxAAMpqSQBK2SGTwW6gsJXl70gI\nCoEs0G+oG3CMyeDYzzIgXGr+FWjBIZU2OJSM0SNXFGD+JjUJeL5bQ3v40HPt\n+dPHZtK1YKJdB9eLYwzhkF8SxbG9iEF3t2mnAUpiK2nieBQzbamytkZxwiiR\ntyOJSRNBao5ejNgoroyuhAFboZbjoV0AUV8DddJAslUNFSp2qz+9YQrTbIpo\nnkuoFAMxpLX0YtoQ+H+VAnRowjbJ0q6VN3dP8Ul5PaEcDv2YtF6VdYXK8tlX\nxeyL\r\n=UsLf\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"e70765503f122fcb3d748ffd41882655d9d4035e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_9.0.0-canary.d8a3aed67.0_1605626766928_0.6023086900637327","host":"s3://npm-registry-packages"}},"9.0.0-canary.482ff9091.0":{"name":"@material/density","version":"9.0.0-canary.482ff9091.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@9.0.0-canary.482ff9091.0","maintainers":[{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bedb7c9b658d2833efafc7c6f4e0e4021e202931","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-9.0.0-canary.482ff9091.0.tgz","fileCount":10,"integrity":"sha512-Y/4Moa/1CvWtWpKi3YtFz0Zmv8fSts5/3Hmb0S81Dk8ZJn8TmfpRqvogEjhhUG6JCI48p7Rq6kGFyl9JY/HQGQ==","signatures":[{"sig":"MEQCIA8rovPPFNnwigt53g0f2i/ldhb12f62LOg+rvbk4Vm9AiAmrcCUunZEsQzvxIKAaRPgtG1rUBNYKqvN1FsyHDkzMg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftA7nCRA9TVsSAnZWagAAsNIP/R3dyGkQz0q7NkO1gfa7\n+YTm7/YkIhrLzbuTukSIdsHPUDwtSQiLn+zHeglLC2k4z//DCHk23M7bsPn6\niCrPY+qD4fr+i7r+kt3RIZ96TKPMqol38Y1NHR1ghf1R+TOexLYGYg3EKMq3\nrz78cFk8hH3mXmBGFxvaSXDiyp6hi/bNZyi7PIJmqlVtrM6/ydEQOhxVlMOr\nkVoqJVSNCKJrfEk0qw1vCbm0ghNEC5i5/G+Q6DiJDctqESV8kUAyKemjBfb1\nakOt9cWy9qomMuhUJfhgFgCfUv+15hTM3Gh6gJMaJ3KXUUk7GIoJMCFGFwD0\nulQ3EDIpCGUyQJH7OlXJeQuJha6NNuv70TrlyGHU10Oxoo+SxCJVTBhb+Yit\nASbDRCKRLK1v1Lk6K++yLry25CH99g+yEeKdeUy3gR0M99b5lpkVLaSvny4j\nnWzLVEBQfrBoWRfVHmhmxVeQ0hukWr2xLXyhPQkKnKMHdY7AQMTWBzwMxqm8\nYbJkFAxrQMQhao4iHe7DIV2yvQ8hdX7rLKwDcX7zw2yln38M/UNDBqhAAZBP\nq+jVALLWoEpdPTOUQDyhofE7+91B4Kv8mpvFnQGpNzTACa7yOEM7cwGjH60t\nLGK1UUa0wDb6rr5Tkw10q+IQIqbFv2kzS3U/97WR6r7+RDzyfnfNey2PTFlO\njPYN\r\n=/qmU\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"5b4b306ef0e5d1d3654252169bb9fb9d75490dc1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_9.0.0-canary.482ff9091.0_1605635814606_0.21550009825568872","host":"s3://npm-registry-packages"}},"9.0.0-canary.99cfb6bd5.0":{"name":"@material/density","version":"9.0.0-canary.99cfb6bd5.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@9.0.0-canary.99cfb6bd5.0","maintainers":[{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2d4054cba116d481980ecb59efe91065e90cb93d","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-9.0.0-canary.99cfb6bd5.0.tgz","fileCount":10,"integrity":"sha512-y+StZDlMtbfPvpbOYexgz6Qnuebm0YF26GKldAA+NLHxdd2xrPeO7oBp4gTB8FL5H4F/FfUQWuCjxojftivLxw==","signatures":[{"sig":"MEQCIHW4WcEDw/6F1uo0FSt/6L2VIrpMYIV0xiypb75CkFyYAiAleG6vZE8HHuJglAAkLh4k3VJscrf8Hlq9OB6VD+ZBWw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftWsgCRA9TVsSAnZWagAAroYP/14izvmkL1yuqoez29/n\npibEQmK3kH75IlstysO7RMfPcx/2FKD3H+E+mQaunuYzZjiKie+1fMlEF2zP\nPhoPLT0ZuH3IHEhTlwOdkPPrAdLfDHYmi5dAYj8+pdP3JnyRjVpDQLfMzG6D\nkzUYfMqx5kmJz2fHbpOqoTO3hB8wjAcv2q27mm2sQPIjdZLoLVcyBcrEYYKy\nwIdCcQnMIMD4zH2npedmnAgPJoMl4PbhEfk81ku0cKEpPketo1bF6latuvJY\n4jzoGGCPBwCXRSjJLoOVQvRpAVX8VluKmxwFkauVDlZrkWZQ6mtglMm4OTIc\nRK1c4YwfVxoPze2OgSxBms+lg0ToSMtUcfUkpN27u4ZEPltBxLytZ2PmEJiN\nS5kaZqx65z/da6EcEANBiwU2haLvS44ZjKkk7Hsx7xxyMPX9jc8oZpI97ctK\nrQsMjTFLivzPxAj3RjlsyDY0tPzGgBsOziwuSQzFUcJAEKOrs13hIrl/A359\nWqRLNG07VdCz3j+k1isnRkEdegPd+PqDBfxMsT5SLiCH/OTLdXZOERRAIJ7m\n2hBrwxdqbHWqatOylBTuBo+47BH0Yv6sKYGzXVUqU/e9Upb+/c1XM5jh/PlL\n4EoBW5fL0tkqSInsvoYR0hhMwzLsSrF1tU4z/ayiY7A9vv9oGcv6FTiuCm5+\ndMlL\r\n=naps\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"97b5b434f189a370838c9b867dfe1b766ae52fde","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_9.0.0-canary.99cfb6bd5.0_1605724959539_0.9722273698896733","host":"s3://npm-registry-packages"}},"9.0.0-canary.b98d15d90.0":{"name":"@material/density","version":"9.0.0-canary.b98d15d90.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@9.0.0-canary.b98d15d90.0","maintainers":[{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5546ff25f9117f43b36f0c026bb9663099349ba6","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-9.0.0-canary.b98d15d90.0.tgz","fileCount":10,"integrity":"sha512-+9SSfJ4+yw5j2OA42fKi9EW4FpiCvaCSL3qNTLGx1hTRvVwF5nzQkSC+RYgid2+ca3O8tLjsVt+y1BUvZH9Qlg==","signatures":[{"sig":"MEUCIQCzugd7O5+Ne1xbLXP28SlMECQ9j96WBXQgGx6DO2VlRAIgEe0cu1B9J9d3pqP7pKtzNgT+1TxVlYsmn5CLD1XiAlY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftaFVCRA9TVsSAnZWagAA0aAP/2l3TB56JtCseuybC8Zf\nAMcjy7tF63oi93C23L2T9SZlI7r9hBOVN/7sdR5DH/XTv0HPbmyFAzuXhTEc\n9p66XLk2tPVvI+mDhNhiFLYzig+b7YbxKtRbelNN2PQGNxqHT41XaFeNpO6I\nCryb6rmLlHvIQdIy5dnzwJFmNDFuqXH54NPwrSiQl/uGFf/cEDGloUxz2aPA\ngLwGlpwQ07ofsYYWgifJLdcfcI4Ln7SYYhZassWnOdjB/VzMkhxGpNbK71eS\np/SYa2N+GDESyDGnFSX4mxNPEUSPdEnMroMp7EhhbxLagzWOyNDWYjSroFoS\n/7FgQ5mBNkOqi+WrMvUl25EVSeyCE4ZftTVNk9/JcWgQ8QqxnQLFYnfnEMoS\nH5xKDeBWX+JkfsGYLO9PG8yUlMdKix2IhMU6ybaMw39yvTTinvEz82R3dOmB\n0L7HdFNondgqXrAV/QP968XpnNE9XReC3b6Jz5MNxoS9epEF/NJGY/3nn3L9\nzF0e+ZOZvgewwIZ+zhHwwrMnAkffEFZxodBV+9qLLtRYIEXcS95rGjPj596f\n6j2dkX3YZewwqeFtKCtTlWkCj6D9sIMxSOPig4UYI3Yl0VMVOwfBVTMPEnXo\nSV7o+JOEF3a9WzsaNpm+s2rO94GouTtpvh2+VxzCFTrMB1dN6av6rNshXk+Y\nuyO4\r\n=wkJX\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"abbd2c5bad9fedd634d7a0c98bb8e4a8b0bf3439","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_9.0.0-canary.b98d15d90.0_1605738837183_0.38344187002546937","host":"s3://npm-registry-packages"}},"9.0.0-canary.30c11bfc2.0":{"name":"@material/density","version":"9.0.0-canary.30c11bfc2.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@9.0.0-canary.30c11bfc2.0","maintainers":[{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c9bcc189bb90d7453c5e3bafc0e367e79f33aa74","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-9.0.0-canary.30c11bfc2.0.tgz","fileCount":10,"integrity":"sha512-eGcNddKWTF9Ki3HWrqXVmJ0jHOC1kNQ9lUGcvFZ/C+gDHg9EHy1rQ29R0t1Fb8bZKI6tqxKWEGJyns1beggzBQ==","signatures":[{"sig":"MEYCIQDOM5gmK5wtQqzTSP0FLzyVG1dfm+S3d72fUaRJy7obeAIhAIMJB66qgBdjDQhXPNo6iDyfb0d//lWCvbByBD1nstvH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftcluCRA9TVsSAnZWagAAuMEP/RmN+Bcoj6z8CIhmJoaM\nmqUbQFURTrin2U/LddsHbekoNzwjdWq04Kit5M9BUk2Mu3c7k1s+BsBMM+/4\nbOM56yTRwtCcDd4hKDW6BdQWh2v0/BsGFT+fhZpGqw2/aj+Fd0BvDCBQhIEx\nqBeL5xsJZ5KH2ssjD9lXO71c4ihaii8+xAZMBQtO1IKWr8qPQTHb86opv3n5\nfy6ylYL1g9hP0woApMJi/eb5mr2NiN1agA/yc4l2HFMAETWs4E+PhCoyvuV1\nHSHsr7KjyExO9V1HDtrTOP5R/8ZWpl7bxbqDyXDQDVk7u3Q0wtaf6ojgWSEK\nwrlqlbV4cQIhD7Y9DeGBTG09ukvOmI6P7i/wHCnJlW9H78NzXYfUuLPOHgOz\ngKqBB1B23dkEtgY1FmgVmusvsGTeMWX28DPsPqZQp6cll2ExmsCU++XOuM6Q\n/25fdwfpsOcy8+AAY5D6vHoQ6cVSd+xcwgA0Ctl0hwsZUrFl/c6lxAch6IuJ\nlhCvoy32oRloW09RCyH1tQARrjFhaaPEx+XWJwUHQSbvuICGxe2tfCp+e1GY\nijnbngkpLcf6+YgyNEs5HXbyADQSugZyD6m7HoI2FnVjjVEJt191H7cEuPhh\n+zFCDwLRdB259bcnjMsGvMLVv9LcAECWLyr6l5T1WiMWK0+2IH+0ok38NOpi\nZ9Tj\r\n=w4Ty\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"bde404a844a4528a097cb2c90d03c4ce8bba9d74","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_9.0.0-canary.30c11bfc2.0_1605749102290_0.46597146999372874","host":"s3://npm-registry-packages"}},"9.0.0-canary.1b731d51b.0":{"name":"@material/density","version":"9.0.0-canary.1b731d51b.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@9.0.0-canary.1b731d51b.0","maintainers":[{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dc06319ffbc7305846ed9fecc3e0f85bdd0ef2e7","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-9.0.0-canary.1b731d51b.0.tgz","fileCount":10,"integrity":"sha512-ul+fx2zn+pAOzfuI9zhBnpl90elCosUKSpjcfki4u8VnQ7++6feZTMXXjX8wrsyp9Wm9zEc8HwZcuM2xjOJxcQ==","signatures":[{"sig":"MEQCIHz+zGZwWP8yQ9EKMrB4gMU7VwQ89wNpMjSBumkWolnIAiA183NSkyaU15SgJ8WGtxMFed85/XwDYyrVFxC2jDByag==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftr6jCRA9TVsSAnZWagAAz+sQAJcn5aVYW2nNkRy9E61G\npfjw1/CZH5ZKTs3SwYfzas0bIRQRR1pe/Ce/T4x+9IDCJoBEddFq9JHSWXu/\nnD20hL/87bsSVs497JeujutrOrF8g7BZMY6gjNgxYvzfLMDM795H1ZfGkaUM\nbwbL2tJ8o8Mqr8B2VTEGtV/daqXl8jqgFqb/pVoXwUTjkhWBWA3gM3BQ3tIH\nDh9318Stnm/Nj6ICk8m7pZ7rU4U3djoYy672YgVpGMu1OORn35829cuAW1tk\n6X59G+DkP2SSzTeNkLtsYiyOs0Uje2scizfRffbSplRe2f/zGMYhLoiy2kRj\nU8tHMQicENWmW2Clip0xUtlzzUq691o/Y+uPUZ9pPtfMfVZLkLCanQPHL6sp\ntNn5+Ce9xVhHXvcxTWByFF/ZWzpyVeQmTM5nr8ISNYLY1MhPXj3u2OEtpY4b\nLlZfyD2dxQXqq19b9An67wOYwFuE06uhcdvoHgjkOhW4qo/jEveQMl9F+cyA\nfvyagl6mUTTRxVdPWn6i4R+CxQnQK7eqYtWGEpuD103x4yqSfAlS2KcVYABB\nkZvi8IuY1oR3BtTmuAAXMFNcngu7WdNAjCkdlq/wN2WFkmZLAtOmm41x7S/B\n3yYV9ZDUOw0UI3XYMXKdN5fbmlfATVXLEcD5sWXyEWTjsN9B+BM6K8mBN07M\ns/eN\r\n=v/6L\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"22fd036a79b754fbad742c64041cedbac73ce410","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_9.0.0-canary.1b731d51b.0_1605811875378_0.5644679164691022","host":"s3://npm-registry-packages"}},"9.0.0-canary.4ae94ff78.0":{"name":"@material/density","version":"9.0.0-canary.4ae94ff78.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@9.0.0-canary.4ae94ff78.0","maintainers":[{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1e84df84da7c40734c39d78d7230441a71ab87e9","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-9.0.0-canary.4ae94ff78.0.tgz","fileCount":10,"integrity":"sha512-JSYrfy5qDpisRVaKWmCC8jwF7GaYAMKCqS9Goq8Vd9dMdvVV+i1mpM3M6zBY9EL/YmKWyb1eJTUdaB7wREYm/g==","signatures":[{"sig":"MEUCIAiouql4CA+C3tmsLIRcz3/2i9ue8ooBalWljWyyo0DJAiEAi8uroP1iz58F8F4tHT4VczcobjO+Dup3HNtrxWqnvtE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftr9SCRA9TVsSAnZWagAAv/AP/27ymRoCzeXDXEnxRxY7\nwXHwEHrZTkRUAfrw9e7dtWx6+gOU8DCWrZNG5cVyLOtUeUfdQbjR1aP3xxts\nlmdwVAL3GqyHFMAlBPq9c7/79HF9Re9qHUrAlAXqlZg3drhCtSrH3N6vH39C\n3uQnDZaHqEtPQKJ965iPHYe5MhNkCCYZSfMqROkYztOpSWtiSdnEvpIBScXc\n+OcrntHnu+LjRmxOIXL0oxBBl7mj5MCryDf8ko4EJpXR1JLZuJsg0MdG5zhP\nww2bR+2w9Dqvc7Y0vQeHA3YXLGq+4PGoBZaKjgLDfOiV/xMOejkv2+u3rpvw\nwtcGuX4ti01caWsHsCJPmXESJVSSpuCN2U+Ty0DviUxxp8SUnTEBOin9vTrA\nTqz9iJmxHZbS3VO2kuQrmut+2rvsMVtUM5am94MaWgdHu9bSuIcKuISfCUNg\n4vcvw8YWAMb7Qf3jREnMRh1jEeDFhJSZAN2aZZpNgb9+fo9YsV5ATxb1N8/1\niqU1QBjDb4Wrre94rAPD+3mkjGU+eBuTR0VoOVjFjP27E3mglgHMieGUb/aW\nKYcrIT39Ak0DJeB/mrUGBtoVcWRzhzHgAcLz3QRgn9kOA4Bhoxs3m8/T7hNT\n2VAOO8Io+G9CgMXktgzQBF/mz9LDcwPuOXQ9l4IYC6Ab2R5YubWMyPj37AaT\n7K+V\r\n=ayas\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"34c69ebecd44026cff9ea0d681fc2be3de9900b2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_9.0.0-canary.4ae94ff78.0_1605812049711_0.49250745111185035","host":"s3://npm-registry-packages"}},"9.0.0-canary.7ad038e1d.0":{"name":"@material/density","version":"9.0.0-canary.7ad038e1d.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@9.0.0-canary.7ad038e1d.0","maintainers":[{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"38aee8607329ade2f5ba0c2c24a02a8d84b0f540","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-9.0.0-canary.7ad038e1d.0.tgz","fileCount":10,"integrity":"sha512-V82HtwRXXVBYEMM5Ue8z5pLmL+nHdwtJrcWAFWBTtRnKVHFHZRRmBKLhRc7zFOb70dQFb5EyfzKUu5EGzE3w/A==","signatures":[{"sig":"MEUCIENVVD02JtLXECSSvmDj6hbarKlxbwWvBhQ5/RX5fun+AiEA9F2UGMHXL/OFor5DVna3/SK6uRN5T4htddey6VI75vc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftsTFCRA9TVsSAnZWagAASTIP/2Ahc+haAdJAVXHLEupf\nUPPjKuF29Kfb9jsizgTW52iHqGZcEfHsR6NAakkjB5yxRMc3jPmv42xOY+Em\nw9J9Ntfrd6BdyCn34WgXDUV4Gy6LMOssAcMK1whOMbSY8pU8h2S8mDNuq2+q\nzDksGY+3M3QyHbnCPm9z2zrxl1eJ1QZbz28fopZeUmLYCiC2pmJmbb+MPuOM\nB+2m7Olg0mf9EqXY5AD9aqHhVAjL7t+7HOrDE7/sVgukPY5rBCrGV50wpgEh\n/wyVe1/CBrWI8n4n12JNjImPny8VCiZdt+7ESFWq7wxtyjCB/07jrAsOi62X\nISrKbfe1xBRwXCP0bFHpb2eXkRsJJoo+BRfrUTuPH3QgQbGrNMRKSoLjDqID\nXA2b4VxFgiiu42U2ctu+ck/ISrJWmCRhiKeW1JcS8VfuOosUsmS/uDyFy7Ty\nanI+0yk3tjmVKeQGCzGHcQ/ndz2lMLpuqJkxcxKpFAx67ct1WL0E/UQZ+8ae\nWsZ6xe7jB5f0Im11Q/BctRAbrbeiD5ZZ0rNVL1hCFAbZ2aXs1Wa+z7KWuvu/\nvPATkaDSbKE+yeRACCv1FEBL9pICgr4OPUZbwJnDRltjIFJSYHNfS01YcvH7\ny5PF9y+AhDm+5e/fRtK7z4SCSasjW9k/oQ6ZdfvikcWsFezwhReREPzD2SLr\nzvz3\r\n=smpf\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"ae5e88e00f948f916eeb8f578dc80b6aa2084116","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_9.0.0-canary.7ad038e1d.0_1605813444588_0.9805138846848278","host":"s3://npm-registry-packages"}},"9.0.0-canary.a41527604.0":{"name":"@material/density","version":"9.0.0-canary.a41527604.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@9.0.0-canary.a41527604.0","maintainers":[{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a7a2bdcb9afd2922798d905a09e341b61c765a71","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-9.0.0-canary.a41527604.0.tgz","fileCount":10,"integrity":"sha512-rXAIxfhmsCONbuZxK1THhvjA+OKPND1RAC0HikcxGq/9JeeeqUaHxt8vUVfTauXsxAOGbIrGbRxtKHVJfUXKag==","signatures":[{"sig":"MEUCICkY0bNBd6lclZHrlidou8PArwkPhB0TjDbXG9Y4mQSOAiEA1Z7cnshb3le9Bx83r968f5oadky9oCIqMlp5Xaw2sTI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfts5+CRA9TVsSAnZWagAAojgP+wbT65gAaiLuBRgxSxop\n6lJHOnwSxO2Ay6pAy7PB+5e2CcMphsN9Y8wZqw3ez/bbcVcSvUVJvJx55AQO\nkxVYLh0NGtQuYJ4T/Zar2CVAtTFepFJAfzYio5xllwLcl8diUO2jrOFW0USq\npDAkHSQiPzpzwtjE8StV4Qlez96FEvncB4azTC9v4czGB8q4wLJ5uTApXh0+\nBCaWeaDu8fB+TYczU8iPxdrDWBYKUs1Zn62wOxj7Je4GaH5BR/j0s3IMleR6\n8lAq8X1yzEszM2662X30TkAkBkcqq9lsRiIscPD1aEuv//TMMfaxBiJyVzG5\nkVWlr5uAAw5RJt2RBedZiDwvM0YZxTlipjB6AyT081305M0F6xXrlouL5O8v\no4xURQkENZBu539KtcUp2iMSFj8FcsurswcwDAas6+lKfs3xKCMdWFoh+xar\nkRYpwyahn3r26YUDrUUIyqD5loYVGRF8VhOKwuRn19gDcMyKN+3pWgVsJMSw\nXnK6/feVFpkEYoULVz7grNz/Qgrx3g7TgUSXIkNtnewQv5Kl1h68e7xyU8Or\ng1zU5PH1Y+JvIf1Mo2bB/gRmj20PU+jq4Wi+STL+QvidbGGM3vSSjklgk/fV\nPtR5UpwTiymW3XMDhI8brg3uGJOvFEampsqGUZ2rVraGisVGKhU5EExSvy10\nL/do\r\n=0CB+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"4419897c2a5ae382f471047e38ac619bef815058","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_9.0.0-canary.a41527604.0_1605815933689_0.07617710213853335","host":"s3://npm-registry-packages"}},"9.0.0-canary.7b0e2b377.0":{"name":"@material/density","version":"9.0.0-canary.7b0e2b377.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@9.0.0-canary.7b0e2b377.0","maintainers":[{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3657ccb16239234885aaa4adf60e63d09a9d71c2","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-9.0.0-canary.7b0e2b377.0.tgz","fileCount":10,"integrity":"sha512-prvokEhUd+W0JHTlHZCL+3xKG1Yj15qCVI3nZvswwMf/dBmB4eKtMUzYAD53mGboiC4kXv5yhlK1nlyviQ/8Lw==","signatures":[{"sig":"MEYCIQDVaZLhsPj/5OEiUYVQmwvr4RmNjwL8CM7RCr9AXWz3PQIhAJqERJA7g4crzz641nOwyS180+wy7UCoTFllvkEhRSnf","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfuEknCRA9TVsSAnZWagAAce4P/26X8fcuirNfX7/zo11/\nmh/o/BDqg0g6XLwr7Y0geu1+CXiK6g1VEVQ0NG9RS1Ibz0YZ/9XfC/RGwRYr\njYfAPidekG6NQoQnF+Bk/beBUmWRog+0RF9xVIe6wKMNHGhclV24TnLZyt70\nietQg7HX9MKwP2f3jDT6wKog8JpeZj/ZW3rBndf4biBRs9i2acSQKegbnlG6\n0OuY9+W7sFX+Fjc9AJZJuJuRTDzRbt9IKQnD2+ZznauGy66JglEsOvGkAvF/\ncw9bi6KLH9uXOkBlk8fsKvtZsGzHkutecIzlDMxtpk67/GSyyn55hEu/v0Ee\ngT+j9v9mQg/K9Gk406TQuyYgCTX5JcmH6fR8LI/minXovvUczokWQwHxggmQ\nj6pWT41tQeM22vMZwFLoGCILdgMU0Nytb2HsZhrit/9T/iMJ34NFtwUupu2E\nJgWpN3XQdXjhI8StdkbJJmBjDrh/76aCvLJB1Km0np5Tz5fwu3RJhkBQc47v\nbklK1khbsIoSZ6DOv8K23dniSKl7VLWYVq2Q6k5HPCgZT8KGUJYq+jpYxGFg\nuWCoM0tmQMN8jD78p7+wtjafWCd9JV001yOCzqpNznHCAPbTp0IOI0M+mb6k\n4+qHpa8zHAuPs/ujMXEMqB+Sbmd/sioZU1oVcuHlrvCOIancRLnuNBCdm7jI\nIRCy\r\n=D40t\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"51086f360a63319c786c7b166e515a34aa76c112","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_9.0.0-canary.7b0e2b377.0_1605912871025_0.6152775803771895","host":"s3://npm-registry-packages"}},"9.0.0-canary.c927a5d05.0":{"name":"@material/density","version":"9.0.0-canary.c927a5d05.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@9.0.0-canary.c927a5d05.0","maintainers":[{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8b1c9b45d3279d02586ffea3255bb875dc17460c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-9.0.0-canary.c927a5d05.0.tgz","fileCount":10,"integrity":"sha512-f0Z6ccfwsyPxLcnhU6wvBwhDa79dmoo5H3OXSVfvIpaXFLmz9z9Fd9Jhm6a7rkgfUKqRJUnDgydEqrjqJfD0Yg==","signatures":[{"sig":"MEQCIA7mgzFfrTOGlen11LHkiRrIaYKokpScLvL/YnCJo6HeAiBquBhIucoboq+Grb2s0ezT6flNvylD0IcsT6DZGPMlZA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvBF8CRA9TVsSAnZWagAAee4P/if0WnNX67r3tqJmLDIm\nUbkHjvY+PVdcXlchj4ZMl8sWHU+2XTrx9DSXhfAfyQd3evU+twLCe8UymOzH\noimSASFUEH2de07/imrADEDb7BH7Q7jUjcIIJw8AzqDVucPyAdhq1CHuCIK8\nwyQcEi6yQUiWTIq/HPrivG1qe4U6uwUHKaLnWzxHhAqYbj1hL/auPDcwZcCR\nNWT3BSziSuJUzEkpCait3bkWmpSn2nfNTGwCWhlW5yMeTNB4mAPriVHlInrh\nO1LBgAmM+M7ySVgrpo6UcRh2E0QTVgbWWDkvOzgtAIWuKPZzQbJR2lOFTo8Z\nsfN8FoGU4lbZ4mhFq88x9DD8nV/TjeiclynyFJqpN4YWU50m4lA8qxHy3OVD\nexcBbLAfuk2gsE1CJ4TX9b1vPyCfuPQn/Qqf0Den5UZN0WipwSCUu+m8IjXA\n1DEWnMBj9V8dJ7a2KxpI9YzQk41/9hZtf7mxMJ6OotWMZQ15y4dyB4HWg5/y\nvMHdT21IFRt7FPp6nd1w1keuPd7coKINL8N131TGW4+zsKdM9/VSD/O2OjKK\nMUbRyvp0qzCvUv6hiUJT8jz4r/45j7iMqe2Fak46sfO7w1erecmmtwsZisXv\niO3mRn2FUbiCu0aFrCf0O9Nei/8KnaC90kGg4bOQQ+plKtnADLxoM1L4EXrl\nk8Qd\r\n=6KlS\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"1e41eddb7d951c0eeca983e08e3fbb7b21cc3776","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_9.0.0-canary.c927a5d05.0_1606160764104_0.24113518210011997","host":"s3://npm-registry-packages"}},"9.0.0-canary.b349b5185.0":{"name":"@material/density","version":"9.0.0-canary.b349b5185.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@9.0.0-canary.b349b5185.0","maintainers":[{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"30ea6a95584d7bf8625fbb06e9d0e9aac54aec44","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-9.0.0-canary.b349b5185.0.tgz","fileCount":10,"integrity":"sha512-CR9ao3WVfFkk8zoFmHoZd9xyU0qRPRwPRU/g+F+inQekf9pHE9285R5w3FGpdDsDEhS7Xa0OmUiIeRdfc6YnHQ==","signatures":[{"sig":"MEQCIDvAWN+Pgz28FyG41XlXDbrDt3P1Dk5jdKHKgABFi6ZiAiADW9oAqA0cGrC7KYnYmFFfHVa6MnZzakoKCSvGabVROw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvT3ZCRA9TVsSAnZWagAAOlsP/0sAF6djDGm1zQ2eZmF5\nmDDycsFCf96S5hwUQ7Fo9dkYgSt4+S8JemYz+Qm5jqwnMm1uLkep2jjII9CD\nnuLtxBvxZ0t1Mrih1QImr/MWg7lleag5IYgMzsqOBIgDxudBg69+mJFjJ2K4\nqoi/0oFVQ91InXJtdQKv8Z7eBJitP49/hV0MpO6+kHt9QqId1+W0zJheTSep\n9ST2d2v0fQJyXrSgr1u+tJq9rl7f+Uq5UeHAYcDY8h4YOf0qZM6R54chsXEI\nVETXp2J8T4LDrdX9spZye/OOHdnOGVbrS9VtL3vCh5ZrLa0ZZXU+BlrJu/H8\nnGOiMyZClxZKloYS3NBZ4JRQACVwvjPNJnQKCK57p3eBvO7r3iF3cjgdC3Ne\nCMPJPgcm2eNFDEK2s1Su4gP6NBG+RkEdveYAdwE7FNRk3Y8TfTKn5SMBqJL8\n8pEM3oq9lSpBz6wRywQLOKcQhiQZu8YAIAWWOwO2PqOgeD5GomB557nBIvhd\no9JlXNrWj5V8eSnBYLUwwa/jyAIlFSqVun9OwUItROSaIxQP+bp+UTD77GMH\nZElmX1ggwvT+a0AaoPd8f0wM5XAKNbnXBpLjT3KuMIKanReHtvVE9SBz/l0H\nqXBhRTedEgSmEkQxhZwaDGgB75mnh0PhefLRsBiANf9EgH6Lb07C1nyB2Kw5\nHuYC\r\n=l4ml\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"92e0cccba580778200706f15aef4e667fc007066","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_9.0.0-canary.b349b5185.0_1606237657434_0.06983876457820681","host":"s3://npm-registry-packages"}},"9.0.0-canary.9083b7d61.0":{"name":"@material/density","version":"9.0.0-canary.9083b7d61.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@9.0.0-canary.9083b7d61.0","maintainers":[{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3c47b052bef476746103f2456b007e7cd24a5188","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-9.0.0-canary.9083b7d61.0.tgz","fileCount":10,"integrity":"sha512-+OdoLzwEe2VPSzKnS1it85ZAaQ/vz+D5rH6stgdrb01eFISJZhMwMpKiyPyAlWvMADXxj5B015TIEHuJMGcUQQ==","signatures":[{"sig":"MEYCIQClcR445jSZjyEqlvjRWVxpf9lB8vqkiVTnFGmi5H/TMQIhAPLr7N0yRHgawJ5noxtmCynYfNoNGUDBUNd7NwcjpQio","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvXe9CRA9TVsSAnZWagAAL/oP/jDgv0NiZSKhUnA40jne\nC/WvC+WowgSMFhQKhict6SkQDE4w4XFN+v8CttPvkMF38UrsusTFQ1mWUlUI\nUaK9Eoqj1nEId+wqVt9j5k69foY9C7XthSsW7r65rtybrVZWjNEjDWmMLS9S\nF5N9mmTMrzQiFquYX0jDByqLRxaPK+QhyHKI+qCaGJVaTR1jfwchjrRvsJHy\nPUcrabnBKvWCsDtNgG1WZLLCIMU2K0q10KKOn68AH1gJiN5U/tQ9nV9tKmz1\n9eP6titb9X+Mkxg7vHbZhLaghlnwWAxWj34Gk/DtU11Stihgqzc/wIB3IxAP\nItueOEe3YZYg7FXED0nlpyw5fLvcTYSxA8g75q4ZzdUX254MwT18oFqZ3oIi\nrtIg8gyhvGcN84c/lgbPb0I6vVc7zc+4cWJUEsQbX3LoZHtaqd3ZHd1+ufUp\nJGFirj8PQ5Kp33dh0f/E5+X5uU8cD9xw1/FRssFffR3HS8z/uf+AaaOeCLs8\n9Dyzz8CIUECxzEPD6azffWellggYY9kGBGUQfYQGqD1psvUP0PmDRIkQUfhQ\ngtdSbh6qw8ifXKz5n+JE24exH9rB36MSMjaliBdTxUJ0HvqMjNq/Ea8XTRkt\nvRNu0iptayAvSs//UxJLtqF6yBs9H4yz9d3wR9hg9zeCp+uMlYo/Ug1WIqln\nh155\r\n=751A\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"c6192773b6d2ce6a74a5b464d7df3e9b57b238d4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_9.0.0-canary.9083b7d61.0_1606252476841_0.8338941964156643","host":"s3://npm-registry-packages"}},"9.0.0-canary.eff7b46ac.0":{"name":"@material/density","version":"9.0.0-canary.eff7b46ac.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@9.0.0-canary.eff7b46ac.0","maintainers":[{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"95bce66a4506ce9d7f57d31f73b37c6f8348f32e","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-9.0.0-canary.eff7b46ac.0.tgz","fileCount":10,"integrity":"sha512-uqCJolOfgJSNn1lALbg8RYJBJDfU+IT0NB7l8eQJtLMehyO3RhW+iMzyz3L6rPI2dHCJQxYt9hbEyWDZDzIjwQ==","signatures":[{"sig":"MEUCIQCRaLbKRk/dXxGAOgJuLREPXEpxEOU9ndDo/GXPAK4CJgIgG/sdBuadcV9u55roEAwRnappDBvSsdCvFkq9Xmdi8T8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvZd3CRA9TVsSAnZWagAAxagP/1pm/qyCT12giLrGlbze\nBNdH9MuEQmewWsWQYEACN4iUzfeCjvTTbaqI641Tj1IOuetx4wfdXU44t7mq\ngIVIWag1+zCMB6AidVJBhS1yhUg3a0wq39oYZq2SSdHtSZr/uXlICEVH3wdH\ngRNxtz89geJnVR2nNeckr77t+VNYbAjcLx/xeJqMG678XBoM2mJuOdtA1Hlk\n/lw5zX3w+eaQ8enaEWnfdD6bL1SALp8GtMkpJxFnyf+oQMwFcfdBD+Fu3A2/\nyBTf98MPTrSUiqx8V8A8c2av0iehAFhI3Osbqqu1VAKpXmdj+eEdXXDDaa3K\n3pAWrg/3D9uAV76OsjYtr/tySnWvPWWyIqDxm/i5Unl34LJuDjipG/r4Jmz7\n7AZQfIGzDhjsRyQi3JOU0S6qFbQPL92dnkN36yK6T51eQDCs6zHkWFfn3zwE\nLT+mBkaiKfpj5oJx2M8IamX57zloDKj93n6bafdknufFXrp7GpwqM3HAyPIe\nK2Q6Zz4jaVufNlR0tGwZgAiw0bezYZMhfGMG/rCLWq9WHVKvbuRH6k8ccShz\n/pQ0mxYqU936tN+KdymIgi/GEMq+zgMuPuhq8jSVtIK0LG2KS9Y7OwWZQLJO\ngwGiTj2dB+61JATKWDe5MGSEqOzphKEGMw3NoKJ4CqcTZJNrKWz/q20W+Iuj\ntAgg\r\n=wJz4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"b8790bb41654e5c7f7a7725e8e58c9dd08551129","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_9.0.0-canary.eff7b46ac.0_1606260598188_0.2657274779727259","host":"s3://npm-registry-packages"}},"9.0.0-canary.ae27b44b0.0":{"name":"@material/density","version":"9.0.0-canary.ae27b44b0.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@9.0.0-canary.ae27b44b0.0","maintainers":[{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6c95b75588444a72838c1282cb28ae92b0b80fa4","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-9.0.0-canary.ae27b44b0.0.tgz","fileCount":10,"integrity":"sha512-DvlLd7VTvZNsSvfrdLyXVarrFhucrspveZinv8g+qchQZy/ykZQVWe1Fe2FVnCxQugPsXl8ch/5e8PBeHtkRqw==","signatures":[{"sig":"MEUCIQD1ik+6Ao8yjd5+EZlgmCE8FUsizUVVwDb5UI0rL/B8kgIgVRznybLAP4C/WnVrUzm3RIoW+XMgyExIcacMFpNVr3c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvnjbCRA9TVsSAnZWagAAeC0P/3Lx5wB1BJpMKp+0d/zp\nPz8EUR0Nu6BK/th5UOBJNBgrIurxB0zNuCon7Lg7LXI9AaJwIOXMucgQOPU2\n/G0x4Nb0h7v2M9JfUZlsvAfvdluov+c9brzzK+dPOn/pTnsuluEH6uAklsS4\njG2QG5sW5hS5aHmO3x6GT1elnuHHnON92vGCT2CHiE0PfpFrjjCxGVPozsgA\n5ZTi0NuTR/dNARVnPPMv1x6sJsRCgmWf1WA76NqiBqFHqhVuKjQISzrhERaK\nYgdCL+DRweFduTGuIaT1EqAbdTTKMnqSBAC7nmav+fKpdYontMYGSI7JSezh\nM/2qi0vOQ6HVUNojSAiFgKD7fMVKK8n6S/1Up3LBeFHXxy+56BgJ89bBwiOu\nqpL5+kbwFRKAGAzxec463yJ6t1kTFuBJmgJGSR/LMmZr1caVjpRXv+37bHey\ncbeHJ3bwUDelMV8ekBcLuTKQuBMa5l7K5M10b3YFJ2ImxSbrOAZVlXHD8MtS\npA3m0bCciXB6he1cpPeFIbZlkmvkZXg26QB24pcMLk1dhtk0Q3NaMMdU+Rpl\nV0W+R3pVJIeB7SxBgBAa4UGN8/OS0TS1f4PJWgfeoK1G4G0qSCjTJckJNW3X\nVss+0N3TzxxSUcDCxjEIqiZOBH9pKaAblERjJVZdsWW6IIvYoFNOMpZprtKK\nl2aT\r\n=bjMU\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"eb690fa0e9558b61ded00dc6e4b467cbeaed4c4b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_9.0.0-canary.ae27b44b0.0_1606318298904_0.8224154477765091","host":"s3://npm-registry-packages"}},"9.0.0-canary.2fbba2554.0":{"name":"@material/density","version":"9.0.0-canary.2fbba2554.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@9.0.0-canary.2fbba2554.0","maintainers":[{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7ac69734d598ccdb8a83a34908ac945343bb96b3","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-9.0.0-canary.2fbba2554.0.tgz","fileCount":10,"integrity":"sha512-d9djQzuU/y8cB7TtoLmLfy8uVFxrlBeBFioJenMJDw9opGxcmQ2UIIW2IEooS5py8AeY4RHR/3Q0XGmdQDPpQA==","signatures":[{"sig":"MEUCIB4Xzuw/Q38NdN/k998T+0UPotVVlZUwTkxbcyvEXLYrAiEAvCzZ0OiOVYkccLhYpFHPfBQwQ8ktJpMHKhzykVv7SHQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfxS5ICRA9TVsSAnZWagAAzFMP/RnPtLF83JpWUmFBgxd6\nSSWJYpoAG49RIjrrc6fs5Sg+qGhal6Aiko97otHBZXF+VLr8R8bVjIGViM8h\noWXggCqxUxh4d4v+4+dmDLZPgHTsseiybDmdC9zaVsFiGALpZSD093wKBLHQ\nzj4HSOwMcqHf51N4XNdGGJE2p/U66/lgNda4wUYxlI8rT+GStAagcftPK8Z5\nEoCd5iwfdzzKp0sK/jOcqquvFmDqueF5rnPMLI/iibLQEZ+YdAxZ7lK9A0fT\n6PK3D/6ULc6ABp7x1hDkO9olXXQpfCB5L9+JbCWqx5Bz8GW+m58uc9Fs2lDJ\nnBq1Xikz5x+0uRyP/rZLq+2/PAdkbHKfBOdE7Ahu8jaZNpE3OIsw+AZWoTQW\n+SV/FAbp5Wr3+W8eQwdIGVrezNnzef0grsRTfoILCtJRqOlkz25ZhuuRkFMH\n4twznPqG+iQq3L7TtLv8chTUbnYU8EVWSHTtprd613s5pstK3fN168yqm0E0\nomxN594HfrVxZ268IWzkPlxxEmkKZwVsNBq6AUh5m8zksckeW77SQnXPf2CR\nhboifwDT2Jqs3BqtQQl4Y0xFnb+Idqz/+Fs5PBa3O3ApOL4UhY4jtHyHI/I3\n8pURXeQ8kp7fWcPZWT7mYHQuQicavY7R3SS7s5OSuldM1FSQa5tKATkz0+eA\n025Y\r\n=m70T\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"93356628825eb23bea706adfd527933f0c5e430d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_9.0.0-canary.2fbba2554.0_1606757959885_0.6029576472255676","host":"s3://npm-registry-packages"}},"9.0.0-canary.6d8574fe1.0":{"name":"@material/density","version":"9.0.0-canary.6d8574fe1.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@9.0.0-canary.6d8574fe1.0","maintainers":[{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c0dbedf906b37d05412fabfb39442f90807a1fda","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-9.0.0-canary.6d8574fe1.0.tgz","fileCount":10,"integrity":"sha512-TrtJWnjlITBIUZRw8fn7Qx7q6bSmtR/65QHlq4UXLprfYBLaTKNek4qUF6aRqkCUONmiu2nOP1Ly3kxHbrDbMQ==","signatures":[{"sig":"MEQCICqLvBNnJENxjJQ6MiRqpvonEE+RY0eZ2g5bUoWicyQoAiADnpbcsJ+ITys6ztTXs0l35SdufK+oggx87MMt9BLLrA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfxTDlCRA9TVsSAnZWagAASxcQAIbaxFR1JRmpM5ecywUe\nWbdw2s2Fo2TcnSoYhstT5s6WcCzxbEPLofKV9/0flG0yAONy0ad2G8WqGM/L\ndoTNdt6gd+g+E3HVJr3O6+D1j85LPhBLwQTIbRKQzFCzdIS71sh1TyLYAAT4\nWA6AkwXFLlHDq1hExNq/p50o2GotK8o5TcyXbAXoiDsD+CrSU1Da4GJlMZSD\ncanOaFxAZiFw9VxD/FKjL3EJ3rBcoOhasYJdiyFv8G66e3n2m/vJgO/wIFKr\ncYTlJTz4EEI8jcpz8qf28bJ152QXkHMrsv6NbheakKjI8yMN0yfQgz8JCS7t\nhOb2PSSmpdc3bT7jPYX6B2PojNfbxE+zFdYNTh2yJkt5u9Ec97h/9FNZccey\noaYREZU+4ulQ4R66UfDyBHwxW143UEQmWQfl27RlPEbsugdBzglmU1waIVO0\nKylsDbNcDcUNHLb5wpAP+7hTfJTLX2142yxR0ykiWrTj1DtdEw5Rl0VV7GV5\nB8BVEy9y+4SYudkkz9yELd2ObLWpGrrSSX/rOlV8aPF2eqpoMQRx8ErKo00l\nFagkpa0H9aA57mXHf5C9t7tyTqqLBE5YNzLIULcJswLvlH2tMXWi1MNk8gBg\nt8133z+XvikMReTqwXIwIyEms9KMIsKIrYXLFQRk578dqAFWTUJz650gor4e\nn/6t\r\n=lHyb\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"b98a165c81d2497f6c0e8e5652743d71d87029e3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_9.0.0-canary.6d8574fe1.0_1606758628667_0.17502102940189923","host":"s3://npm-registry-packages"}},"9.0.0-canary.fd22355f7.0":{"name":"@material/density","version":"9.0.0-canary.fd22355f7.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@9.0.0-canary.fd22355f7.0","maintainers":[{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2dc7c910b5a28422f9f1c9bdf719a8fdc73f97b8","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-9.0.0-canary.fd22355f7.0.tgz","fileCount":10,"integrity":"sha512-z6JvBTLYpXBSyIXQ89SGg26g+IgUyTrSTD5HCU0LDnDAvc32s9LlboRR20PfKE3DBdYbHavXLz5vWDkWmql0Zg==","signatures":[{"sig":"MEQCIBA7bViHvE/PnjgQVb+2i9FPfNognjywEPHhVoOfZNG7AiAl719GJJSIdWefcLkotYeYXs0gQIx11Sl18PuH8Ijxjg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfxXkaCRA9TVsSAnZWagAAhR0P/2flPxR2fO0Db7IitGlR\nSBDDFIo5QAYlQ8nhW+Gg02n9Iash/Kl9b2aGt6fjnK6UaYQtwwlLrOiSvmHx\nSxHGpKarGg2b2T6edTj+THJEZWmSxaTrthqAFOCHXYmJhrZ/XrLDWCgnTbzc\nWMJz9CF8S4prvarBJ/2r8AXUj9O/Y0ysxuV/MTUV84lcj3P198zSz9eZaAqJ\nGyKTVn+WMf6PNrvD4yml5ZDQzc42guu1RNvuB/73pS38khalS0q1yOxRQqcG\nAe4HYhp543cUdh1mkLAj4pNH782v7WfiUqdQeyfjuIiRlwsU5NivWMzGJWxV\ncz5rmbK9vNdQi5OWSNesj9W7wtOgA12snfYQpDS2rWsccAX1y+3YhYqUL9wt\npxf0KcO0yjU7KVf4urf6MU5YQ0ONSTOx0g9zhZwNIIRpATtGxXCeNNjvmgT9\n5iynDwF/QJkiMBmEY3NCtsKiuNwrvdqcz4HJMtTJyoyZ1M3Kt15Zvy2MkNvY\nxvmAucT5FnTqoZrZTsw7XfoIvfmNrzRV3r3G3YhC8845In9LD0U2LY8NIBra\n7CDj0XyVv7ILeXkbe0u2OrZfMNB1FIxYnYaRgBp1tEQUzHoSfSYdZNiQBP6K\n4aX2NCjU2K+4T+ENV5oi5Bz71HkQCgBCmisrSPynEPs+YMYzk7nJwfrWoH1Q\nLyet\r\n=YrP4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"86a40292baea3adb58a6c26ed8c68a9a425cef18","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_9.0.0-canary.fd22355f7.0_1606777113799_0.7285346472493162","host":"s3://npm-registry-packages"}},"9.0.0-canary.c4ab98722.0":{"name":"@material/density","version":"9.0.0-canary.c4ab98722.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@9.0.0-canary.c4ab98722.0","maintainers":[{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1c429eb63e500225b33971a0a4005f95e85ae594","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-9.0.0-canary.c4ab98722.0.tgz","fileCount":10,"integrity":"sha512-lFbwD+m2iVLnpyMPlmiooaWWrrwZ3BN8cVSTj8ab5SGfC8IiAJ2ZiDgfN10AzP4zsTAMVRidwzysGbRGjmB+dw==","signatures":[{"sig":"MEUCIQChG5LiwM//J1WOLEh7C2wjksZSD6vPsRJX6QOTn9fP1wIgTJ4W/AoP3URF2dK8duG6iAs2dtWCGQHY88jOr6s3STI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfxuYACRA9TVsSAnZWagAAs7UP/3th10flLkXuPP8SSoTQ\nJN2JphphChVi4jr8+IiuDZsSR35UwLjkG49pVLG639a65BTdEpRgUV/xu8ES\nBsNHL3sGILaSLHDI1qZKV6ibzYzSHmoHN0+hQdkpqxPzqTCMy8wprLvPgGRT\nx27jf9wd5WxqBXr2lmRBOz1T0zwtIktkUnOSY0rDNfgtqkEc88gQGuJAVubP\nzHbi3+Dpvd5StHqfZHV3rruSHQ//STLqGAiqBm7vXe/sBhngiTeohgZx99W/\nFoxRMaJR/ZqMTAkWf73bzk6/XJ0ctFwUX0rSdSrQPA2CUE9p4PmSH9FZZJF4\niQHr5jyd/ZUrkjWLppw+79yihgivGhPS552rj1nP1WqyctYdMwUlh5iHTZwh\nzDxLQd59m0B8BlpK3iAE1wDAwNetJAeHTX9lRCpws80DtvEhSdFxKY4gcAeh\nXz08pq9rDu6z5F1nNwDfJDjkcaENDc9qLdBOGL2MLDRHBboOBS/IPGG4DbGo\nEBUERvYgQZunBDG88G2MMLT9nfPlkswNiKldZJ4zbMoFUIPwui/fnVL2nsbi\ngtNP6ojglaI00mF8DhMOeM5ElpbW+NHfJQKh4cTnlYWJkWLwJewWdouJR4O6\naZZqgprkMs4l2zPti8RAmc6j8ocK69/Jkiu8LnLoz1xP/x+KtBso1gqs+97/\nozkj\r\n=OWsM\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"e6187eb74996c124e1abdcea72dfb697bdb1820f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_9.0.0-canary.c4ab98722.0_1606870527944_0.03449417209121064","host":"s3://npm-registry-packages"}},"9.0.0-canary.977585650.0":{"name":"@material/density","version":"9.0.0-canary.977585650.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@9.0.0-canary.977585650.0","maintainers":[{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fd4c7b6bacb9f5da77b4ce5ae4c790ebe8a0889b","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-9.0.0-canary.977585650.0.tgz","fileCount":10,"integrity":"sha512-Hu/6CshBmOtXfwFYA6jUoPpHMFigAtNao3J7hh2hFktS520WxhrTn4mtRQ/FbVY3XBxC52YW7nimr4D+xbEC/Q==","signatures":[{"sig":"MEUCIQCY3CVUP1MVlRSoVoMg6s1lvW65J5Y6wTWL7I8lvxuD+wIgRZWRxdRu02q1puCnpatFxiiYYaME9qRtCugJ9LH15lo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfx6d4CRA9TVsSAnZWagAAlssP/irn/H7snZSyy853OL9G\naUX1/+LqNn72jy1RHBSc6FPeQPDenu43Ish3PUSbPfchjVIKj7TZiNYeVlrF\nMAKLYcRPWzNihTQZPdLVID7M5dL5A8ZzOaTFoHRjkQoZGYZI1ICNPOnuRshC\nQopz8tsUVCpFYvPXKLabcpb+vhaSwa+FlIhuQkZraLzaTGJshIEfaKrsnxji\nQ1YoVIk6ArvIMo8sVm2WEf/u//cowdoLi6ZhOzHmGKJcvKCDHIWykaHD6Qsv\nMki1DBPYC1tG4IjXWfc2k4/tmNWs01y+Ekw/sIzYSfhJ8iA89YHcrx0scNIM\n86HkTcZw+yp528m5hCxXATIRbgQfqkEiN7+p80ltWt6RB3dP9Jz8VAY+YdL1\nmFNENJYVj6RRUDhGXHc3qfkzaM9tFQcgRF0pYUtYi1z27P9uo4j/ho8RDZZw\nT9ycHlrFRyClGz/mXzbMJ00SybO+RxKbattnIuCua6w2DEF/nXj6YIXIYhk9\nmdWM0K81GQ7M5vwfID3I9aItbX/GAXOpjG2INTucNLwSUyk44aVLmWAyv7PZ\ng2JbBheplgl4OuPEp/wH8nI3rrxobAZI7glz4+jHo2gn/Awkp3Ro7mQxnaBE\nKY2mzu+k6tr5CZMrUS6ur9pcuwcZQqeg3PRmGvHcQwAboy7kxHne2wIcFB/j\nT+TU\r\n=wyIU\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"b008ede8c0d581314d3b967bd295990ca8eee38e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_9.0.0-canary.977585650.0_1606920055677_0.06137649399120604","host":"s3://npm-registry-packages"}},"9.0.0-canary.c7edfc7b6.0":{"name":"@material/density","version":"9.0.0-canary.c7edfc7b6.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@9.0.0-canary.c7edfc7b6.0","maintainers":[{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9a1fdb56690e6996c7e544f18fb4180d1fcd4740","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-9.0.0-canary.c7edfc7b6.0.tgz","fileCount":10,"integrity":"sha512-EXYJxgAcsHu+KgK8cawpmsuDlj4vzCK+1ggs/NpJFZGNeWZrGt1Lik8Chz3e0Ofvw4EkMZ7WDagTr9lxHhGEDQ==","signatures":[{"sig":"MEYCIQCleQLiVDz7UMPg2yVWReAETRP1njp3PMq5mU16MUdP7AIhAJOtIYit+o8Orp99M/FxQNwVlWCXuTTXAMz3Ewr3tJIx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfx6lBCRA9TVsSAnZWagAAkkcQAJBpBY+fwVE9+H4E6gxU\n/U9GbRkbXp9v/bDgpOgzJri4k21p7zmk4A35OdlILbNZkGkMa0xgfGnbclZY\n5Ux7XIfDJiLFInoLF6+wNkvBRS2X3gA5lMt+c/ZyANeN/ttKQCBLxH64dnPn\ngsObubwj+HdbLCj+wn0B2JTeKzDhc2x2ObWffON5bcJuFvtolzCA2HN6wLSa\ntHt7S3AFyqImg6qgT+VexZ+XKSpW3/PB+y/tyqYhisR2hQjDiATz1d/xXCG/\nHEbkyJ/mFsFUSoicdAUyfs9eECrFYDCrn8ZtY6r22q803Vea7X226EgmeagJ\nsc2Qie9ajpVQNL3MsTDsogornb+ju3XAmVVeKCO7tlBIoH6vc80a/6ZZOlys\nfVcmWaCkvfRvXg00aYBp8WIHQa0b0QUmrc/zAyBFVoOIe0LiO9fxrYX21VWG\n4WVB8P2vjSpztSWCczwjaDePQqi+HBowDEha0l2f0u6ejUmN3djlHgjNA4qN\naH5JjOxIxpT16CcPrdCVb/Iz4anF7gYBcuCrMHV0Ckjmtfiov31xLNJyyUJM\nIHH54DNu1rKW3xE9Y99lrM0Kvsb6wYFYl04C8jLDHfY0/nj8nUppoXZZ6ORO\nYXmPAgDSjWdt7BxeCnoJ+tnKymONO7uiedjsnCiO0byUDjpvCKxKYROakeW4\nNuRH\r\n=70Ba\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"791973660a1d63a77aa10d2bd0df7c0e6ea94698","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_9.0.0-canary.c7edfc7b6.0_1606920513407_0.9457236444032904","host":"s3://npm-registry-packages"}},"9.0.0-canary.4f3347306.0":{"name":"@material/density","version":"9.0.0-canary.4f3347306.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@9.0.0-canary.4f3347306.0","maintainers":[{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7b56d456aed707680e6bb58aec09234bf40bc528","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-9.0.0-canary.4f3347306.0.tgz","fileCount":10,"integrity":"sha512-NA21kwGaeUjhRtCveW2R4EAzsPpZsmufxtWB0gO+zOiEWnNPiMm8JQ925a7xj67JWmlO7hN40kqnDtiUQoVw/w==","signatures":[{"sig":"MEUCIC0EHn2QfA6p/AiNxyGDkAK2cY3KIoQw9cLeDxM2YDntAiEA4OEGgrAhSY50CWH+Sqbi8FjwAP5oW4IZA3sNVdyNLVg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfx612CRA9TVsSAnZWagAAvTwP/10rGJmZMPajb2Ga8E1h\ncSBpVUDilzxx/W2HH0P565L2FUiOL4xL1RANPo5Q4La1iGk1Ei8zqH8dYuF/\nz24iDcU94/YGso0FQpUhDRTTKAwkiwbRfhpXrKgrvDXaAUH9yxDxvSCxUg7a\nBX6IIMNpWAht25R2QoTepUwQIweeWp72fZ50aFyxhEbCBctDW4wRiBhLAren\nSlLIJ4gsGrDLNfZo/IngQA1v9S5pMpngil3xTF9lvmHXaJWUUnParmgel1h3\nHayu7AbGONmUIX0kqHFH6AjT7cyVNsrDvmS68UktPLAM93Z3+gDvCXqVJjYa\n6jj1MiZCo81oAe6ulRUxZKQzr79rnkzB3c2jQFwDIlb2Kw4Le8zqKIjVuVIg\nWyMniHIpRHz5PCdUrq+EqW5jxeD3A8bcPNPzL5fUl/LO6pBLE2T5QkwQjaBl\nhjWZCUIGZ2jgS3l+yc83G+fyC/I8XLy1JahOPY+5wa9cJFtTK+lu7B0R8p5p\nsQmwjAyCHyBqFbhda6MMzUT8k1dqlE322PI1/0OQ1YIeHDB4mnK+twZE1Nyl\ncJG7Jh27tfj1sGnDyE+V/T/bgjN/uJRvyT1mJ0zGFKU1Uz9yOk4eE8QrkNzT\nJQ3VtVIWzAYf5WlfOQELgqNYq3QsSAFD3fK5NRh/6+s/PVRX20iOMdXtna8f\nFs4O\r\n=a4wl\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"31d08595c0470096709a4d5518ba7444313882e7","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_9.0.0-canary.4f3347306.0_1606921589979_0.7568637377049479","host":"s3://npm-registry-packages"}},"9.0.0-canary.37fbae10d.0":{"name":"@material/density","version":"9.0.0-canary.37fbae10d.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@9.0.0-canary.37fbae10d.0","maintainers":[{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fbd2d5b0703006901101a035a907fdaf15d71acf","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-9.0.0-canary.37fbae10d.0.tgz","fileCount":10,"integrity":"sha512-Mo8FBhX1fHiCbaz/MVdR1uLV/QR33xJCy2BxhAXgzkPKI5AzUd9Uk9FaQsXgHK0JX3ic5UptMiRJd6BSVc0WBQ==","signatures":[{"sig":"MEUCIQD7DCCRgf3yT7Pb7nIvYB3NqI0E/TeVbH7TegmuligYxQIgR5zFVY7tEzlZFAimatXmlhu5A0+S99yi5zT+aDaywUE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfx9m6CRA9TVsSAnZWagAA1k4P/jYeFOhzwDF5CMdPv8Iv\n8GUC0WnYAwS86G7qztpPtskobk/FrsbQzsDYfiqPQxbAQTUiSCnaP3UFV/93\nq+I1O0SLpbCGl8/93m+XMHbFPUyKPuNWV09AUA4cbJH5NHdBGFpOC6MOAMs8\n6c+yvDJUFlVnvM0W6cTolsBrZcvg0X+M2fNgKcav3zd64Z9CC1Vf1AY4UagM\nTI0H3pKd6oXMpGfBEYtSC3DHncBv70HODOYi8HAkYNfJFaXvf4mNW71ZAwpn\nxyqYx7jlZwBAAwes9jMu6AK9m75c5LGWvzkrEARVLu3ecDcp+q4qmMXqgSHv\nNFTp7l2dCaQbJzJVESRVfGBFpMgVsW73PiPpZvp4LsmKJcGVUBiSEpBmmm1A\nTmGdEb8uR0ZNFJJ4RtsoTkbLgAmhmv2M4XZlOmRWHPIleqNxgDdxZPO19fST\nE7GEp9qZdu1Ik2JY/Age4hzBVl5XbhLF17cyYvIbWhQSzQ7r8l/na/e4zmNT\nztntdSkMPnC55oRyP2jQbvzUlcyYmFu8qJj8zIo7tYYEBlKwDhQsEtplzmyq\nAhuUgmRrCRUFe6xVrGv0HUtQ1eszVwXfpFEnIx9Awwl0rre5nOI/WHR3ZgYD\nuvvKXN+erPSSjEUj2CFUEJ6mnoPJmhNMJPJEeyqYAC8l+9b8iRlJEYg4fY0o\n4wjP\r\n=DN78\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"104ddf5dd99e7bc09a57e2cae74614b7726fa235","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_9.0.0-canary.37fbae10d.0_1606932921509_0.993700960389309","host":"s3://npm-registry-packages"}},"9.0.0-canary.11da3c0db.0":{"name":"@material/density","version":"9.0.0-canary.11da3c0db.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@9.0.0-canary.11da3c0db.0","maintainers":[{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a35d8353a8753f9c9d669d04a339e398a1a8398f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-9.0.0-canary.11da3c0db.0.tgz","fileCount":10,"integrity":"sha512-s6jjSSKkGYgsFfUrBaQCAPFTaSKcY2C04f0lzwX6QNDi5r5JMgOsTxDFBhX8PrWorUNK3HP8OP1idJ2VNwGljw==","signatures":[{"sig":"MEYCIQDAP7la7SRWHvJics817lu6etboFSqmHgoE1sICyt9GTQIhANGFMIQfjtg5nEAxFcgjTAOfTZIl4neRIWKwY8/Qewmh","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfx/dACRA9TVsSAnZWagAAP/4P/2kCK4VeJXIB/DQHrryU\nj/cPrXm3JfQLFXgxfZOOguB7pwgOjn5hmo89lQ0u/AXyy545YSvbQ7ZpyAS4\n7u1/wdB8x4ljngLZvXuf17NZS0OEY1+KunRRcCpt/jEO6GsqYeFJ8MFDr7Xo\nNsqvfGRBMeWNCmHH5prwy1TBC02eEd/xxbAVRr+IRiqXfN7GrmgtSdxdyxPG\ncuibxImmvaNb3NouvID6auKfYwWf87A2aSSe2Lhl5qVvsZq6pEpeZ9zQQNDF\npZCFBN8LkenN5IUR7lW6awHW26d5Ie35PltKkWDdISjubaHkwB6GSfYL7IHF\nPAvcaAy3xUvVMbgyi5vaIJpcLckV9x40oflJjhCLYRJ89cj7vtk//T3EePdR\nUAmMObyn5axYY6x6tSFGDKdreGYH5Xelih62g+GtetthbF/2LCJoqHr+Va6Y\nO+pAiq+vRX2YxCOOjsSydw582zMqrhIp/pMk2lYO6FlIZ3bXF06aN/Ed9aAr\nzDJnvaJtDxMak7CgXmJf2Yjp5QFFDoYZYQAefGMFbIiGtJPpRJ1ybXa6X0n3\ngdYXa8oXGZSQWtaZIWx5x/apZ0iBG5KD2XGgE8FAPPtccDBDzaZ/cw0W0jhD\nXNUc/EKXA2JLNHVBlDq3LaFaaN+LaAbyUvv9HEkqEU+MlInoDTsoQIK6N5vj\n8xiS\r\n=Egy4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"db8b5af79bc8221682000a74eab75c30395590f1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_9.0.0-canary.11da3c0db.0_1606940480230_0.760431428334204","host":"s3://npm-registry-packages"}},"9.0.0-canary.489d4c219.0":{"name":"@material/density","version":"9.0.0-canary.489d4c219.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@9.0.0-canary.489d4c219.0","maintainers":[{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fea2fee14980172b522c7af567fef18479b3654c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-9.0.0-canary.489d4c219.0.tgz","fileCount":10,"integrity":"sha512-evAjaajQCCTJ8JNH0J3nrN2GtlR/pv0RxqVanwBGTU1cSNJEDRuLytu7dP46XDiblseWezOepApXfVwIjDVSmw==","signatures":[{"sig":"MEYCIQCj3htGY1QOcIsXQUBjdO3P6GDng8KtPcR0wB1qi6WHuQIhANJqSwZ3dc2gsAKH8UwS8FN2PU40v7ElhrV8VcjCcglK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyQQnCRA9TVsSAnZWagAAkeAQAKQM9PtYRYBzupiOKUX5\n6MMaE2y/5VINPo1RNKa2gTmdUQFHfHWLAVNWfYQIqOPOumccwE9ozisi6o8w\naNXaLuRbyeYEBnpnL7PxeuMz0uD4qkJH+g3jmsTifFMug61TBEqfCclIBXw/\nYHiVJtKcnsboRUzUFT5hBTfNmrdLSyF53CE1OWjgXvWtKNq4gaHMP1E13nPo\nV6LS4HJzM8njF/Y9HdGcxFgPAoEo2JxDg0rf3q8BznduOQ/k/R9NULI4dtO7\niHs0XmYlFcLBfmf2XeJJ3V9o0kRE6k/4T3TJHoqgQ7h9/2TKkBqGZszOi3KF\ngboV4URj3JW5Cx2jI9NPOhEj+kuWU7UAFDBlw9+Ou4JABcyYYqFiQBVq5z9n\nW+SRI07wKBFg0bd2AxHYyVPUB5f13oiSqNRwRu+zSXopCxRc/G7iqq880YlN\n5MQfHzy0Kjzuaj/2UrWb3BV+CrJOtQ3P5+Q5cizrKvNz47jHOhrnCSj26bCX\nJtULroV9hLz9E6UrRLo9Z6Q8+FM+8xhOkmn4zi7RoajVz0ua4gmJNHqDhoVv\nKHycvM+M69A8NJt1R8IU9n+oP+Bz0sAGj2gb3hzT+WNrgBWrxjDaDMaXyPMl\nG5bwevsRZuRfyJetHc6b1wl9MAb41lAFDUJLh3O+Gz4AC2+ZaZOnYCHBAsH3\njRIm\r\n=J+am\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"b1c4ecae655bd87a48f6065e7c292d4b30cda43b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_9.0.0-canary.489d4c219.0_1607009318606_0.04972710711898576","host":"s3://npm-registry-packages"}},"9.0.0-canary.6557a69d9.0":{"name":"@material/density","version":"9.0.0-canary.6557a69d9.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@9.0.0-canary.6557a69d9.0","maintainers":[{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"96cbd95eb7e38d8398adf4b20508ad7616a6f38f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-9.0.0-canary.6557a69d9.0.tgz","fileCount":10,"integrity":"sha512-fu949VLt/Ldn5/3kzvRQfCVuGWEwyPzUZ5YLYNbygFNr3qLHizvxRRQK1oYKBQUv5FltOno1AOJ9BGfs4xOyuA==","signatures":[{"sig":"MEUCIQC6CdzMa2WCdOGY5clmB5kH3jX5O9YRvIEdZ1lxDg1BRQIgI/Ky8uDkOKhsGWzoiPiJnOjNtzKi4y9dnEOfIDhr4Wk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyQbtCRA9TVsSAnZWagAAy/sP+wYMY/3IEFv3aKccjiWb\nCrjN/+9UlOVTkc/Z+qNNN7xPrqiQdlc9UpduZGgWXScltvcwKIzj1VB5PuqQ\ns5adneU70jh2xhuZNOOSQR+cO2PDcI7XiQQaaVwfSG2zog0VKgG4tJi6ilqh\nYGUcAs2qYLATJGyvXJaol0ccMZJ3SzcCUfnMGBQC2Dxr72X2KsJnLx8WaNIa\n6dXJ8KY8nfmerjUKfVkJLLAMKB6P/XVZ3b8GqVL/+diTnV3EyfewXmePOA1o\ntPbw4EipLEBkOY/Sgsk2P38u0hIZluD5TkjLGToDQWUnhyxvT22wfEfcDBvA\nw4/9gtlSuIsRN6WNhaIQVtcvNg1934unJmYgs5suKmeDox9dxOgoW124viVm\n62vItA2nNrIxnTqeE4M4gqKpl5y/giwxVTDpF8FrOrXK+mGdqtL3YQpshlWR\nfwtSdAGunp9rKFvFYwKQeoK4ggh+YpMd2vi9q0Eks5vXjRbGRPcLXohCiElY\noFkwQBLMoT2MQBir/bp6aVFyBM0fDLP+XgJ8RTzdsMInR4EQiTAvnEDK8pp+\nTqqQxg7oYrEvHoea9akecAoVaS6qQR8khrV9ohMft+7TVKOeY9hQMklBdwS/\nUtKEohvS7MSt7rP66TcmpYAa/UPcM2ozne75M2W7THUcZgLNW/NtEgrQW5M0\nkFsC\r\n=2c+r\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"55ff05f1fcd2efe299d07cfd81279127a6fcaa5f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_9.0.0-canary.6557a69d9.0_1607010029243_0.7682595045901175","host":"s3://npm-registry-packages"}},"9.0.0-canary.4ea1b7c69.0":{"name":"@material/density","version":"9.0.0-canary.4ea1b7c69.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@9.0.0-canary.4ea1b7c69.0","maintainers":[{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dc198ba244edafcbee608d0a9b7d0cbfc3976f25","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-9.0.0-canary.4ea1b7c69.0.tgz","fileCount":10,"integrity":"sha512-vN6MwcwrVCjc435h15RjUcZ35RmLdW3yeZXcYjiWrXcvgmJqgjg5VAV6qBhgbPrkOg3blFrESB0Ld789v226uQ==","signatures":[{"sig":"MEYCIQCiHWybw08CEWiZmGFmZZkOCcMEenMX75tHjVlwDHXJsAIhAPrKTDmzXd4Vyl6oSgp1j5vQHI6KMhfrMEOm1XCfPyHg","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyQrXCRA9TVsSAnZWagAAi80P/2tcBMmPsSgEVaePanvq\nM2ReTFzLunJYccfk2oPWr1SRErgDw1wZtZtEVI/zBoZrmFOPjjjz401+uScb\nDJdNlU9zhPSL6C5ayn9Sq9IH1QOwKIUs/z0yT0Qo5Sasp0FeYrSO/CqVAzUZ\nZPeqQ8J71zma/h3QMGhEGHHAXr9huZi8npbdBAs9jn8TVenETFwxOaxGxow7\nkyVaMZK85pvaPDuYu6oO+9T/SbPlzitFFhe7rzi2pzzWDr57pnN9sPFVTRdy\n++gLW7Rufb53BYhgRJ5UROlFUVEj6XtQPQ0I65ajFbf0vh1y933EFUffLUw1\ntGwFNhjSOmPPnyYpF1PA0ekET9vKyAe/RFj1bxoIBwyBB0g7/lSnD7xD65cS\nx+YLly0aUrOIomKFVkG6FrSD+2gJMz6pTIHNezAN+BvNK/ywJRyorZ3/dTnt\nB57sdu/r6ybJAGgCRzYgjaCSV2y0YDOxMtNBe656JoKnxDARjFyPEFLyqPwv\nE+KwmGOa3F27nbDBFR1K/oK6ufIEK87zeSgUf7oedCbxiZGLW4dGU6n1K+ZE\novcXpw12P934+LOghPZVIy5phmIEusZzIi2MQPVi5G4yxdg3y1QocfRLTUCy\nRb+oDnwFVbGFmcyFvtAMnoPAFB1fucMrsYyNp6x+rHaEramOpqto7mPUGI7H\n5mMq\r\n=wdgo\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"d7307ed831dded5d9e22a8faf595a7411258793f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_9.0.0-canary.4ea1b7c69.0_1607011031472_0.6447309758304818","host":"s3://npm-registry-packages"}},"9.0.0-canary.eaeb78ce3.0":{"name":"@material/density","version":"9.0.0-canary.eaeb78ce3.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@9.0.0-canary.eaeb78ce3.0","maintainers":[{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0bcbf5146caf5a4c0c7f9b5d1a7f2deaa5c5f910","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-9.0.0-canary.eaeb78ce3.0.tgz","fileCount":10,"integrity":"sha512-f9PSV0sAKWlGO16oR6d5gv5qUVwnqZtY63OX9m4jK1Mn9cvY9hXfQbDgOOAaKPwaBlz1xhcBELg5wBIWWXDB9Q==","signatures":[{"sig":"MEQCIGxe2k/A0re9YsgvYwckCQ/fWn6thNRzIXJ6K9mb4Mg3AiAm6tsq3UKslF0cKJOLVPbbNsHXmAagSTdgl7WI1wKXwA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyRmhCRA9TVsSAnZWagAA+SwP/jknh2/dTO9OOGjufQEP\nyPJSz/UwG8FL5MoHdwyuySFt8LzSLQKC/Mnc7tsZ2dVoh05HJS5qlI13qYIp\nIs7qDyh10/bKyB9AeCxfngKIMW92wn3cOTLAc3APSCVJj//MPtFDX+5tZJTc\nMTkCUNSeTHTXaZgxDjXJ+s6khUe9W1EXVJL9hW2vd07eVSiFCQwloBAd1XD1\n2sFN0ADuNklp5qHGWo+8YAIJKfZVGdCG/2hi7ikeXcNDwzwTQrl6e+6U8MSh\nYWTceul+oU+00fykqwF7iUHZLhkLpNL3+yVZyBpvLHIeK2eyYKwpuuFzdxFE\nCwJhFGh289ascIaCghNIR3WziQ89wX0of/6IhoIE+76BWH/kk2y2NCyWGFRv\nNhMIFyswMuvNNgIqc5UK47PwPSGxbfU23AL9NiIUgUUyes8uNAH+Xkzizm4i\nB7PKoZQGuriVyamRmweaF0NYWoMaMtBYw6CqlfZ4ocV0+lrWbGA/DHoFaUQ4\nlkq1/395MtjJcMNdi9UEcoFLkDtn5tcAGZnpqd3i6zrWg9/Dw/PhIkva9Cm1\nX/FrRrgJ+v+wONCNUGhDa0LMm+4O/AyI+83e34CvWN0WejDoA38xDUSrt+pR\nloV5vXiGTJNIkyMthmPoazYIywpJ+BW1GXdhcXEYQfFZu/iBwvQMN7v4CFzK\nAE0C\r\n=Wr4D\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"9902fe5ed18fabe2d289f92e75dbf17abebe5a80","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_9.0.0-canary.eaeb78ce3.0_1607014816769_0.3155393871857426","host":"s3://npm-registry-packages"}},"9.0.0-canary.1c156d69d.0":{"name":"@material/density","version":"9.0.0-canary.1c156d69d.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@9.0.0-canary.1c156d69d.0","maintainers":[{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ca2a2a5f4ea31520d717a41a6343c104acee3005","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-9.0.0-canary.1c156d69d.0.tgz","fileCount":10,"integrity":"sha512-Y87bUpTsXNDOi1q5NVRBxIyTUAFda1PP1Z9HOvgpV19n7/F6YLrttLGcOFSRFfx9btUKf4EddctBzwzBrF71TQ==","signatures":[{"sig":"MEQCIDx8DFnUUC5RduBa0qkFsB7piMEhppRdgya2pzIb84dwAiAhATUwTqDPneiSdl7gDqx2EqmgWxUISgmebOdzy6xBMg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyU34CRA9TVsSAnZWagAA/U8P/RngRnkYQ6/SOWbiV0kQ\nnlUnNClRC/G+noCuneUX4P4v5m+PF+t+R+pIJtxOfYuEPfdUJIF/vzpWxJo0\nK/q5v/IMzUknlR7UjNzAw888LqcvdWhPg8DR9NwlsKjTmgZTCbwi4XTdPwJz\nKSiLGF9dAy6fnAt/yra45qsmqxcuKuQkj7vdPBnQJfBPxp7BH/6Qbpa30tSj\nSqVWmA8JAK4s1UDNebiL+AdwhYVlh6WhOrWmiFQDd9/Bt7a7cTHLrRUUIEvs\nGYRFM9ZSgtdja+PnwPImek4kGQJCjmy5H4ahXDxMHMl+4O3p7nJFqcCGuQ1e\ndBKddI39oqDBvYBWYCnlrIzwOp8UcODEYTX6y9iL3KTGnMP6efv/YDWlJa6T\nPb6VKvG5YWiejoKcDsO/m1m8CKEc9oHyzg6bTpItM0dL0rb/bRJR0m5kqGD9\nQxFG6upzJ2N0+cL47Bnbbrr83xkz+PEdmbKq0D1aVnJIgC8EFNLwbywmifkN\nj7cRF1kI2GhX9EXthXCQvbT6W05ulzr+DLzjwLsd14Dh+p/7nGSH+XUr47Uu\nV9fYXywEnemRdwvNNnzBqDeCCImUEBS5FV2YX6ZygPuT1c9LivBELXPZ/3gr\nNBVBbr2A18yxBMlncwosAQLnk8B5UBuvYBSfE5XMyub687IrI2wUlW7J9Kuc\n6zQ6\r\n=GW9E\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"2239befcb4baad98eef5bd67444b0f759e58a812","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_9.0.0-canary.1c156d69d.0_1607028216169_0.4569464038290769","host":"s3://npm-registry-packages"}},"9.0.0-canary.832668d33.0":{"name":"@material/density","version":"9.0.0-canary.832668d33.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@9.0.0-canary.832668d33.0","maintainers":[{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ecdb7aa7b104c1589b525779e8f802248bdf7ae3","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-9.0.0-canary.832668d33.0.tgz","fileCount":10,"integrity":"sha512-Rigka0/+BL2zvSvw0ELrXM3N+2tWhkYQ4ZXRxdo6vBmRhUWJDDKynk3Y12rnaaoVLvGG1s/lUbyn18kpH0N3oA==","signatures":[{"sig":"MEUCIEo9knaiMXboiWknxkbLkGxVGmKdwn17WY8H0PUtZqdHAiEA/aWXAI4PEb+lFj1KPnmwAUoGGmFVXAQdMRLZ6DPRwa0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyno8CRA9TVsSAnZWagAAnrQP/1GpyhgpxesaEaLZafzH\njaTTlP0b8kzqpVOVGW8xp41Y/hy+ml1TL2DNQ6NZIwi0Gkd0KTzyqLbeXkph\narJmzyltXqoRRgy5s7clV21brGDa7fuyBuFVLqhyDTiCezX8uNpnWHXmug3Q\n0sp29ot4SyQnqowPHgS3ssKVVFclZx/uF5gjFt2ExCSG1t0nLoiAwkp004j3\nCLc+XjDQ5Kf7zYj61Nx/UpoGnqfmCiRbBPYYVwvrQAi3y2cIF3EXB5V2SE3D\nhcIWDRqlUCd5kg22xXiV/akRSmxLvE59G5i1wUcC6nd1SGn1d10yzkCSP0u6\nHHDg1hmhnQXFy0Rb/q8nGjMeJH2Erz2+hjHUEowu8GifxGnQVMgC0EP+DikB\nymA8b4RFOIr7p2J50fTGCzOe5XPB1jJBEwLJmEJ+CSFC3TC3JPdRL5h4Yggg\nBh5yxwQ42CTwkVSTASoI2VZ/I5GK0EgaPdk8p+AwPqMILD4wakuOJheKOhaP\nPqICWS2U0l2/12Hucv0QHdBFxmuGyEjxXwtsad/ZX/yNUmfOCvRDshSTkgtE\njs/wTYQyFbl/uk+EklPrMYjlt44rph/irfL3W0tozIUg8go8NTc6zAdwruY2\n/G4kN4cw3lZRUvCkQlMFjZUdsg+DFt5FNnJDsUbZSEJOt1z7ItHE43Plty3K\nvysv\r\n=+inE\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"5744d71a59950726441cfb1b4e3ae33706069b94","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_9.0.0-canary.832668d33.0_1607105084016_0.5502202590204597","host":"s3://npm-registry-packages"}},"9.0.0-canary.4321323e4.0":{"name":"@material/density","version":"9.0.0-canary.4321323e4.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@9.0.0-canary.4321323e4.0","maintainers":[{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"79ef89a006377d5dfb109f922fcefde21709ae2f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-9.0.0-canary.4321323e4.0.tgz","fileCount":10,"integrity":"sha512-UxWkddZXn6fxlMbvfOsgd2aDRyu6p3L0IR+Pf2fgIl2+CZf1ot0/R6luTIbJmDsa3uhWqgthO4/IjDycqnZ4IQ==","signatures":[{"sig":"MEUCIQDX7e0cD60CMFirzEI4htyYnkvPu9ezLEgY36YCNxUVKgIgEKzRfYOBQfCh61N+veXvcViumjG0Gjw623TGMvxyOfM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfzhG8CRA9TVsSAnZWagAAwmQP/22zU0oz3hLAbUJ5UI5G\nW+xrjbwumNu1rylqZUoySRKzcnQ8v/g5T9mqN7oEzB6jJQB0BORoIrJAxywW\nl/TEyFzlnwlCnGLV/oz+jX8a7mzKfhCb5hKSZxhM641+uvGcuXC8ClrxRTQ0\nrm+2m3/1JZaIVC7mCvHJhM7HnigJp5yQYGWTTHVPFN1OAJ3yYg5+ri+hTtMD\n8NrETxMX5SIbHAK/ikuPzVp26S9fvi8icpBZnUtYsxSX55d+1v8p5DYqzmGF\ntalqIpsKymmMzTfhWrBvOfP7NhAAsUQMkxrnFv2NjuLcc7d+dYzWGjYjmDZf\nQhvYzmnK+H8AucFaDEcDqSmiC7+J8Y6Lr6F60qqbHfpbpZNHuMJwN51jh82c\ncXuSck4FsiK0tndRZDqcEkX76malmgmXXXj8BVaSyit3L2VMwGXm6tRd+P1+\n70KXfIOD8XK0725nIYW4HpQgkp+CQYmrEhow4p0pR+fuIA/H0DAzIGdJPF8k\nfma9M/RwVOPbckiag/Yt3gsn2jZQ+hoJJmowhOa6q1PrAvvpN1sQc/Dn6o5c\nbGMImCvXwzaWVMqWPhipHDEcYpQeM3pDTakyM1WxZGGIuANINlnv9dc5v+da\nle1ybG+Tz5WUGy/w3+0uyuT8paYE16G198twTg5pYBPN3bEgQOa8hKUMtyqt\n4cxs\r\n=ZudN\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"a838a6bc72ee56a967d493a841d4c69ace1f3f13","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_9.0.0-canary.4321323e4.0_1607340476395_0.4738163543608138","host":"s3://npm-registry-packages"}},"9.0.0-canary.2d5f32d41.0":{"name":"@material/density","version":"9.0.0-canary.2d5f32d41.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@9.0.0-canary.2d5f32d41.0","maintainers":[{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f232e91d718ec9edb5fad0e46f6ee28beaf584b3","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-9.0.0-canary.2d5f32d41.0.tgz","fileCount":10,"integrity":"sha512-OnVzMMHhnO2Zl31GF6+QmDh2rsaQn/DEh7Z7ch9/MhybtBuswmFpX9ow/1DfPzZXFQ1e8ZUdrmnlxKLFiyr2nQ==","signatures":[{"sig":"MEUCIQCNq0SppsBisj6lcwMhtU+VMUmjYTTUdmDPZ/ivO0IePQIgMIxJvKyxRiK92XQGWm9tZknVwQeSdfUhnlQ9sgUW+qc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfzlsNCRA9TVsSAnZWagAAZ3oQAIqnddPG9riHut/3nHQa\nSAI1h5K55Xf3x7vDnpgGS+c/CCHXvraMxAa0JlnrIxSlyy+A6R2GXpO/KtCP\nUWQ7HJLpGKfx8U6Tom/FYnthGXFn6KTrIhn9e3HmKW216DAden0OIJmo3SDn\nTb2aRrAusnijaWqXFztPPAbfCXAZRBJbgcn8rABI/vsqK2TITI8dx2SI4RVK\nFDS6Hm2UpYVUF46k30EbOlLl0oRQDtRPc4IU+yS736WWbLctTzrLC1L48ly6\nPgl4tkAK1Iid4m4oqb/rCixcrlMb5jtYbzpmhYxXX+uOWNQhwtr73uGVeiZA\n2RX5yVdC5inIpI/jMBv5hSlKZHmnXLVCaAFQGKv2p1PkfMvcBuwopTBAI0C5\nrtQ0ZOVNzD9Qm0/GEORAMAprMICQ7N9foR2G5VqJ+IVoDXICJKSXIgT47jfe\nK7UzW2swAnjYhv1t2JuwuERlC4QimmtuqW3n45nVpc6aUFD6cEaoMopQKSRl\nC0fFSLhOkIvX2M/3XKJ898xkCY0UlK0CX8+Fof9oif8/QA57WCIRi+Turx3f\n1x+dsMAMXviEnRVv3vf4e4b3L0f4Lif3bAGIHtsoCTpj0GDDFip0qYxEXkNW\nUOuoVMFXD6UM2Q8GNJ/Z/OLtNI1SNpxNSHy9RZKyGxdjUUPm7JKtXb02ouvk\n/7SP\r\n=LYKe\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"2c385d3016a738d32bd3c03bcc91bccf82981fed","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_9.0.0-canary.2d5f32d41.0_1607359245176_0.45484182905850656","host":"s3://npm-registry-packages"}},"9.0.0-canary.8239afc64.0":{"name":"@material/density","version":"9.0.0-canary.8239afc64.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@9.0.0-canary.8239afc64.0","maintainers":[{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6000ac19e7df9ca7273371c228aa03e449896cca","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-9.0.0-canary.8239afc64.0.tgz","fileCount":10,"integrity":"sha512-n/vuFPq34BudTrREiBdu2BQqbqTRmz4NMunEWUMXU/mw5aBJXTj17io0FzOetcNwkxTicJVSXRmmI39mlKftHw==","signatures":[{"sig":"MEUCICqS7lLNf9C6xegSybuAZP7do+ZIi3V1NCfIEC7Zq0RSAiEAo3frA7utHJDGItrZSBJzdSPu+sexHBcjjNCaw9eKCF4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfzocHCRA9TVsSAnZWagAAFIkP/1pCqfyqVBaSZcZMAT4d\njYcBHzRIormokFKJAhKavj5DCUfNdyCHb/XM2bPdwV9YDxfLKEbLZVeSoAg0\nllNOzEFlLsNCN6r2rxnqB2DLJLZv18GSY9MxvSIpaFyJBGd9+d/GefQjWml4\nnH1BnkONtI/gCW3GfLaJqUoxZDPBmwG033p9qDUpho1opY07ilnrmXMPZVKf\nFy/8KOso9KvHJzRJ6zsBQZUqYwZ51Tx1Qjw6xTZ9aqaCUcqmy4/mzw5y7NHE\nM0jCJQqt1v4enhu9hnTgMaL3dRv67cn8/k2GUjUcW/W6l0CLMVEA9nNcpMNY\nnF4SU7aVF1upvW4/OJUkfmLR+KvPE/IA+AQPcZJeYeeIaP4GbmvZglshiXd4\njyds73A34ustVYwdk7gUUaenDSMrnOPcIPn2EiQUnEq4o+nhatwDk9Hoybyn\neDRE4axMkmaCDkj/l0qEjSc71DXQiQRicdb3bxqujc3To/T7GU+RAUV9/OMC\nh5sw9AmXcQF1a8oG+xZWkbDo2p/aBZWhGusw630A6Z3iTt6ZQoaBV8sqJyBg\nR3LRRF4LOP69QJVABW006KRu/bYpCQLZl+xsi7EMiYAuwRgMV7MWqQ2OvTCs\nCfHhDJ1rwAYWgxgVB32XWReqkgoeLHyjAvshU+7kQtJYqFeNbUby5NVgnP3Y\nRhUb\r\n=bN6D\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"3ba24284e7fdc10c5aba869e2a2d3175867e0f15","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_9.0.0-canary.8239afc64.0_1607370503136_0.14912628370644643","host":"s3://npm-registry-packages"}},"9.0.0-canary.6871336f1.0":{"name":"@material/density","version":"9.0.0-canary.6871336f1.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@9.0.0-canary.6871336f1.0","maintainers":[{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3264f9bab4b9b0cb6dc7a4fb6e35cfce25134952","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-9.0.0-canary.6871336f1.0.tgz","fileCount":10,"integrity":"sha512-ti2sH7O5LkhGsgAdOS5DCJy7LyE0w7vpjLfw1O8HJIytHMYbpND9c97F/SW77rzh72wq6VUrFiNj/7hCBydPOw==","signatures":[{"sig":"MEQCIEmkY+K/DWT3NfbrlZ/hDyvyXvzJ0gdIosyIZ1kerOQRAiBSdCDMWWSgwDW9KytilXp1IpMo75YO5Kiq06QxUB9vfw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz6MZCRA9TVsSAnZWagAAd6QP+wTCzcl0Qmtq6Q/l1DoC\n3qt38V7alt58SNu1bSHenszBkpY6O/cURHzgObr2jnYKWgs8y3WKvhLvt/kk\nXFHHTZfljA63lJ5djkepRRMFDM9GOH/aA0BjXrUVw+GKuWSAXXWQEvVvZ3Ys\n52EP0Bw6nzu+f7QWnkcV5FxVjE3vA3Mgil8X91eNtzWlWJSnw4PyUcew2LPE\npCS/+7Xn8pNmQ8dcSoi30Z58cVH6uodt1yJBPn7kEnu8rZ9V8t/2V0evszIE\nj/bbRZ4GaJYcOTUOfRopC+ohSpjx4DhlF2xvObughwXOIxI9O90O3IfogcJZ\nwxTvkxgr9GxSvmQCIlaW2EtOvLZdT2+FMxqKE2av+gDxUfKKOeY7cMTWZ0FS\nOiD+Ng1HrN4oNcnki5rs/Sveyy04c6iRrMjiEdl+jzBOFUoX2Vf4ywcBTYFA\nOKjzIsF36YkZIBhlods1efsGjMSqwlpHeMjeFsmfxcVr8D2ml2pM0oF+y8dU\n56x+DzepGRbsh8BhzN8EmasR1mwK/75f9SdtbSl5BCuqlcDh4en9dvKEZyR4\nYI3lEZobw6QAmEAI2IYRPGYUpNn2IoXQ14R8daw0UNL3poBWNHyETIEhpjyu\nYeyDAQ1/tWNSnEQhAchwUZj0lZ3n452rtFkCGAfkP0k8M+5FPqdS/j/goAiG\ncj61\r\n=/Td3\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"aed20b07d4f2597c382a6ce4b7c723f6df0c3efc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_9.0.0-canary.6871336f1.0_1607443224986_0.04736337223003795","host":"s3://npm-registry-packages"}},"9.0.0-canary.9f718da94.0":{"name":"@material/density","version":"9.0.0-canary.9f718da94.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@9.0.0-canary.9f718da94.0","maintainers":[{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cdcfe909c4634a99c6f294f059c9acc0e3d3c058","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-9.0.0-canary.9f718da94.0.tgz","fileCount":10,"integrity":"sha512-BQYhTqHad3ViNKWDGdUvo8a3BFThAM6MDRXnKDMYfi4E7UWAOJZoeuHLsfhGiWPkS2/3xZQykhEflm+VTJIm7w==","signatures":[{"sig":"MEUCIF79EzUtho9OuN4LhDYE4YIDUWDNnsmPkefKBs0vcPsFAiEAjLdsh/MNzhboMmfTVWO8EZ8rSJgbdeBAidt+Klygjik=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz6XWCRA9TVsSAnZWagAAA78P/1ch/MKs80MkAHru3U2g\nVXyv5qNP9TOqkKA2jcH+aPpwIyEcTP+Ix5u3Pcioz2ArBpEgmN326oFHoodU\nKytl8bZaRfNb+776UFg8kQevSDF2lkDQFO9dabCG6rihYc7Uy2ujzljxcpxh\nZiOmjs7HmabUtvuOJpa6wSxmQWJBBA6tg+3meh/47Pl2TU28OEcosBM68PLy\nEpx6rUZzLRxP+bQ7FQGCrMDcTmCOQio87Oo5cNrYGBFZl5h6D7Nv8Fz6TzYB\n7yer+al9a0vNGBVy33w9OP9SPvHZk4O5eVd4NWf7PTGj3bZJwZQ70x+Sec5p\nmTixDMQNSRhywke1b4VwcgLqFEkjDb2m/dJkB4tA6MyScPe470tEgeBg8t+m\nGSLIXDHHV6FC1GnqjAi6dbvLRe9Y1JyyfzU/+1tEdEUy/XP4W74s+3Fg73UZ\n4KghtT3CV/+GnM9iQ/B/hjpFHX17AvxVsHEOHZn7q92EZ1gWivzcT6TvdZMO\nx3dcqWk4DgmE1qIWWtWqasvRizYrRZ/uexDDuzRPW5vtYBoH3ugArUUDAGtS\nDcsZEZqqfvBYLkaCfpChrxK2t6DDMiqpcCkEZ9prVSifNt9JRWAgZPzT2+L7\nGZH3gHbE/irQCZXZYniS75/aAGc/HVLeU0XgSWFKoSVlqtqJO+UUT9ZX4sNP\nWpXM\r\n=9OMZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"7fb6692f329c5482f22dc9fe691a20fe4c6dd38c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_9.0.0-canary.9f718da94.0_1607443925501_0.6562044427858829","host":"s3://npm-registry-packages"}},"9.0.0-canary.1fccb1418.0":{"name":"@material/density","version":"9.0.0-canary.1fccb1418.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@9.0.0-canary.1fccb1418.0","maintainers":[{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"629c8fbb46f14250bfbfdee5d9919d47defb5d10","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-9.0.0-canary.1fccb1418.0.tgz","fileCount":10,"integrity":"sha512-yRFJMjyjVHzZ2jCmdNxhu0dioNkn+E6y0aJXSldgeuER43xu2Sd8MFsBFTwWi6xdYDYBiPC/5r0a6lU4ugCxfg==","signatures":[{"sig":"MEUCIEcrVcrlr8blkqrXb07vbDeBcTNuySPtEEnDIda3SmxmAiEAh/N1jW7CLzIv8K3kiOwrdc3Noq4Pb12qTBEso2jNDfY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz6lmCRA9TVsSAnZWagAAxwkQAJq5LySt4MAKIeXB4NMe\nMi2tp5GkuQMATvppi/NreVDj1rOlt5uSUFzOOeqpNsH47tZ+h1pdP2yg6r8q\n1SeJdQYhPxRE5ZCNgDtsDXMxqCg5/Ivf0zxf6Q35NZRzar9P0QzqQBsOW6eb\nhbFqsvMnDmltGr7npV9Sydt/oyDir0V9dHFP0opI5tWwx53A8O7IufBHCFZY\nRWxxOH44sLtxSvIFH2ThNdKyEDXILctorCkJ5NqzizGB9Hm2f0SlJN4T2aBm\ni0Synh+SgsLAIhU5wZfCxOvc4q5xK4a7L+aI6UM72aL+DszSukC+2No+WaJb\ntv1CQQmUpP9A4zL6fgLOmbBujL0ItmzVRWEWECTcFKcpt29x+sxPecNAzUR3\nmxL/W06zk1VKe8IoNFJMzyOgCELc+5ksvBz0GHBn3pT5NGlchtidzL6uaenb\n4sbLs8HIEgcwd3HNyN9CtxnCMQvx8XeXEI3fFzP93mPKJRx+Z7zQSmqlIojN\nWTR7Xt7paxZw3FwYS3pWW0x/DVzsBEG76bcG3cnsI2yNWyN09wHXVFFLJx79\nvQ3aICQfya3gvTcg0PliC5VTZiK6T5lJWwNm4nuzchbBjpmYOAolddKncfcx\ns5ZSR4uAuk83D/dSLRmzSDqgJgVAZtB83FyRRdPTh3URhTcYIyHvJL0CrClO\n4C7v\r\n=L9e7\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"f9dd96ea7afbac37dca91bc879dc44ce4523c442","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_9.0.0-canary.1fccb1418.0_1607444837486_0.19860206044506468","host":"s3://npm-registry-packages"}},"9.0.0-canary.afb68894e.0":{"name":"@material/density","version":"9.0.0-canary.afb68894e.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@9.0.0-canary.afb68894e.0","maintainers":[{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"843f2347efd70b70d19d7c71bc022b6b22e701ed","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-9.0.0-canary.afb68894e.0.tgz","fileCount":10,"integrity":"sha512-Psu9dXyvnHMtqlDAcghpROVXlNEYFP39qtJd/en3k3fr9XredICg32K/4ZIpFQz8nivb+J6IiJdsaDG9oz3Urw==","signatures":[{"sig":"MEQCIDFIyebVfCzJ+igcbhnWC99s1HCa3sUg0AJ58/hR3WbEAiAcF4UxYf4bg4VfB23Po+UL4YX+6R7G0aHX37Al+b8twg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz6pLCRA9TVsSAnZWagAAytwP/R8vk1qBim2Pz+P7M+4/\nlS8S3uPL+jI4x1qB11FzNFLfw10HIKWFJA2aEwZMtvrI9ew9EaGJCT3uRIiU\nayP0la3FEB0Zu7k8/Q+A22gPYRBPl6dw0XWgEJT6hbzeJb4ZjQApf6VqANoV\nAH6QSdUSjg7BjfC63+08DIZuB59F5o9qieAXmbDVJCM8YqPe2NiyYWRfSIyB\nSTk4aWOO9P2/zOuwFeyyelWAL7dIvQnZnQ8C920vc0qVw804fKQgH3RJsASG\n/4zoDmMjCgwu78GErvHfNkUcRlo9I63s/QG7EvH75hJfSmRp/qK6Ye/T8/o4\n81HF1l/ngK6HI12+4UkRE6OxxGEm04wvOJrh/wh/xZ/XKaS5+03/EWCn/RxR\nSuy/No7fwve2DzsXj90PZ7g8StAwwD9x+yrKaKJEdat9LP1GDTdlVW+t07a3\nInljy6Y/Itsi8w2yd0aGhbvRXp3RHntCJ0fW/RdwBbBvk9rVAeS+s5IYzmTJ\nW6umsfyIhESSJu5cohezkltnXamGjXLPcQafpkP0pcVmPrbt2rxsauGjQedN\nvP+NCa6p1I3nD8cWOLJKp4MWpEN/NfjhVrDgDvSbVAPA4dqAzY3EY0zgOjvi\nuuDTxeTQ45CREH+cFlJwC76s5Dc5HWTDUYCvQZ1tca9A1yarV1t8cczcPQVd\nA/b6\r\n=4ZkX\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"8a3ec1a501083d67f1c342fcf5b11a765a586ca0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_9.0.0-canary.afb68894e.0_1607445067212_0.658320999498645","host":"s3://npm-registry-packages"}},"9.0.0-canary.fd88d40c2.0":{"name":"@material/density","version":"9.0.0-canary.fd88d40c2.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@9.0.0-canary.fd88d40c2.0","maintainers":[{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ac346ad19d1483b589d4e9de095f51b37d1b0c56","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-9.0.0-canary.fd88d40c2.0.tgz","fileCount":10,"integrity":"sha512-Byz2lmo6vgEiE/ge/AgAEuio6zORWyHQeKyveySvAh2eRQcO8PX4EujNLU2cKA5WBGU3d9ZWM2q7Revms44yfQ==","signatures":[{"sig":"MEYCIQDeivYOC6Y03l4UKup1AxwU+syQt/2CUKGPO4lTqxLjmAIhAIgx77sZkr++nydHAthjUi0qy4alHPt1ierUryEMGcxS","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz61SCRA9TVsSAnZWagAAtLkP/1aMBhjU+QWCE5+2Fkip\n0f8nXpKoV0f8emLZ72CP5IWjqUo55V9A2sWvPRha7bWaFjuDZE9etQ8KyS8r\n2jDajgAxhpspe2SyApkP7cUGhIsNEMDHWG31BGHFPlxPwOwxTud0cQUR1gpB\nOhTrdMcIvRPWlq9esTY3cviPLspMtgvnOeC9Q0j7ohkrSMNlTlE/vsL0Zp4J\nNydcVy9IXttNH/0+n/p2RKVHbBuvO4xuH6lrFG6Jp3Mqv0n3KES0p08786hu\n2KD6nW8jWTPeNUtT1XlGUatSD3XYOwootK/gyiPwHKXTLRp0jltNYZpWNc/Q\nGu9b8vEcliQjmNbEtG7pryjK1o3g7wU67UnRLmCJKyCyrkYavwoWdiDSR8/0\nDc3vOSGyoM45o5d9ax4z+JOpDtz0dqkSXrfEtjg0xAyTALWdgBgRm6LL+lYU\nyAlvQoxhD6fJu3J2o1IANxe/1iB8+2u6yho+8hemLprSjISFTfCU1Pnfj82o\nUTjqsQueqg7PCUrh/m/PMRYZz1DgCjIJBk8MLHxzU/kcd7NjjAaFZudWGuj5\nRXzghVSfLK5Atw0fqGVOHaQBLmWmYkVEr5wG6lQaeotD1upxF8oveTZrY1dA\nvqJStpCVSP2jXn8yP4eIYgMDC797PQljXU5LUsq64uPI/qZbjAst+l2fLk/s\nTVgz\r\n=WG/T\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"b0f8299700bd0ac44ef5acfdd0234b464d837131","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_9.0.0-canary.fd88d40c2.0_1607445841866_0.6516846821465541","host":"s3://npm-registry-packages"}},"9.0.0-canary.ba9e3109c.0":{"name":"@material/density","version":"9.0.0-canary.ba9e3109c.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@9.0.0-canary.ba9e3109c.0","maintainers":[{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"88cb7efac1f19c81cf35d71d28c3e9d57f93847c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-9.0.0-canary.ba9e3109c.0.tgz","fileCount":10,"integrity":"sha512-zaflynHcldEbB7wmXeG14pEq6CUudUeaK6vHzEqcH6oKEZO/4wDRfdplsqsdhmG2QR1h/yudLDvnbjAcZaM7Dg==","signatures":[{"sig":"MEUCIQCKvmVM1KsFSXWMyH/g7tk20NKPnbyQEXCcMIRedJnADwIgTjHGYSs8kktnx6AFhw60x26/N52/sBPgcz6zZfvs9+g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz84wCRA9TVsSAnZWagAAzlsQAJK71Sc/x7wUWjBfECox\ngE9xOMjr+PSKW2jkDs/S5i4xrDCc9JVcxalLQZnr16ox9lS6GAyNPpahJd9R\nYlW1Dop9llqJyjS4OmfqlbzbvDT9YEqO2lMSDvev9pucQ8iQqLZ3n4QTh/9w\nMIZaxgF1zU52ZGsLBJ6tlhzSZL1YZTmRhKlogfxwaQMN/YhNlAlDOyoTe3mL\naEzav1cLgnP4VgmXyYtUwHSWXWc1qwzOlYbHJUmMZAW/NTlJtk/x3mxCo1lh\nDdh8cYQGRWImuyFq+bYXkFpyhU926fUJnsRvz9hbaKwftb5jsSz3Ws4MNxxs\nIbS8opm1G6peANc2uTpAOHQrWMX2eXEWe91cEcy0s5M7iMd+94Yb1YYFu8R+\nAxmq6ayldYlPIrB/T9TYZ84xFajX18o17OyAPeVrTyN2JdqkZ9rvXkUXz9Il\nln1a9C0c6JQrNPPpaGooHuQwyPBudOb6pcCznuQGQOfRC92REAI2zI2wrHVO\nbUoB5T1aOYHD1+TeGOwXbYLjeE3wugspl98ryPiqn/gHor2AT6bp+eWE4ZiI\nih+s/EBzKZ9pcQJHab9mgOjTBQACPBB9o3V0VeLTd1yO3gthg2l+OJR71tX0\n0L81ZfcLoV0iT3RGJyt/HmrkzJyD74lD2xj7nxcvKCghrzSM2iycvO3EMM3D\n1DkS\r\n=C720\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"84bc4a2a193fb62b5721555a77b59e7bce321bd3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_9.0.0-canary.ba9e3109c.0_1607454256253_0.14316808014481186","host":"s3://npm-registry-packages"}},"9.0.0-canary.1085c3b2d.0":{"name":"@material/density","version":"9.0.0-canary.1085c3b2d.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@9.0.0-canary.1085c3b2d.0","maintainers":[{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"876a51530f366dbe5e6d4fd05f8deb3233004ecb","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-9.0.0-canary.1085c3b2d.0.tgz","fileCount":10,"integrity":"sha512-FFsI6t1dpuq7BisCtQE+cysFZXapGec8FHyahXw0LnuRmc3TciY/YfL+U2a6U/MbnTcXNsrNsbuxtUKTwKYimw==","signatures":[{"sig":"MEYCIQDO1fpl0Z0cnS1LUOZF1qTZaSjc4nhxA7sCTm6R2jc3OwIhAO1ahCOpCA+AP58SoJzre634zdZAyyTKJsK4VV1ud9nA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf0SEECRA9TVsSAnZWagAApZwP/ic5e/djhOCMUfo2FuPP\nBhvUWjqxFOpeo5lSEbj6E6hK5IkTtjFspay7H8n8HabdMI6XTNvdl/eQT2k2\nztOyxK5NYsHSrQYiUpkUhbp3p1w0uqhKgDjxOf1Wbr+j82vueJdu4xMiC3EG\nfrYlDTb3lUNTszJri2IjuRT+y49qBZMNo7H2L0YajUxkETNjzSo+KBht9vk8\nhYPlmJ1YneVuIinMopYKckMgDjDFFZhmkNFAlF2/r/eIEaQ8iU3KlXqurjlJ\ntTmUn9yuavK7ly0DCdvxNb7Hal2VBxMnpWePMHBfZ+fEYqvZcr7hFbGAI+br\nCngr4spLytrXtZT1tttuhYo56BvNCCxIZoRZiG0Gcy6ti0N1TnosVuJOpySo\ngAbV9ZB2OwfJ0Rrv0xNA/jcFZrgWv47gTbobHyEhTNfa1Ck1ocfTqo2W3MSO\nMDiEhErGHyoMaydQKg8tPLlvuPtnS7mfY4cIlPz7/V9+KA5WYLFb8S5RLO/0\nSajYJj5jgePS0+1J45tlneBfYCMEfuOKMs+XdbqVlzxNbRDKRj4AVAzaA1vo\n6hT6dWdH18HmMo0yorvv1rSS3iduwTvmJkT1bN/xamAFi6yVlJ1qe5zY/OP4\nAbx80TUkrxs2mRcbLdpW8FJH2tn3YfUh1/1rbkxjJsfmwsLhceBDSJfweQp7\nNCZ0\r\n=3prr\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"a223e0b83a78bac523ca498cc8389f361cd0f4e3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_9.0.0-canary.1085c3b2d.0_1607540996425_0.464264521352302","host":"s3://npm-registry-packages"}},"9.0.0-canary.c5dda809d.0":{"name":"@material/density","version":"9.0.0-canary.c5dda809d.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@9.0.0-canary.c5dda809d.0","maintainers":[{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"feea05e06b2469e90972e916feee15545a6b6eae","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-9.0.0-canary.c5dda809d.0.tgz","fileCount":10,"integrity":"sha512-uEcuxmkpdNlNG6DgAgW3mfHK17dGgq09BXvHG4DKqmHUzYCnxcebDRl8uYaqKgFTOd4Sabq+Gj9Ki2qTX4tyww==","signatures":[{"sig":"MEUCIQDGJ1xzaAUh+a06bXIue8/RloJaJ4k4ngSYXp2tYQK1AwIgTik8P1Tdv/phRISyFegRwjDNrawXjXXyvMzWa7M84Zs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf0TgkCRA9TVsSAnZWagAABfIP/iJb71ac5fxIQY3SKaRo\n+d9miPFFXtsS/NHPLDvPnqm6MrLjsNrFKIaLllqREPYuaxcX+fvuJmhob1Hr\n+3OtXRwXOMT+MXEA9ecZrx1Ag9YIayBQz0YGp4WUkheEvc+in8VQb+RvgwUx\nNCGTARbyjkBokcyO4rRCzKYq/81NDl4jetJ0XI3K+7BRxBXef7cORUujuj/u\nbWlRG7LvQu6vng4TMvHDdb+9FKH8UnRba1NxD9fQHV+rx6LNITzp2Y1gikE9\nd5VlI97CnqanLo9+k/qzTbkiuP4/pycsMDKQlviyjNrMsYurplrfJ4c+F6A5\n84UiPz7aCYbV2oz2ThvUK1+bJGUGql85oMygPZZV/V+k/V5u7HVTtOzpLmvG\nPi84izFDwvVDyPBXNHgEffu9pR2FeljjhP5KmScCOqLeV06L+C1LbS/Vt27U\nhbvqbRjfPAVtMO9U0qKuac6hgDj99HeZv01m01W26dA18wYdMTZ+mvuNZ9aP\np2gofBU0p8VN61Pwi/h8Cor0/2okVjamAIAd/urW4GCHC5qPFa5WSvfS7X6z\nl0YExH4/2VSZAFOLYOrPB+cMbDu3o+zgNegxWrVC+7lNeaDwphNAEC5AoFD9\nHEb2o/ZyoO22CfWJtGILHgUwS8mRRcHJtLzmORGJlkvR6FfB8aextDMxkjry\nLzMn\r\n=DUAn\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"c2bc7206e40f2f31377a09e53af457109018ff02","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_9.0.0-canary.c5dda809d.0_1607546915697_0.6263492005622981","host":"s3://npm-registry-packages"}},"9.0.0-canary.f5f1bd86a.0":{"name":"@material/density","version":"9.0.0-canary.f5f1bd86a.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@9.0.0-canary.f5f1bd86a.0","maintainers":[{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"abf05e7c860e0509fc96ce976ea11f7538d92488","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-9.0.0-canary.f5f1bd86a.0.tgz","fileCount":10,"integrity":"sha512-95D+KNwEZHr2nkdR5lsFNuSVP5gdusgq8srGAjBDxzh3sFHiSxsJDIXfbaFHs4QmFk6SOSMdW/kbnrxkTjxluA==","signatures":[{"sig":"MEUCIQCIslGeP5tnd7xZdvCyKP5hAoLA6bdOrvQRc96QJOF1DAIgGNDSCKrRS/R2O0W1ale1Axm1Mi/tVKEppmaoMEVEcDw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf0TxoCRA9TVsSAnZWagAAWGIP/RrU8VjQ07sdMb3ZlNEV\nmh9mzWCOrcYxELZ5Cpl38WFunA4o8CP1Uwt1nmvQAy7x8bX3YCUKd7gNMBMm\n67PQwg/57u/Fmsyomp4lDUCrvHc8x1xffyYx5QJIxVc7AVYqeOWUgywb08UM\no55BFCwQcFKLcOTrktze4q3U01cHwyf9YOOK4JkZqHxx8jIqz3W/weVxHh23\nk+58QU/2aV+jrwPE0iI0ohGIelyCVdVgEmSUID6HtipVpUbgfq/RcBv6bMVG\nQFTFf/dz8cDSQAcBwpA5RsFPdF+mB/hAhmBt0R/Ned55CJjrbiZzFGnAYs4r\ntJ5Yg0lom/ptrZ760bpkojsWo8iJoWknliCsMt1joS6Q8HwZOzFJzE5EsvJH\n/vGDgoxA1n66UnVYKB2rpr6nygAo52NARmeG0snsF0XR85vZ89UgzYLa3ZZ+\n9Ny7yCrvI257S/MDmu7cDVRe96pwqJgrwLI8rnG9NGUFr4oqAtkb9PNSgSWh\n1v42Rmhi6/GoSIiNkm7r210T1B0EQ06hnQcke+v8zGHmV5r7D12if9IcgKFw\nO8wKr+JblhaOZgIfoTZhKYfMpjmlrNVOsOVjwDdS380WdWdAg5VNoXtafK1S\nBnKK/JP4loUc1F0C87XExraFqaze0y1a2Yf484KmKK5izwYUDPvwl9GoIvfc\nv2M6\r\n=DJLH\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"86cb1fcac08fb433af0662cec8583dcdf435eede","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_9.0.0-canary.f5f1bd86a.0_1607548008076_0.32786452346176653","host":"s3://npm-registry-packages"}},"9.0.0-canary.00f38200f.0":{"name":"@material/density","version":"9.0.0-canary.00f38200f.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@9.0.0-canary.00f38200f.0","maintainers":[{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7e372752fbdba7827eeb884d3dbbd930c2d63199","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-9.0.0-canary.00f38200f.0.tgz","fileCount":10,"integrity":"sha512-uqKYRetJ9AOhjK5JuuHeB+KipEKJW+HgPSzOet4asJTUuK2N4oSF2W1sdLiHJYtqlLqS0TmpD3K6UkoodiFyKw==","signatures":[{"sig":"MEQCIDoQdzIQlzuWuO7nR0YrJyOeK52Tzru+Fpjk/j4h6JXVAiB6xa9vK8Y8/Uou1e09YAh4Dw/gnKCXqwXLX+B4Ux5RfQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf05NtCRA9TVsSAnZWagAARMcQAJLQV/+KWX83FsannB9o\nepXOLdZ0Bs8NgOlOsKowefJ9NPcvWoQJB6AYkgCyR4g7PYGWihrGAcY7fzZl\nVVMdOGXKU1ap2hZbGDpyBJd8fGBpLx5AC12SLgVbsLWkscYXtS/ksMz1CntT\niwVeI4Rf1/8fLeCIizqXoYP5NssYoYz/DQkKD1gUNL88Ky+TfgVCKrN/lu80\n6qok7NCg+QfpFTKXcekO8LY9z7Tkx5JJgTiI6ickM/U/WLDNSoXr5JDrdJI+\n1tHZOoIW3vF4/S5PfaDgBQrGKx+hn2hOpqHdDzuRPXduSp3n7TMJzryqxiDs\n5wuoakgq5RN7zMsoJP45nZT1nf1s5Rw/CPtb09Jbi9pqM2kbE808YS3QHk9I\neV63gVN+J+wbV4xf53bPBs0afoygoOvx8cpy/DxWNs7DrbyW/ceVZfuF2XfG\n5JXtiSrkI/gQmplUNL/hcMGZp4MZQ0u1M2Y7ruHupIbP98zZcdjbX/Uufp8s\ndOG3yhzEHLo7CvBOnSYbLrauPOiXCe15cvSkHmsrgCkUn7NvD1I8kbUQT/rr\nbfBGCW8sBHushKSe/zzbCSPjW2HuBpk1EisMcuVa0HrQuH5SbRjN+TuBMSBP\nNLOtpYZq3SacUv2d4+mO/O7IQpB99uhGSAF06Emc75NBeRqrBB3rNx6L/2zJ\na3ig\r\n=JNXa\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"2771c0048541c1dde142fd7f565741f0dbb83c20","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_9.0.0-canary.00f38200f.0_1607701356773_0.6532296878326465","host":"s3://npm-registry-packages"}},"9.0.0-canary.ac41a5729.0":{"name":"@material/density","version":"9.0.0-canary.ac41a5729.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@9.0.0-canary.ac41a5729.0","maintainers":[{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"36717c3283bed31fe7139ed2dea09c9b7829c28e","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-9.0.0-canary.ac41a5729.0.tgz","fileCount":10,"integrity":"sha512-PivmDPdW0BGsTZ02/t1Zb2CWEqXWRL5P3HiIXJZc5GRhBzv3fhVwbP+VmQf83pxwrBF9u0SwVTOVF5jOwUFnjQ==","signatures":[{"sig":"MEUCID2FM4EBChcPYbk5UcW2QC4KrGSt1JLWBmWOPShrEC8BAiEA+U8CxGq26wn4P/xskjQ078vCNc1yOTIeJ0Lmrsp9QjQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf053KCRA9TVsSAnZWagAArzYP/1JNMAJUI38sSCqshAA7\nJl37q07qk4sSEVPKwFBkVYUoTzSp0QtL/B0CMGcd773ACnPJ8Z2HNdRDgi0A\n5R9iYxrqrE3dhgEb0VuztCjlizinhJOdv+cPGPzysVV7rP4LzZiZdDWDpfhU\nEY+wkwKNihHtJb6Q/91sut/RpPL10yQA1uNW7azDvBl9jQhEvACaqgGd5dUX\nyETwY3qGWUpIar2giKITF5FBAx2EOLAWZU76REVJ3oiUoPbB6MvEy3cSBZLQ\nD0A17wFHzaqjmajC4/v/zmOi5vMl7j6wttDGM95sYxjPZ4DQZ67bFnEi+KwU\nzMtViY3CLROoSZ8F9vZr5acaYPZZehKbidfSQLhPVl7MuKsRb4hetGlUX5Hl\nTlLY6LTVyvU/k78bGuaS7dRBSJmBgSLnifJ+8YhK7iGUErewC9IM4S+vgx7t\n9ADqDY+swz9glGqhNJo58x2i3sjald3lk7PMGYVQ5nQmD3pkgqeIoLpR0C/s\nhPueNchDFldj/Lp5Pb1G8zerbELvq4tZAAMFekmllZoU5V4WJ18hnn+nqO5w\ndz5iesDVzBq1jXFr1d5X90QtvBo8hYDxGULga7mpjL1B8pR0inFPHHgG4+ZW\nkxSfENPXUxO3/pWlTY+Ax1cjZFcvaWFSEHuJ0q/SZfjiuWHQb+n9PCINeMNI\nT8MJ\r\n=MFgh\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"a8313ebe32ee1c67ef38d5e9ba2b5a4ee2d08f77","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_9.0.0-canary.ac41a5729.0_1607704010137_0.5093257454843696","host":"s3://npm-registry-packages"}},"9.0.0-canary.7fe0e4f05.0":{"name":"@material/density","version":"9.0.0-canary.7fe0e4f05.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@9.0.0-canary.7fe0e4f05.0","maintainers":[{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"09776460af4d170a9081b60d51a13dc51b13f29f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-9.0.0-canary.7fe0e4f05.0.tgz","fileCount":10,"integrity":"sha512-cGbDRgQLRRSC6Gu52PxB/Ply+zednTRnzHJwNKYLg0RpwTACNM35vo95pwXLkKNQJpiuJ4smrjjlMRTYDk9IdQ==","signatures":[{"sig":"MEUCIQCpXZ+AfGRh4+o63QZojPEfzxU3iSwiRo9/OS2swwELuAIgTK1V+LOuAWQobaeIfjDsDtvhlsif9Kysjkr2bmJb4as=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf06aTCRA9TVsSAnZWagAAhM0QAIH4qYGGYb786VgVZWz/\no/J7TIqJ3HV5soelIaCGOqxdmEcQmFkVI1i+RVnwF9RH2jJUxj27wfR+MKj6\noaJQn8QkSUWZxxk2dltFnxPszGuF3CNsIDo5zoXxj2uQzlgfSsUhsH7ZR/Ar\nNUddbfHI/07LKiE/KavDNK75O4Ts/70XFaRWpQo//Hyn4t47mTTuiEjgW+LR\n7dYyzZf4Rz011twCu9+ZKsalyXH+rsbfs0FqsRNq4TRAmTkqticyI5gUjCIn\n7NweiIKaLlFqBrce5yH1EXZsTFt5FKcVzI0V6nSH3Ex4rcF9bVrfQ/6gbSRl\nMqnyGYpSP8YMeizXmw87aWI4vqfe/Xlbhsyl7ayVaIni2yzKTH5Tj2sYguXo\nrmdK9huQ/zDCdielPkfSpLsEnqhDz0PbXsoplfHSATdJw4gqPmJeBcYkGncb\nuhGqz67mxsXxz0sAKtbEpi2aScvYr83bidd391ZWWY4VqRGsxCHN49WrYoG4\nZh2Hqjpbqmm6c33w0egsnfSIV2zaQOVX6rorkhJ6to7kaLqj9C4SyXlfRJCQ\nGy5iefc0vvX9DFIqFaNKGKHYLqgrF4Iqlv7F7GmSc/925J844GJTz6axdZSg\ncuZUrLw2cRfzsTrJ4YvEx+LRkEvW2eDKJDbuiqiwYTB5vXjqRYiqfTjCxdU8\n5Nen\r\n=D4BT\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"174435b67952da2f175e31e1db54647a2722499a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_9.0.0-canary.7fe0e4f05.0_1607706259016_0.7864555197828378","host":"s3://npm-registry-packages"}},"9.0.0-canary.9244508bd.0":{"name":"@material/density","version":"9.0.0-canary.9244508bd.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@9.0.0-canary.9244508bd.0","maintainers":[{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"941f0b51972d5c9d5d5e24aac4d84068a9a98c4b","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-9.0.0-canary.9244508bd.0.tgz","fileCount":10,"integrity":"sha512-4vpNklVrszKvhElnprWYSJBCsZQVZ0K1xUDD0H6bgkyo/wRszDQDx149GKg+kjZEqzRAE5kTZ9j9A3mrvP/gYg==","signatures":[{"sig":"MEUCIQC/93bU3lSsUy4N1bIWc+pezpuWN45yiup1BS2J6n/1sQIgB4OTUoxaEx31GWp5H/6tCMFpgYoJV8b0peGgGdE7wh8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf08MRCRA9TVsSAnZWagAAbOEP/Aggj2Jc6X/6x7Qxtprr\ndmR+fF8FGfQYhL4m3b+1ikbwAYRLWvUyNR8aW4KuofzwtUF9QeWyD8YlDIz9\ntiSApO9oO66Xii86pvRu/m6iNOJtKizJFKUOzQxJIvEIZecG4XwsvMV0uxU9\nQltdf2rFqBVyRqAGJDbcwBMcpfZP1OEaTKrR6smxw7J1FlkDU5RA8vuzdcwa\nvD58GuvIzZx8Kjt0l7jIbXUxlHfTw8x5sSP24gm/fvEJQGZmSEdP6FOCplYU\nIVLW/g2Io379jp8434V3iOuZrjADqueUyowcdqsNMgmmAf5l9kmX5PSPNuOM\nHJ2EWr4ikiy2/33nw0QVl0Ya5p3xWER8lR9IlmoNRy2lH8scOfKYGrPvUrUD\nYH+l1cf4zJb5nJoMZFm5arOaZnjWMQyLKmbxxwhx95jNezquX0I/wH5fRxCq\npI3thWdvbo2YftYE3UKjm86B7fdbShTFy9pi9BKfKWrmfqWb1GL/ZVzxKvWq\njHcSR5YqQDaDQcsb4Bctx4E9LupsJk7fuGdqH3OsxHxM71nkwA0Xsd3YnZM0\nxMabkXWMUfIRJzKPRh3NJPMHKuTSIKi2L7Q+ySg7dxfOBVKmoKys8D2KolLk\nP96iAc4X9FalLJcoylBgWE4YTyEAh1zjAspGvsaO36EBDz2yVS/ijBd3Tj7r\n8QRR\r\n=v/c+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"8d704729c3b4ba17ed088d900fb2ddfd57d5803b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_9.0.0-canary.9244508bd.0_1607713552700_0.3216127192921956","host":"s3://npm-registry-packages"}},"9.0.0-canary.384a8eeb1.0":{"name":"@material/density","version":"9.0.0-canary.384a8eeb1.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@9.0.0-canary.384a8eeb1.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4ec00cdbe3d4365950f8aab35cd533c0eff308fb","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-9.0.0-canary.384a8eeb1.0.tgz","fileCount":10,"integrity":"sha512-8BbuSQdzqpY7f3mD7QFPOI9khxDrxqKZ4bByVufAiKWuE2vkpbxJvC7b0VpjqrHSB8dmhTiplflrETNxFikzTQ==","signatures":[{"sig":"MEUCIFPIIFPU7H7nXIUTKfU12GAo0dOb98G3Sc6+HbX6G8EcAiEAoy/w+vNZeGjlyKQs/a5GDloSmZXb4dOJy3XsSv1AseU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2j1BCRA9TVsSAnZWagAAVAAP/jqiwgD6Eiv+gXUfVwv+\n+t5ySjXfVcJfvCWwtZqURsT1CWp+eT0vycVU61f2n6pxWZfez1E95eXTFS0d\nytbIf4e9aLGECafwg+bDpRqB8PIafDoHdWgrbrgBtik5mMPPVhzRHi6lZ4z8\nV4ChnYpHqeyYnFtSCBdLNcC3AHqcsR0itYAQNvuCanSxmVWSBO4tZzRCjrZV\nJ+Sd5j9p9bo270Y51bUE1v27vhzAS2xfd+1VyCSk+XVWQksd86vtvJP0l3M7\n9dt/YZgDkwcESbYWMn+/K3KRoqLF4afD+0VhoBxGFUYlZtRVVZyLSc2E0gPr\n+yHRNVYdUGlOErKfQkeeQHapfoZmo7WAhJx++61INjuB5ZTLXcI2+XKpucym\nVSFf09dE8Ecr9OAdy6LzOwviKn+2XjOd+xXUIVUgtikds88XnhID1YYzTnHH\nI9Uea9GPJ3GdrmCUJOqfr8nlwGZXW0f5I1PSvgpYiEiG4Npd69pj8Ge/aMTt\noeJrcXloXtgrOs0ielWPZx4BtFG7+QBuLO9xJEYrKr+2LbtE24FEDgFTUU6B\ncmVszkAmfMlhHvkrvHR/Mou2PwyuS2oDD9/wg+TUlV0/Wqqfzm+gix112ybP\n9fXWrdgoMIBiCc23TuRlYYd+P1SqWc7ax9nevjDQbSNRdnXChEOul1TRt/hA\nVVti\r\n=49JQ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"21b2ddce32077f19c001df17ebc3c8ca9c48f8e5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_9.0.0-canary.384a8eeb1.0_1608138049441_0.3774492113052297","host":"s3://npm-registry-packages"}},"9.0.0-canary.eabf9d5c2.0":{"name":"@material/density","version":"9.0.0-canary.eabf9d5c2.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@9.0.0-canary.eabf9d5c2.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b650418dc17cefde1e3dcb1c1f4281ddefc3d5f4","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-9.0.0-canary.eabf9d5c2.0.tgz","fileCount":10,"integrity":"sha512-HgOP+ij5Z5Hsbhqil3j68i8qL9HhMvpLVFXlNmY6c+cow6Ojgl1HM3FIh0YiZVVchg+4jDxojs4Da0RoUwl7Rg==","signatures":[{"sig":"MEUCIQC2+i7DkyWfV/PDlokpk2rn/d7hea1vaD3FR1Us8AiX8gIgaQ6ftFPV/f73kmvbfanMjYlIeY9Gv/DqMh659jAmD1c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2lFWCRA9TVsSAnZWagAAavQP/R1p6muUnN7CMva2oSUn\n7+jQ8KVvNVE12PVWr4iaRtG8aAPEOyAU2+bSapiv4PZjSBBnD4hPza5K8eRs\nv5TRy3E76LJKu7JSXstvCZZq+pSs6eH3cjcq1P/gH+5EsgLVwKOsNXNb5jMh\nOacV2QvkXR2z/IUCMuZX7dwZDxAj2QIKr2yMAWg2ooCDcJ8S9g8YjV1tP/SX\nipDW3PmF0sOm/WATlaHCnUpKT0Wn5bJJOGJgVU8S/Jc/pfu70M4lwdbPvieY\nWX2g5qL7zjn+aqCWG+HcSdsuDmz5DBnq330g6fsJfSBx87C13NjTS0IiCrHb\n4hPyPfVaN7PI5zJ9Cfbsat0unyBCWL6Np9vMRUnqYZmNC8E6X2TuATCy83uF\n6wCWplaJDv4smRQGK7zTdKPXC4IIPrfz0XgZcIy4rVuWMP2RPC8vCuseazwt\ncBnwNrvM1tmqMnSZUbB8HKktCvolAZOtg58v+dO6z3A+/wx+0c9jHokslk88\nD+lJFC/HzVdpJ+5+vp+VtZD6wv9raak37hp4d6Z53P0ZiApzGHTX80sH4fEL\n84PMrIE3khHddq/YwJ7pWfr4aR/TNDR/DM9TJ/y4m+WMIqwAV4KjXp7VCinI\n0DLJUN+CT4tYPW1HAmk6Ae81KOBFyCqMaI5s7kTgUyteXpXzJw5X3G5UczIu\njqef\r\n=w3bG\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"78b3a67c04374ddb43be73dc4daf2613746d08b1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_9.0.0-canary.eabf9d5c2.0_1608143190004_0.3268959095946138","host":"s3://npm-registry-packages"}},"9.0.0-canary.30fdfd06e.0":{"name":"@material/density","version":"9.0.0-canary.30fdfd06e.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@9.0.0-canary.30fdfd06e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2166244368596336ad6687c420062b61ebe7aef5","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-9.0.0-canary.30fdfd06e.0.tgz","fileCount":10,"integrity":"sha512-yk5r5crdt1KEUgFTCX2AF/vRpBuSSzrKDE08vMC0l3DKxypbFdhE81cF2CnNrsEF3n1KdYl6nY/pUDQspEEWLg==","signatures":[{"sig":"MEUCIDV0KY17V0PfwuKNT6ibYzZgTpAuiaXJexL9jOE6/6bHAiEA35IDE+RgXvR0i2T9+B6arj8uSiMIc5xKf1AnmuBqI4s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2lquCRA9TVsSAnZWagAAlUUP/A+PW2qHdFW4a1CttTEa\ny8+FNmzYYOeQg0MyFGjKdqJt269MF1Ta93sNJhZjayOeqlEbU7GHPwIpWlps\n93UEvmiWoxVsnZbqjHjOf87wOzCVl0uOkdf0nDEu1YCQPZPZPf8jOcbg3OWF\n8OcCfyFE8Wm89BbJkZc4bg5RDvkbzwl3G4e7rQdaqROtt7OxdTLAzTjfD0i/\n5Pku7k9MBrAJvf0eZZjMDpqS0GYL8jp1PQK33otR8y4k/vlc2Rq6vKzGsMFC\nu2xihvhts7NX0JI7ni5MKX2vo9qU79CwsyWw5Jmpda0lOu0UGorNo8nyxM88\nJohiVD+SR7Zyqwc34dJ/fYyHSjzLL+JebtwsZdKGrBo8xii9x2eagr3FXDxo\nlb1Jt1lxWLtWuF6q+SMLd7SuuWKb7V0t6tfrn0PrRYH/QMVCSOu5kmFsZjzo\nXSuJWuyIoblOBFqngoP82PBUhonZNvLesX5f5dihg5F50gBV7Br8q8WXHk2T\nlcHG3wi8rJiBfXwZwBhoplNISk2oUe4x0ffY4SrIJ6rifvK7EOXylKEhoE51\nLX7Blgi7lvIDBqY/KLKKFD4HeOx1eRR3udBuF3ueNww7G6kJ/6+hIXU7Qe6F\nDX+SK1xu6tPpvVt84r5xJJgerB49UHE4NgWWNIYwQ2/6upJOe37xjJzfyyQm\nRVk9\r\n=YKu3\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"f9c9fe091a06230b038ac8a71ccd652c7c662b96","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_9.0.0-canary.30fdfd06e.0_1608145581683_0.5206409892648023","host":"s3://npm-registry-packages"}},"9.0.0-canary.9590a8f90.0":{"name":"@material/density","version":"9.0.0-canary.9590a8f90.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@9.0.0-canary.9590a8f90.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cc84042030cea94b70c7ed3755954e6bbb7ac95a","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-9.0.0-canary.9590a8f90.0.tgz","fileCount":10,"integrity":"sha512-HkX+lZpx38AfSsUCzVI3YatsZERnIf58UmnmXlnpYhH2cLX28qOIpyb1SX+DAqvXHn8jkafh0kcB3xfyVpHkbw==","signatures":[{"sig":"MEUCIQCUZMpwY0A38bisyXAAfcLhi8zxm1EOwu/mkRF6/51/fQIgUG07R7CpFplEcTADaVGo1g6LvASf1Ofhu6ej2Bkb4r0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf4i+oCRA9TVsSAnZWagAA2HEP/2/djGwE7HjRAYFsoRpo\njBjF+DGZPTGaP8o54E7lz1WCPZ95dXT1um6E/D/v1h5uj871uB7LfiVLPXoK\n+xnKIzy9oueF6p43ojzpYZlJWbppxFDoX28KvXieG98VWAmzSrR2huItfRPu\nzrduDtLjtu5fZCYPJ7SzdwyRNyoQkjZhPOMBOYKvHwP4cY+7+xgjeTIIL1gZ\nZsw2bM3FFLblbGrm+O6a2V2PdjtO9ziZ4TRo75ekZFN0yujotGp6gqW5P6zL\nKh1+6C4BU9SHcX3rSCdS2o5+5e1SO4dlTCHXUPmaFpetw6EfY7QMGhNxwJdI\nkeP/eZyzkfrvlip3q/3YF/ZFNGvR6oOPdtRMAGsZcrFo7UDEKmn1DXjyPUL+\n1q3nf6fFgMqjThVlUTcB6XxMlM9Sl0pjM1Fm6IIoqUiC+cW2IPx7BEYTTHkF\nxfAtb8FhWVRJW0LZuR/bq0Xfs2cBifHsUJ5koQBTB75DLLwEsRkDsvWBTPvH\npM+0mKe1/9hP6boVonuGN+/0vTpWh25NTG5+uNSvO3Xf6XCIVtIviTeEUs+u\nAh5OGZtbHER2I38DcHP+f3bvUJ79jb64hrQ+m8lh0Dei4SivEMw2vdW8+1F5\nJdpRaFjEG7DNeLQkjwH2bzZJapp0GKRITwyL5f6wfAQ7FhltJZyvM8hfzer5\n3mlX\r\n=j91d\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"a592a11a03887b1e1535d4d49ea05db1b6f72789","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_9.0.0-canary.9590a8f90.0_1608658856183_0.6150837948402719","host":"s3://npm-registry-packages"}},"9.0.0-canary.f89d8b8f2.0":{"name":"@material/density","version":"9.0.0-canary.f89d8b8f2.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@9.0.0-canary.f89d8b8f2.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"118b6960084b7d813bd7ab0c56aa9b8ee4176fb3","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-9.0.0-canary.f89d8b8f2.0.tgz","fileCount":10,"integrity":"sha512-jH8HJSE58x5KLAR+QP54vSIF+WZOEcEWJ3GABMlprnS28KjOoTsZw4fwDgQf49rVARG7P9PlDCIgSIU2d95GlQ==","signatures":[{"sig":"MEUCIFJ6El6fil7DgpTggJ6Yzm3y5fe7RKLVOEus+QrTKpK7AiEA2u418sHtPt0Ixb8ww7SOTIZMGLr/DyYDWbESLdRx6FY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf4ntZCRA9TVsSAnZWagAAFv8P/380Skj8j/gme3pclljU\n+tXxiXR7DT+XUpcXKOjDuaoOACkV73+jOjqg2k8nmlAl+e3wmqEy2lO/C7b7\nxbcRt/HoFbKSK23cBz9aPuWpCpkH/M4ngDHAk3H0/AmCnyuRXzltYOGZwl8t\n0SfDSLx1UuNQqo7WEonPqMqWQ4KH0BG/i5o54XiYbmE/Hfb/EvRUq8qHx/nr\nVAfboBXtlcjMuW1swZ/kMhPNWTGXl0xcPMmiDWo06T47ddxLM3H7MLBPmJ1g\nbPVjnZyKKmXGjcC0uagH0CXOPYDvvqZ7+EllfLBxn3bAN2DzzXs80O4L+UwF\nrnvnzDX5S6kdsYNzhFXGgd7jEGQ+erEsjduV2K7ormeCgR4x6dCIM076jBu5\nW7Vzyp0ZdLfUG0OPRT88CUjmutT8HRtx7qD+JVon99fI19F6xp2vcClxpXpM\nkuFnNEU+RWOS73A4TgHq5a5uDp7RtUK0YuoxmxfCFfezmNr4MQvuopGL/B4i\npYKnaUFc97FJBmGtcBg1eWRqaV9FCOyl2jsuzVSB7KNBg48Dk2Dx6beK/B+s\nWRDUWqUVeo2dGXcQ/ieSmtB63RnnB5vY0pmY8ejWNJUvkddTBKunvrOXJIf4\nH47RT0oex6UMWR+t6sW231ye+K3NSirYWVDh9a+Q4t2arc2tP7BOHrhvsnlt\ne4nL\r\n=9yHo\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"e0d61155aa611a1a8573762d75379cbb25d2e7c0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_9.0.0-canary.f89d8b8f2.0_1608678233155_0.41950335578845777","host":"s3://npm-registry-packages"}},"9.0.0-canary.fb194dd35.0":{"name":"@material/density","version":"9.0.0-canary.fb194dd35.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@9.0.0-canary.fb194dd35.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3467e624b0e511bf2f5e0f497d0af3b74e665843","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-9.0.0-canary.fb194dd35.0.tgz","fileCount":10,"integrity":"sha512-Y6oCkZdcIBcrvUUGmIkdN3sptU6T1pJf97Jn+3AfGJtd0/QXXCvUB6pBBd95B5CM4IB+wfyq007viO5h+9UU8w==","signatures":[{"sig":"MEUCIBWTLKg+p2FpLyhK8wXdrIz+n7/1F1R6TU0OqajYh0qYAiEA6yiWmW4v71ZFPA9k0J3Nzfw7i8WDrRnf1CpftB1RxPQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf6kO2CRA9TVsSAnZWagAAydEP/3eUSk1nPTKnphu91czO\ndGgKgRFLUX7tl/wcg5ASAwhGfVyfnhrNUZtkdEIhi69rP7jD2knj8gUYNqVu\nRvc2UK1yNILRHjzeWVBAH9edyNyKCvY+vfmQng0jnPBTQJNiAeV2VENpblOl\nJMiyMHJqLrc4kOdx73UZvlKpD7x2+SLJIQKsD+Q5hU7FZTRmRz/usE10DseT\nv+JppY+qTgkBU1dP18bZKxHm6gNswBDPuxZTIn1idDaKmToonIWtPL4mympW\nYirDIJjAIwrTTuj4tJjN+Lv3kIjBaHgryr9tKIeOeHh6oRlAjcTG1Tl+4e33\nqIdpQS0g4l8GO7/A/RnzriXQbeqfEsy7WHBzCVfWesLEjx4UeYQvKv+ck05x\nOfgNcV5LHXDEMkguKTlzNUNyAfXuqE11wH64QrHt5g84qQ89Q4Uzsky/35+n\nS9Br/8JEFi6foLC85xE6QC6oKO8XVxEh23lVy6Vu0aJgAC+nP4oxEtsoRUhG\nVdPoHtoNAfWD0xH1/qFJLQd1Jy7V+l0fNT49n+HcXv9GSM9gfGHe//edXhWX\nSVa2+0u43T0lnRFsoZE9KN4RBF5w8FEOK5/NsQVwodZoqWQMkaLvc7Bt7jOB\nKtj3lHFWeZBEhMmdfhuRiVH8yBAJwRwSn3y/QHjyJ1kecSxHlB2zQdEVEuW/\nsDby\r\n=z5MK\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"57a5b34de1026133757436905fc54dc5b326d3e8","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_9.0.0-canary.fb194dd35.0_1609188278418_0.8843042885291363","host":"s3://npm-registry-packages"}},"9.0.0-canary.64f36e287.0":{"name":"@material/density","version":"9.0.0-canary.64f36e287.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@9.0.0-canary.64f36e287.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a5a20cf7355b5abf91b45dca0e4369a1c79f6365","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-9.0.0-canary.64f36e287.0.tgz","fileCount":10,"integrity":"sha512-VtNQKiXA5MdNQ2dYA/t4Ax8RcbkqpoNBqnEjv9I5SRrLcR8AdJePolCaMbhRX0QFsF/0dtsH4T1EN0oFFRaL4w==","signatures":[{"sig":"MEUCIGDV2bkE1vDiccD5H/3a5+GxE0HBehX3/ye/pN6FCZ8TAiEAlwnz8F5o23Hv5op/2ezhlOIC2dUvYjOEhp9ivAkN1rg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf6kkSCRA9TVsSAnZWagAAdV4P/iq7qxxgBaTYKCkIkRl9\nzJznwiALxDpvlOC1I0BswNxF1w3QONcGUn31g+E8/EKb5AArPQEZhYEUzFA8\n2S7FQ9ozrpLVHlslJR+Vq/9O7yxd0PGPtsoDzWO9qQxkbltlbX6G0nwjwhoy\nYNYwnESOhznUOzfi+KM4FipWyLzkilTJ+SxakHHUhQPxx1yvXFrSbktdbLLf\nIcZv5rj0rj7hmBrZV8xmhUmAobhRQc95LLu9516CNs10r5bLk+w9CJFlP+QN\n1nyJKJn9lHHN0Lfj4IlSm32ah1RY7n9hibgNBLap4Kcsyfe7XezqReeq5gW5\nxpEa/ZX9TS7Xc6gBx0Vgw2yild5FRYfsDSLO0+k1rzwVtHwd5j23xxNrc8HQ\ntyd578TwCnOCUQP4DQJaR5YyGRYaRHxDa12UU//dAYcfl7JH5wJOQc7JH8IR\njmwER2SByFPyPJjS63vmYEjVuZp8xxR4nmIQlRjfTStGNR85TmFlDPSIZuGc\nGi8HIHLt9W/FVMNp2sJsOWyxrfweYQVfDnfAxKnDqaX2RZLeQbCOtlMUFTA8\ndbXcw8Vzea+0mt0K5izE1ggw8CiII3Eca6lBzHzeoNU3YKmuN875zIMtaDcF\n/1XqhvcIbY+3rbna7qxYcpIvypqVOvqHsIR03VuVQKOtTGAueiBWdLn3z0E7\nAtdW\r\n=lubb\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"23f6770d284ec6c17b1aad9913827f8d456418f2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_9.0.0-canary.64f36e287.0_1609189650044_0.08145382196371997","host":"s3://npm-registry-packages"}},"9.0.0-canary.b7bbe7022.0":{"name":"@material/density","version":"9.0.0-canary.b7bbe7022.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@9.0.0-canary.b7bbe7022.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d7183420df6e788ddb0f5d962201d393cf9b942b","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-9.0.0-canary.b7bbe7022.0.tgz","fileCount":10,"integrity":"sha512-1fz479YuNYAcGtG3EcJL5Oh8n3HTr78YCptbqUdA8Kbu/wyipfHLHXuuX/dCiSA+des4k+QpQmzucaDydvKK7w==","signatures":[{"sig":"MEUCIQCksu62UvmC6/6dmnRnvkgqk/WkVVU7XcN0EA87K7qEggIgJUn/eOXi3BwptKDPXtb4BjiDk0Ji1nqUX53ikqs5aBI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf63maCRA9TVsSAnZWagAAFfwP/RUIh/Rks55pq5Sfs4G6\nZ0Xym2LE7qnfYEu3ADdo+k28IPoC06Ah7QnHuW77dqU9+4JDOcSO3+xyJQCW\nRsM71S6zAPCAxwyM/k07zgaBI5vGFcCXIlp+3IicdKAxSFAmb794uP22K3eR\nvWarp0S8adsX1EIBzZqAGvV0iUc3ngI1KlsKtl6StNxacApvFwrgMNuZHgjM\nHiFyXvMT+ZrKuryMJtBZ5R/ELHIB3BVd6/4m7H6aYoVSDpxKrgpsmVjEVJwu\naqNbMq2ga770zfBDHE0/j+XCAYr5VfDUm1JrgclixwHWgQj4XMhd9zS44D2y\nR7BLF5tCYsrBIxZAbtwGEHhpc6TAJFZhoPF6goOJG2BksqWjBax7eBJ3ke3m\ndJ2+KwBCCe5437YsTVAWJyBnBVcd8Y+nI4613ywquWJPNKSjJC+kUdtR2Xk6\nWBRWmHNLb1jCG+4o2g9FPY3xmX9uovwWQCOd/tpN/V3oVJKNBbGt7U0qOuig\n25J3Sm7o1HG151EZL9DqqAWRJePYNBRwo9n6fM+uZBS1aGd0sjD41bTxQAMf\nf03LOuxdMBd8oPKsyqrbukCtR9J/Q+QrKudhVXvzoZ8ZYuPhuVezklerpARb\nULCsEfKZIj+8gPwZVAD2Sy5NzcdL2FV87VNYlwy9i+qrVmpGaOHyjBElscK6\n+MvI\r\n=GFGd\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"81238a3912ea8bf30c97b0318ac2ce65f297eece","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_9.0.0-canary.b7bbe7022.0_1609267610485_0.5164496837960437","host":"s3://npm-registry-packages"}},"9.0.0":{"name":"@material/density","version":"9.0.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@9.0.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b47bc23bbc2b6e8e4eeaeea96508b781268c690b","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-9.0.0.tgz","fileCount":9,"integrity":"sha512-HXQ0GKiIh4X08H7aEIPl6KOcHIUtpe0bqIxrj3VboTQf4C5wN4qkiLys3GaZsA3guvT/T1fCoQOyAGxOtJEh4w==","signatures":[{"sig":"MEUCIDO7Vkwk5dww33HlK9YipO0/f96iv3no5FYVy2LL5AZWAiEAlUftFjIV66rK2fZMMJKuIvZxirorXoTI5Wb6Y74FFCM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13328,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf64c3CRA9TVsSAnZWagAAD9YQAJKJ2tNYfk8rvaAIquHt\nVjHzeapQLCActxd2liuGsQ6oazlfZZ1nm+PGVWIHEBJIc9TryIv8m9NRYo0U\nPx2DQNPIOPs1LTR7Kl/8KVzwt/SX2MJ89/sqTLl3pJydTps/lzTx8pfkSLo/\n256mbJOb78af50+tAkWL4Et72HgVgsuy3b5RI8QhQvy1xxewTaxjHVtwrXcI\nAiRqPq4wF3NkPiWXHp6gI4LO3RYQ6tDgepSfo9Y8YCHFU1h7Dv9FlVH/pKG3\nVhpJP/dhcjlhzRPUXcKxYTnjWzlhSu4Q9jl/67dLivU5EN2jtVFpA+pRgWYe\njnKbWY9o1y2lWoCp5/W6jM8cFkFuQnmNlKa64PcHiL6q6pzQiALXhAqvsy5y\nkJ7zbJrd0RM8JBUYpMwa1qorM8o0QssHk17WEGuy+PeBb3fD4C98FIt54us1\nyjB95V9h5VmRid99yFlWyAy6BG61YGTsj8T0j+xP1y5QQkTv1dZI+SXhv1DN\nKzMGDaFRkzPWctexL+lFsbPj/p9QHgzeZf1E4t9g0OZo5+eq4CMjn6ZPcCGe\nL6+O6+4354y9s+0+jH9REwmGS+FV3jhJRls/X+mGzPrfuT0JG5gL/aBTtOQe\nsh1omVohvlaZbf7TA7AZpZaWdQTdzSF2POCn/gOnPRGWVkd7811xpJkwvWoB\nXpfV\r\n=NgKt\r\n-----END PGP SIGNATURE-----\r\n"},"gitHead":"555aecce59125bc3f162b065dca47384bb5822b1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/density_9.0.0_1609271095258_0.2581051874873397","host":"s3://npm-registry-packages"}},"10.0.0-canary.555aecce5.0":{"name":"@material/density","version":"10.0.0-canary.555aecce5.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@10.0.0-canary.555aecce5.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bcf7d01c094c31385ca03e1548a149e0dc7c69d7","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-10.0.0-canary.555aecce5.0.tgz","fileCount":10,"integrity":"sha512-yrOFnV/7UfLDgljFtn41Nmk3+QfScPtH6t1oAJlhsfa/aXGxoWX6Do5+tmnkNxJi5UTsaFsGrUrjle741RNIFw==","signatures":[{"sig":"MEQCIENpo2VC3qGOYCtLAGbW+gRSWOzxJwIBA6U8c+zRw/O+AiBn0xTZrF2K2PzgUD66azFvFzp+vRhIt7qvzRWGXv0Iog==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13725,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf64dACRA9TVsSAnZWagAAtxAQAJ01gJLpVPV0LRDcFbbA\nhJZ9GKqD1eCBJKkqXA3gEeTGaGubAX/TYvjqCwm9dQ9LFWJwioCit6uhTbjL\nfCpK2Z9i+zJiDp8Cz/MJ3oyWCPXJ9FY/AOUubxrLQmy+wa9z6Z57YesFpKZC\naA6ortHXKnSK9zQ9sQixlm1Z0TNzzYmE3rCsjrKwVh3p8sMaP+WHqcrOT5GZ\nAuUS3dZaXvPkTSuER8wUFPyJb2egX1tYxeqOCSO+UFyLWQI88Rb/CBpv0AGn\nh8B7RCDspYxe9LnMpO15fYqNmn1/SWLrhmvbMkXsT1xFFOuUSc4CKAwcQ6yV\na1CqpNua5DK4zv6tZB1ClrLw/PD/JlkwPCQdiy/d4RT646xzWbKWGKk3JEXi\nbR7ImmIw5beHLfSXXtUG1e5yRl8o+8sosQEqkQ5BDp4x8fIxAbQm4v88hIFG\n3gv25OnaXUx4IoI9d0NosfgbJ9cJ2IIE9wfdBzS8mdh88C2hig0S1cRJiCC3\njl0/JL+JIbHbY3O5UqqnwPuryNrMlEK83H/pIyRLnwu2SzM9gEdOsUThOYS9\nanHZv+eEg7KIfYvSW4kRp7N8JXxIYZtyC2vG3qC0WOMXLR/l8tmUwTaXx2p3\nS3WowaNyHr82e4xla/3Ye+YJghDmo1fd/B/OCInV1b2vZ3A74Mrz6hTc6ubP\nNzHy\r\n=N21h\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"e455ee4f81b05c032a5b779ad5dacc2b952e989a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_10.0.0-canary.555aecce5.0_1609271103435_0.7869780009949361","host":"s3://npm-registry-packages"}},"10.0.0-canary.776c18681.0":{"name":"@material/density","version":"10.0.0-canary.776c18681.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@10.0.0-canary.776c18681.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e56549200ccf39516d8b9983e5bbe67c9476ad0c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-10.0.0-canary.776c18681.0.tgz","fileCount":10,"integrity":"sha512-9Y4e/Zym6oMOlgcZLaKQheTeC5heScCZNyyDTJ8KS10iQXTUTmQttjb8XjbJp1ehclFBXRTHqrdEUrv9NM/kzw==","signatures":[{"sig":"MEUCIQCkUXp6ANHGDgkaDcbZor6ZbwTIHNOepy7x8+HKMjblSgIgcSS03j3m3p9Qw5tx5CL1q25kkeuU0+no8eC/7DKT644=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13725,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf68wtCRA9TVsSAnZWagAA0N0QAI/I007nc9nco+9xOoMC\ncrAOWq3/dej09X4tT5l25cBmqrVNDj1HiLoM/ua6rWOmq+z7YPE4tma7DRHX\nwz8w1ulies3nCnJyWjI8NTeH8aqks69S/jO2KfcDFJ/RL1CbylYd/uCV0coC\npb+1gI2FBAnS4XUmNe6sacMOef82aMIguXV8MtF7ZA/Iy4FqS4dMNNd50PGf\nVcshIGD61Ab3kSrV+yUkLwBzNHaZcYWEIltz3OBrTqlmU2D53p/Zxf9lQp7+\nw9+Il0NN6lwt6Y6hIHos9I1KIY9hIgsGUYQDwuqczArjDmSp6XNgjx5Hdf3n\n/JC2D088xCyiZHPwJ9EBZIT5R9GhKQJFtaFKdongfSAIkDHw3Ql3ARLEGxao\n2eKXcRzLPjJX0AGS2hWI61i00CR4WsogaHvWFGmiPFQodYCfZwXsSSaFxyO+\ndu6Ls/CUrGzndQ2ImmytiChzD3qiInv3PoaGEhbRWDx2leCEW7ArBWvpHQg3\nzUdnriGU1Z4UI3gVLHiyIsjfdR8l0Y8HiIsMsTiCEggo306q5vdN3Em3GoLp\nW5qb2lzao5+Qsi0DUq4oKexL1WKyvG67TzAPg7K2a4Gizk9yJvB8Byfs8UQ1\noNXttV5mNPrGm4RLbhW6L+mq8RPMGiCD8pO4ubcNVia1Klz78329gd2gci0R\nfpCQ\r\n=8pVN\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"920f8ec98e9709a32b0564a5334ae434137478dc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_10.0.0-canary.776c18681.0_1609288749551_0.10477900323277911","host":"s3://npm-registry-packages"}},"10.0.0-canary.671d72d95.0":{"name":"@material/density","version":"10.0.0-canary.671d72d95.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@10.0.0-canary.671d72d95.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"de149bd9d7c76dcaf93bd0d327676576cd040d31","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-10.0.0-canary.671d72d95.0.tgz","fileCount":10,"integrity":"sha512-UvufX88wSxeFLY2D0GEMgxw7pkrT8ydSy27QPMKTrwHn4BlaDxPIp4BLr8vFM9/ZYInmi/c4jOrFYMqzg72GSg==","signatures":[{"sig":"MEYCIQCZBMRg/miYMHzLkCNJD9klEgSHyva/q8uQhSxLVcR9AAIhAOcp940bAD8R2oqDHjIs2yU7rhSwNBBUOWrex6lDs+pV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13725,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf7N7GCRA9TVsSAnZWagAAzJ4QAKTUaVjTQDx7IxQFLYau\neoU7SYFPVwcUnDYrDvSXD2fz9FaAEh6ASsMfXZDj3myHMkOYLBSiP23KyXSZ\nc+fkTwECkSToEt5z+sOOIJD3XeDqUpXd/wnuKsVwTe8OEXffrwB6leKrA64x\n8gefI+Eq04XsGORCOadkpwnyS2sgrx4SV/+xHVzRpXy5Bp1d7av8TDr4/AJk\ndkHAS2Mu7xbSEQyLRwJoJULYyMt4IKZVUuwDH4Oi6977OQZySf2W1Q1Ce7Jl\nGgsYDydzkBrNcNN928FncaRv2Zknq/Ev7kSXE7qUQA2TBfzQgDuUqu2Jn5HP\n07LP3bBfst7MfmWA9CEQFhxzIbPy95zsJvh91575cQdgwi3e5yfqx2ojrv/e\neSR8tLJ108dhPD/nQfv0dYAP9TXxmKQ8JcM/LHWELga9jLpnWZZQ5/lz7LoP\nWKyrtbtosXdwFApFeCGSYQTEhpVt0lF02KWuLheAWciS1c8gbsriX2UClw1l\nYzRMK4HsnXyLne6DrC4jm5Au0JyGq4EPki0dL2FnlFwVzDqkvLUCkgiJwUEl\nO6rJopixqNK7dwd6hvNrFOzJmCLYJrbcJ6MRxXAhu53ZzFgdm9h5mzwljlC4\n29FzQ4saTRUKqZzbrlObUVhaQeXV5gcbGWrrsKiY8TOYebhVNbm6UtpD33BV\nssES\r\n=skmE\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"c22803ec93a76c661222622456cf6f5c5a17459f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_10.0.0-canary.671d72d95.0_1609359045835_0.15858510220691158","host":"s3://npm-registry-packages"}},"10.0.0-canary.b4f5a1c9e.0":{"name":"@material/density","version":"10.0.0-canary.b4f5a1c9e.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@10.0.0-canary.b4f5a1c9e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"26797e6454a45dcdd35a8b55eff49b23732989f2","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-10.0.0-canary.b4f5a1c9e.0.tgz","fileCount":10,"integrity":"sha512-NDFej0mKF9tBfuC2Yn6hqGWuwKvpKe9RoH5thIrl8wyGlqD0I/JOxJJ+yiJKD9/vKGegPLugqogRiXW28e4nCw==","signatures":[{"sig":"MEUCIQCxU4okpf2+9WeZzrj+djtk/a/1LAoRQE0SyIwlMTn/RwIgez79e4mhl5gO3h2kPBvdx1mmJyYAYPyU+gqBE6x0ZMg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13725,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf7PT3CRA9TVsSAnZWagAALlkQAJSTjb0fLih1PyL8w7Vk\nLSHgWsWMPxbOMUNqCHZvtEpU7+tkvids0uMmoTMD0CI7KwedsLaTM10WH4Sx\nnX0jO8RyVMj8mH/rj/Hg/Y94mSiHAWrKcojbVeLNPD6qwxDm95k2CiZjd2Zs\niLeArvFXgr9FY+QyDzvnErilXFiq7FDkfgOiovoEu2sntzzvxfg3dSH1inkd\noTGjmBAFNizOTnMrR8H/QjS8VJYwPKm1Sm2fkSaOJMNB+A3UsywaHEHHycBz\nng5IiEjoQ9//+ydCigN+fnZLlF/7NE2cXxH94udcoU8riyff4MUUqatApIU1\nnyqY1PzgnRQjDiZ/Mn++gYonAxGf2so40BH0Dkt+BGPFj1QF2QHtgdYd8BWf\nCCqePP/ydiWxz7YH+WpK2N/bOmnUtY0Hy9/Cm+zNWqj/PK5J+WR4QHboDE8t\n9X9MXXe8Dkxzx3fFL2TVA7cXwFNp6Wj9N3oy1Ww1Sf7eppLdjnz8sIlGvMRu\nChmmuQ67IyDK0RSkEdoWYQaywZlER6Z8UHG7b0bQu6neMda58WmEiDcZN0xV\nI3N8P8iLN6vXws0Vom7A2WKS0l8L7asNlSJZm2LOA7H2+c6I3Tw27xZThaBm\ntTWFtcVPAjVcTL9qdNnNlIK9ftdQrG5MnpCLMAAGOZJPREmoJaIM7N6h2xlb\no5cl\r\n=OJmB\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"1db47387aa8e99022677270066e7cba1da23732d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_10.0.0-canary.b4f5a1c9e.0_1609364726511_0.03295905312960601","host":"s3://npm-registry-packages"}},"10.0.0-canary.a94bd8deb.0":{"name":"@material/density","version":"10.0.0-canary.a94bd8deb.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@10.0.0-canary.a94bd8deb.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ff6f04d5b3a19bd17a666623df025087bc48a3d0","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-10.0.0-canary.a94bd8deb.0.tgz","fileCount":10,"integrity":"sha512-jD0wy1TT6loadWMBzmP+8WE0kh9ZmmoozNz+H+xeHt0euGDkxEcxOoB3Y4kB1a5cUHrWhu9V+1yY3pXfc0MSJg==","signatures":[{"sig":"MEUCIQCTilKlnizjhVBEaUZBzclIW5qTH/aK3f07ph9st2bj3QIgfnvyspcefcYjz4CD98aQa0a0F4ERzA9bCbfTGsDDjEY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13725,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf7PklCRA9TVsSAnZWagAAB5AP/3mC6l7JWb6nHb1n+t8s\n14Uiwee5MLSxmPfL4S7mUV5Z7cuNj0DjhSxkgtHxz9DaY63D8Kd3NdJ7DN5k\nml7awUAhY2b40TJpaMkQJ7OFOOUKNKZw6u5cofeWgd/A2LwxQ1dgvaebX+QR\nxLSSnxEkxEMOCHdw5RrKi/N2PVGJnHa7+JWA63fqjZkHM5dM1jFuKm7wmOwZ\njr5ZjDdoFHGZVRa49FyB2wm+AkHWHr8Kn+v9vB8e3zWqJGnc7BsKvpXI1Nuv\nEJ6OyJYIvUyCGqSciKDBREMyZqC96gBRh3RYOsiK21FT3MaK9YxPmNo8T9pf\nEK/xUGWeQ858H13p0oSRO/VhcMVXnaLvJeczAANtGbDyy1TFP5JN0iZ8EzgO\nfm1h97Gjzt+NuokVcOTWuCIT5jy+DXjfPoMJazcKpJURObJQF+/97cFiyxaN\n+NAL5BrPVkGe9EZz6ELoqo2FTrJb3oQ9RZ1I7YlVNJO7RpF1GdC8/yfDUSGr\ns+Fn9Ca4UULvp7wWNT3mLmR0nedLIJWVlklfa0bANIQltA92BEbAM3H16C3c\noI07VDt0wf5dMdFBorW8FJpk4lZ1aGyxmiMt4udV7anBiLtZ/vGPgKBpOBdW\nIeTwrA57hTT9mjCVu4Cr4JK5U3muLEfvMKaARRscFQlYDzeKGCuuWrTkEaOv\nCkXO\r\n=5FLy\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"12c943490c76f911dda3861f863c68d7abf77ce5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_10.0.0-canary.a94bd8deb.0_1609365796782_0.2002418496576479","host":"s3://npm-registry-packages"}},"10.0.0-canary.5d128511b.0":{"name":"@material/density","version":"10.0.0-canary.5d128511b.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@10.0.0-canary.5d128511b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e882d6c82ea1276b2764926c196fb0d58f908e7f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-10.0.0-canary.5d128511b.0.tgz","fileCount":10,"integrity":"sha512-50heErsJCH9OEYEHgRHMX0+ovoPrwfI7kOXAggNoGCv726Ds23qYg/6h6z2lVIDNHSuy9Pfq+twA/0P/E7kJ9Q==","signatures":[{"sig":"MEUCIQCe5N8y4d7v6N2dllrqz2o5dPpRjmeowN/bJ5j8r9i4NQIgYZvifumMViyTMi3xTCsCdFHS6byz73La6veGlwWHF2Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13725,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf7PppCRA9TVsSAnZWagAAbREP/ROlcLz7/z+YwiRt9iDd\n26s33FldDyyxy1J4Ia2s+N3sQ9C2sy2wzr28z9P6ze5WpdxTFfNJIgO/ctTx\ncfG+z3tlDKgJtOeRa6Pw+iMWllA1SEewodume7sXa89xxPtENEHV8pO1lQrw\n4nzh3oSqh53B6K4OqulFpUstWQsSUzDMdaa/ZCJ3VKHR1JDAdPXjNlb56Ezz\nfxQr+hm+ohw6dUiv86IcmhscbQJk6ijaroieDrKvE04jyDWFib9EhbZriB57\nNudBIsOvTA+OAR9hNcSiCSyd0+tKeH+PDbijBQ61pAvaNtuBxhyHQz0Q0IYh\naj4hoLiS93+16OdIrLJ+yUnQlz0km1Xsi0onphZBEkUVZve+rWKayu7OshmW\nJc6cr9lcoBeq4/fkdAhZqaEnnB6E4y7PSvvsF9fwyKgerFlZh4XmKD462ro0\nIhiHcOK2p/r3CeVC7VUJQuEkFFkWgq0C27n55QIoMi8FNGWbHIDlRdjtrHWW\nHGGi+NKqefL8sB/KKYBAIHOuD06LHLV9CIh6ElYDD8YoELaxgCU5nd7RGLdz\nUD5gqRr3Nmrlrq+kE/ChXgE0twj41N02wynEElhIV6nWjUR6GTPRN5obZfnM\n9NNAp2TttI8TqPBz2cPvIrjjcYbbjPrqAwWTuVwm+ByV6KzTaaAQ5uB2o4CO\nRA4p\r\n=PS/o\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"05d17b41cbad4a8aebac080f082633a26be09a3c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_10.0.0-canary.5d128511b.0_1609366121070_0.6698648891190884","host":"s3://npm-registry-packages"}},"10.0.0-canary.365c69360.0":{"name":"@material/density","version":"10.0.0-canary.365c69360.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@10.0.0-canary.365c69360.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"95ffed4c8bb0e49e88d9c65c8206733de230e8ec","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-10.0.0-canary.365c69360.0.tgz","fileCount":10,"integrity":"sha512-xbcEjeFxCGiJS6a02pZduO4lHfmm8csE3DhjKbEQ63vMFWdfyro9H5rjVkxUR6lQQeYl2WZBbIPo0AkOD/ul+w==","signatures":[{"sig":"MEQCIDXhduBfyV1rsMweM46AaX6/6t0UJEEp5xcDWjyCZYVOAiA1ehhwXYtFTWc4tM7f6wHZx/t4X1yJTrmHFob9ynw7/A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13725,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9KYeCRA9TVsSAnZWagAA3swQAIdChjXKahUd/BdnQLCo\nQEJh7IUWstnr82Xd9umMh+3qq1m3EphakTcKsSGhYk/xa+YEsEzPlixEK4JH\nBQ2yYnF+Ob9nEPI7/4RucSpKdE8qjqWTWTPTddfzykYYp6dqMK1OcjK+255u\nKhsv1WvcLBJrBu2PefuoZJZO9kDpOS1MBE1ggyhkjrX5KukGc/hxyYoP0BgU\nQcmZ7cNh+9klSnbjI5jfc1SvuBV0vAGC8+Vk9145iBFMNyIsIWaBwONt9ENS\nRARYQGlTHov4SJNqqkAnA4vuT/nPTNrGzHmIJNHVsEhI0IAE1sHwM+e/SHwB\n/TSqobvE0ZeEfse4qej3tlR8Lrb6M9C09Idl26pYcPXanwpTZ6pqE6jaZq2r\n6jZWr3bYCu5xtdTBm10ihSTQ0y2dSA4jzGLCqSS2WDfD/Q+fyb2jMyQY89V7\nHXBVyuOg+ECSxmqKquvLee1gx7OGBUxgKrAiwtM6RUCJTCWFb0VP0Ube2S90\nVW6bNgSsuQcZWkFTFPkf8i++EUgRpaaG7Wttu3u1jFDe8hPzct2+OwCKHbo1\nL4cI/IN1aKQlmOUQE3Mgv74eCcny61AWsZfxkWwIHVYKkxkSYwATg6ZEqBGl\nNHnrRYvgUaTazCoFzN1a61P1q9GVaZKdc7N9nAgcjJYJwjpPyhOdLmB24Sbp\nQ4CY\r\n=Jmc7\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"0b060c30e2974c71db5d5ed87e3ab7918656edeb","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_10.0.0-canary.365c69360.0_1609868829908_0.5110996471880547","host":"s3://npm-registry-packages"}},"10.0.0-canary.700a8261a.0":{"name":"@material/density","version":"10.0.0-canary.700a8261a.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@10.0.0-canary.700a8261a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d886ba4e1970fa3860ce471934c0e4b02bafa0f6","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-10.0.0-canary.700a8261a.0.tgz","fileCount":10,"integrity":"sha512-speM9qkDQWZbloTfqfrk+hc18JgVlQFy/f1XIcsGcb83AVOTSesGM2d1CKXW8wmHXskPcVQgYHj5wyrCk1zdQQ==","signatures":[{"sig":"MEYCIQD/KnlQ0jlv23mdgJWy3Y+Kshty+HO4VtMwHlgQvsbw8wIhALAB1gxNZW++rRVlPh23bottCbTU5IPrIUgGe7ixHhiB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13725,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9NMpCRA9TVsSAnZWagAAiL8P/0JNFiBBzla498MdeJxc\nYzwC8HUF/3EwaXJFrLJ84GOdw+pPL7m5s7KJOMkF+ljvBGa84bJj6mkS9DB3\nkrmR7C5wemQD8GgjPz/cz+1h/Gklc3YPaMC9ov0E+sjeKZS0IhXxiMz6VMMw\nhqj+t2GF1dtJ8P68rLQSaMkoJ0EuquT7uP+e3k2EoVSeg32aDhzTopxcHkzr\nl3bZC2vtqeVdbY1Q/j5X7TLPB9pqPQd13GttkYP/Y4xmVsvc/0uchrbBsvtD\ncnbdE0hsBnC4pZC3XwMLh1AFp70Rvao2D6DVjd77cJucTh8/A3lesKubBGIL\nY0PknihWi9zfMxA6K9ZOA9ctb0DSj/ek3mmhlp+j1YYit1IWuSJmeaHQ21Gl\nJURlL6ZDy1aNzS0LkPjepnvPQliIbA7r04r5QLAO89Vgqq4ZGqgj9o87QizA\nVMVwn8Ev11i5B8AWSkmNOHRhOzY/GeA+m61T2CI6zC+8ujXIe5nmIZupbfZ+\n9wR0nFFz/4dSukdcxOmR2B2yG5N8xdP8Yr45mVWoxk5lrx6Q8dNzdyv5Cbus\neWRqSyqcoDBTlKoPVZ4MfZKy+Pc3MY+oI4r+0grcuX3iwecEv2uud+K9NVTF\nomHkhHXHyWKs5SGvCQgitQqsky6ZhcmzZ7wB2adqXU6X6AO3LUkbRqcBvMYC\ngWUW\r\n=Xzta\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"0e9aee4feea82b83f34c723b52aac42fda1cdbd2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_10.0.0-canary.700a8261a.0_1609880360643_0.9820052255719349","host":"s3://npm-registry-packages"}},"10.0.0-canary.766981c15.0":{"name":"@material/density","version":"10.0.0-canary.766981c15.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@10.0.0-canary.766981c15.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9e918f558632f979a67d5fc6a2fea4e0f27f863e","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-10.0.0-canary.766981c15.0.tgz","fileCount":10,"integrity":"sha512-VWSyYM0At35srCJACmqnF2rAmc1MWQF7SHODvAw+iFjuG/ajs1PEJQV9PMFcPELT7w/r9VsTlASTutQ7xuaTtg==","signatures":[{"sig":"MEQCIDar/R77fAUQIPuP3kCHJw6WaQSamaYzEQFpcThWCRVSAiACxF7Oy19Vljpvstimhu/cQig7e7I6FKHDxgOAVrkAfQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13725,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9OqLCRA9TVsSAnZWagAAy14P/1zD/Zzp+OKZUk0KWLrQ\nOD3Rs/9sV7L6+BcDXaRTkVBqqDNYqoNdzkzyVu6FWuA0+vxU0GAMYqh9PgiE\nLebkW/ic8Cb2hF706EcqlCwLFR01liXTzpB/0pcUAroUivAQeVjJ8knGvhX/\ncKqZHmeoOjy7+kWJhsb3tH0O5Zv9GgCcM85fCWYJI0/t6lTvtQd2fmzdUiD1\nok8xiQaGpiuEIE2+zhqmANyP2iMD81OyN8gRNuwJsQmp23aTL2EphNPqG/WK\nN4yL2BFh1uJSUwZr3UUsQgO3wkuMdvrdn6I4ASubtkRMetNWMZrsPUdxpnTJ\nZwbDrwsy9Tx/3kTTsNId8D4Z8cz4Bggx2Js/SOg0XBuNNh5ecg8oi2qU2G2H\nWgKCJgRpL8dXLQjcoaM6DQxRKDJs+OrncMKxAh8HnpU7Hiw5mFL4Af0CB3Jf\n2nVPKIMq8Epd0sJLReER3EodGbxD7xxLK0S/3M/Esp2NSij7lIFX0BTGMJeT\nkjSZCCGLgzJBTG2aghoNj19hCcnUHVm05G7cQY4LUGoz0ggrnoA22rlyMZDe\n0XcCZdZpJiFaywO0RXK1DyZayLdDIPLiTeTODrJnsbqWtBa+vWBQxeNjcFlG\nAVy7DEzkTyWElyAmdkXuF2ksEN/ShTNE1BfaxEcr9ORL0LDFqR7mF98XwVqh\n7+sn\r\n=cUSV\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"40a13adf47648f48d6dfb1daac9ded2f7f0bd442","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_10.0.0-canary.766981c15.0_1609886346546_0.49514691200432814","host":"s3://npm-registry-packages"}},"10.0.0-canary.b28c576d9.0":{"name":"@material/density","version":"10.0.0-canary.b28c576d9.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@10.0.0-canary.b28c576d9.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8a05f684c8a3c73ccfc00632e79b2fa38e338b4d","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-10.0.0-canary.b28c576d9.0.tgz","fileCount":10,"integrity":"sha512-t+uGfjI/IIFY4VRmTkUynTgxJWpAlTu4TU+p5G76chHpnduDqff5ANB0Z1aBI0n/MxrhAM9V+o0yCEL38fFbqw==","signatures":[{"sig":"MEQCIEYr/Znz1IfxROnNlyEj8O4YqygwgnUVQc2qy51qPpxLAiAk9pQp0GZ3gUX856arVFtpUiHTEUPNXBNlu5z/sbUVgg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13725,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9OzbCRA9TVsSAnZWagAAwUEP/AliS/BiIfkkuo//b0w5\nTiRwlKYIWPnpIL1nJtxLxKm9+QYZJMzqxfjY5gWKX5aQcwZfd2SG1NLJPRLK\nkk6OOty+aZKC8M5DbfphMFMYZTbwlM20NMAtO1DDq8mAHFC0KTU2k9dS7kJg\nMxbrv5rk9qi6Gb5rSTe3MOvdm+ojmnJ6b5hcsOs+KKAv38cT00cGsSFwREan\nZFR6doeA86pTvj8jqv79aEcjRzu3hAxNB67WBMRGrFLPzVbsojE2QOhGdFne\n+xplVX3XLnzhVqQaza0xJdKkMo26hG7PjQVE6DPgRj/BMcX88RTSTjS2AfRm\nSaI1M7llLcWI/HKxpz9gKSqGr7E7bd+WmNS0Xs7PR/sVN34AZ3rZRI5au8sO\nRApNwRvDI2JWNh7OFn6DwFa8dDn121B8disQ9aXJyNQhPho3NzRw54tetpDN\n3SpoJufUYrs6zROA8e6Ed9gKzmNQ0MaSzx0eU7T8cO9n4a5lx72hXebnM0II\nlzwxwnudMxgSrWcKDXCWR7ocg7DPFYA1/LQEtjSAnpSGjwAgcCulWo1q2e8r\nMAmV/fWhMyepX6ZtQTISXW6A206rTAjvbc+SKYZZyNCr1HYb7XAaBUrTBl6V\nVBn36Z4ntZUVIIbFJwKj3YVYrZHr/eMVKWfXaJA3PPtI0v2RX5IOgFROYFS/\n1qFc\r\n=Hx66\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"f11c5039e5e02253cd6e3eaebf7ee15629f3c182","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_10.0.0-canary.b28c576d9.0_1609886939496_0.5152319560075158","host":"s3://npm-registry-packages"}},"10.0.0-canary.968735356.0":{"name":"@material/density","version":"10.0.0-canary.968735356.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@10.0.0-canary.968735356.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fa03971d1b3546f3c5581aeed8d7470f64c67174","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-10.0.0-canary.968735356.0.tgz","fileCount":10,"integrity":"sha512-b+f1AfRfjcixOPUiJ4fKTayBIvybJS3sHaBQhjgspv4GAwTPW7NInDVd/WV4ijdgHFavutWD6X/dFeXD38adjA==","signatures":[{"sig":"MEUCIEfFnagN8F3UxNh4AiNudgEl5ac1U6sTxeMkA2HZSc9sAiEAwWowD9kFXEpaKuYXodU4q6nkNzK2TB9g6ywvhXJu3pY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13725,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9dwPCRA9TVsSAnZWagAA64UP/ikZzLO9WXZMcCGZ7OA+\n5WcN2msd19rQ9DlchuVgyI2Ukxn9WuwlA4mTS5b9e3k7L0gBy47YH0lNZN16\ntHxte73bMHcdWeF/bbayZRJx9+Evkpls/BZzSHpsyFr1aHjpBLmoxtMe90/N\nhLxpIowpfx/Ae2E3/8XtIzw9HkIgND+xc2g9oyb/lz8UMdVnI2hLLmkgToze\nCh/1rNHTS+F6vSAJF1f1yVG/hPF+6FG19egmNvUcVk+T/BgeO8i3P8s9bJMB\nnA5Ubu97AikEZosABuD/CjpLa2FxCxIApTBGRSEpm68rEKPN7au/hBYa3KWl\nOAeN54uuH8Fsb/8nezoKa6EhZm60Z3iBoKX/tQOf5YsvDi+YbErgzWbHoeoo\nHMW/e9AEpNVVvdvXFwuD0AOMPRrN/VnVhkBAQhbvGgmYn34wwmaDritNudWe\nJOm4YQnqlk9xY4WhWnOQFhHko1m0PAoKnP03EKDNJNZjF7nmG/U/gT34gJI6\nJA+gaBeu4XDC0SoeaNmE1ATkyznr3BDVRuKskMAhnU7NttFPn8WpBbZEcpDl\nrfFjnm97QKNbLCRQaEHmdom4Kahq2Fb7g6QI32rKm/7Qy4yvrdrUW9jtzTE1\nU195mM0g31yhvhHkLKDcykUsYhqO8Jmn13i5wkYa8p3Zkck1wuGY6Os11wjR\nqLju\r\n=PTT+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"016bf1732e983523c8ba8007681b058735467018","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_10.0.0-canary.968735356.0_1609948174831_0.29572270863003025","host":"s3://npm-registry-packages"}},"10.0.0-canary.c5e18b020.0":{"name":"@material/density","version":"10.0.0-canary.c5e18b020.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@10.0.0-canary.c5e18b020.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1a36f2344f898ae3c7628c780eb52614bed3f3b6","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-10.0.0-canary.c5e18b020.0.tgz","fileCount":10,"integrity":"sha512-Qc8M6svngKkOfJMl9fg/C7hdFZD3WRPRezEE9+zpDvWr3K7vdd2Ywo3CwE7xl9NRTUBnMhEIejof2krMS4nhXg==","signatures":[{"sig":"MEUCIGgjAHHLe6J+87SvrL+tMvavJcjVgHmyD6hhF9j+Qqq0AiEAvc64cVhdrBBGEEqtchdVimxCm9nBaKM+x134HiolyBg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13725,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9hLHCRA9TVsSAnZWagAAMBgP/0fMTEzhzDOjx2p6PpsC\nxO7wl8TBgUi+WT9cd/aOW7uoF9iH2vQZGnM+K4juZi+cI1cgdPN7/UwcLoGq\n0JWrY80DS857qn05euUdoNjN0L0xZqqthvtT0FHjiWPWNuczxhawJhT4DZgo\nViNw9a+hdAWAtH07IO2Xe3B1iHYV/QqLkRTevtO3DRl93q7fPttXaRjZ6PBM\nmi/h/DTxhQDHNoauKIiarfBK0up73XEOnrTcft+JZ1cHlLXGZpGbqLIvG6qt\naXSDoqllEtpjKh0LAUF+NmvGis9HMBLiREOsn+XI0UFE+SDDpaFLj8yFqEOI\nFV/BJw0IvlWK3t9MpPGBx5oApQgD71VY0ljOW8wKWZCtue4ini/Ia4Rzi/xC\nPE3u7ZYUKV2ChRy8iQKmPqXqjQ+FZ2CYNNpU/peXc3Y0JElAC+5899xKqcCb\nLQnAdh0zqmhKNHB4r5JnsFV8N1RbDbZLpfJfbJpcAQdYKs2He2P5smEDWr6W\nR+kodjVN7zNVrAFNG7dLoXKPyn+Rw7wlDglvwGLMh7JuXu+gSZmBCVH/0+AV\nwW9qcHuk7C/etbdyjZCWeZfMS/svAGwTBVGeJZtMlMcdLoXiLTVY/smThrk8\n02uEA/E0Qql6gtiXW0YdcILfnAWnYGcnfWTXhGnCe9od0TzIAnWonI/+zdRm\ncANR\r\n=8Rpb\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"16a60c2c89ea18fb88971304d4491f612734e932","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_10.0.0-canary.c5e18b020.0_1609962183294_0.9268930679401546","host":"s3://npm-registry-packages"}},"10.0.0-canary.bcff8a66a.0":{"name":"@material/density","version":"10.0.0-canary.bcff8a66a.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@10.0.0-canary.bcff8a66a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0c260db91e4eebe3c2eb5fa0805ae479db22a387","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-10.0.0-canary.bcff8a66a.0.tgz","fileCount":10,"integrity":"sha512-jZzwmtKlCFvmuaU2QoOVCy5sirYC0jPzhr8sbzVgWK08FEstec341E7divXCNhA81tnY1XCbY2RD42nyR6XJ2w==","signatures":[{"sig":"MEUCIQDsdQS50am4DWV5PoWgTTweTPd1fu5Qq0IUCDbwSW5+SAIgZJXzaK3Tz1HQEAiVVQKpp8wmFOJZNJn6AlgA4aSL9l0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13725,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9hyMCRA9TVsSAnZWagAAtNoP/j2r8CLOsNAsRwjqO5qa\nbIdWXiEsLhu7vQlct5YZ65UIf+PRBDseb5aqPRynZqdfPnof22U/4alJZxD6\n9huaBREh1QHFXW0p0fFXUc34gUeIumpDLb0BhqFvzli1+JLFDtvyAi+E+jI5\nyHtQxyfX9VAOPNK3+7ForxcIw8fx+tGWn2Ye68YS//+bOqUO/EVSj2OF4WjX\ni/JsSLEilQ5wTqtLV0TYB+0s2Nxv3weQIKW/e8NQIuGmQRecZFSFRCZZMMye\n9Gun3EhTspVvRPurjiYM4EI2a9HBk6Xxo9gEkIsIu7M/p0DsZBUHL1neLyBU\nuNH0To9B45ey/hRjWId4yWu9rGXf345o6IgtYGWYrSL4u9UI73bv3on8aQFD\nESOoazFrWS5LQYj4jfRuPD4nYReB8972K8TwxG09UzSNfwZFfXDvZGNIlAZp\nhVtB8DQC9cUn1K7IFzVN0PkYEV/ICRV+XANtqrb67NrBKQpCXI4CDGTkgBWF\nDCSuTmc2sUFBbN4mVw+S9QrhyDrkz6+YsQzgHiGXDAacWC+hMAm3ILv6H4Uy\nQfSIPNmv3d239J7mWhDCbthY5kKfNvyzjFojbBibHDhdIhfqY5IqWjwtNnzV\n13qGj6ebs9lAd3hsduyLHHQweKPu9r19evQb7HfkTxVyMASlU5f9BfOo68SP\nDGSx\r\n=wchV\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"81af087ae7601c8b819dbada709de8d76ddab960","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_10.0.0-canary.bcff8a66a.0_1609964684270_0.6952443624150741","host":"s3://npm-registry-packages"}},"10.0.0-canary.79328c9ff.0":{"name":"@material/density","version":"10.0.0-canary.79328c9ff.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@10.0.0-canary.79328c9ff.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"336e2a1cf8b2ab08c745e175b66eb1d237999e44","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-10.0.0-canary.79328c9ff.0.tgz","fileCount":10,"integrity":"sha512-qpjKJNAIcD1gwO5MIIbE/x3VfJg88VAv8rEW7yyq2VMuZuSkvZRKMxki/dHwaMyi3cd+ElAnuR57lBvDj8BarQ==","signatures":[{"sig":"MEYCIQDhYRH46+WYGhTW7AJPjm5J4CRow2OJgn0A/WkYXKUuMAIhAOokngCrZJy4Q5yeoXY5asoM+gCyRJ2CyfWi/VTLkPN3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13725,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9nLjCRA9TVsSAnZWagAAflYP/A2QD0WAE93Ln3Zkklvr\ndV+KtVxH5O0Hb2VFVQJnCUDSCvaazgDqS7oqA3Mg1vghL75YkWEeHIjEonY0\nZqw78YImZvcJfZm/BGqqGKRrwSk6qqWJ5KgP0PpRTj9HCsFDhZRLkH+b0PbD\nuwHB2K+2WWdrsweqsLaWLZuy4XlGjjEV5nba1666w9JOoTSx6b+gj1hXcrLA\nkLqojZCwszWd+8+VeRzGocR90TP7b/QyySwS8Ggad12KpWlvnwbVdUDsgizi\nplvR9Zf3BvmKeMoC4zvTH/iqVykDeGQ46n65T9F7j2FQjIsWO1vCeMap6LCg\nBWSNTM329P3ACjF4fkYDf5GV7HE0bHGftmeuoGaRAbT/uYIYRP8nuxim3V40\nCdeQFR6W+TD2YfL57PIBVyCi/Y5X6Jt+7tI1L0zyyGHfiHiK0z0snqPGLqqP\njEoQrOootNv1C6VcfzHA/zVG6riMnHzX4qxvEoGEC8JUBGsvfP/BeU9lZCEI\n5logxCwn5Ua30Xwn3jQEO3bdoQ/UimaPejevfCu377xeOkURRlKX74/dQywe\nmgakd6QOcnSJ2OUFGGeE11aSie/OyHLTo2RXXXTDDIdQGzF1v9gqEOkV2J9J\n5+X8begeKi///wB/Wg9T+3RpUzVtqv6iracm5VA+Evz/YS1QIjf0INzl9paU\n/Gjm\r\n=NT08\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"15dd1d7d9065f275f9f9779094b959944d33197a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_10.0.0-canary.79328c9ff.0_1609986786883_0.9164696393893648","host":"s3://npm-registry-packages"}},"10.0.0-canary.121e1f303.0":{"name":"@material/density","version":"10.0.0-canary.121e1f303.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@10.0.0-canary.121e1f303.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7676c2f733a3db8c19890ea958b72e1b00de65b3","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-10.0.0-canary.121e1f303.0.tgz","fileCount":10,"integrity":"sha512-f2lZ0cRf+NLMQK868JB1UOzWg3tcNoPbn5B3sEQ1NAvfd97Er5aTPbMjPdTdA8f1o3LB1cs0PrTiyjmYqzSFAg==","signatures":[{"sig":"MEUCIQCEzxGneXIY/WbPm6/7abrN00bBmjSbYkrWKNTSJPn0fwIgDD8VGVNenYwrXKYLtKfW2Sxo5WpJTATbr2m3zE+5nis=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13725,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf95bSCRA9TVsSAnZWagAAXpIQAIzb2NEwVlQqolc33CHm\n38N0doVbsAZ01pTD2XWQ3jZLz6vzI2XdB/P6xxkrFHm7HTrNQ+YtShG+dqJB\nLRkqDjE56cGpXlkRhu5hSpNBEfcaIQ9qWZS0jzmMY8vFoY0amyh1SNO1XIeo\nCRoe23DlTp3CQgec+ZS6uys1orLzm4AmiqN1j8BCOVvhRsYxHpFs/jJ5oycB\ntUVr/5nXAXNyKTyHVQ8y5icc2Sh3z7p5/STWdIoGxwAAT0AcBtZlbSOXYLoD\n7KnWZV1rpWybEDGzV/lZL0mbqCahB35ZZmgf84pzTtNti0LeU13+tX90PN68\npPuSfednQ8T48nGkTxJiEIEz92zZQX13ipRpuEbJ+ZQQEecyJtNmtTk9Q6B+\nDhe45gc9JADTjAb1zHRjW7ENKVknx7K9MnjOddhhK/OIvsteBlbTz73+1up2\n+XphFmGAO8umKomn0neVA2SAKEG/+x07EuWUOPUfjkg15MTdL5nXJIyEokz8\n5C9DMythfujCyOj4S6YBgLKvGim4PwqdystyXEWKYAL78ZKEB9V8AphUcBvE\nwfAT1G8hmzfWojfcFGAwsFuQDXP015VpvZyzfU7t/p3hqKEcriRTdj1IjW3E\nKGUKytWXEUEHCRNa9GTLRgj5z3c2eJnLoHFRxVSABdHkmsQtyoky96l0/+UT\nXUnT\r\n=2O3f\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"6ae814dae9eac40570f13ed9d7b821cceddf838f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_10.0.0-canary.121e1f303.0_1610061522101_0.2541141719992275","host":"s3://npm-registry-packages"}},"10.0.0-canary.abdd10065.0":{"name":"@material/density","version":"10.0.0-canary.abdd10065.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@10.0.0-canary.abdd10065.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"145f47677917741f64259a5664fd2df6deb98939","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-10.0.0-canary.abdd10065.0.tgz","fileCount":10,"integrity":"sha512-mHE6atawwoASLukFpbUP+X1m7kSyv6wfJOVWhBMDufAb/Kxrzn+urTM5HZIywlXh3sLxoNiEFI1Wel7qoD0ldA==","signatures":[{"sig":"MEQCID2qvzyFpRbJxMR5BnbdwhTgLq1rQf8cKESlPdj6R/jtAiBm3Jg8v+Ir2BGOJkIpyD2PaWfqx+9EoQ283c1v76DiFA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13725,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf+JtiCRA9TVsSAnZWagAAYQEP/3Ab9ZZ9NqeQftSETsB8\nigR9yke5S9R4AG9Fil9HKxc6LlRDqRGHmcLcjSrY9uK2vcX7K+r4y8/IyIQQ\nAi0ZbasRM3NYdeUKIXySJHgDWJ6uaH8FtnKgcaKHnSmySKzPd+HCxnfob000\nGWdOONl0FJ/otqUGdTLMtKP8MhhLoY7Q91yUQ3mkfZtHpGrBXgtgg1EgCevi\nnO7KlfbxGiBZzqb3NzTa5HtB9iahpebVBGGT7qV0Ni0Uhh7Zfl2PxtmvKNDw\n2F0yKt6l5HY1ooG1wj06qTN3uXxbm/BD0l3v8KNFd8gKZyxjuISOa7WAoEi5\nGWw5Vji1L9CkqiKfZRna9aFNZ2tG8vSBYdCOOBKYSNrfM5TvAdTswH5eN0fY\n6Lwh5Z9GsL6pPZ110TNFgScB50WafS2GPVTbdXrNSOo4TPKOY3DMfuBCkAf/\nBsFRhcVTziLRQO4pJrpi7EEXzntMHob5axFEa7zCqjAgQMpjKrnbfi7UEDtF\nSFCLd4FBdXoFFU8oMz9QFkeX4I0n7+JMM61gcMfO0nev0C8ABjy97sA9+tJi\nCoHzwXw8yQClErlkXx4u4WIWZ+3QQRi9MUoLQv/1kHWJEV7VX61clz5BHMzJ\nHGcxeA7lyztcM2fy8EhmbWVfBM8NslzwwLBW+mYSursxu1lsLyJmZ3DmjpvK\nouw1\r\n=4eYu\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"bc8986a19721edfc6facb62cf839cd222de97d02","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_10.0.0-canary.abdd10065.0_1610128226219_0.5836535691301146","host":"s3://npm-registry-packages"}},"10.0.0-canary.089de519c.0":{"name":"@material/density","version":"10.0.0-canary.089de519c.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@10.0.0-canary.089de519c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"89b2577266f6bd57b6ac4fb5b0dda1195e79e6d1","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-10.0.0-canary.089de519c.0.tgz","fileCount":10,"integrity":"sha512-2Xy1eK83RzkJfOXhxX6aN/Qka9O92Efrd/lp+h8GiTDfjYQzewnSuzcgUiamEYrrTPIQJ1Fy2jaDTO0dYuiHtA==","signatures":[{"sig":"MEUCIEEFMGA7fx/cuDgiU+XvaefXZVSpDPmnYQtsjuElwAbRAiEAvvL/eYizfnf35M6uPGNtdfUPMBi+lemocaT0jBKaVE0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13725,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf+Np4CRA9TVsSAnZWagAADkEP/2VrNbqDtfW0t67jXKzj\nMbhK8U5yLJugY/gCIbdBjQ7aBYvQKVz8coguxr0jrl2KsebCKiXBExgIbBAR\n9iCQbLX+PbEmirpMzhMPFyV8pstT+St+gvGszFDmwS6KTYXw8IUwci8XlVlo\npvSLmmsq5T3Td1HPoV6qLnfdIwUXIzMNRr9fdNs5oXzEldHzngy6SfyAa6EA\nWRIyQ/y8CVn9N2oGOwqPUnogzyxtQHSr4rx9IEIYlv4WyBx5n1vfl1zhni5/\nemlGmQPiI/RdD6DKtLG8Lqak607cnd0IgWb46s2JJd+vVg6bxzJWeCb5zBNM\nEKsz5sKMFBrqZZuyWLbfCKXTWLwrfjbnqjBE8+maMBppLQw8WgfYyshq3EuD\ngIGEVEt1RBURkqhftr6hDYV/aFx/qbYeDTtPW10cCYkvqmq8d7BQ1VYN5//z\nZMSBbuSN0kFvAmEZxO8e4rhjToMs2bHw+QyjmSVkHnK6ZcKbItwG0ZGtGFHl\ngkOgQDL/j70Ht+u1FSnla9ERnKGDUGgwNq1lt1PxSPciorVYxVfxJ7LYpWsh\nyGMNypTtSOoRObzwT8mTvdpYRwFf28R9HgFWDYFBSh3w7muPYDE7ecnJSC4l\nfOCwKyZK4UNYdyRJUSmaN+xSommcp+bujicWfD0lUREaESyDqL5/CW9u7uEH\nolg4\r\n=/oi9\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"6a64709b5be73a45401fe82d1e6d126d7312fd21","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_10.0.0-canary.089de519c.0_1610144375608_0.48731402584184025","host":"s3://npm-registry-packages"}},"10.0.0-canary.163119837.0":{"name":"@material/density","version":"10.0.0-canary.163119837.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@10.0.0-canary.163119837.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d694f889e87a3fffdbe855bb210897dee67264c5","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-10.0.0-canary.163119837.0.tgz","fileCount":10,"integrity":"sha512-K2LsV9LKsw5mvRtJzdqWrWftMpNN1MQ+jPLOqvpGsUYkokAS7qFTcFnIUwk4m51fYwQhiyCPbsX4lknWpfAYUw==","signatures":[{"sig":"MEUCIQDIqcMlEnidcWgH+3KYsnn1VAnHWca0mz0OW5oMrhsgogIgOEQ6J97OoCuMlZTIYUgBJcVivIYXzNdTKWzJJPHRb+c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13725,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf+O5DCRA9TVsSAnZWagAAQE4P/ifdBmqVV/YUoHwVTNiF\nUNaI7zoMv9Wf2CSqbfjdHEPjF7eNy2DON79QPl1/XmWFIcZZwLA+dCJFYA+c\nEMKIiEZxvAIQvGaVe6e0UAcyr27kOoeDN25CgCLBubck4n8IkSBZG+Flkfmf\nk+FsjOTAPV735B7d8dtm9NqRkJRuQ3UNmH41jqwCmz306dX3vb4DQyt3DZOj\nv8p+CInaSthDSwREF6mbMu6PqtBQjxBzv8GFirbVNqeMnWb9s+TBrwQm7vPm\n1Nh6VXzv+P2eH896RNSLad/ukTMoEliaxFwVcsB+Uk5mx8bI6frhDM/Ig6xz\nsUywjQhkV1rbdKlcvgxyjkCVWScK3amiBMzE0lmFrygF6/lybvWLlM5YYNAC\nfuu4djR+t4iKRMUF9PjnUIsOJl6mZhW2DVGQHB2nHUDoy5iFpxU2SVYuoZsJ\ntR5c+MP04zb4GsddqZgctSzFtjosn/hougBsWY64qbnbEX0+XbciT0lYTFaH\nYBRblZSX+FDSnhdSQz3pl17Yu1rUKSUomdtWTXYc0dlQVHMnjuvX+H7NM7tr\nynqfcAByBbrxmdkjLzzs0B+fNNFOloi66aJeXbz5N3D5CsjgDUWyFGzq4lUT\nAc/CKA+8dB6kyKWC3DiX12D87ptWzBRKbhfdoUBlFIGinshtU1kMtKm5pd+r\nxyVu\r\n=vF2i\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"86f8af57c151ec42ed920ac445544bc384ce0975","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_10.0.0-canary.163119837.0_1610149443101_0.7156479178617148","host":"s3://npm-registry-packages"}},"10.0.0-canary.b8a1a58e4.0":{"name":"@material/density","version":"10.0.0-canary.b8a1a58e4.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@10.0.0-canary.b8a1a58e4.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4c3f419ef5e1164267924dd916c79375edb258f0","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-10.0.0-canary.b8a1a58e4.0.tgz","fileCount":10,"integrity":"sha512-0vgZbayA5radG//Q6+gzqyJw1YuxsIU+lH6IsMGauEicF0YvS7R+P/rV7M3HXLcOTDVuADrHRdIoMyCAHtMSPQ==","signatures":[{"sig":"MEYCIQDkwVeqYF246eZ5ylZBOysFynL+rq4lMh/nCj6AcK9DhQIhAJuHLPk6Q/Io9mL+xO1T7nfpMUWhR+nBgpx7vJWJaQHx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13725,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/HtkCRA9TVsSAnZWagAAXcMQAIL9jrg3gUwjhn7ZrwMY\n5lPbm+l1YdPGj2M3BlLsqfuaoQ+8eBijquzX0T2qHWX88irRVJd9CqyMraWy\n67ydkUhKTdLNDtF+/pWCDMoXoJ3DwqWJUVBI5ft9PQAqeYt2kRmYbrBWbsHl\nkPC8TKNinU+M+sircID/gQHqMb2lK9RrrdVKpEZqpvLbiZ0HDh9uL4vEn3cG\n7ou+ph6jw3SwKYuB+aO4U9C1+8xJTvUvWRW8Mvf577x47JghWXNku/R3fBrL\nB8WAPp97XjaCeP50NYyLdvmCO0u5Yjtwf3uyTNC7yo4dd4veXu8pI9RYWj90\nLeIPaBOSo2nemaykRgWVpj8kksDIbisqJKtzgVRHxAzWKFvhwlVwsG+fK87O\nBeFB3wTgXov0QzPbRORbeL77iQ92bxiiH3Bj6jKpZeOV05yOUEOqa0pcoJVK\nx6s0fjqOKMRitSrS3MXqHu31LdHw0OCh4HwMyyxtWeg6Tjw4s904CBg65XPC\n2ImzeRbPfpvdAdGsCR3BSDLf2SN7/9YUubO6GqSQr6/HSH5TWNkp78GES7jL\noAwa3SpZcfjrb9RtoVqzEUpd3k0y+qcGf8wtVCzEp/iRcHZkx8x+BpEIVY2P\nSmdouDL5T0qSLHV9AbfqcMxgeg6C8rxsvdjzke6sc0qmxi00tGOnCbDetteI\nziEu\r\n=TJ1L\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"3b735aa03cc784b7346905168638eb6a486435b9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_10.0.0-canary.b8a1a58e4.0_1610382179468_0.7409853026221365","host":"s3://npm-registry-packages"}},"10.0.0-canary.7584267ff.0":{"name":"@material/density","version":"10.0.0-canary.7584267ff.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@10.0.0-canary.7584267ff.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0ec95a93e26571bf06416f97cf838e8c667e8b2a","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-10.0.0-canary.7584267ff.0.tgz","fileCount":10,"integrity":"sha512-wfMMBNfkjFsDZ57DNLCtjWuNvq3vAgHYD+N+e6aoRopJbMQsH2/QHGXj5axwwm5c/y5NOIxEKz+pPmg2H6XDcQ==","signatures":[{"sig":"MEQCIHdQ0cEkX6HZaNftCThuJZnvn+0YuorUyy4TAVER0450AiALO1s/MxXmfi90DTpMZnAoQlVk0l4P2YvBFiLtaQt3ow==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13725,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/PcnCRA9TVsSAnZWagAAudEQAIXMx5PgXQGVxplcVqLZ\nHIbPsjpqwG99nry/ICMavF4fYT9wD50wAt58qHhGvU34Qi7mKldRjAK/Jh9b\nJ/z+xNUNbfSHTa7xYroYaBZvT5XDO5rYpwYQIq/CqnnnZxCQgWCDolVgWgGV\n+0MQghj1iLWNmakOggo7MQgdodsUFuXNioiF1cqJRsPnfW394DltW0xeceSy\nG+kvZq0yN8nr2emLiQ9j3/8DK24tf7DA23fuzgxoa8sd71feZkiSxS9dFNHL\nLwX/7PHlxpEZlIXQ5b0LZxXQ15H2Js8AwM6oROwWJc/HtzZNqqm6tPLlywWv\n5hbILlpXHEo4fSXq7dRYrGA/1L+gN9teYSUjDvqquNWV1ceX2d/ABtHClP3d\nb5HwLSN0ImXwnfJPTgEc+1UCF6IBVp1wCu08ez/6yt07B+QsKprkqh6uZU/4\nkRN/QABt3sWaThf3iY/E710f3TEAcf1oimTAEht4/Fq7GTodi6/eVTFqOv6Y\nA9oMQb1xAswAWm+UGfdtPu7tHjMbdIn94AZgt0/zLlSREApLFzWiIquSaunm\njbyNUInDLfaRzDPP5sHGitUcnix6SPNoUZ9g0w1P82VlvGLKBmE1x4Biru8+\nAd/8+tZbo66p6Rzf05nNn6z80naUybLGy+9xECT8zh6jlM/vLc4qCzAI43ED\nQEKB\r\n=sx79\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"89cedd80674ac536aacf2762f084fd7d1640873f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_10.0.0-canary.7584267ff.0_1610413862624_0.164132741561962","host":"s3://npm-registry-packages"}},"10.0.0-canary.251ac04c0.0":{"name":"@material/density","version":"10.0.0-canary.251ac04c0.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@10.0.0-canary.251ac04c0.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"43303670972d020fe2b18ef0a4b7376c076ca5f3","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-10.0.0-canary.251ac04c0.0.tgz","fileCount":10,"integrity":"sha512-k/O6rV3dvIiQuVhEbRve2F2VK6NJVuaxkrVpPVe4VK9tq3n92pI+MUGImXVdHkC5kMYPA/bLzYccYYVjvWJvdw==","signatures":[{"sig":"MEYCIQCgAdR0rUNtL//BuFJFOi3tksqMXg0aRLq8dCSGtyZ7FgIhAPAHmuHkl2BW7j2koD47Irq0BfDmhiK67kXMvjlASOr4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13725,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/f5QCRA9TVsSAnZWagAAy9wP/RfX2QV3rxLJgU3lkiR1\nu6OErTQzvvWnK9/jsLA0o/Ii8vcZa6kY7TEI/Vfiytpy9kJPB22T6W2jVH8U\n9gN6eRoL1UIaLfhfqV1bmSmUsm5L4K80sPAOAi+m8T+uvGbfnrxt5zB6AqYv\nVgpMG5WHWVzbpk+xLusI0/Y66hh8Ih0P2j+ES1q5hWZ20r11Yb4h6y5Gm8D/\n+HNArVBZ2nMcn8/+RB89Q0/JPvEfYWcXTzNRwQvkwSeN9zvPuf29IKuJxldN\ndSUrMyAwWE52MT6TGitLqZU6LlijB4CsYHFxamOCTtWAb7ttYi02oSq6AvNb\n0r/VeAjoH4A00noCLnVOcAHVE5YjT43mU9IeGc4GM8LQ5DvIBWp1sfWKFZQI\n/H2U8bKc53VxJJMU3VowfRBwl9laQPsyALFTi3XDnH+UWwU1RZVYRKJ+bGDJ\n+Bq2PWxOZbE3fAgSMJg6dZBqnzTJ9pQCh/vJirZfHGKTKJgDtAA+MvbS1pml\nGZflcxhtY2RAPRcyg6Czn82kix6CKCt9nN6LT0sKNZOP8zWQI/8foHwvnDsx\nmYtgZsRzpOIco7gogoQmAyno7/frtVU47RTjhPusWu6LhLj9dc7i59gV+H6w\naFMHLFi5lBAgsaSvVOfV/5IxvthS06ttzhrupxtsfyGagvfp0zMCQ1cYZr1I\nkPsT\r\n=WNbb\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"bacdc97357600156630f8321ac8a3a8746474194","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_10.0.0-canary.251ac04c0.0_1610481232387_0.6674749108212117","host":"s3://npm-registry-packages"}},"10.0.0-canary.772cc1068.0":{"name":"@material/density","version":"10.0.0-canary.772cc1068.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@10.0.0-canary.772cc1068.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3a0481119f3c345388e54b2492aabde6b31b500f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-10.0.0-canary.772cc1068.0.tgz","fileCount":10,"integrity":"sha512-mZlf4UYsXw4+Jtxh/hYxA+c18FTnoW9lAnJPdNe76ShZunv3/dffSk+HzzbZZq685abgV+zL+gNGuvEJr2jj0A==","signatures":[{"sig":"MEQCIDW2L6HtN/lPf+I+pVFu/ZRNQqyWCo46vrnUAC2It10vAiAE3gggZ0qbgAGLVXWOtfxXYKTtGs5ogvkH4c+/+nJ+Ww==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13725,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/4rTCRA9TVsSAnZWagAA6dQP/2FXlSh9WjJ/NAlxBimA\nDRqaXbhpoWOvDCuxIS0FIt5rWcQkCvoW6FGvvSqaOlV6dZ9/n/0lTXP9kmnq\n9Oo0s6G1AaIDJZK7yfWszyRMHF3dTXSVXrRHJbc9sWFeW51UhWA3o0DbKErM\nkHynz+w6MB4j6I5l6+DHIgddDonG8JvugEJcfh9NAoLKatIMAviyTMm+4+l7\n0DEpTVsq6gjXl0sWdGycpUKjj4acS3VFBy4jR9WD+SR8FnZMJhtI8K5Z+6jI\nnS7e7hmAeEz6S3khxynAWQuLQU37H90QaELU/rOUUQegtu2A2kubHJ6i9gD3\nbn/a7ZDawFtg65emix29SXnJXj5rn4swKPeQMdUg+X5a0BbpSLW712RkVOJ8\nmyi27o6J7W0kWJVHh1U83/ddRUSuhtcOuBh/i65vfrw4Pw1+l9Wo03kSQhp5\ncYg+8UCyc5Pf7ksqKPb8vbuChzJPumNSs34SfFSAEyK/wLGOf6Z4/h8GdKmB\nWfnxCJwPmb38khwwowGgxCfRW8iHW4JzXcwng2ZXpSCZonP7ZhWYsGdn5XwT\nLTXDkdUkmioCdSWYtlN6qdOa0z72Z2iY2kdTDerP9qCJ1atW23kN8OcJJXdk\n8v1MQlDxoeioBeeMd6WlID4v8CxigYP2FCPy6ZMLKBkY5DlCzfPmqUPpm5cH\nXJtp\r\n=WUNd\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"e8dfb103b25351e76ae27e482ed4f13c4bf997c9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_10.0.0-canary.772cc1068.0_1610582738595_0.8933502473169141","host":"s3://npm-registry-packages"}},"10.0.0-canary.fe13dd130.0":{"name":"@material/density","version":"10.0.0-canary.fe13dd130.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@10.0.0-canary.fe13dd130.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8a2ba690745bfbf3d064cfdc5a160f15bc7fe50e","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-10.0.0-canary.fe13dd130.0.tgz","fileCount":10,"integrity":"sha512-o6CzM81Oxejfh1dEVomtaKrYmhfqrcFKwnzkHktkb4Fbjej3jNCAXPxgLu708zeY3PgxOGAK+GEI4Dpdg5tMSQ==","signatures":[{"sig":"MEUCIQD2HczRTA2aG9PdlSbEDusMWAZs9LLR+9GfeXIc0rmI3wIgX68j1ChEAMln+sDt2v5juO6p4bL3I7tcGfK1JzXIoIU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13725,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/5m1CRA9TVsSAnZWagAAzegP/ioVQvl0y2E/0pjCEYvd\nRAPtPsbn3lw4rVQQWKUOtIobYXNhu9pWR3dx+x/1edc7NZQUClv0A8a92dad\nk48i6B1IsAbOBtZ8eTWwH30covhT+Fv8R6sHEQBIm2LRXrdrnavtRCZXU+Vl\n0sDzz94YgJDG9vj3ywvFjsXC7ICmRjxN2FkE8SE9aQS7fhfxYK51sAKz8DZA\nO1DPwQ4Z5tspA5+hTXBL2P3kRr+pqT3Gp4/GnbpTjxSpVDpHVsJbIrMacepK\n2PjxBnZwdIDWcElcGFXrKOs5eupx4+lbfUijCFawbJEolHsy6bniqY5orK8H\nlozBTTckPtPS+7mMP2UDuRzf59FL+fHcvtPVCQzgKFBbvuPZaBClWafXwgmM\nyKmONGIZlhrNbdK8LNVaas6PJDrglo4AjD1tRYHXTiniRQGDnhRp/b77vS66\nSBrvydE5LueoI12hGo6ljAnw0fRs38wT6vY4xzu1jDJqkosZsKq2d8iQN21P\n3qMOfX9Ekfulgui8gnfVJ7ABML1dSJg/kfp6GE7MAasXt6Gzkeuk1BnfGVXD\nF6O0SF8o7dchI1Gxx9BdIGhfckUGinyINkWJdiYjUWAQozYUHz+uZk7TzWGt\nh17g9tKeamQ6RyLF4TDaRP4Ivch2zL+f4GHU+spapZsvuEe/+ZHs1h8yHsNs\neJcV\r\n=Q31B\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"8825c25e04c8e88b7430f2f8e148da8a9197c02e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_10.0.0-canary.fe13dd130.0_1610586548633_0.7732919426259537","host":"s3://npm-registry-packages"}},"10.0.0-canary.c7c5da28f.0":{"name":"@material/density","version":"10.0.0-canary.c7c5da28f.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@10.0.0-canary.c7c5da28f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7d8fe204af67df302895ef2ed2c0f7db1fe71d2f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-10.0.0-canary.c7c5da28f.0.tgz","fileCount":10,"integrity":"sha512-nJ9xIqZdvmjjwxzbzREsXTtHLk+6AffCK7mU07F/pux86u87gW+K49eFyRVPPpK1TAJUB4KT/f/uATOTh3WOEg==","signatures":[{"sig":"MEUCIED/Cv0lLVEv+N5YSDt537xTYBRIzChP72epPVJ7yMC8AiEA4nNs9i2HEsK1x2SI/o4s1gWpXYsj53GEcbNhjdHB0Jk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13725,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/59BCRA9TVsSAnZWagAAmh8P/0KlloqhHFHGaM+o//tX\nb+W/+Z2njUw7W0d6DTWsBtBjOL7C/+1SJXvIm4im6C8aHJUAHu7INyMP5UIA\nzhGl0FstXJEjT6Ntcxjz00CWfOck7RB1mIlpkAq1xy3+tAa+Xt4SXVOtlxGU\nnj1zSF5NquHoHlUllUgt/h6/+iKolLNhgYeunPUiXc5cOD2v9x7qKAwkwtuF\nKkevFD7H11gytJYjxqyhEdInhOG7HSH/3JdqTMvVatdgfrtSMEDUPJpSeJoc\nkpdDPkWI3EE9qONhb/5AK6DXqSLmJG8HuZJnBZfw2s4GLTLx7YD6yNDYcnOG\nLX6xeY8l+sAp6Tota0Te4xa1zGFwvZYsHwNH6F8+WcaclVYRYKjEXMSImHgL\nH7aDFWoNYGY7DJqE8vBc941bvgj98xZ1UO4Rc652jH8eSYEMZuk7i9b7/IFC\nwu2xFU2BA8pe8dplgtC+TZjKAvIui4IMIcrp0KzvPp70CsNmTseyMranxM5Y\ngl8uL949LNQRJRGQI5ci8ARbqsbT+bx9wCtddryQfLRjrvrNmesvNCLAfmPj\nqwjZUbbrUYsuhojKP2OCzYOyrTb3a1P+Z5poWyz58hx6brEUTBMnNS8R4MH8\n5EvsR3EyPGHnn71QQgt14IhLMSUc9MTmh7agrd12NZtrl9d7eIo3ce9Dj5pC\nbklB\r\n=EknS\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"5d3f3a72d4e9757f2993684a89928b04ad29c6a1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_10.0.0-canary.c7c5da28f.0_1610587969408_0.45626152805642994","host":"s3://npm-registry-packages"}},"10.0.0-canary.b2faa116a.0":{"name":"@material/density","version":"10.0.0-canary.b2faa116a.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@10.0.0-canary.b2faa116a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dc9a303a65fbc472b4db933031b3e37949592348","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-10.0.0-canary.b2faa116a.0.tgz","fileCount":10,"integrity":"sha512-MJrFqKwr3KR6kuE7MfXYeIpc2QEgWSYytN40IBDR8ZJPrSSDW49SJbi1ctuR+tHxMUn9FvOqvQ8vHksqQVJPpg==","signatures":[{"sig":"MEQCIB+A0UWXU9ovHJSFTR+H1GsWsPyofjw2k9b+hOCpuXjOAiBQBwT8MAs5O8h1PVgTw9n/TD+k4/rLwQG6nOa09WEIsw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13725,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgBzIkCRA9TVsSAnZWagAAzc8QAJ8+BVT7MKXcrceuxscD\nMUl9fsHEYejc9mgTaqN4KwiVmAHy8OBMYdGITL5LZRK3UhE5QysC/gQRFbF/\nerWE+eyGSqhBppRTjqArvWutHgaH0/K7lxs3LavCiUBoZb0+o5T/7pmpPmoq\nIMX8lY1VH6TriJ2Rs7klmjyq8m6GnT/vUzQUXGY0tjdVpJx2ouNyG8vD5fX6\nl/g1ymbwjyMp9CaJgdULHGFYReUYkiHtJx+OrK9fYFXlDqVz/c+JrIggtwPE\nnMIdljofr4zuc95Ye6LdMe86S83P5PVVupuinZ52NWgEChuKehjlYXdIFZVv\nQ2G4Dpf/urraGk6J7hgidH8hb5m1qki18HLZAPbTNunv0QpAe1QbD54O0Cam\nq+72KN2XQmolXOxRUI2jzXauDFD4cLShH7kUf7eOkNeisbZwUj5zA7yaiCE4\nhlcj4snqCtrSmw2NVqbGI6wstgEgy5daY052/kts8WsZcw6Upb7g8yFERdf4\nK7hoKqnTMtlmSD1oSnFlhcPOPtCnpNL8lLK2JhYfl/X/fclJq5PJhR2CI3TE\nz7MbemWXSJi6CZArpaRdEYq0lTy1Sa9CoT9P5UuEPIZWXhoBL0sBABAF9eGb\nZhOlXfBrA2Xbhu0BrFAWdy7d60lLwLHb/RbcfQ3Er6lsn3fDZSl4b3l8nvHI\n4NFE\r\n=Q2D8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"8c83e6751cbdbda8095b6ae0686196398066d600","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_10.0.0-canary.b2faa116a.0_1611084323629_0.6110097257369893","host":"s3://npm-registry-packages"}},"10.0.0-canary.0c95c9f7b.0":{"name":"@material/density","version":"10.0.0-canary.0c95c9f7b.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@10.0.0-canary.0c95c9f7b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0e69a677e5d5295bd556b609ba8037ed413347b6","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-10.0.0-canary.0c95c9f7b.0.tgz","fileCount":10,"integrity":"sha512-yS7xeY9u2Ep1VisYw4Z0xzJue/sAsczLjXzQtMi8kSaNqLEoBHJmYRj0tChuJJRoTn4ItNENFEOFYssfAVnTwQ==","signatures":[{"sig":"MEUCIAfLA66XbMdP5Vkn53fy8l0Nr3uXCTdyYe3AKJJmAGmZAiEAmkThUhQVxI9oBC3VAaa76ITvQYpQ9OR0h7/G6JFLmMc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13725,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgB2K9CRA9TVsSAnZWagAAxdIQAJ+5vbkMYycC1WzBtIr7\nNG2W/I8WKpiWOYxfKKUL5A45Vs0InZomgvJBOULzvIEMcFwjPo48fqGOb5by\nSDaW6+4A8myfiSTsEfXHAlXoc1aDSzHP2lBI5rAEvBylkaQJL8vS/Fjy5jO7\nVLk7KfVSisWd+5bPQ8bXZDhB/JQkTPE2jYBu2t5iFWQmdB9UD8bZV2y1PfYc\nDiErC01qtXnb5TCj2wkfsL8BeaOy9Is1rN0dHKYXmxbGq9rBA/Hr86eFmldl\nxqpOxy4MOV2UZn3Z7Of6jvZR+r69KoGDhqzhJj6O65P8uJY1w3yByq2HCK7U\n2aZao63A9NgZnwzKp06ZWFWqaEj0EoXeybtrHiDUBqrLpYvvmHBARkkkbjrk\nDblLHUh4/3cnwEmi7mVdP9c5foeDy7+Hx6s31xRhAjTGC1nVbPiG6hXOX0vm\n785zzYN8N8v2UlN0csFQRNQN/FBOi3sqBaUiQGb7UenEJbNqNGUmWnBI8Mp7\nk0ACvtgoaf+VFlVPRhWi86zG6VF4XHaKJ0ZltexehjtZwFm/2xdnfP2KBm5E\n5ibBfKt0m17P6avalidw2uMFdnq/824xzfcXK0C0Gne2QGmv3m9v+Ge5H6oa\nlZbVXJRedKGbkI8edIO+sBlLSg33sK89jGsQHatbE+1xFHIfLgPI8y6wvB9D\nOxnb\r\n=DA8j\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"c9db31c38cf439af3f1498600e029c2dd812acb2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_10.0.0-canary.0c95c9f7b.0_1611096765007_0.8148785878341969","host":"s3://npm-registry-packages"}},"10.0.0-canary.5268222c4.0":{"name":"@material/density","version":"10.0.0-canary.5268222c4.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@10.0.0-canary.5268222c4.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"424257dbfbcb8122ac66efc749299b5b2acec59b","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-10.0.0-canary.5268222c4.0.tgz","fileCount":10,"integrity":"sha512-P0BAjEqet3RrIEkhLF60lEdqC0Wj5ma6Qn+WmE91u1IBqBbRbcfmr3J388SJinCBwqJsCYQtGIQaxKig1Oe0Sg==","signatures":[{"sig":"MEYCIQCCxAvzv6CxD6JsMeEttzWLhZ3AgJLu+8JD5hRjaoNikQIhAPBCLL+VALmgkR1lv8PDfUnv7nGMgLcyqwzcdAit1tHc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13725,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCIHqCRA9TVsSAnZWagAALWcQAIicNBp9wqRvdWWCSfoy\n3IGYPVmD1J/OUSSKN4QIeMuJmHk/a5dlkaTiwfE1n7P6Rqmo8gR16WTRjN/a\nmgEZH89K8m780ZfsTFP1U/ATxJEmIT7Xz4yGs+8isMXj4vGnX/dgKM3RO34f\n4BS1LZhcf13wp+x5H8deGHcUcF6dR/SBQ6MW29Pf6Hvq/SKTh9JZ3+Jvcnn4\nIrnBETTV6AbbXod5V/3ip3uItlV40ZyJwmW+2nVT/m6mDizlNweY1IIklBQD\nGmTFyknSKzVRIy5IvmRK19GxmPzwBIle2x+olq+fZfC5oyclWq/CJPVM/E6m\n0pE9gtV4S0KaFjsANFB3hXwHP7BCFMFxcEbZR1y81spM7xItXeTcantQTMVW\naeWqyUfm1nnJ426b9T72GIMv9K/sBg8lm2ypWB6ESYRUxpY7An4aj9egaab9\nkHXr3eM4NZQgySHs9ThsuxJo7CdaZv0RQTprCgQPrHnM4VZMkP6Q6GSPYIP1\n193tX+KmfrXj0xg1W1r+Y64w97YQh7L8E/+1P5Cw8X3gbUEkgH22J+b9r8cQ\niHJm+xgXy+rCG2NV8bGrZ4PQ8EEemqpzY5mG+vBpKPn86zuVOOVmCWLbKpnp\nhBEFqBngKCn6dfXKXZNrgkE/RHwVeKJWuBWwH4abOhNRuNJ+eE7Uwa4cHNfd\nYihI\r\n=jWV/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"149775a975bdac97e3f25a99b254c8b632e6ebd4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_10.0.0-canary.5268222c4.0_1611170281421_0.44541702609760514","host":"s3://npm-registry-packages"}},"10.0.0-canary.2ed2d829b.0":{"name":"@material/density","version":"10.0.0-canary.2ed2d829b.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@10.0.0-canary.2ed2d829b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"645055f1918d01513561f91e5fadde38f2c53daf","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-10.0.0-canary.2ed2d829b.0.tgz","fileCount":10,"integrity":"sha512-Hj3thBB0s8ItpWtIuA6cMjUeCXtxkrFI00KOE7WaN0X7LFbrwseVCpquZlCF6QZ5F97GjkPf/n82kPwRX3tXtQ==","signatures":[{"sig":"MEUCIQDSqM0ZW/bA3gbKMjgw79lMndB8cKNZROFDVdu+vLpHBQIgdc9z0F5N/eIhdWduYOlTqFWcXTBzZGl98WRdw7dpQII=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13725,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCLeLCRA9TVsSAnZWagAAj20P/R7RrX77ArfEcnLnH6aU\n02S0m4xJRjJY8lL+Gt3haTY9F/SihDy1Y9DGg+zIsD0tWouJuEmwlZagRHB9\n4XBt5tVOiWnvefhS1Gdo2d3DsgoR+HxTRbOsQUx8XT1XhcVbZQhGI1CjVqu2\npcFtTjdAV7XX3ReGno7F2IfEh7sBj9Fk0aAB7wyqBM4UOT+ALes1+R6oFvau\nevJ832aSP2YzQulIWVKFSlHeTkU6FmYBrKvK/xlB26tNhNlLdpR4DK5rJ/8U\nomz8l5s2FYCnm1AligU0bWsqn5IziTI7kPhpoxL/C3f0NcnrT/lTI2nCGZBW\nNzbtsdsoqXzz0nHchwzbxZgxRmD4lwpK/Y1ad05t/CxU1peZGRhJ8ZAGeuaL\n/uiULwM24oFujjfefJHvmBa/3kDK1RdoaKKdUDNqYbIbDgSwXJp4NxNPnmpu\nsGZ9JmJG3QN8/CmFKH9d5cHJGTtWxu1VUFb/a8GABrPXLkMsfIiFroWfi+EQ\n8lZ6+goECujtkPvi6x1AAeZvAWiJMgQKD89U/SGreYcFWQhhErK3zC9x2Ks2\nO+XJh/bDVWaoe4yBs3GGaImgnxdm851YCl5gwlZakyS6iQAPUg5+hmJTEiN5\nfNityJ6Tj3wCzJiEwokTOkXRrHK/Sf8hUPYn29ovsDFJaDfIeGlzbTNjrjCv\neCzv\r\n=+1yQ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"e937a8c393e2170307639b8126f0a461ffaf9e6c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_10.0.0-canary.2ed2d829b.0_1611184011259_0.5159627361524655","host":"s3://npm-registry-packages"}},"10.0.0-canary.df00c2b30.0":{"name":"@material/density","version":"10.0.0-canary.df00c2b30.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@10.0.0-canary.df00c2b30.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cb185c60e6b182e9187d1272c0c087ecc0accc97","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-10.0.0-canary.df00c2b30.0.tgz","fileCount":10,"integrity":"sha512-hXeJ8HMVquYJeEgQFbAzPFdlhWsUor+6Nl6zO5B1FC2Lx0u4kvsZgkAAkquTIIlw3sUt/PZCjGM0eke26FoF7Q==","signatures":[{"sig":"MEYCIQCQOM62rs416UgLixnZ5zC2EA8mcaAIpBTqiAik4XmZqQIhAKY8dgI60ux2VYfvjevivhHai+cEtgxTWayEarnBc4Pu","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13725,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCdvHCRA9TVsSAnZWagAAu9gP/RGUgLvELCLGOrH35AC9\nc8UjMOOZyjSGEKgC8BWz+Rp6b5Icj1N3m6WrX/dzmvXCSsMkrCKsssNxdryb\nLkyrnB+oxKZTzsZc1KFmfR8VyBeUsW84/ZWxIGWvOBGkDQ2okcigiHlnlmbP\ninRhJB+Kub+wT/nOZgaUhd0+rTY9XaHmx/Cbt8gsT3IDpx+xLK4lV/2LbPMn\nJTPUtrms6xTf8f86ydvhR07PeBHBMsRzbUXdcn5z6qlp6yebP63lQfOYpiHH\nfnCciLnTFVOoEI/PEVyf8pBRySus4qmZS5z/MAOr86RnrFiPvgeBNFrrtDhC\npmJeBpmxf5O+kWRzRbcsAhp29PTDryvmdB0IiHBq/d32kW3JNLlLvnVT8uJ7\n/CoRcaco+jdVRDXxipViCeYoyphVLJoabJnUoD4YCzQx46qIA7Yf/6oPS+vz\nJIe/MUiFyju4fDGADzXKXYdtnjGCwDfSeN2By8kcgyhE8jr+S0+cwRqnb7pq\nXcgV0AO287mEB7DHRh4qmWM59BwCJ6LAvcT31aCde9vOrDUy0krnaDjp+8qg\nYELb6Q9btjXc/Iu5wZRNdSQOwLnMvhm3MGNYB7IE3l5VmTIMMluM6WxfKep1\nml1dBzpca2YNOXurRy1T+42XYriiWWI+MjXIc+sGfXtJ6SWVHrGx1kXPbgFn\n1nNV\r\n=LUue\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"b80e68ca5ce1e4ff7a83ec06c805029869aaa5fd","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_10.0.0-canary.df00c2b30.0_1611258823177_0.3346813675391642","host":"s3://npm-registry-packages"}},"10.0.0-canary.fd61b0476.0":{"name":"@material/density","version":"10.0.0-canary.fd61b0476.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@10.0.0-canary.fd61b0476.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e5ce56859cfb4c07412c87cd1776e7ed1b7e2319","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-10.0.0-canary.fd61b0476.0.tgz","fileCount":10,"integrity":"sha512-/s8Y35pFR0stGgOw9931mMs1adFOBgCZko7Lye09FitOLrKtwl2oDK3cdoGhKUuYMoIvnaeqQgUbPrfFbANajQ==","signatures":[{"sig":"MEYCIQC39dUFJFj01K9IWa4Sb7wtgr5ByK3x/MZZoELuVpXaNQIhAK+YKZ91kxhK1MuxuyioLDEgQCLE5t8Rr/R7eVzrZYua","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13725,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCd87CRA9TVsSAnZWagAAXFwP/34Mgb9XmgQiNUc/uSnS\n4abYr84n6ZY0zD64zygEk2zKdb33XdZUXuW+s6AqZd8QYd146CPItWZT8o7D\n9Ee9Nh2lcENRRyZHpzL6lnzARrF2Xu8fM9IW6RMXh3NvITw/LskQI5V+/Ne1\nAfz4B/dWKGjjxmGZURtopGl9XtzEBs8dnyZJvVFvvN+3pbNAn5SbfECU8L8N\nlg7T0i6J5RnqXPvOku9+9c2qdVuHvo5Gs9gJv9Jig9yOwTSXiDhLIO2sbtCT\n3hQOSAicaK1+WFrjo9CVVCscL4z3YkWPUPW0x2mmkGh9v+e2yhIRPnHTEJU5\nf9QAMO36d6DIC9154tgcFB3HV7HBfGW7hVilr6Qm1M2zphT0uaYD2cOKNdyp\nY+obIOEDk7eGuZmzEkw5FiWfz/9rJ7RD2fKP0eCOXX7qBuGKm3ErjyPHaRKG\nRpF1/PrYs14G8KBDQsnPMhoopN4vw9Di93emDjkUu85c0nxLaSnW1OtkWksC\nnGuWCRFFVNPu5E66DH40j89UdL7/GuPnKxz5yLj90B38jLFmXMZklToWcOr8\nKVXYf8aTUb9dbmGOIL1eygEWB2T2OwQ+QxJixAisCMuqZbU3HH/Sqz7jKkFD\nVzYRTv2qBJKE1rX0HK4ceFT0fIThAeT7gpMtLHEXvqa6P13zMtuBrZioZqHW\nW4IG\r\n=OdpM\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"67853fc809fc128218f211f5b54f854f102d1ec1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_10.0.0-canary.fd61b0476.0_1611259707439_0.021176060382620765","host":"s3://npm-registry-packages"}},"10.0.0-canary.3fb3a0265.0":{"name":"@material/density","version":"10.0.0-canary.3fb3a0265.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@10.0.0-canary.3fb3a0265.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5c221783cd94173e81584e17d4b4475b019ee63e","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-10.0.0-canary.3fb3a0265.0.tgz","fileCount":10,"integrity":"sha512-uOJdK+ViZT1KQWHQfRMdboEI0jMe5alfqEnV7kBE7S3kFqIX2qWd2dn4DOGGazfSI+iYImWdn3eYWfaGtllW1g==","signatures":[{"sig":"MEQCIAoZ0E3ARmFWryzk7/DdIfx+hWsZBdWvsIOf7LmqOK98AiAsi6oZXfheTKYqroogZrkscHqDc5ORyyYGsqQ1w6Lzkg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13725,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgChZaCRA9TVsSAnZWagAAPTcP/32E/zNrBb6nFEFzt5+l\n0hFs9PkZ89jmH4eVDHdNpMFcPpgzVFmpxVVj/zb3Bppx84NnMo0bInYpPVh1\njrjGl2jpxVpbW6ceP+143vIzZ0w2YIfa9yVIbKu+MmZLWrWpt66ZAZLC/v7g\nSIGFnfEf0dyQ69ZBUQTrC8N2Hr3+z4dlVyii/0+RzJGy1mEJeMn9ID0ySOJj\nKg+4gQGEzaq+qvEoJGVw05C+ZupcSijaQxlUQLdWVa/n6X+fVm5GWcP56FTE\n126KnXm0AVMpOs/fSjuTlfgX0C7UBnSFowMhoCPIAcMKNyo7He1WRJ1pqFvL\nkLCp39TJcXisd9+QwKNBHQhEaQPjoik/5YAPrTcVNT4dpoKRrzYIQ0IfqE6c\njcAfv2Ndl8HAZTel2WuWeULIstsmmDFWqYkUxK5ucCLIqNY3LdSsDB5i1qaF\noeM1UnKMvX138/tL+d5JXXyFqROSLsT6kJqvIkoZmxSMELn0bHt/188xUxXq\nD0hIe+NlmHqfOYm9gHZcP4UrSY/qEgZYKuBsNMuszDW04GIfmr/1kv8dR1nQ\nxncgPjZ0BmPV8xlX6GpKPoSl4UVRCiqeCDp1l6H9WVBIxNlDKGm7gyw7JKED\njzj1gFqkbbdRpZO2Yir7UqfaGvXfKN/KoH9/7NHzl/hZuYoLmN/QWRab+03U\nAhH9\r\n=ftTn\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"5e619e42cc5398fa779a726d775cc7e9a72a1acf","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_10.0.0-canary.3fb3a0265.0_1611273817717_0.0013483352159877615","host":"s3://npm-registry-packages"}},"10.0.0-canary.07deaec27.0":{"name":"@material/density","version":"10.0.0-canary.07deaec27.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@10.0.0-canary.07deaec27.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"11b36ca6821799b6725121616a6e92520b3dd570","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-10.0.0-canary.07deaec27.0.tgz","fileCount":10,"integrity":"sha512-CBja/qt8xEzGseG5QbPYYoTU347tDTzHyW1uHRum7leiychw5tmRBU31aQBVNCbfnxmeDv3PnIVT764RYsI2Ag==","signatures":[{"sig":"MEQCIGpKh67p8IUqAcb30vh2QrE0jsQs4HKhrtGQBNu9ZblrAiBOJ2iwjk3cS0CJMz70ULCFuKnJchZfSLEJlmuyoVuNuw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13725,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCwNwCRA9TVsSAnZWagAA1dgP/jUJtcMuDxUAxddxmq0O\njTKzemc/lkH84dkWNeDosC9l4YPym+Z2pjogjg0bjZuIH3pbexYSM+kgM17/\nCjkv+WwefM3KSAIIEWtGByf4QUlUZlWufQIYden7km15rGEwSqgPGQRR0F2A\nMLcE3D+ljER/2VV93+kqzCkD9z3/6P1QdCF0msFZ/WKMUaMFOINVYNWW5ITd\nHE2mANOuFsjcW5cIweMQ/3rPUySUj9wgDi495m+bCmcaITxRnZ1l6ok5s2xU\nJB+IxyG+oP+Mnm65RavIBATprm0Csv0A83F39r69pHAHtTaippQUeldFSzEd\nHn+XSQxx1Vv5iJC2CZZ/tB3ZCN/kNBlK7oCHdz4WsCMXcavMC9bc2m5hhF8f\nF5X1mgidZp55AE9pFQldHK11V4WAei16jWr4elU04M8mWgpzB7faqwAW29jy\nPIhATzNyoPyf+ZzAcaU7q7sr8qqpYdRTGa2znhCEq53QlFcD++RSSLBorROY\nuIobisLSP7QV0nK/jGHPQokdaDvEfH7p8uZz1qTgUwoWGJweqyxFN00dSHGK\nkwwSdeLF/m+/hhY8GGu2EnEQGlG3lFKWhs6OoGVMe4JsG44y+SITtswE5QZE\n9S8pRYLOGeD6gNdgSsKh8mKcpkoDDde+3xpe3vsMX2bP1Kb6uGuhQmqt0rWg\nO5AK\r\n=QQb6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"be75b8d81f1ed6f8ebe94c8673f32110d71cec7c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_10.0.0-canary.07deaec27.0_1611334512026_0.47964539394911965","host":"s3://npm-registry-packages"}},"10.0.0-canary.d2959b16c.0":{"name":"@material/density","version":"10.0.0-canary.d2959b16c.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@10.0.0-canary.d2959b16c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d9d7d152715498849ac936561ba0e3099e5e8d15","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-10.0.0-canary.d2959b16c.0.tgz","fileCount":10,"integrity":"sha512-YhOu/IjQ0M1dssCPYpX/IpjX62LNQJtfAXsK01EJifYR3jbek46Qw387//D4iHT4aWkFWhS905gtWABSOZ0WQA==","signatures":[{"sig":"MEUCIHdQgC06RlTCaEJqSZIyvMWyi2M2f/enTE2HonFDaFxOAiEA/YMIt9MjOgcosfPx1z1FzrdfgKH2RbGjjP41CbXMOuE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13725,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCx6XCRA9TVsSAnZWagAAtlYQAJL/FSZuAIqagx+CFCeN\npGRuLc/AqoMrian3ErNbO9qKfZkIfnyWzQ6bD+F1+xaQHqr6TP6mMAkvEmzO\ni/5HyrDVeQ7XxNsZEfezTJUnciEo161OAJQ91GL73+vR71vI+y5NOnsa7T1X\n79FXnyhogu3ep8kyBdS+kVgAGQD59JhvGN04TtElP8H+gmccgiGSEZ2M8M74\nDhsFmWkxMgZstF4j48Vs3jp7ynPUmSuvf8sEYIxAF38GILa4L66OHw//imPH\nS+rHhO7QMup3FLKl9zIMLtM46Gw2YF4+1KWj3kKrleYSYLpIaO9JhdySeCOJ\nN9SaomHjm48+s1l5duY1KG5Ldk0hunwIcYMKDd6iiu48/H6Wp7JO3PDDNcmp\n4ecxjiOg7/28pXEZCPvdSGb9gfW2DyWecM3A0zRx5Ni/7+iu6YOa34Jwxk0h\nIHZlqS73fUbJF0h6lRfXMiWCbVmjMDgTRs7VpAM3kTn1M2Q5tJ1JUozE2isP\nVy0WHzZcQrd3EJIRykMYSGvDW2pnojFfU5n+S0PbSz8RO7+fl7rHPSolggls\nhSHLVMvHFy3pLliaC6ohrD6pFRcTxYZ5EuiIBTaV0Cpf16VL9ceUdXrsXRsy\ncNx81crsSkC5UYrMgvmljj8fYFSwERvwQoRS6VWpYsYEE9QSdGdkjq8l3OPa\nyoDb\r\n=zXTb\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"9a89df0257ea15e66bbd565cfea291993f0c4ef6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_10.0.0-canary.d2959b16c.0_1611341462843_0.2801735275247268","host":"s3://npm-registry-packages"}},"10.0.0-canary.75f3bfe7c.0":{"name":"@material/density","version":"10.0.0-canary.75f3bfe7c.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@10.0.0-canary.75f3bfe7c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4253b3ea358689d4b0c4034ad9ca966349df887c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-10.0.0-canary.75f3bfe7c.0.tgz","fileCount":10,"integrity":"sha512-f5qJyJEvk17BjyuR2C/pCJu1E/zQQKlPWLXm5xc4rvtabw7wjHRRUgsOBD1+LuUdCL+7y8j2Ggziup6pQbLB3A==","signatures":[{"sig":"MEYCIQD4pBn5CDv1BtXWvDhiiW594dJZ+e9FXrNCfbqX7B8jiAIhAORY4z9ay99w4PR4/6vGNkq6qBezgRcTcn71c+d4GZUa","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13725,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC1alCRA9TVsSAnZWagAAU0YP/2sjH2J8c02wdZh3wnvx\nSBMzMLABBMk0pRAY616G1RWxontG00p0ewcJqu0fiW85YZ7gq4JNXKe5k7SF\naJn8qMRc35b1eJCNzWyiicBGZn1shtW62yLStEZEHBv9/hYz8SW5/LLl3o3D\nYSwd+1tnO9E7oyzfeCZU5oLHCXUjJZeOcMdZhEXHO+uIbldhlRLqF5jM8hov\nlOxZsOJOwEPcg2aiupBwAROnosLluwgR7vcaafZQ4urHhcq2x9YMFzjrbg0S\nFbRY5swUBWyC4AHlQleqm2UDao1+jH4od9voUL4MdEmoTpy0Muj2WCvIYI7a\na38JkuXJyvnJkLLce43ik41tajqjD1rY12fXOAbdmBNB5BaP/Myzb3/43A3+\nd8XRQo+Fwe9kK2J79HZFhTh/Q1t5IbxjhibgRYocXBi3OIO0H/+e6KKii13/\nHmqv5ZAvU/8UUUiApvRBExSM4BbyvOAUG73KYP2nnlh3HiEMlBblI1VlyStA\nNdGKf9wU8wRpq9HPZ+lJD8bgqHPU2xCHoKsZec7mNP8MVBk1Cod4de1yA2ih\n2Cgm6yTphbhSjPDbo+hdyR6/d3zgV03Ep7+Q7LkyKfONP8bmRhWxfRunxfW6\nrbJFgtaSq0AJ1ytqnl4a4p2HXKrCgTveGianV3FZdd3x4uMQd/5wh7RKP91V\ndqdc\r\n=A1hR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"057941e604e02f88d571d61967040f58bf499bdc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_10.0.0-canary.75f3bfe7c.0_1611355813398_0.8526746815928039","host":"s3://npm-registry-packages"}},"10.0.0-canary.b9adb7a0f.0":{"name":"@material/density","version":"10.0.0-canary.b9adb7a0f.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@10.0.0-canary.b9adb7a0f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"14d5e339b1b7423e75ec1115c3c2598b615c771d","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-10.0.0-canary.b9adb7a0f.0.tgz","fileCount":10,"integrity":"sha512-Bfdv0x47xcekV8wk2wAta6irVnJ1eh2ztjkzDwRUBfEjHli9xaQ1ym0q9o/yv2TyzQMARhYN5RZe+l/xBcZW0Q==","signatures":[{"sig":"MEQCIE8tLp2dVh148xfPsM+bB3eOMqYGYP2dNqF5Q4W7bZdMAiAW5wUUCzXnAsx6VCZ5P+5csNtq3T8aulqGW22QSW8yHA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13725,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC2DsCRA9TVsSAnZWagAA4Y4P/jOOQYhYYRkKpNoy00El\nHs7MXkeBlNA8qqNmWXUWi7kVZ5rSumK0Aig7pkzANFWmQgXWtSVj7XZ19s9y\nn50gYhn5MwG7F641nwi7F3xVztkgh9vDP44wIQA1aD1fzLZ9I0cP1kFFqn90\nem3NEhnDWyRqCKVF1dza4PuHFlFVSaJPtPM7q03uQ3iRQurT2j9g62GHgyB4\nwHHxmhvtWmxH5UoVEZLKtPzgTwlg7/2MaI2Xg8GEwclG9Bt7OSPzpPFkil09\nG+jWmWt8xjUdHkp0S407pbAj9vF+GKeKSbgjOLXxs2dDXvXnNmnczXmWEeW/\nMNWc6Cf3kzXFqtCli18w40a+PJmuAMIFDZq8KorrDRouSU6nhjijWNZZJcwk\ncJbshRe9txRcmpxdVWUTi9JZoTFKdeZnZ0r49St1+FuCpkkFayJkJJh8lR9p\n6CJyEDa7VRiZ4capfzuk3EZOBFZm7CbIU1ohbuMfpZf055hzakCLM/IyCT+1\n31rVZum0/8DbS+jYsDmOyOr/BEsAp0GUs0upvshI/IRQgg5RyIxLs8UPenuW\nXv3WuoZy1VtsFhMihE84LpdCxO169JSXthXq3I2YzarUuKoSAhMAp0qeDL3Q\nSvHI9e4odIpq74Z7xsCxiZLclbcSBAbsl65WLj1d/9Vr0PNlDBMDq2br/330\nrqw5\r\n=WYbJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"a591eb080c699d02013eb9ab0090fdd5e9813a72","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_10.0.0-canary.b9adb7a0f.0_1611358444208_0.9399922497962556","host":"s3://npm-registry-packages"}},"10.0.0-canary.d29ec2862.0":{"name":"@material/density","version":"10.0.0-canary.d29ec2862.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@10.0.0-canary.d29ec2862.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b27a0904d939753ed852ccf0c283c10f886977ee","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-10.0.0-canary.d29ec2862.0.tgz","fileCount":10,"integrity":"sha512-NzJ/cVV/K2RqqwMTtX3ZvRPFsy7viYHWPUd+W0SVm/AgUCGogHw6y7Hddws6fCwUx/HzHvj9C/N+o8yM02uv/g==","signatures":[{"sig":"MEYCIQCpIjkHl/Uh4qHyyQotp3SxKaqoe6/qeqwxdb4KHgsWlwIhALEw4KDhf5mmrQSBSoYsiuw/UCQxA1frJc49SLuj+dZW","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13725,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgDvAyCRA9TVsSAnZWagAAcCcP/RPyMem6EendU9SdDBUC\nhz6+sPVvqkAm2mf7iVP8k5rb1gXkOSFu3mDVPId/MOYbqWyPbrha4Uu41/gR\n/Zl0UIvyUDrc5Cv3bzw1f1IHklB9+nZ7ZFUhhgUofpnQpwPUPru2i7ZH5QiF\nyb/LF0fw/L0+n6ZiWUs1XA/uGBvUMjc6BS2ODdAIuZP+9uYLtIoDXtRVOlwu\nw66o30CulpebfC5GMVwziEIzAUvHBSaYfSysQ78dxL7g7jKYAuMyeakRvlxV\nn3agzVBQi+7gVF4X97bC/mCq6x6xITpUcIsKesBzRwnqqQYiNNn2gqZEzchL\nJNEtPZInuJg1SxrQeylAcCD9b6YQjqabyL3z7W8GR9H3JI+vePaetFooj0t9\nWcDuIHudxLyL1BF1cefEXaKk3O3cpBwKFXZx8xJIKjtiDnNEwRxPl/XEvluZ\nQ7yOyZu+yZvihdK8ivk48khbdwBITcQ8NMTQUQqsiZBKdlr/cqf5SJo+nuIs\nKdd+vlumaaJW8D3MZY/O1o43/NfyJDVhzrJaE135DjgIn4fQ6lfiWyVYt+Gn\njvU2pyF0Jha7tmUTRD3LR8s0t5VOyPjvw7z/8XkHad9POtzvgkBDbaYuBKMS\nei/rnihKH4RoGq78KGWLTZeUUaJatpowqcfOVSS5mOxleQKweetWj/wYoF3b\ncsU+\r\n=CO5A\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"1f2d18d6e94fa1f0808b7d768169b9f4827dc692","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_10.0.0-canary.d29ec2862.0_1611591729927_0.8604032252109692","host":"s3://npm-registry-packages"}},"10.0.0-canary.96be07c68.0":{"name":"@material/density","version":"10.0.0-canary.96be07c68.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@10.0.0-canary.96be07c68.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"121f30448ea9a7aaf4ea7b10aec5d28e768223f6","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-10.0.0-canary.96be07c68.0.tgz","fileCount":10,"integrity":"sha512-EjD0g12vQz2Ibm8oaj0UiiconcgN9lyiJ97UGaLUkNc1t2kzTmO4/5Pt+Fbedx/2RzwZIpDNBwuGJPLlP/69FQ==","signatures":[{"sig":"MEQCIA4MF9y7a/87XE1vcVGfuAi+jyghqBDwryibeW4fj72aAiBUOZ6dODTXyL8f4Tu5PmrY/bYJzxmTkHXwV9EHqBzJXQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13725,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgD12ICRA9TVsSAnZWagAAnLAP+wcqdG/rv44sJpzJqaJe\nzFHBGnrAVwDn6y8qF5MOA4ZUlnL8JuOt1py2g7yAFXQfDye0L5Yf/cucSaPv\n59jSNkuHlQ2TnDK8yF2DBwa1Tzvx8mgcYJev5TtACDRuWPXO7DM1ZD9Neb2y\nx1ToJVuUhWjgLDtU/bBBbD3CP186H1fgFnwrBZ27vwn91I1kbpaOqxWkiEWc\n+Z7PoznSyihCyWdneLi0RUkbSgLzDqaZkq/nhOWA0K4leYiMzzkB938Awjvq\nEH5j8FIo6Dgq6t1icKz+924RM8x7gr7hUXHZTe8dAe7B2TWnFGeXV48d5SdU\nCmTW+8cEnxvChzxxLsJJL7LhfLQhVnRuOzZr11Co3wcAUSTcab9h43zGiQM3\ndsxKtobs1qQ/v7l4R9pdfnaECT+53PvvIbDO2SUiqx9JLplQ682cBeDSHqvX\ne+O/dOQ8aMWMs9XfsD0UOxfMCPZ4/YAHYpC88ius8Em/NoCLD+nOhwelf2rx\nImkfr0AUCI5lSW9yARza+/Xeagg5O69dXE9croWu+1ScZq+U8UDLXEyM9pSW\nzh/p4+tUYWcPkqCqyTed+JsOvfu4unnpuqfxHiK15d69aMjqPgM81RE38vXk\nb9jDVi3+/8Rumhjubml3a07tFcUeV6mtexNatbvLPd6hoY6bdWpe6R/9iO/y\n+aZL\r\n=9trr\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"ad510acabea4f02cd7399e109ef73d3b0bb52e0f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_10.0.0-canary.96be07c68.0_1611619720384_0.8254790874356819","host":"s3://npm-registry-packages"}},"10.0.0-canary.e383944e9.0":{"name":"@material/density","version":"10.0.0-canary.e383944e9.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@10.0.0-canary.e383944e9.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b67fd7d1c1939ca714554639c04820121ad520fa","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-10.0.0-canary.e383944e9.0.tgz","fileCount":10,"integrity":"sha512-8346VgXnD6INK7A62I2U3AEnB62PDazKu5xG3t5LW0iFa7giNVwaPs4e+EhDRI2n5GAJWWShT+ZU6mOT3Uk0Cg==","signatures":[{"sig":"MEUCIQDproDkJ5SGBaKbwShXcOXbZxpJHYoKOGd2Viny2MiB2QIgFF/KnVdfEtPb/B7V4isoez52jvxe0wRSIHbm9QBbeUc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13725,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgD3PdCRA9TVsSAnZWagAAvmkP/1WXPWlBMybrZ/pIQ4wn\njdljMjLS0iJcX/ume9HlLUAKZR/gr3zbgbrK2p39B0+OjKGrs+sw3UZt8A2L\n6hEMqybx0cL+Whw2LBj7CDNUB39mgpTf3DwtWj+r8tx8SjiPGW9dQW7N29lL\nrhINnBGXCZTPC2yiRBQb8XCx7Xkrpo3t9Ekx1F2Wbj5k5NyA43qd6pA4+1n4\nhPDcHUXeEDfCOKJJpezyBR4ugm9j4oMQhR2ET2tlrvB4n7R5MO9TfrV2VbVh\nzxzo4TcJOKnQ5C1CR7Ca0Vi6dfHGbnXlKMof3xR6zCSCN8DMW1fFJl303v8Y\nl1wVn81OAH2ojLV3tEVM61h1miMJUxdDmbXIgHwgaHDl6F5cSZImbNWA0vxG\nEen4dJ3QfNwQVSiWlzto8qVV5BrMFjfPoKm12p9JqphBBtXRBHglEn3Zu/42\ns2Mu1GE9Sv9bNIpVhFxl5M12ir6XtTFADcMXXItdjbd4BUs8ASjO3G/Ss4zg\nKzsBgJD02dQpPqiAMW8KeNR4x+9uU3SwueuVgeQbgmaQgfr1Q3qBu1FbD5xN\nA8/yEMZPShTp7c/weSljOzZUYJ4Jlipq79mMvjT9XdIVWKfqNNQ6zpV9qag2\nJuZgvFlUIScY0YaA3RJE5z5z8cpbLCMqTJHZX/jDOHDDSs9iosEQXwuJexLG\nfPS4\r\n=Ux+0\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"dc6dc4efb9210fc9c70fb089edb90278a8ab66f8","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_10.0.0-canary.e383944e9.0_1611625436438_0.06858543180966326","host":"s3://npm-registry-packages"}},"10.0.0-canary.623af861e.0":{"name":"@material/density","version":"10.0.0-canary.623af861e.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@10.0.0-canary.623af861e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4df2cdf5e090deb8c45de9eb6dd31b5764305769","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-10.0.0-canary.623af861e.0.tgz","fileCount":10,"integrity":"sha512-Xts9TSk/3fHAcj7ieWfHLStpQMpirK2RG7YzO0fmMMFYayHEfeakVsC7SVa+1W2mqqFBGWdPYCRtveQtfAEVhg==","signatures":[{"sig":"MEQCIH5oyuZJqo83w7YDTJKEGGD8hoy0hI4mZSJLyxot4Cq1AiAmyaLsBseG06QiyuWayv//Q0jM/8GZB1zbZSwOiC2RCg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13725,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgD5ALCRA9TVsSAnZWagAAv3sP+wXyJMEuKVFtwweirrtM\nlgDjXrxZjABjiYl8G0b/s2Mz6P39Mv6QskdK9sPrTC+qFXEC++u4g2CcHGol\nxjgHp0hWqb4ZOm31j+ViwFjm9CD7803zB7UQELtmf4Gdy0yGdh5mjI05tZOv\nXcG3Nm3CFO5AVlEPYgWcKdJtGaT/5WyfxL3IH3u/R91ONfKaYUitBs3KZy1E\nq1IpH/w2WdFObLAKnxG60P356pGpwwBX08yCN7MW1JeOWO6mlCtUWRrwVtwZ\n3MfAkMDFg89ZD0uap3eJhxEeB16u6VhfK4MjYAUpRS1JZC1IBXFUCdQH365L\nOB4Pw8NFNirMIQeIGorNo5f2nfK4FXr01CY8HZ+KjogtDONY5leqnIHAvSzd\nOC3SCFCtlPIuydO+L4Dhka/zIHmWGS+8/8MmkMhfVfYLQP4Jah7BvOH/zZYL\nlq1RAQ4tjV6KhiW41A3xLtenW4k5nHDvEhib+YME5z65TxI4Lc4/+TnxZPPr\nSEcsJdPsSuwzm5sCJaeWY+wnQPD67UmrPYwq0QKL6GiT3AGW68MGtX4+0FGm\nLpkzgX+VX/UiMuzTlnYLtxEmv+KEQwDEIuLZwQEUT84+F/mWdSzJxlpNEfd4\n0gcZMEhkEcMJ4rgf13xw237PY3m82dbd7oQxsWZ1YtCE9TnQJ9oRR7y/Q/iP\nmtmq\r\n=Kxtc\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"5906815761339487fac225651c29aa422211a72b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_10.0.0-canary.623af861e.0_1611632650856_0.10646538580688247","host":"s3://npm-registry-packages"}},"10.0.0-canary.6863fd43a.0":{"name":"@material/density","version":"10.0.0-canary.6863fd43a.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@10.0.0-canary.6863fd43a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"224efa45a897bac12c180f8c01d13274b7e1c2e0","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-10.0.0-canary.6863fd43a.0.tgz","fileCount":10,"integrity":"sha512-RKNQG3AXNpOK1ViznReQ4/WIldSzE2/LXnq5NkbZzKVeIj1IG2OnQpwmUdcVSN/cH3QQFAq6wfZYI+kJ5LTDtw==","signatures":[{"sig":"MEUCIAgGm/Ekasd/19nEhK6ZAk3NRuohrRvKdaozysvTYLNUAiEAmW67jCjaTMbOvpDRf5ACI7cN2VRkSDzBCT7hs/OFqxI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13725,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEIo4CRA9TVsSAnZWagAAkEcP/1VBDESnvTjXhX1QjinV\ny/TLPysYf38O2gCBxpWpa5R5EyYliU1qm9iZ1gjrcWbboGzspFi/j4LXXxr9\nTDHoSyrqFD4bHetA9s8yfMK5PBM6XOhLpVhiz5fMoGMSWMTUSFfxY28FAGrV\nmREZBkpFk9ZhGzcEPeXqBtdGR/utVy5L3bBq4c0sPf4Q3p8odGtINygppbjX\nAC55+fG/NCHiPTbj4Nxt4rHflStgZz7lGCmrLdHD5RdE7KRP7K2HdHP+Xn0h\n/nNThFm1wD0lMnSqT9w+6lT8BCOi6lr+iPen54HAWSZKQmQp/hL8J9wPfgf/\nisJjarbqZJbuxUWywuXql87J4PcQUFFT3haggmZZlRz+Ony6OHkkYwab2Lvn\n8q5gw6OimWfGWRW0NiKmt/eqhW+97OTzRU/mwM5E0t4xpT+0xQWeEZXrzoIG\nRJ858VJUT2XXAgY2HBiyxR/UinYdj/0XHnHOAhd41brUbVF0A75o09DlJxVo\nbHmr1IWPmXiMDNhB6+/XVl4iIcfJ5MoUwkYgnAvVBH9tIopeMtkAVl2c+ZIv\nbZEpSwjYGcPt1qYmiQeYJxvnX16M22djl2BB9xkU4+Py60aotfWMu8fzQDfy\nYI4ZtZRs/MYuegeYMhwylMrUlBcEwemjMgEpzw+kEyl/zFKjOjatA0g2bZ73\nseZB\r\n=4YHn\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"49d0dacd3a675991bd5b8c454304b1f10dbcfda4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_10.0.0-canary.6863fd43a.0_1611696695878_0.7829644183028024","host":"s3://npm-registry-packages"}},"10.0.0-canary.ea55b87ca.0":{"name":"@material/density","version":"10.0.0-canary.ea55b87ca.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@10.0.0-canary.ea55b87ca.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8eab7076da9ee1526ddec7a1b77266fb6afb626e","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-10.0.0-canary.ea55b87ca.0.tgz","fileCount":10,"integrity":"sha512-FWQHl7/hU6zvW51HvM28+MiSSl240uRk4XHijJ1WKv5Ye6+MLz11YsKwfmtlk7RPZqcPzkzqfcpWz92jEaPc6w==","signatures":[{"sig":"MEUCIQCYQ8iNR43Au+1mNpOljmEr9GxWb+47NB/buwDD7u0/6gIgOBYb/4PMhccXsGl4L/N6V0ufZOoqIiNAPITO6NMhUoI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13725,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEKllCRA9TVsSAnZWagAAzi4P/RmOn4K/Ymxu1y9Cl5zd\nFdmLRbEL3UriU5gN0VlLKNUTYRbwrdZxtopA/I+WEJJR1HH0EhJ1rLvG49NC\n52cKAkriAgNrnBhXqN0rcdH6dFF6GskwMyz1BFTDahFVhIRPH3X6YXp5HlbP\nGhrtI2AVfnSlhdPZfV1UIQ3KEaRQsHT9SaS/4NRWQhF/0ZtQMOwdDRj8QKds\nWoyfJ5FYnN9HN1f0HYMmKUE7Lnnouu1gdDOmt2aUneewKS7OB0sRktfPsApA\nPJ3PC0VNCF/Q+FvLAnKeWnkTqjBkcdlsRQpwEOdDMtD6Q6x7dfuzxkD4QWRe\nL9rjWceAsx6TNbCbMHti9w1biOTLeuUl/3WSMdqw5lTH3IX1+GiQBH3Ut2Ap\nqDIoWDwB18s4KeBfhWiOxTUvu9ee3sDGpkEgeTXvaSFokH3+2ylQPalyXNLy\nL/g7HlRvlXezUV5J6sj5h6QlmlQtKX/aHPu5bErl4oGYr8AmIL80r+B/i5kn\nvybenFZEZLtbZ0ANB362LSiwl2pWO3ED487IOxn1KjBwocNVXPruD45k1yrr\n4nkvroHQoalqLOGmNplrxvXVLj7BczzDuu9FPYgF7ndzele9455yWcrGo2Gq\nkeAN2pWl6+TnZshsAiQ2QlQ0LJuHyVIvMU0S9iYVNTirXUAS/hSJdXY/N/ga\nVblc\r\n=gru+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"00e7569feb0aac4c4dbbfb9b292c9f53adb608bd","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_10.0.0-canary.ea55b87ca.0_1611704677276_0.03299892194074361","host":"s3://npm-registry-packages"}},"10.0.0-canary.e902ff05f.0":{"name":"@material/density","version":"10.0.0-canary.e902ff05f.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@10.0.0-canary.e902ff05f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d081d1ebef287c3fd219672f6f92a56e15d08650","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-10.0.0-canary.e902ff05f.0.tgz","fileCount":10,"integrity":"sha512-Xt00s7ASX9Kh5JkFVjMVWJnHvR3e1euMC78GB2nrCUQ9J1NuMY2qa75cLXeNidOOJsjal24O7Z1W5mWnSH0zKA==","signatures":[{"sig":"MEYCIQC+7u0OXerKHH4L0jrZ8CYCp26jM8er7mjtms93ayJi9wIhAN7WHDbMlpHk/aQXPA259V45p1CPuvPoqMzP4oYqNvVc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13725,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEK2pCRA9TVsSAnZWagAAGXYP/AstUlEWyDL/WSZg9UjT\nUfgujhdTmW/+H2kRYvm/dy7U4nLOGceIBvynai2DCpOta5Vqf4LJlcNZj0wZ\nRD+TZDPD1pNouZoblVupxdDR3t+Yym9M947rDx9GQt26BLaDst+gbVdDSg7w\nxMJFTygZ17r8EXkT/SBRxGhM+ksE7zh+1ztXfmWFbz5hjwwar5DPQEXXsZQz\nCwyHhGSAh7nmiRVWpiCOPor+QL0sj97XW7YhtuyiHovwr4kGAhFbzWkCmDxW\n2nkFDivGdAwSjxnmEQbZicLcS4Lvc+QQGs2cAgREbT4v5mjltlV+ZnvoXdns\nxpA4L6H9cfT6oeko7WwMllRiluTeEChEwYe639Ani7S/2sMwHPoqffX6ecjy\nV/X7Ncz8meH06X09lNbPdX7cDp7z3TA1stC0qNqTWC1WZQKnNep2qm8RVsW7\nmanYU5DnacV07UQqf/3lOqARrovbohJ+x7eek7+VYXQcpdEhKAViY3Wt4XWM\nkoM29LVkp34IILg2VR0Y8hzublHjsNLWGokAa2jYFBmWj2lRwWimO771I9q5\nQAReoF3+x41OLMSiDIUgLUbxSx9RcrDk+aJh+ckv1kDZquDjIHRQEGW3z3MO\ny+1oWEvKuJDBhYpA1uLcG6lQhQkrzjGSGwGflQSRo1Fv2PEroe5qhE070SC6\nGbmc\r\n=kDt9\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"8ae6ee07772b70becfa69208ee5a4849f86c2fea","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_10.0.0-canary.e902ff05f.0_1611705768730_0.8082834299176986","host":"s3://npm-registry-packages"}},"10.0.0-canary.2c9fc538a.0":{"name":"@material/density","version":"10.0.0-canary.2c9fc538a.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@10.0.0-canary.2c9fc538a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5f28743ea522306bdeda8bd66252538c04ad3e02","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-10.0.0-canary.2c9fc538a.0.tgz","fileCount":10,"integrity":"sha512-9daSJB/IAeUSGv+yIEXHIOso5BJg4EyPBAtzsTYCVcP9cxoNSmwipS3kTN3TgBSRe5YM4UlLWT3iP6YcSFGZfw==","signatures":[{"sig":"MEQCIErS7oweuFRjBahgPhaMccn5r4/Vf3guVhdlesx1ymz2AiB2Epb/1TZh9RXzRHfueGa5JioOKAAn8ufSOEHoTSXO+A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13725,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgELMfCRA9TVsSAnZWagAAeVYP/3qMtgQqnTwrkjaDyY8H\nPeuvT5HzYqIAAVz22DDbFAaiEz9CTW/4SJGxUxKNRgghtjzXGJOPLd/kov4Q\nQc3Ie6bFiXIYd5ugB3GWFlqNJO5Ia6cwwciCaZfvV1NtwtXa0bOzlMiDyyxU\nT6BkzmPqz42o88KSzpK+4aVI0ce+09cdIvCAyUq2PmD6+0WeWmk1+vKhZBSZ\nweHLCltXKPIXMua+vMtXd+5/in18VGUEqaJkfKwn7ZuroYifhFpR5rmFkrVM\nNwB/oZWh2LlQQuwJCAu1tpA5JspQsfoHclquDc7JQSPXfOZmv+KJQepSpS+4\nsDtn2nLTI1QeS0mbr+UJGeYfOtbkKzwQEL1rPiJggUmAI7fIxAaE5mgmv/+E\n6dDKcYCj6c8xdpO2Ftw6LZzCNdN8okcQmohqgFxr7wgj+aES+aabFn4Uxg33\nxMEJsFUThhsY+c5Sy37vGYSODAE5Av/A5j598jNFWFVvMqxlj3QfkiWpIvWJ\nhZi2CmKZT5kEi1h1Pm+Cee2NcnmCLcViJHIIl++gyXbCTKipX/5OMuUdzoTb\n2NEl/UafP+7ZYhm9qSD5BqFTm3YiyUr0OTPrGRVYoJRYyS6IR9XaxZf5Bd7d\ncwLnR9hpc3ldrfj8CMSKGeMor5AfAnlxRd+vbuHlGC1uvEGUMyEL3Wf5fxvR\nWhmN\r\n=YuNk\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"4bc5fff9ddee1f7703010e418626d050ca883474","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_10.0.0-canary.2c9fc538a.0_1611707166608_0.28752917210509565","host":"s3://npm-registry-packages"}},"10.0.0-canary.6bf56aaa4.0":{"name":"@material/density","version":"10.0.0-canary.6bf56aaa4.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@10.0.0-canary.6bf56aaa4.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5ced14f43bf6e9651eb24029452b5dc28fd7b3d5","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-10.0.0-canary.6bf56aaa4.0.tgz","fileCount":10,"integrity":"sha512-GQo3YKXytbzK9E7J+/dpCr9E2jM9OJPpt8wIjCtyftQGU0PQK/7WsJ5NkHyBmeJqhHK7TdAwKXxCpjvu7FLRZg==","signatures":[{"sig":"MEUCIQC4JiaG8vuoUTGHPhz7Yr9Fg53LZZL8txIMRDFH3cxcfwIgXlRnERLdPEy9US3Cd9OsXI9MKdzWjSG+Mz/bk5d8xr4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13725,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEL99CRA9TVsSAnZWagAAEr8P/27iiV+w6pWX+ci6fsCv\n+n2XadH7HmsEPeiMTdhBZGaLEwxavDOqRrWjIUgyYPmaiRLIYpprUwvGWRBC\niTMV9FmNGmGZrqUIaNe4JGuzyGXTwyJ4vhneDxG2HploHvJdbyEyoGe3PpTS\ngQnKo2t/XjCNNQI6L/8Pfm6J9E89A5z2RoOoVeitBbTjGgI0Vmht1WGp4GJY\nezGoMKo15j1Y3PlVHAXallDwU815rrxbwOrnFpoRuiWtzKAEo0noHaiYDT7i\nEIZQtzIQdshaSaf6OSLyZvKJUWqedU3G6m6JDts+YPgTW2sD+oOQ2fAZwoZV\nNRie2/SsU66WNombydqOqGlQjJzQKys1Y0M2NjWXf8gLt8705c8QeH3prW+o\nzn6kzJlvR2RLpdzGBzG7wN2ik9CDg8ZRmEWGB01rZ7X1qM7Co1ueRwrAQVTf\nZMPDLclUCm/HxyN7JS6X+84rpEoZOsarK1BjMtRq7F8mAHgJtFcI4uKoD3hN\nXKyFcCNKUcpSEyp4wn0Zxzvsjc5nSeSyVyorVKFacJMOpHCEG0FTGlz69hY4\nhI4JV5fJjH7TqtCg6lMcXm7BfE1F7bezmFtSsD2jWpL2idExMjhexhGffFY7\n+7BWLZ30N+EoL3ozmhf/b/rFGN1nGTUASLUlhcvXbg+W8H5YbWOF0e+d8lrc\nG2Ul\r\n=PSLX\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"557b9cd09fc15e60ea09bd17651230487a292b59","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_10.0.0-canary.6bf56aaa4.0_1611710332650_0.49841371903570186","host":"s3://npm-registry-packages"}},"10.0.0-canary.994873795.0":{"name":"@material/density","version":"10.0.0-canary.994873795.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@10.0.0-canary.994873795.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"26c914b5201156a0730c0db94640419d544c4586","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-10.0.0-canary.994873795.0.tgz","fileCount":10,"integrity":"sha512-VfOZeyTMMmCetwsDsowBsAhFNT76RPqjQGtSP1OPKYbJeI8Jeq2vR1CbmhmpQ4jfZuqKMyfquFydfhqGEu3sKQ==","signatures":[{"sig":"MEUCIQDbMBgsVVx7pRwlKPwvyteeW9ccHuyFM8pmVM8+ASCUXgIgNisuyXXX6JpH53FakF6tiNtxrPp0EFBsdKZbbL9tQ94=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13725,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEX2NCRA9TVsSAnZWagAATBwP/jwarag5hhftY4eDRZuW\nh+4ojkta5zzt/lQrYjYsuZsdI//BphlWa/V8UjXoBwHGxcTGIXsuIltusLZn\nKOBXn3Nd9gDrvQx/py6I3DqybSbHaFxF32X7MsPQc1flrSezu6g3lLB58Y0G\n2JVmKYPKcjPItkWMwm3pDRSkyM/eOeezIBe7AvuaRivBlqsd1PIuF4Q3oO1G\nezQQex+EihXujIVnEv9zYeio3lcSXiM4W2+hWxVG77oc994QCLUmuT3gBoJk\nvds76JiW2oZZs7XoPjJtxLGcJEOSv8ZCJAf6HU3P6qQxcy4Y1GLST5dC8D2m\nkZKDtmBxE1uVS6A7J+08Q4YnqkTdnlhCOugMcr1lRvbSLS6ExTfTLuU7wt/T\n8WU4up4w7MvnsGO2Kh+6myV5EAMvDlXVvykr7S85Xtj0auKYGg1kiN4l1YUQ\nFiGnrA9/KlfpOcocmWpSFi2MoPxAqVkfSTrcJw/6x4aymUpyYJfSOc27eBCc\nTxSEiZ4B8WulR5R3BGFnX/OCF8hCVKq+5b5QbWY+3o5WBZQVsxWQzZRKMEA+\nYOLc1i9OiEwtvTjiLzKj5vI9QetYAgLmzkvUtixGojfRD53BjWSIQFOhL0Vl\ngNTN0zqtwNzNPPxAeOTQmv8gh4UjaTSDDJraK+d5NZqIfUdc64bOqqsZhNoI\nnSH7\r\n=c5iE\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"8d1337af6a27bed9f06167ca1cc1c996fffdd9a8","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_10.0.0-canary.994873795.0_1611758989299_0.7131774389373722","host":"s3://npm-registry-packages"}},"10.0.0-canary.96878e1d0.0":{"name":"@material/density","version":"10.0.0-canary.96878e1d0.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@10.0.0-canary.96878e1d0.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9dd852f0f4ce129b18a4bcc34a2cc46e99d9f416","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-10.0.0-canary.96878e1d0.0.tgz","fileCount":10,"integrity":"sha512-p9rPJ566yflgVc43KHYs3MvEl9vh7FHY7VR/8R6B9/6mtM6vrF78Kdp/DSNUNC371i8qZ4P5rNX7FTsiAIC5oQ==","signatures":[{"sig":"MEUCIDDiB/UENShyrTmK9HSbDJv9AQLinQoZJMULALhZKjZzAiEAt6OkaQphuYHfkml58F2LdYD3HQeEgHNCxwUht6pDj8E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13725,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEapZCRA9TVsSAnZWagAAMq8QAJJHkV4FmOT8uG0bfp1A\nUHsetepEkDKXwdjBcX0B7MeY+xG/Hf8Bljtk63P3A+vW6FhrcMqRL2T1JfoV\nez5IP8xQ9G1NCRT8q1ACv+X0DDV1zFZTbwpmFuxJQZuObuQB7DSfB1363y9p\nthGP7a0TgIKKuBtZ7Z7y7nU05iIE9eSBmYxbnF7yquPzxJE3ZWT/EHa8UhTV\nJBcuJKiznCW7SSCOltI8jgmpdVOh8LTUKFeidEGNHrXcB5wvtWxjoaTbUNUQ\npnFqCg00za/dhp+sc4Cacs/JQ+8AHRoRajaAeQhqmVrzZAwOWTNV36D9ywYF\nMO+QUeUzzSfXEqBpxG1esTsTvACdMadxi3oXoHxsxph2x/dDzzBJLDWGmdq/\nLwOtv6nAl+4FoQxm2hDQsTtB9UDpziSz1wfuOWR0Wfl+XHMJv4zzvrdf3dQ2\nSNcN5bqFxG04tIEHIw9pRZOiEx3kkgLrfE/5m+rYYIzwJiJOCSr3megpt9Ua\nADl+UYABRWIteIAZOB18Tp3P5og/QzN/Ar8mpoh1frz2OLYwgbXJ2iT6PaK6\nnK89JMaLuELn4Bzo10SEKjrPo5hioI5JbIA9a9JboqbcvJIzQTvMvtq7IOUt\npNVyZanH/RtOnWbyw2inu8FD14LwD74iLzFsTwWHSZ+OzTOEZs63GoCWedYN\nwSCW\r\n=YMAV\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"cc9f62002fbbf03874065eac25971ed2b49a47ae","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_10.0.0-canary.96878e1d0.0_1611770456513_0.4725700466538534","host":"s3://npm-registry-packages"}},"10.0.0-canary.3c117cdcc.0":{"name":"@material/density","version":"10.0.0-canary.3c117cdcc.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@10.0.0-canary.3c117cdcc.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4044571e896d73803bb74bd21c6105bdc09b6201","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-10.0.0-canary.3c117cdcc.0.tgz","fileCount":10,"integrity":"sha512-l7GjEZxGzRRPTC0wfxQ5feGzIWbTHwglpZw8Yt+wsyQKYkD0O5I6QJYVz5jdcl01PedlmrafzAiKnT6uUbDevA==","signatures":[{"sig":"MEYCIQCdS+CfumDzMqcVOaqekUTeAVO9lzknPjg8Y6ULViM74AIhAPktnnTbLJn8fTU3/d9b0savIRJBbNuuKzD3ZbxVErZt","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13725,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEbFoCRA9TVsSAnZWagAARBwP/iMDEu4/tirNhsbePu2j\n2k6su5z4y8K8/X8vanebEWU53+vHRMaAitfbAcRHvK1Ltt690TFg/nWqry/W\ncjPZom+0b5sC2LFVpsblK7KsAmFvqThpoMzJyxBYwasKLsPNAn73FAuLDsav\nvc2N5XfuEL0c5B4ylnxlFR9KkEomeLlcD/NxGLtlEvaeAzgdDmZU9N7hWpTi\nfYH6PKcPjKNmuT2XsydzkqEv5nbw/0MsmCA524Gew1tYcWQ1dSuogsbUVvQ2\nmsDNArlLk0ZtvvKvHpbMr2ZYXP/QQwisNQ4RKcITj4S7Z9nt2eRvBY2VYbtG\npCXReAf5clNpNiYQbYu6Et4YTYkvNIKrA61fP7c8zvCC7XsVZi24GO9DucWF\nge0W8h1ngimYU6P91nZzX6T2MeUKXXg7xKSr5Dbs4WYQNX1TW68c4N6yheqi\nZTx7I7gBH0iS+fsQ8EeoQPnvzE8w8w3KX1ovscMaP7zHQy6qnUcsGZ0hO+9H\nAhfNz/VXvRwgt/LHpuLMTayjfjfokcdnqZ+iZDM9US4cwxs03fvUlfTi2tpP\nzwccVi+nWMoWxn2/eDNL11oCdEhxrMBVAIMu7MfFHkUGpVRTUMS+eYwvYmw+\noYil2IduSCkJska86R7dhJperQ4VJxztdLg/qQvFvFNGH7LkwhYruBojdz5y\nnsF4\r\n=0PX+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"dfd1ede4a4727199e63765d305bb36d91509dde8","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_10.0.0-canary.3c117cdcc.0_1611772264517_0.9731699053255707","host":"s3://npm-registry-packages"}},"10.0.0-canary.b411e7033.0":{"name":"@material/density","version":"10.0.0-canary.b411e7033.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@10.0.0-canary.b411e7033.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5195f7aa93ae80f4e271b3044691e2f0b0f5b513","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-10.0.0-canary.b411e7033.0.tgz","fileCount":10,"integrity":"sha512-One9zEH8g0qkg+WRyrqDsmZQNbSxalJjl7NB5+ZIyDfa8DVPVS1N/pX05k8otyKRATGeTaFkLBTiXXqI2EGDTw==","signatures":[{"sig":"MEUCIQDjDIVEDyx3NFbqitZV9Ub7V6ER/HIT1TNpt4nB1bybFgIgSDHGQAqzIw0oaf6p4xn6TgCyn1jF3tnmoocUyu3gXic=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13725,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEeLtCRA9TVsSAnZWagAAv6cQAJyjDA4I+4odA70p2h6v\n6L3PKlHJKN43Rn+fTrUYdMS4Gwex5BjQw1Y4KMdN68IqyZWzFPnyISaUtNqv\nR4tnBHfwEi3y898GSGxf/MLLnEgx55R/84ckLqLdcEiqHEUJZm1oLuRrjzoM\ncORvR69DqofRhUtk96yBU5ifyNhMUDAvw0aYjJKSny4AE4SjOimYceFguk1S\n17sTE1NIB9p971j0atj9AUSOUxn1t0Aqc/q51CY0yWf9GodmLjMZ0n34HYkQ\nE/9MtYLUyDbr06gBOZvQSMgIl1lZHSqe329Yp7fJ3r08pQ9uyB/aWSrt4uOV\nHABtWcVNmuARKf9zOXqxodfvICc3HdYoi+r1m94TcHtRK6aQ8jKBD7jJJUSd\nxO45fNZHUn0UawBzdI42QMMmtA2Ypp+Y84YL8dT7oRSUchH+Yj8KZB9FNnjO\nKNO1fiA7UzO4I5IdGVERVwzTKYBlA4HF7G9wFqboDJ5ynp1CGd0PPW8ikHL+\nfiCqLAeabXvcfYTNDU2wIPRnxHM6kC6M8bWzB/j3LQr2GFOpQ7fYa0rItAg3\nWdpXXEyC4GM71JC5w8vClfxjae5+9Ze0uRjGNDEPiBBeCgAFLu1COZS7Zahb\ni67/8Q31lIh7TuMxpxfNCm/F8LCdnsl0E/0sJAX8odUA3HceS37dCKPxMOqe\nag2B\r\n=mVLo\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"1d12550a6229cb648f6739f83d7ba5feeaa67dac","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_10.0.0-canary.b411e7033.0_1611784940509_0.3949168886558365","host":"s3://npm-registry-packages"}},"10.0.0-canary.a9ac16b4a.0":{"name":"@material/density","version":"10.0.0-canary.a9ac16b4a.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@10.0.0-canary.a9ac16b4a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"69ceeb9a62e6e3963de829936a132a9dea987448","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-10.0.0-canary.a9ac16b4a.0.tgz","fileCount":10,"integrity":"sha512-B8g0mS9K5x8i4fokWloSrwNi50z7DbDmoa/Op2PoQH2d6MzxO23xHP/mI/8fq9vGX9LFlZ0sof37g0kiu3/yyA==","signatures":[{"sig":"MEYCIQCXqIqyFNTX0Vizd8OgvsPwqg3ASGP02Xzb/H5kgGBnqAIhAMA81CjBwRPCqOtxoYPbdpPt9hqGxG5ZrFBuiNSTSd5T","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13725,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEfD4CRA9TVsSAnZWagAAArkP/jC2RA6j5fu+6nNARcLH\nGS4eyFE4OlmwZo/8xFqJzstsNsvJlQQONfE2Nuglua2Bbqf69O+8unRIUtrH\nOVX8UeiHnwjxHNsS2RAlQ3hhlUd2eF+o/DHYae+ije4uHGj+pjJla16NfbZJ\nC7iStW8rt/XznY8isC86gzkmEIIAORt+AfHYbDU0Siu5SW+6o5VRemQ6D7m4\nlcXbkxBmLVcW7W1MI6DYo3Su7dvIzsIKXU6i2d3Bnj4Svg8XAInzspva2kg0\n6SMpU56xziK/ZK3UjKcjQaP62+Dqj2J7FLjddgbu18h+cI9EzYCGE9j61NIM\nqmjUKphM37tD4bsGjXd5d4IUxdiZ0FHLultKGSkUGKTE2/CIjLZ2ViEGgi4j\nOxxUpg6EnkbEcAXXvQ5eci2b8SLqjBhMla6KffvBKWM9pO4CgsXcbUxbdTeS\nlvJ683JUnsRbHdsQfVLHw4+IDLD/gsJP3NWAlebJXS0ha+4O6IJPhOh7QNW2\noSCpmDsG3aVi+z8FqehiGkdCeVnE7l/ud5OwdTYTTxjKuuOHu21W/8klOuES\nJaeFQyd7K9YpO38rPxa/d8wgJ9l15XFEQkU3y6u2ayOHQkkBe4hH9q/23P1b\nm0yschk1I7kmcszE53G6EHcc2HB+keT8t6kpVZOFKzv0t/OqRXLylx0h7+QU\nJOpz\r\n=8c+W\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"1635bad405a8d329ac4e844d0a2b5f3bac553113","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_10.0.0-canary.a9ac16b4a.0_1611788535601_0.641752090780578","host":"s3://npm-registry-packages"}},"10.0.0-canary.fec7b42ca.0":{"name":"@material/density","version":"10.0.0-canary.fec7b42ca.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@10.0.0-canary.fec7b42ca.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1f19392d82a4e33aff620e919ee70fe02961d719","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-10.0.0-canary.fec7b42ca.0.tgz","fileCount":10,"integrity":"sha512-4L2Bcuh6ELcupcjWFT28QW0Jxzh8fbjAUjOKwWrfQq5wxxN7LbENi8jKq2P1S6nXnWw3QbXyAIveS1jbSQUstA==","signatures":[{"sig":"MEUCIQDiLFTed5S0a8FlM8dvTwXUxI1UTHx6zC5ZqNicwdIMUwIgcnC7DtsMzs5kZvshYA/Q3tYuZr5mK33tnLE5tyVZ+gk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13725,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEwzZCRA9TVsSAnZWagAA9X0P/2QEiAr8hTy36Drfh9QZ\nnr4CmK6Ou3FazoaKKuxssLMPoMVJ6xWvtE4quLp/hn2UhLJlU/FTgATivOMc\nzeO7m7yerHgYqkIJS7AY7ZKKRagbEz36kRacGDHeMqqqFoWFd/AmFcQ+ajoF\nCw8IsogMTDcfv0rm3tNU7zlOskIBMjl9SAmJIlqASdVE8GUI9/iTo5L5Baik\n01NgBDgjULpm9s5lgQLDR5odFAYXjkt4eBBtFqoP3GiFGYbSqGzdkSmsuQHQ\n0ZPF/024oVi0mJT+vuVacBwfTb23J3FuZCTRl8kHZhAJ4W3W85dJDVcdXC+U\nF2ygml13qPtr8qgnftiCvqDGuN+9dMABv2DRCcNZhvmjx5S/FBssxzAiebFC\nyLxCqka3HtNlMXmYI0oXE06KbsUDmZ+9UWHWHT8Pm3KSkli9xXbnqNQoW3d4\nYn5ESNrWrjWG4z8ONjpZDskCvKozf/ghq0BEDgve1fRWYTp7dX5G6ZSxigY8\n8a8IvwrbULre7RguUA9S7zjOCmp1wRkmQndDDcCrXxhpvPrOwBvm++0F1SXb\n49/LXjKZm6UtP77R7RBoBTAMqU8a/gQrFtNLNpLfOu8MoP4o9ERV2Nz3CQU5\nme+Icx4ft8C41S2mbcwyRPRn043FDp4UNGrUs6reod87FnqPHUFkDAuTJRgO\nSuSo\r\n=GUay\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"c05b9618cc2b93ff9a68314dc20c83c691206159","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_10.0.0-canary.fec7b42ca.0_1611861208853_0.6419601306033116","host":"s3://npm-registry-packages"}},"10.0.0-canary.8e66dbfee.0":{"name":"@material/density","version":"10.0.0-canary.8e66dbfee.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@10.0.0-canary.8e66dbfee.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"271257e0ebd65482a13531c77ab1602b0adfaa25","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-10.0.0-canary.8e66dbfee.0.tgz","fileCount":10,"integrity":"sha512-z4FVuicPSnG9A2vy3Ur+PUnu/WYTizrPaupwzkI6OVjwmuNm0xtmwOoHkjnv/TazmTiMMxAD/4bhbZZn5ARwxA==","signatures":[{"sig":"MEUCIEcSBrw5MBhSNt4FIN4GWarCF0mlvFzbc73wl4VqV0gRAiEA5u2RfkYjLrM3o2dl8Jkn7LaKBAkbMd0x2LebUdh0OVo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13725,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGIxzCRA9TVsSAnZWagAA7esP/RGz2VBcQYIidAgeOo1+\nK5pC/t1Qtna1BYgVPFaIBkEdpIUw7DhzuB2ZVkO86JtA8XE4+jbXI6zswrY7\nkSmRyTd7c2JN2vAJvINMRjSj2ZOgIoErpULJNGfRikcFTbD3XvxXOYdDSZjS\naSOtmWvKE46l7rlqidA0qzL0j/VAvGgom32SYT2WhxbY6NM0VHz6PHRTZ5LR\nd/EgyODIWhYNeA1LUkQlG+h4u601tslTF317XIfZNd2lxGlb6GvovDBJOw8L\nE/D+AAUUE5HPeBBPLiZyVlpArelEd41rMPHoHDRuX7Y7zNol4zbL5u00bkKv\n2bCrAxZxof6K2q2dMG3ayD8JdtQACYJNS9ZvnzpZOBvlXyffMzZQpD1MncJM\nl3HzsLxV0Vu2B/v5eOFsuvZC764GOV1rdAZAqY+PYIYlcEoYunTQMQdoZCYN\narQV2Agt4ohX7WhDKG/4iJLVu18hkTKY9cQRXGZqUh2ZX9oD3m70Sv1WF/v/\nz5DXvqWs83hzNrJUM/KjJzvBb0AlvD8LuXEhsXgFvtZQvYgXuK+nW5Smx9mS\nL8d4yphA21nVnS5azWNpW+15e60R+IsGUNegYGzQvH+kiRqr3RvfwWoKcws2\noB818C3mLnCvzaMRWbUXWQTL/YVOm+7MSAzUP7/Bc40+gnCjskER+yWEOJ1H\nhfpc\r\n=1Nxw\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"63606d4d60d94cbfccb1897812018e02aa13bd18","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_10.0.0-canary.8e66dbfee.0_1612221554031_0.9473362776376262","host":"s3://npm-registry-packages"}},"10.0.0-canary.637d15da6.0":{"name":"@material/density","version":"10.0.0-canary.637d15da6.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@10.0.0-canary.637d15da6.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8c2064033ea75d2d08c4dc7740e16591e712cd63","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-10.0.0-canary.637d15da6.0.tgz","fileCount":10,"integrity":"sha512-AJ0cJ5qcKL9Vp1lnjUgQ4271chhB7tPA2QJu/1rV0hsaXIlBfEEwxHYtbVFMrNNQW93KUeJvS+2ZbgWJJYZMow==","signatures":[{"sig":"MEQCIAcX2uixukpbXCQtGKlMVpxNcDy49OGLtWJx4qqmyVC1AiBLDIb446tFVDMybaVtYfl08TqbDRHbOC27uT9sPRfTfw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13725,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGZ5TCRA9TVsSAnZWagAA/7AP/ixvM7p7GmiXRb7/tHuM\nPTkXJLCloddBPMlZ9sjAswWHCVEVF3x7rkdYBob2Pim6Jr2dmzphGA2mcDVc\nM49+opha/A+UK26bzVqR9vlr6Egh6b/HekB7wtl04qCHm+lOczIq40BS9Kn9\nlugvxgUIJEJo3KZqxsak2lLC7SX2q5JSShm8u3S1dak2vvLwUqamIgbk44SF\nNar9dKvZiQJpkBMZgw5n6/pzdXGUKe0iK3fH6L/qlBEh1y5fU+2tiVJp+mSq\n5Y7XxzptlRMpWS54LErGVaYagJN4IjaGm7FXl14bhMVfKzAlnTh36LRbuutp\nV9p+WF/CFssbBcQOkBOpBd7luFSopHc4i9R2zJ6njml80S2TRCB4W+jG42VK\nhN5cXEz2QDK71bnJ+xjgDI3bkWdjCW/pz+xe0PC7XEs6LG8DI+cPS54vrdgb\n1tjk1GlqhZnI2Dr3AG+2K0SWxD3h0e5mimUS+rPYCwiYaoohIJ85kEamxfT7\n4rio4keWyea8+KiVQSAX1pYlozYyV7g0xgnbvB/J++CZiZrx+mM5MHOZid3G\nMsSRlpU1EBATzuqJ0w8EujMrW6K+rttFnR1F5YwigS8bPsdA7QXbqBsB1J4V\nv9g8FOOWRGptrd6UBT6hHC9yz4CTpkvDYXPzL8GX8gwpVJsfTnYGZg5Kzns4\nIYqZ\r\n=jhe3\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"264dfb09f81436a3537d88f2366133e250344864","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_10.0.0-canary.637d15da6.0_1612291666813_0.4938092744612319","host":"s3://npm-registry-packages"}},"10.0.0-canary.fb793939e.0":{"name":"@material/density","version":"10.0.0-canary.fb793939e.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@10.0.0-canary.fb793939e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6ad5ca3e651926074bffe74e58905861d1713d4b","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-10.0.0-canary.fb793939e.0.tgz","fileCount":10,"integrity":"sha512-oSlhuk2/j1qcqFmHXvvrCpCAxJ1NDjEVtrXFyPVY1b/yw0XzeQXfo2o2gVdsKfWIDG7k9EZ/dSjHYyUPWB+YFw==","signatures":[{"sig":"MEQCIB4Lm+bCQ0bRKx68a6Ie4qQS5dc1bDy0iUmn+ubVqP1qAiBUfl1OrbfyeXameArQYX3SqQUKsY67I4mzUeLyHY/BwQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13725,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGeMcCRA9TVsSAnZWagAAn2kP/iDuLNxbQJMAZkk/GL46\nUEmpuU3tMB6F+21sKV3E6ElEDKhQbHll+HyJOb3vhB0VRd/q27i9gbzKMvk2\nk+kz0M/t2ASBGPbMw8BnNW78qHh6sVchk2ED5jF4H7uIvH7cDMwLxCrLd4W2\nlNZe/nmmCVC0KQLuTSXln/FyuAAilUDycEiqjG7GNWftKT2+CfDwdJ2feqDP\n7pNbgshCmVk8zVBPQBQSzrSRLJE2VhVVVX2/a8tztbRrl08FSgRqbM55eNMv\nzHTRRETOmHRTV+fGQpCA1tOvaG14OaMyPrc6tDdhMioyWF+6ATfAqpHbiMgg\nWMSgYlQ3W570mAPZhw2IcBpHx1KR3rP0B1XW/i6PAhX/Zw8MX6niE/KEBmL9\niXSr5TvoE6PQJi/0NK16u3NtM1aQgv0GeQOn9pvWxKmTNAhM29odHJbpyV1x\ni0vGWdPpw6PmEps2rbaBTpoVLHoflitFICzG2XO9UjArThI3HJ+NzOUUmkK5\n6kOratX+QaE5a+eIi+LZc+fSg44hYy6VIeEsalcsIICQQj/ox9yyhL1yFyVa\nujTXut1M3ETqIdeyfb5WZPm06CIRBn5Fz4SgEwxGjIe4+R2x7yvSb6aT/3em\nJc+GICVEB9LBNqGy6vqozYtozMYkv385uIHJSgvbbieXg8LEoIkgi0KiRDtK\nfNGD\r\n=xrDD\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"b89489007d2a0c1f3821bd2291e448d44723ac68","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_10.0.0-canary.fb793939e.0_1612309275571_0.34971233958045556","host":"s3://npm-registry-packages"}},"10.0.0-canary.15a4d40dd.0":{"name":"@material/density","version":"10.0.0-canary.15a4d40dd.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@10.0.0-canary.15a4d40dd.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4b036d837822be955082c1854ebbbf9bf4fefcb0","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-10.0.0-canary.15a4d40dd.0.tgz","fileCount":10,"integrity":"sha512-6UyKL1Q2QZW+scRvK0tnjlUdMLH/zFcK2Pkcn0zhZdCwuUEfx9WbPF570Fjvy3GJ68iF1QY7LIeNUN1mMi54wg==","signatures":[{"sig":"MEQCIE8UT//98QYnsdlFfRfz/m1JyaIrF0JrlVdnL/75FmswAiAdsn2chNd6u81BFRBueMOxZQLdgV5SIM4UYcxCchHihA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13725,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGge3CRA9TVsSAnZWagAAZq4P/0frOFI/3aawjtgAMVhT\nr4aXncY00NAV/0vdQ3S84u+o3rK5ilfFJ3WaPkrtNONbW3xL8UrCVC/8gOES\nmZKUojpDNEE4CQ6jEEQbAplGJ7tQ67rTFRPPKu3/JXYnSwKTiRGxKlO9e6TO\ngg7fyCgxNZjE8qRvrgX9ybBHmMzkvjqS/k/j1tzXp37HpMcRcumH6d0MOGJk\nNc8uwR1VPacI+w4iAWWwf1Yt1EuvHTSNkw/uiGEzn3bvSvcux9dLXdjF00rE\nG3Yqtv1e+6hDMH1y45DHrS4BzCon3aURDtxjSvGVJMBLdQcE7W50x03Btffp\n5+4jb7NgzEb710QkX6TZiV4zUHhEBNhNrFN5chmHfvW3VlAUfWA20YLNLfvT\nyYn8aZNccsKXx8QT96C+rXuOhHmjRW1lWVuD3mp9BIcBucMDMCsi/oZvkBln\n3HlnPHIlhQJUCRYXHU21koZbQHTLT7dC6JglT/evzoHU+D7Pn0E1+FGXLGq6\n3zVLjWpB0uoObCTk2W1nlG2kUH9ZLm0cEX8jAuvRQxDxwCMiHyZosRXbFM9k\nrXvgn4DVI+IG8zB2b8cUB4+K/z2ERV3yvwaiVYgBiUz9GrzjVuYtCVh0g2Ke\nIh1+FgiJuGCwyP7+W2YdhR8CEThZD1CbbgEzAuosl/YT03rU74Bv5GqalmBk\nO7cX\r\n=fn+y\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"a6b5f072852f1f101d03fb492c57fc97f7f0ca9e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_10.0.0-canary.15a4d40dd.0_1612318647471_0.05737720137729019","host":"s3://npm-registry-packages"}},"10.0.0-canary.7a003acf0.0":{"name":"@material/density","version":"10.0.0-canary.7a003acf0.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@10.0.0-canary.7a003acf0.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4b9014af041cb0c7dc114eeecbba0214093c851c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-10.0.0-canary.7a003acf0.0.tgz","fileCount":10,"integrity":"sha512-k7JYsGI7rj4BeoFGY1xE7VAImX7yFg87Bv08clHnffsnA6j/pwqHXvVSrGgM7kOmeSAGlo7Bilb/9HoF6OBgSA==","signatures":[{"sig":"MEUCIG3PWcA7cqapV1iBRRmQyZE3ASJeDK/HvrZNnXsvX/ptAiEAmYnzqJHaAjRmrieGcgCCnptEHIaj6GA5YtzQ0/RQU1w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13725,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgG1zQCRA9TVsSAnZWagAAZbsP/2J6lhtsWxb8WtPXNGMA\ns6aJkIuvD+7Z1LHJ68SKvfmMWmODkZClg2lT/jK/8Fa1Dp3m5NAXpqzIDyX0\nH0Mh6jgnudCYNt/4C4BhZmBJno4OPd942nGVkLJS/OYAFHCh0Y71zFujC2Uh\naGUnyplrWa2+Wui3egFuSQjxrpuP1913lDt3A3OUhefXG6qGnMiWaVYhaYkd\nrFw2KaT1AoNndOtq33v+bOpaiVcKofw6XJeNZ0Lp3G1fJU+noBPYqsqSqKmg\n9cKzOVmZF0VNZAgPDRP1EE9iSBIU5EgtfoyfSOSAAIlG6RnVCYW4K5GnWLT4\n17WEv+GfogCbQytaMjOLgcqbd9FRlC1CwvAwhZt+jZbj29QCeceSl94peoWR\np1F46RIVDImKNJJQtfXtBkzwFxYP+i9r30QOmE2yrUNp4HXuSrWE7TdhmTDk\nULjUWP64plCqjhbvLSoLGApShazd2S2uwAHiWtDPFoTHL9S9Yy6wnYHYZ784\ngrsRmIZhVHFvxB4WkY/wtv9JpGQlxcuvKmJ6xjAnRWSdu//5Wep1lVUO2FME\ngvjJnovDEVkLpQU8C96jnCQolHorw7rRaBf1v4TleBsBiriDqKW3K5ukSYGy\nXLX8YQpw2VVHRCiTuLP5rKXwKXdcEsdQxPBLR75L3i4ISjXTKStoSC5urxMA\nIIi5\r\n=UC6H\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"50aca8110f6412e14432e118e1f9229dafb02d85","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_10.0.0-canary.7a003acf0.0_1612405968141_0.5872067682269397","host":"s3://npm-registry-packages"}},"10.0.0-canary.05f249666.0":{"name":"@material/density","version":"10.0.0-canary.05f249666.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@10.0.0-canary.05f249666.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d1b4c7efb8985ffb28abc160184129bfd8febda0","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-10.0.0-canary.05f249666.0.tgz","fileCount":10,"integrity":"sha512-YD2vSJDTPF7yv/fbEaiFbaNA2tfUZo9dj2N28RUKtRl2+NCOr3JpS7OA3BW8hFQHNziiX3mEkP+EQRu1CD6D5g==","signatures":[{"sig":"MEQCIEs4m3kESTDrUYm1dm75+Z+jEKcw9xBANNoVfSP1AcRoAiBMze2CyPL4onOFmxExhRhvRUbdRdlUL+d49zXIKHbjRw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13725,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHDOBCRA9TVsSAnZWagAAuSQP/1C6GET315Ihc4hujt0q\nxoNkZQaPLNjw+N4SW4DEPsMGNCLdBYv70fGrLW4rCp5qnWTRaplYQFEM81pK\njSvupVDBLdsKbwL8rAx9RYVTpoZoBYcxXONRC0viFCs8LdJZ5vUcWxMyzISt\nIIjHt0lf4AwumL3WJHzmWwjEBlWJUCar6KDdopGPraJhMnorOwgBq4XzjxQZ\nA/jkKWTlon94tLeZ4aUw5cVa/Xy0bjsYKbKdW7C7ekMg7PJsmHBf0dSqVq7p\nNlPfKg04XW2wdl61NzWXXwvV+d6qr5sB5H/LmYV3XCM78jTxCaGo3ri1p0jP\ny51tnllk8TE9gIjtr5UWdx3GwCZJPIlim+lMmm4JftIGshEQ+CM7gRiDh2R7\ncTXlr8xvBuwrIHaP9I93X33Rw5VgN33BKfnvcxD7cO2zR2Kucj5xJJY2ajig\nd6MGGYyS4TKjHI3KeJr3hTqaMxnYSVnV9s+A7O+LPg2KxPmsXEP+1GuS9E03\nbozDS8FZO0xkCQnaSrM1+jysS4QDIyhfo25FuO1bT6bTNDzCU4yemMVrNwgw\ngVkpL8JoAKV0qz2/pOpQ0KESahOOliL9NI/jklwyvX9JqY3dPVuKXA+LFdpu\n9CaHZqW8ynAH9zkGfJAKs8bHZR2Q4kSCKfUg92q3/glw2W4e42kf5bdqC6i0\n212U\r\n=wwc9\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"6f1fffc7e905a3d49f007f288c26a4b5ea11dfd0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_10.0.0-canary.05f249666.0_1612460929061_0.5312877112321293","host":"s3://npm-registry-packages"}},"10.0.0-canary.1a3a39629.0":{"name":"@material/density","version":"10.0.0-canary.1a3a39629.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@10.0.0-canary.1a3a39629.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"29349565c81786814e17c219c4b44075a698f2e0","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-10.0.0-canary.1a3a39629.0.tgz","fileCount":10,"integrity":"sha512-sR/mPHFXjmZqnkdtCZj2kSOb10vZ1mBKzgY3TCouutBtr92poMBUi2llUQATMLLy1ryehUPx5mpXLH6E+i7NEQ==","signatures":[{"sig":"MEUCIQDYg140nuvD6fJoUYicavGxRstYkqpYtlJV7ZiyksUfsgIgGDJFmsDmmO/yC2i9+c8/IoHxdgsIquLyxLJ8FKgRdmg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13725,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHD/3CRA9TVsSAnZWagAAFV0QAI9or/3PjEyMIDGA2D+8\nuJIkbhqj2GPWPr5c3c7k+7UXT5xJx6DP+l25PnBzfxM1Wp6sHZJczMdYWhr4\nOYqYIOaFvwK3VPA3EwTgcDmqyQaJqyQHDUP25zF09HGc4LqHfmRSDq9Caecg\nHJf/M3TNYdSJR4zZ/l3A6kDrpvlzFDUmyLHXT7yx6qsoWv8Zv8CCKPO6apWj\nNIG4bRmkGysVSTHPFrOm5iWNGchcNJpkHKRkne+DqsNQypzTUY3vxIXNy1ds\nhrXkWYmfQdrmOFmlx4RAqTzifZNxPAoN3pMWBbFN5SqoIS2ganNmjKxcTQLD\n2VIey88YzPukP7rh+DybozaS4CaOom9ayCuVNaRaCxPP9112R7j161MsWuPC\n/KqEBkubLoFsPZ8TMGTcERMtQ/+elstL/MwIh7LQ0MD8r6Ww7hUS1cqo8EQp\nOlebhvDDYGJVFlwqxE5WT+GJQYer3Wa3EUXhdGbtTEwKdxpwkPpGeCXG95Zb\nYuiLsK9BKE7yhpkm0CazoRAm3zffSp7cNSh3DB5kEHIwjbRxyduOf/j9LY8f\nKOmUiTykmTrjT0tGopE7d7bMxt8d0pTmsmU2VBtkOoSwQcWtxgCiWU/RhBYT\novZYZaIHe1Tvj1vGGtj1sNEs9CCqHYtns1MeNi+YQFOul5qOFcn5rfz8tMDG\nT8e4\r\n=PMz/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"87d65275f85db5a2c4e630df10d231afaba36449","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_10.0.0-canary.1a3a39629.0_1612464118792_0.2675680137652652","host":"s3://npm-registry-packages"}},"10.0.0-canary.8b1cdb1be.0":{"name":"@material/density","version":"10.0.0-canary.8b1cdb1be.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@10.0.0-canary.8b1cdb1be.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5669fa3ab1164f64e4ebcae903d8b7d7a0e2d27b","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-10.0.0-canary.8b1cdb1be.0.tgz","fileCount":10,"integrity":"sha512-PwHegLr0C0wQoJp+cmvtnQRH7XwyFN2mv8ThJUSRfwkA0Sb6BJ646xi+M1K8Iq2IS5ZBY7HvjClRdBKVEaaOyg==","signatures":[{"sig":"MEQCIF3sgmWGi2ReFXngQXXuzj8mSd0if0gRhutQjjt+YWxuAiAjio5SQs7d03L4fZYG14KD6dQzAhgRewevqHECkdtGog==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13725,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHHY6CRA9TVsSAnZWagAAn1wQAI/EJDtcLQCJ/QDsq/yU\nOv231zeK13GnY8Otf65bCX9SbaF+V4ymYSPeII7vKqLz/hDfhkIgccymfkfr\nmXNPOQ0VPsJvWw3zRmIQYlZXjrqWg5QGohQVRtWyX+Zt+L1W7GiMLrTIUPGF\n4GP7LtOFU6L8cUMRFBiMHzk5/U96zFpN+YnSwTux5CMvLqMJKYRF7udZXOqc\nlW1LWQYFE7uQyN0X0B1wOYUc3jTk5sDT0Q75FRoZji+7fwYREqqgxXHzVKpn\nQIOrq9PFSRPoZ7MS8zRoq5tO+LDt/EmfvUnv7f8nCaJA6lDHvI4J2hUdU0gP\nT27Vs45fxlSXiyJSpHZlvuaSbYSgE+dkVeMiAo0dqzp9UMV6oN1LXsgMagYA\nbMQmHY/8L91pX8CuIZ+zzlxW0EOEu0K3iIjyQ8rQvY+sji3whKMrfALSIGik\ndnTFip7i0a2pqRN0HGTYCuIulF4oKqHF56t7uIYPqe6WK9PUqWxBO6Xg+Qfw\nBdOGNTmj/qTBE6D4icyTep0397+fWrbcLr8gqgNffhX5/KjNpqq+Sa6boViv\n+vr2e+Mk/UjUZN2LUuyEyU0GoLxM0LpPAaaISUxkTSSUHgjh0xe9dJx8+XW9\nFz65Ce30z0EKLB2DMjxnhMynZhY9BLZc/ZwrE9LQSmThzPtaESDPpP/2q18e\n4skb\r\n=tqI5\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"73f8ad23c72c2fe32bd1a9e5e102b6aca8ce21d1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_10.0.0-canary.8b1cdb1be.0_1612478010105_0.28568170135833104","host":"s3://npm-registry-packages"}},"10.0.0-canary.8271f00f7.0":{"name":"@material/density","version":"10.0.0-canary.8271f00f7.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@10.0.0-canary.8271f00f7.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4b65e7bfcfd11097275c07dc3363d76ca47c8ae8","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-10.0.0-canary.8271f00f7.0.tgz","fileCount":10,"integrity":"sha512-RmiFu6M2zpUjZJviXuMepSwG4OTnK3LS0zCDGorATnHszgBqh7FxMhzzcQ75J+lws68+tBZ2z35QRRBFunwSjg==","signatures":[{"sig":"MEYCIQDV2GBpKDbTVjv5kdpMNMOrEVP5mCga5jAJKrXCoyxRHwIhAMttanv9r1lbB+il7vM4tc8LToUzryccRTEf15Qcs6nq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13725,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHHxTCRA9TVsSAnZWagAAsIYP/2NgfGIN9TU5f+W+qPsR\n8aPt79khVQdXRETkxVQb7Ms/lwAieYNmyC4kYKb673cJ8TgifkwTWOU9Dhyl\neAUJb6PViwYAceEuTKOeCfK0fbaHLv6FoQkaRwJdc+4cdkp0dWJ/nLsKHQ7S\nPcBCeb4LeghE0eSR/w7lANLLhMgczdD6expxquj4Ilf71SfWSKPYJdLLgleE\nX5QgH9rIlRvjLdp2zPIP762JChS7rSTBqxq56Aw8tZOnnPw1z4ZoilrLanUf\n7tEjDzWW2kEIk4HBe3JHVIkcrBsINb9iOhvd/RF/7thSRiolxU5VxOrMc62s\nHdCtmI31aEYVB73VBJatCut+jtQNRGYJIk5t9OFfPHAAo03oFd5Ncaqn+udl\nS8vyJCzX/PRKmCDARRpb+N0oaew7lVe/FoLekV9CZa/YUPNBO5nMrn8vrhGu\ntf5gBeExB6JU2wEvX7TXLAOYAVlXK7yh2EyFQO8NVwYbAARIAGtPwjKo8rIE\nq+RE9HG0fFhvaWvSLaxfCdI012ThtroLXNp67QC2snLQNxK93VUf8WgI5+q1\nr8BSYcFLMRyKQ7zSfUsZCU6xfxxF8l7L5vajIz2lsPsbwKy0rDnypwk0FCaj\nGHi2mEQ6Lb/OS2TdKCxNUElDM9FoJrbKmzIYRxKxRX/X91WN6lYYHadQdQM+\nRjXa\r\n=bsoj\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"e210c5292564fea23c9cedf08acd2b8ecf86e94d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_10.0.0-canary.8271f00f7.0_1612479571401_0.28211088053763955","host":"s3://npm-registry-packages"}},"10.0.0-canary.533092a90.0":{"name":"@material/density","version":"10.0.0-canary.533092a90.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@10.0.0-canary.533092a90.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0ba32351cba6606d58dfc8bd787f611529fe173e","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-10.0.0-canary.533092a90.0.tgz","fileCount":10,"integrity":"sha512-D/lZJsEDJMcimo7eG6kEmP/CtCIueVtBP4PXBnk2QklJH7NWNwBxmeUvz+x/+Gx8ctuIkRBWJOPt44zh16C8BQ==","signatures":[{"sig":"MEUCIGDGoKu+geMOvcBEHMfREhIjwz1v9HGTEEHmeH4mBTWVAiEA7s5vj7/ARbFQ7nuzYlKUZgChsP11avW3ki7dZ4tWyck=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13725,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHL9lCRA9TVsSAnZWagAAjgMP/09cjO/oOmeg61GT9nox\nwyfaz8fKKaIx1PeIxzZlZc/9q1bmo30b3+fl1Rg8Y9IgHPeBIfQ8x78+QFfL\n8YGwf6hs9usI93iTJ9ESlbQLbRm0ECEQIUdbAs1fdvuAwV606e6vYbIBi3+L\nxRrzY8ywbzppsBW7+w4xL4KeUJxGQFLdd7equG/qX86+fcEWfKsOrFqQTTHy\n5CHh/ZUZVPJ7vfPMEaFQQctOkZvbIJk3jI/5BPNR31mpfbhSjaBUs3yqezN4\nJlalNv1OKxF0hOzUdWTj9FS2TPfBZTHSb0NY1O72a/jlPA+Z74oIl//gAQyv\nnGkBVy4NyXc9+j6YAq/r6OI1jnUlW1yQ65rASK7nXFzIGdhaFgsLpyhYQSR0\n5cckdahTvZMaSa5/lZkfZmPEaV711VDbXm08RJAVxPvTed0QznWXUi2YlzQ7\n4Y1XjCBDM0sk5qgGGU1wXS6PHyLXGoXeQj0KIe5cfdTOIqn5OXjR9QKO0kkA\nLA3Lkr6v0FenRDIpzTlLw7Imy+oG/iZsXCDLvPxOn7qmSADzcN9ECcWh/4ZP\nCWI1tGbWq4u5f4yRBYg6SO6JF1LIOIPJSK1jM9/2HXheJYXzNUzk5IufEnN5\nALkTeWohzq1n0NiaD+J5Owhnf4m/HBhV8wfBeGDG1qLqNS39jLdfiaGp+UK+\nFPs3\r\n=9TVR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"1f76aa244e85ddde7348716259e771c739c09f23","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_10.0.0-canary.533092a90.0_1612496740754_0.7338585349646436","host":"s3://npm-registry-packages"}},"11.0.0-canary.633a9fc7a.0":{"name":"@material/density","version":"11.0.0-canary.633a9fc7a.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@11.0.0-canary.633a9fc7a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9f92007d039219df91431a68402a4eeb4a402a8d","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-11.0.0-canary.633a9fc7a.0.tgz","fileCount":10,"integrity":"sha512-6Lr7j2dLYHfv+oBUbelWwzHnV0a/Zy2wqv0/SaP36s7alb+laUBU8FoqjG4LpglXWOIe+IJAzRpZdMLAKdLlSg==","signatures":[{"sig":"MEQCIF6JRXvaSqOwG3vStGthssGR4ESepakoEXL6ktBmN+kQAiBTW0qz98wOrwpQw5bkuV2xWJJ/NLt3D3b3dX+AXt+AZQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13725,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHW9HCRA9TVsSAnZWagAAj5oP/RzYKqyTtTER8RToXVIv\ngTITS8JnSmheaq+wWVS05+P+Kume8W/BzYE9Q1k5SMKIoYu1oFGz9aD7lGg6\n3STcn1dKhiB7nieBa8sYQfvGjOZ+1VFH4/xENzav3in3B2hAmY+r/f7m6K5u\nORIw/Ony7ZDku8n7kmDGAq4NgevfFZAcUcgkoqHrsSQA8fWq59DUrN9L1KpY\n2g6sGinvBpNGN91ucnCLzc9kQ+8vVKWfldHOHNlJFU7yvquiZR/fNf0Jj3T3\nspwwjoMonkjeQ3GJ2AzlY7Iw2DF95s7dWH34F6nlH4i7a7GC+2tVWDkG0u+V\nwPRG7H0zZ9o0BsvjKom06gZDP4yTZgbfYpsvie6Iu+zA8TxwIsyCn+gH7aPk\nGIMaHhtmQ7ZCHkJkIoeB3S2F4QWCo0YX/XjnRYP2ThX4cDmWjqDb+IJozZyL\nXj1b0LqzsFh1qUlR6/0xRNWcVmo2iSGFxVnobXqPR0f2vAByGI8EtZNZK24i\naBsF+yUaC+jnc2sBG+aVchAoorzk73Bcw4/n1omvW4yFFSPq/rGLh17OagAt\nMTzznyWx1Z4ppQ45We8ApxrFKN+hw02/+fYZFA3Yv3cmix2fi3HWpT7gsSBk\n7eujfsOEWAMyvmFygxpcL55CP2wK6aqzZom/g//K6OjjGVALpqneZiXT1WGW\nVTAw\r\n=cqpf\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"9fe28e8829bc50c384861e340d551c0718dac053","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_11.0.0-canary.633a9fc7a.0_1612541766986_0.37520379457731967","host":"s3://npm-registry-packages"}},"10.0.0":{"name":"@material/density","version":"10.0.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@10.0.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"24795406d092cf0e6422e1c9dc8bc2b978c46e7a","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-10.0.0.tgz","fileCount":9,"integrity":"sha512-nLf8N5e6tEYo+W762z3coTDl2b1FFKJv/uU+E5UsBYOL0ftXrOMtiYSwg9MJjfWtdG+uUBfb3VLcBvIl2x3C0w==","signatures":[{"sig":"MEUCIQCNmaJQnel5AzuEG1RabIfvUqcPet7UNKHXX9Zi3RIHBwIgLuLmM3lfb8o5J7e8DbCKQKp+/FlCK1AlYAvgAth7OX4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13329,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHW+PCRA9TVsSAnZWagAAVqEQAIDgSmjkr5QROP1ELqau\nb73QEZxQBkGJVEZvVGapy3i/MGzF5etmz1gPQDukyU+C4W72JT/Y+ZQEEzlN\nRNjX5wPzRf/Ez0wPaDPiE65XO9bJnaPlZfHJng9aYQ5NJ3Z63p3UjS06tNX2\nAHoEYRGeA3sAr/dPG4uyUShl7tl58L2vCPMrB4xM6NaxXku6k2Q59j+B2UYf\nYH96kSMbbXt6SyuuVGy3bOhFvmgxXl9n3fuY2bE8PBc0PLaCqGreCaNZn+RM\nSd9CIjP46QXickVxedrpYlL74wiqhJaNrZvM9L/fqSIKB5POKxuOZoNAd1j5\nkWXlSYVJsp7dR1VxSL3emba3pU4LRb+a9aWFMPmfiZNlvsw0x1Hvc6XMSAZN\ngdO8O3Fp9otND8ojU9E/Bvsk8CMKhTWl74q07DLYitbvDmX7XlhDp54+EiBq\ngbim188oBzdA8axhxsJGHToIVesc1dxY4IGm09NdaZtmBPBSSSLBuAu5UMzR\n/yIeDF0pLvfgU49gU0aqvBKjkmYckLdG5Pbq+VVL9ynv1oBnH/8R96AdnOiM\n1k8sVmq23XNqhxc9xDJMqM0wWVIKRwuFjHxPqSQhCLo6Z/2LcetQTcrxejiS\nFNTaSOe/t3zS+Yi3rwgTTYChHAI7t1NXz3R+y3rGHkOOGvz8oE798RJOOpd2\nd7Ov\r\n=hur1\r\n-----END PGP SIGNATURE-----\r\n"},"gitHead":"633a9fc7a98d0d9bdc177bc9ccbd49beb25bd5b6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/density_10.0.0_1612541839272_0.19176341070799818","host":"s3://npm-registry-packages"}},"11.0.0-canary.b5227247d.0":{"name":"@material/density","version":"11.0.0-canary.b5227247d.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@11.0.0-canary.b5227247d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f0e482a8f56b2dd3d3d37175a1f6d51641566e6b","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-11.0.0-canary.b5227247d.0.tgz","fileCount":10,"integrity":"sha512-zaSvRoIlyKU7aC92G0/H+4vCIDcHhyGZgw+AyUxlEnikZ+djQl/VadzBIdk/jjXVv106E5AbFfkYEKv23qpFrA==","signatures":[{"sig":"MEUCIDAYldFUCXodUjxWjjLbXcX86ONrxb6u49Tj/st6MlrSAiEAjOAKxf2lG8Qx2ZsVQjdjMbNtM6MU47NFPj1gaL2XXFU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHYMfCRA9TVsSAnZWagAAXNQP/RMGwWIdfCpJ1ZqFY8Pp\nnY49vl4iGJcy1ezkEfPh5U4HiFH3ZHadC5TlGCSUgDvIovuadhpLYcPMc7AN\nrL4Tq5hUUuMk/rPmzZkWiB1QRBbySbv6v2ya25PRYkwGqCLCjNCfSMcCbPPH\nI4CA9WRUwC63uk0VOA3y/P6jxrt+UKq01PzhHWMd4K+CPRmOxr750LOdBjmM\n70dk4rUyqNjYKpjclj83ahraVKzMYs4PUjIFQZL5zNVb76izPfYA5hMyw2XI\nxGwaM6Nwc4JVjFWDYKKQPX5ybOtMrJsZTNX/8dnF5fwmM9AYE9KZaHKtkiBm\nLJQ/pZLHtDONMFA1gbxYhEGwsAKYvTZq8NVus0/qYSQ3na0kI1w47IdCGzZ5\nlLIbavwUmFd1gX4SrSpd4iKpKNWyQ0wdB4GQGV+/7rwXI+oceIvyIT4wh1Sw\nkoRgRGTpzwnNdYxpt2fBymxHqSbn4O+I4upXNh750e1DdhPQszWp2it4GwW8\nUZoJgMw2x03KfJEe3iTU35FMSo3zfnwrPgI3Syb9qSEoxhWgsCk9IcWd1W/d\nV+aoFDGODkUdcF2z6bh2OVaN6+GOMZmbC9tSAiXyuVblFioQKm3bpfvoH7S3\nl4oPl/FpHn09+2G6UdhYTIrUqehzuEOUz6B+ep6FS2Ub/g73rhP94QlHrO32\nHPDL\r\n=eTAa\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"6f733c52a8cabe9fdd3ba4c35cb19e5526d8b312","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_11.0.0-canary.b5227247d.0_1612546846583_0.8201226846674976","host":"s3://npm-registry-packages"}},"11.0.0-canary.95322b11e.0":{"name":"@material/density","version":"11.0.0-canary.95322b11e.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@11.0.0-canary.95322b11e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bf7e27c4f5abc309e843fb99524432a08675e08e","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-11.0.0-canary.95322b11e.0.tgz","fileCount":10,"integrity":"sha512-UsYtjc+bhpiOx9+j60hQ2V99670t4sbsWy+lN4myNr8tSrYwax7DXx3TE61cSh6yWHrY4HGGMenN+j/5BS8qJA==","signatures":[{"sig":"MEQCIDL3poVTvLT/t3j1jXRzJ/IBaoRDpPBlpavmYzcgp+08AiBo5oYcl6bCuOMhA+TfrxDz40Grk8D8+ibOPUNivWdLQA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHdUZCRA9TVsSAnZWagAAffgQAIA50aNQ7am39EolePUf\nYZWODEQtJYq0XykII2SQbrwSETfD6jcm4WKGd6ahgk68/he7FhQK2vjiPO9H\ncw6CiAAu1tQ9Drdlz8XkIE5nsoWgtWr3+kuMKBzQrZkfond4WOvUoWdIo6Bf\n+N2tLTQwVj3PQwI9hc6rWAxWPd9BLD+/tHayl0ymm4CZOv+JJ/miDtSPdI8Q\n7XCroB3PxHnuGtHUALugk1QcQ+Un0xXL+O9nFZVVRKR82ATCXNR83TZakF3q\nEartML2eRiL13vcCPARy4hZXXIV5aMJvFhY81vD5sidfi8tzUVNH8jwYslqe\nlEAb8NfuoiXSg0E20hkB80nrQlEqDgg3fWCy93cRWuLcePrPTbMLJJdh6FHV\nIcXtNAHi6ttiEHXVXt50L6JRlIYU2ja0ZUo/tdP9gnJkLWdhpSWjOfPs1FQU\n+sU1yRPBi+7lFAfT28ZZwDjU0dX9KCegScDslHcJS1xUhtQXTVBbMDqO8zOZ\nOFHRPIhBtus5+ZbtU7gZl8PKQGliA+ou77J/KT80Ca2XjO9mvs3hLnpUm8Fn\nKBdBxz+MN56XZyiIFBW32e/fRTvQjU7yFWehpi0uJ/fw5U3XsfzJRmC9W55h\niqhcghgYrnE1R8mvMAmflszFSGWtVVdmTvBEP2o4Fe0EJMVJ4hgO7fJQEwh9\n2aVn\r\n=txpR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"96cbc49ea4bd39eb1c275fdae68b6bae32b59ad9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_11.0.0-canary.95322b11e.0_1612567833449_0.9958768422183375","host":"s3://npm-registry-packages"}},"11.0.0-canary.1f318ff0f.0":{"name":"@material/density","version":"11.0.0-canary.1f318ff0f.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@11.0.0-canary.1f318ff0f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3e98def142c26b4db4fc5d86d711b727aa5c136b","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-11.0.0-canary.1f318ff0f.0.tgz","fileCount":10,"integrity":"sha512-uVHZBiv5pNCnGpWmplD8oQC30TOHByIxtZUPRDvXWIsZmuH5HDoUuifKmOo0hP8F6qtW/LKTRk/MvRMVtFyVIA==","signatures":[{"sig":"MEQCIDancu+0yYUocnG9mryg5jLIbxaDquh/HT/u9ASy1al2AiAMTRbFERIVmGUsBSOFUHWIUzc7hbKI1UwZbniIDD8tTw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHdzhCRA9TVsSAnZWagAA4bAP/RAzcb5tgdMRLYBA+HVR\n/HeswB77nCfd5n7yVJDmutU4T38UF1KKXvp+tCyB6k2PhdKnGrA5uUbSG9rP\nGmCyzySaa8wEd+IIcfgZ/ZdxJL1l/7JHzEiaKb7Hl15fUvVxttkRJkY9UEYw\nIKj/J8R20NLSkWaAnV50HWbMU2lFfCephCBy87T7hcgWajaCNKTXV19GmG9B\n2eXTjT1arBrG7DERN9PKk42VWm501qhl5+ojaT1B/ji8xz0zrjcGHieDjyM8\nDTw8dMd5HmLZ1o10q9qe489E/U8zOheUREWcBE3LeOdnbsTtKBcRKK8FoUEC\nu5oBflmZAf6Ueux9Ey7BP3licbiZfdTkkQTgDq2va5FtrIL7zu/I58ib1Lig\nffKLqLswMRWC4xAyh4l7zm1evCreqyPAnuOuwxqd8/lnjFzpc9655R1ON6OI\nHNCu47LLqYsV8oxoPomn3Slysp+3O1So9jPdOlG8LohCkcWPP4HrwbX9wcmG\nNAzUGVhs0ybwV0j3Nt4/nUnmDfmLNldjcBA8smZpfIxwkpQE4maS9b/4b14v\nPIdJGfgZMrlkh8Ts4H3CkZ5r3qy3MD53hhGkbhJayO0WKzNWMzVKP+iavMLX\nOE9cC/TQZ97Bsl3wM5Am+gNmTatdriVhESyhqbYOusVjbobf10RVeH08NNaF\nqVox\r\n=LG9I\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"fbdc53421d5701ba23a43e18a010bebd179dbae0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_11.0.0-canary.1f318ff0f.0_1612569825350_0.570218305509036","host":"s3://npm-registry-packages"}},"11.0.0-canary.ab12cf7a3.0":{"name":"@material/density","version":"11.0.0-canary.ab12cf7a3.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@11.0.0-canary.ab12cf7a3.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"10bbfeb0e0990528284b6993a79e67e1a0f0e1ee","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-11.0.0-canary.ab12cf7a3.0.tgz","fileCount":10,"integrity":"sha512-40T5uA9PQVN3lOaRvJHmQ4tEwfKOw5rxRo+Zc3M1NdeQpeik3Bo2ZGO50Z7Ew92eA7wPZM4M4TT7Ekbdg7sfAw==","signatures":[{"sig":"MEUCIQCS5Yc57J6gy5A/NpI+/TRyLdWVMRzpYG0ZD+v9Hn4fXwIgWRqqWs5e0M9D6FKTfo5M41rY0fIfR1/w7LvHXLBs5yw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIVJXCRA9TVsSAnZWagAAb5IQAKDrBCtiha52hS5JybDW\nZ2/LIcQPZemBI2ULaC4medZopIfAB7A1mlr23nS6sOXCjCjFOoOcMSdJ+AIG\nnWHOIp08cJYWaqhFoEHle7YLbzuFdTqHWtv44YtKQTOJ5FPxlTKe+5UXK8Dr\nM6siyPf1mopdWwgDWgIXCUwf5CwbvRn4gD8rIo6w1ijws3FrZMoUwfkhuVAi\n0cYsiaRXDx2V+fFoGDT/d18ShrqZw3RbVAWVpJlNoQbUM9zEcHnSlW/VMPQl\n1v0ACYri8gHAhhr8Hl7nmfqVHXH3Na8I5gvGY+Bh4IKyWZTjp0tzwFC5wEDT\n1fKFUngc9l4rWXjTT1CttAdNZF0IPEqL2ImRy8G5zpinkZlkYhycYplvsKJ3\nFExyURBQzRU/MJlzIh2SfSeVuIZO4kSPTlhZVXDYX/0IfcltbZ8NK0xc+FOp\nnPW/s2okKOH69Eny0AqLub44WVmwRPeBG/FEatDvgQjJHWKGhzZFu4CNSCnT\n3zmDH62OJDr0OlHQBUCrytEd7jJSieyD9GS5bEz4+ITomOEXBmnIc2255gY1\n5zBvFDQ1AaX87U7SPD/WHxT4thj5NA4yhRXUtWL7Rv7kG8K3lvP2bpq3VDIa\nyDc/kiyk1Xfcpraxolk6crS+vbFW8xIbi3e0zdj9Ivi9DuW/bqBMn+NlGsZR\ndzv9\r\n=HkUv\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"b1cf52745607ed664e2dca58a230a3b3849aa273","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_11.0.0-canary.ab12cf7a3.0_1612796502584_0.6569944693224139","host":"s3://npm-registry-packages"}},"11.0.0-canary.98db2c5ec.0":{"name":"@material/density","version":"11.0.0-canary.98db2c5ec.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@11.0.0-canary.98db2c5ec.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"51f51b3e1edae9e87aee9752d9cb2f23dc5f98d0","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-11.0.0-canary.98db2c5ec.0.tgz","fileCount":10,"integrity":"sha512-k0gWKuBKExCnDwj23I8HA1hzZ2FpZLuW8+kVb5kLIof353fAtN+Bx2zRUJD86KXXlzPMg61CQkGo+Vn75YNqrw==","signatures":[{"sig":"MEYCIQCQ+lx31pdw+y/GpW7OR7HFrg7gdcEbMrXrQykvPKETPQIhAKCt2QIgiowZbAciiJHSe44W7AOnZs+3UOZBT55VDuY4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIVmgCRA9TVsSAnZWagAAcwYP/11d++x1uj9a9/YTul+F\niB9cNnV5qoO+2QHYTTYl+je/9B40SREs8VxGMM5yKgUboFKaOMhU7GWI8Ltq\nprJ8+Nialz/63YL1Aqw1bcMcVUGOCDp/df3GKvBQ5M0MwmJFp3mU4ftmeX5b\n891/ysuLzAWeaCdk44uU3iXvRityugNFgJtFb2jnFhiIvjpRmXWwU3E5GQNF\nLAbdjbhiXavyLuEO59tJXz6I71586CExAmrZpS/S8VBBAdz8O1b/w7gwpSx5\n4QE9bmIIzc3A1w5BipTx+CdpPGfv3LgwZ8H75l1QDMOBsvAhbi2jA6tx+Af6\np0cSssCfprcRZX5QWRuvww29QQZf60OWE0L/wea4xKBc6CQtv+o8MhgrvGtS\ndbsLgXMLXTQkEkFS7/lKxqtdERMqPElX1MrYWMC8CZn16duPKDVQAoMG1OrX\nddcUe3ioVDaJhgVG5iZ+UYXYtWg47aw1SL8ynrC0xSzeZQTo3FtlH2e+2GSf\nWndMJyLZ5i2rSw9G0d0bj4iyJ6su8t/SXJSTxSbUCpJlLKAnnk3wIPywEp3k\neqf9EmlIkhTF3N1veq1FRDjCDdgdEhGSSXXnxQD7O3ygEbV2ZUFY8b2C5lmI\nGpuSs7S40wBwcsd+dw/TDlQoGv48SF/lTahrqmNdCwHEMCLhHj27KBW8vDZm\n/Q/b\r\n=FgTd\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"cc1b9da2cd7b871fe0f5c8370793e0ad9b1a5f1d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_11.0.0-canary.98db2c5ec.0_1612798367587_0.8319121304444721","host":"s3://npm-registry-packages"}},"11.0.0-canary.1f86b9f6d.0":{"name":"@material/density","version":"11.0.0-canary.1f86b9f6d.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@11.0.0-canary.1f86b9f6d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d33582340b8471b9cabe4c2b3ab5a07fa0b61251","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-11.0.0-canary.1f86b9f6d.0.tgz","fileCount":10,"integrity":"sha512-o2MlI80iPPy4n514/7jDYrsMbBMKaGnk9Zn3FPYX5G7cmbYTDbsMJtbGwCgmxRp1vmvuPqy6q8J/6dk2dyhh1Q==","signatures":[{"sig":"MEUCIQD/jpIlBiov8EJWo7FkZUEJMxb+zfGSufY6HMFbkOuMiAIge+II4U1mYDAJnAspuFTlMoEJlhb4h3yQInlAIevL47U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIXHOCRA9TVsSAnZWagAA2eIP/0tJRNjNaMCaJus/r+SX\nbqnu9hCsrkE+Smk1zyR+AcUkjzXKToofsKO6R5aEXv0gE+NxF1E+IiKeHGGS\ni00lL4209++p02OfAPOLppxmXlaG+ocFjMd5IgZWqf1PsL9t+zvyrUx+XOpB\n6VjfXXmAK6a9YifoTv0F/tTIVTG89eFVHutBfj1FBS3bwrt1Pl+R6YZJvC0B\n1Ot8qA5m8BVZMZtvcCnlq2TK/xadmyNEottVNHGmUOTkkJFYIkHJ43seb6a/\nK7CUlwtHIu0OLxjBkEXZwginiTTZ8juTv/6vNJt41DJ79KzPdh30dUkAIk+E\n4DfjUMklNBEaHqBcnqc31M1DQsWZWa2JambVqvRsz/9i6M9Kf9AKNZbMzdSe\nD0ZAsk/K5EmGXye7ZseFM6w0Mk3nImG/tBNVDY8MweFNDwFZ94VzkzxzXxav\nPl9YdBAmEFx1HiI5wmhLy8W/zkv0cy36f7PKpRhY8f5p3CsvhKqM4/DNP79K\n86pVltoxVWsgBijOjke7/ZtMPPSmHrdd2Uj0+9r+TToyAqE78pbMjWqXA2Ss\n/yhx/Ti6P2f7JaLORVMRiAoihYCkPnI4yhy3ZtSc6190J52p5GEm6nqHOaYx\npp1AHQecxaxDFsIviuO3B85U5sPsVJ2f+A+n2rPZmTrm9eLzK8l7ESd50Rmi\n4eH1\r\n=MjxK\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"aff88a7d3786743558ecb0dabd92c225698d2b93","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_11.0.0-canary.1f86b9f6d.0_1612804557526_0.23226102379031333","host":"s3://npm-registry-packages"}},"11.0.0-canary.aac8f5d9a.0":{"name":"@material/density","version":"11.0.0-canary.aac8f5d9a.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@11.0.0-canary.aac8f5d9a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"13883a50f2f7b44fd7fa66cd3dbfd98837d613eb","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-11.0.0-canary.aac8f5d9a.0.tgz","fileCount":10,"integrity":"sha512-1cNxpVx1ABNogzEKq3bIWf2GH2rftJWUOEvi2lOPEQ9jvQjDy9Ev7coUcr4o73tishAGXIaRcFXEokuRjXeU+g==","signatures":[{"sig":"MEUCIDyTfZAnAqvtx5rXG6TVXgDbP9it7E7JnDvUUchqTJDcAiEAsQw0KfZ1waH+BE1hRpzv1LdFwGJvkXXXa23rOmg9LOQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIXvnCRA9TVsSAnZWagAAAOwQAIOWzfRsnq7fklEvfTPe\nGFLXyREPJ24u+xbvXH7cgneQ4h5RguCcuZpZVHJTdSRgtpOt3k0zow4NbF27\ngiMNsrZBN8Nc3x6vNF8JqFyIuF/KjTTNFur1AWKh/3n1jW9YYBKvOpujjKKa\nkTaTdmxCZRJ4fxTTI+Ovp5JZOPpKbuxuknsX7jdxH1w3tP7poGjWP3gJgw9n\nt2R1JR7R3UWCkzobH4yw4ZHvB8IuVsoH3Tu63MCp5ly6L8zp5lqsLXoCiqCo\n/+l7gol/nBMRUzMiGMmEw60hSjEULzR+kBcaKDRWeTB37Vpy/Y79/yYOxpDw\na/qwUuwspa0QgW6ouDjAsH3ebIlozSv8wyohAFE5Hc85Gdoedj15839M1PWp\nwtSxbsPutw3In2tN//j5b5EsYFlD1FzvV6woN6Qk4UelmIuugo0EB2bzCKaN\nwyh+brksEZjJN2J4S9atsGulyJam75qI+QQl9zfDe2fZlxHmUX3IBYjx/M9D\nZIpTNryB5SFiaVaCdGh7t3nva6eZw0RsSeiRnEgiUsqCfuj9ZVAHTmfLgfOl\nj9Bed57MsM8QK26wcEMpRMcppjSGTMlywtarM+tNXhldWwmiQ0XX9+jr760n\nVdEvteGwXwu7TFoC2g2IDymCsO5C5Mxn3BaLe0zWt+ahrwyKVGthCy9aJ4w+\nmSOZ\r\n=2/zQ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"5accfac22392cfbc1035dcad920093851b33cc79","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_11.0.0-canary.aac8f5d9a.0_1612807143239_0.14477087596852778","host":"s3://npm-registry-packages"}},"11.0.0-canary.750e18fc7.0":{"name":"@material/density","version":"11.0.0-canary.750e18fc7.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@11.0.0-canary.750e18fc7.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"272ba86a50e24d7eb8df173a43e34529405f91b2","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-11.0.0-canary.750e18fc7.0.tgz","fileCount":10,"integrity":"sha512-JyZTmKj3i0kpZhsYWyPv8aASy9mKUIVkv/DbvgienAaHJYC9CR5KBZnpjJd2naangE9f7pTIph5DTOK++ZjMcQ==","signatures":[{"sig":"MEYCIQCKCq+QG5K2CXUbx9woaFlKnGjaOpisq7wZzna8vcpWcgIhANb9nwafarzvdrU0J8O9kN0eUgIbk3iWIBub3vc/Q92Q","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIa+6CRA9TVsSAnZWagAAIygQAJmGFyDnhb0JTBZHtOX9\nFEu1okmKY6iijWhaHK+hTxxnWJlWp9hZRFQcFvx0LL44kOrDp1Mqwlar/W2f\nMp1T2/as1PdBF7Tgi/yfqRNuVkzozqmKGAz/sKnYs+agdmlCBDFswivvZm1Q\nLpOZFvf716Rkr1nCk9y59m4GHynpzOx1lec2itsR7bUNa/xGm8O2VV0bBrJT\nnbTLTFw1/MrvhzSIeA/YDmMvkdcEmZgKKpxzTWpjJj0cdB8QIXZqiHxrsSeE\nONloc/pz0PZmWrmAvjHOOTqda5NUWC0gFlNhw0bqZrg8MG9MtK2OPzaLPam3\nVMAbwMHh/uPpC8PL+X3URcqkTr2BaKkX3NWXzX23Az+F6b8gNuKfKmR81BZl\nT6MKWu68t7FzvzkNbU8R/d4MPctkLx8CZ9cMKpHxokUppTUowno+cdoCBuww\nkD9cFvE6OLWIn4bk4ez/LPi1xxmqI+UtT9ZFSoub6oEUgBfzwPaHH1r9eu3L\nOCZlGkBq3ZPqC1TZtQv9owr2eiimqL9hBuNaIKnvoO8Ana7dsyN3fZWwqeuR\n7aFlPpfCGc3zOAGGc3Do5lU3DU+hreU//2urDgegxBl0/pLRCzwtgWSBkmgU\nIi8SmiKF7YzKP3syCf4Wxm9yv5GghZ3RunYQI5C40XKMBgFT7VhtWoM+C7/p\ncBpZ\r\n=dx/3\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"1bab3bfc895c50d4159c7b24b69d3ab3a7eb9e72","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_11.0.0-canary.750e18fc7.0_1612820409596_0.42966698618107424","host":"s3://npm-registry-packages"}},"11.0.0-canary.b62b1266d.0":{"name":"@material/density","version":"11.0.0-canary.b62b1266d.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@11.0.0-canary.b62b1266d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"630b5c6883832f793d8c05a27b74256dcc1d014b","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-11.0.0-canary.b62b1266d.0.tgz","fileCount":10,"integrity":"sha512-63dBW61bPlfHQA3h/+xr2a+SNTM5Vto5o4ttcfrtDu4ymV1MV8rqSorf+F30s8fIKmMpmUkwmeOw8t8LMQ0Nrw==","signatures":[{"sig":"MEUCIHeh2lW0KcruA8oryTO4I2d7Cf7aFUutKA+jxXj+uetBAiEA2IdrlJpStXUiNW2I7duwVIoYRVk2fGIYi5w87W/qi9g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIwPRCRA9TVsSAnZWagAAGQgP/RDjFtVoW7/AzZCIl0Ih\nasARFanPjny42JpLVt8aE9KZKrNPp2PF6rIKYXmvHUKI9S4FEXSM8v3ToH92\nDKBBXxWUMGrwpzcGfO9owGfuLPPfXVhXWmwki0ePGDimUoHo8BUZPjmds8sX\nHSNRpfQACGTLuOwlasHSfXtN64OCNEYjw58vAxvOUPNGiVUfuCfVc9WvxxUU\nk9X2sWIfAfAAxLoFg1sFYwAnzkDjVNHhPBBbOZybwSwOE7qSVvjggpQx0Mpg\nBcl8I34pusMRNPSTtlf3NSWTG62oLTDHNCu92tpf+Trb269O3uICGSMG7Mmg\niIQLz9uq8ho6Zuch1+B4qNF260P4s3IFiIP+hjt1K1SsICh+7Av/kehtm2HN\nqIK2exLq8V3j4XdlI6VdyBn+/FF92/8uBDdAS5RAoerDFa1r+mZ0caMGZcul\n9ATS9jNV3D7KMKgHcGkezovLwctgHJvccDr3yHX1EnAQg53j1DN+GrN2pIUX\nIFRWlMoMfsmty+d8opBBTPYWcI4xoAHSozH0lC92Vt08hRmwMu4b51nQ3sB/\ncO21uUhQDoUbtda6HfPU/GVjs/Nn5GUCHXhDLORSDnT60dVGrJQCLKFM+D6t\nzaQaDx+8dGV7SFI/jP9dO+aWK2YBjeSE3gyx/ccGJyXzyk/FaXGFI/fZQ9oR\nXwN+\r\n=0dst\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"2369de5a28b7ff8c15bb5f1b2ba96320e8a9126d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_11.0.0-canary.b62b1266d.0_1612907473220_0.4852510719437939","host":"s3://npm-registry-packages"}},"11.0.0-canary.a6b3101fb.0":{"name":"@material/density","version":"11.0.0-canary.a6b3101fb.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@11.0.0-canary.a6b3101fb.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"052ebd842a263ee9122236755f913c0b675aa317","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-11.0.0-canary.a6b3101fb.0.tgz","fileCount":10,"integrity":"sha512-bqTzEM6cy3dyLm6CWOPR+23oSWaN+zppvwrFqAxdGMUZy+ia5xcSi8H6+dk19UQL3FbTQV2PjBrvb5RFVCC67w==","signatures":[{"sig":"MEUCIDKdPQpWas6vcPiMleXdJa50pm+QxUc+3SDxNfv8axHnAiEAol6bA4W5ESS+KU7yzJQO7kQcUOtZaALI9YY9oByC3tA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJbqdCRA9TVsSAnZWagAAJb4P/3ms1UfhiImqAQxwjJNZ\npBA3FhsGgWgh2FucXeleAtHOBR5NArWOYvaY0HPUXq2btbb2BKiolXdfsAvg\nJvHaqYGQCieZMlQPVnPTlUicJiycNqFhbBggI00hdfdvPw0XWZTA/SwPTA/N\nJe9rX8eKWXvchl4YvabP8PyGOb/Q5ID3ss68slo2moXk0303NOCE6DIM12UX\nSSzVq74vHIjU+C8u2fuA004Ite3lSxYEPdzPPUhJEPawbJpuECFvVqyOjFxg\n2+FhO48QCZZADITQnDGljE6l4iBP0Q91kL7nqIKkfnNL5XHEwOoeaPSs+RqB\nvRk4FXjn4rTmjx6RqLXImwfOC4e1C4seJWFnn0DMJ6H7COUch+qmcVIqhmFM\nPgNHW130tPfzYPBQ8DQCEloIJwTZxXlEQP52CUjMOs3NRsM8L7bRH5oBCtzh\nMJLWhOCSURoGaSoOQvc+tKG0jxLyl+/4sBdEijitwXqEa1WY/iaQhF6ygLfQ\nzejgACMpfzg2LGYI3E8VvnkVCaTAN8TKkzGuAaB35zCHIP8C4Y3UJ46cfOJZ\nv2G3KBRKr7CXII3bvrWyedwPZ5g7knXCyXgvYLtme2qbH2hYcfSruqMNE/vk\nc7iVMbTRZtrqO8mpcVASZiFhxJZ438P0LPjmb0t2GXWI2ACloKMhkPgeQoO6\nQ4WT\r\n=O/Tu\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"4e94d35f86983ae07d81d1c7893ffdfca50c2afd","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_11.0.0-canary.a6b3101fb.0_1613085341381_0.844351267480921","host":"s3://npm-registry-packages"}},"11.0.0-canary.ed88df700.0":{"name":"@material/density","version":"11.0.0-canary.ed88df700.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@11.0.0-canary.ed88df700.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3763ce563566e14e98da277e25c1f8a6f9d48f7f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-11.0.0-canary.ed88df700.0.tgz","fileCount":10,"integrity":"sha512-G6n5SKAeum2JgiWsqaUgzOoaUkA2VyuTMQprPu6iXbqUZyYF3B81iLCHrQFRJzSjCmrTuAzhYvhIebMtzHcywQ==","signatures":[{"sig":"MEQCIBviCAB3rMqFqpOl0niRzKZPE7SVIKTLSmkLGLeoKw4OAiACaudOtX5K4SeKiVdEMbblBrF+kRJn3Oinv3zLxVz6Hw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJcZGCRA9TVsSAnZWagAAAv0P/RhaGRxDgVGbhA+JbfA/\naYfesw433hh8eel+fx3LFilnEza3IPPHRxivHUkMWZM1hS+dl48gdZvYHT+U\nT3ABBGEF72OhiBVZeowvX+7sLmiZcigFj/h35NQ7yW9QZE1UU9EBZ9nGnjvq\n0Wj3a7p+3EcRow632uI20D3BeAt4Gvr4Sj0qiKR0HT8lvKhAugCpLUn5lm7n\nBmKwyJGV/pvnTG4zD/Naff41IQLUSDVXfawHVG8WHZGDQ54KF+0/MsFs0rw/\n6KbnAp8XBJvJcCGZH1R0olEvMhJUGArKDKLjahSgGTnIei1AeRtgthr1HtNd\nB7Q8GfWeH5q4OeJGzQWINlHyRYcxZ8JMlqsdasz0wsKWeCtVbCHDTMJdGRX8\nhSsC62qi8Hgn/NKTjEJJy3dt00loTbYX1SeCGNSdcBQy8HnmItYD3hlvvU4e\nEHlRZ12Vowqj85hb1U6WHjTRQOzS2sMRBd5hGRlHF2ALJiXRVRRuKG/jYtZz\np5j5cqw2dqXvNaiYwhrVpwLoBmd6BpcOERK9EsGczurluNriro5zoyVJpkIz\nv33pmQasArY4dYaR9BKo/PQbOVfu4ofcGzNqx0QSAFhiwwC8se9qEeICU3+M\nkkRLI5+MVzsnwowkWs+oSIztMFfG1yHgHYzaKQt/KoZG+0yZTKbINZCwhiMR\nA9Re\r\n=lpUX\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"9ee8b051c4fdfde9d63ea193e791d71e20094867","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_11.0.0-canary.ed88df700.0_1613088325828_0.5633952188239617","host":"s3://npm-registry-packages"}},"11.0.0-canary.d30efe6b4.0":{"name":"@material/density","version":"11.0.0-canary.d30efe6b4.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@11.0.0-canary.d30efe6b4.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1f049f23adcc21bad966b28256fa504481124c21","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-11.0.0-canary.d30efe6b4.0.tgz","fileCount":10,"integrity":"sha512-sfObKA1E9t0fuuPwNdJvX/nwyeqh89ML3ubppbeIkuod/+K4w5vGJooMI/osek8zxDKFE+jjmDTLHgdT6moR7A==","signatures":[{"sig":"MEUCIQD7X9nZz1dSe49XXrUSkUCV722IrDZy3oa7x7vbD5Z3MgIgEZp9vU+qHq7JTfFJSDUKyoXeqj3Er9+PdWP4RpVtlUo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJeqpCRA9TVsSAnZWagAA+XsQAJebB1ugFYhxQBZs9x0T\nbhuj1PMOAu30l7xN1qjffJlC3ZExYtBxDouBVph00smMA4vl70qiQpMwPogJ\n6bwotRAy2nnsGGE6+BLLiQrY7ZtfL6bA75PKgtcVHcYOCL4RX7M76Sb94nVv\nPibllQMlgC5bnPidBA1rfx2nE22iYSftJ8gRU4gnqRctz6KyZqmlepMz4Qw4\nz3ujMWFNF2DOa+c0LPArMZtmHvcO/qYz+/h31q9WQbHnrh0WnBeOpB8vOYaD\nE1d/Ny0V0QB0HSbqPSmIR7JjX7ss8/M/mfMuwWn4YMVlUGU+B46GxjQvYNGs\nXYHwxIsMAvY+VqgmSPHKlpFk9j+qk6Lo1Gy2+tROmRMXfYeUtKA64wgeXomH\n8x/R3Lq47ZGcO41SChGf+2GwYcJvKTLbpae45vxrNn8GeiJugBlTTPebNFLo\ncSnNHKL2LOlBqT7K/wOgRWV2KVirduEsCxYjX4Lm9LkIZDwGJ4aV0jjKt+iE\nHAePfGp7tvqFV9xRdU4JtIouJt9Ek1jhACmY0mEIz6YZcySjYY72YNsR8Xoy\nGnuKPPHvsgAVRFpAzWdsATpSS4XlJIqkB0pAhD6+f6IViN8+USUboEj8eYQA\nJWbi4Pj03H9MFqLAiw2ua4V7BDMZErqkQgHyGSVG34Qu7Y1GP3r5AbGIKo97\n22qP\r\n=cxTW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"0d2a46d4ab9ca5088511e4e0b5cf2b261e3e644f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_11.0.0-canary.d30efe6b4.0_1613097640809_0.18527661246728244","host":"s3://npm-registry-packages"}},"11.0.0-canary.0393bdc4b.0":{"name":"@material/density","version":"11.0.0-canary.0393bdc4b.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@11.0.0-canary.0393bdc4b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4490b0b98073a9fb34e6c9e1791cbd3496a31038","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-11.0.0-canary.0393bdc4b.0.tgz","fileCount":10,"integrity":"sha512-arqbq8i7aO6Jn62mHTZ1/y8uZmlFfSGQZB5x0h/+ZeZnIuOhduAAH8jFv93bYzM/RUZoY6QNk3MdFdojasAtQw==","signatures":[{"sig":"MEQCIAH8zMQxqVyNOY/YVYyyM13ikU7Hn1JucjRjOVU3XHeGAiAKzfIkzhEQttoIrluK5w8PzYOuORrFF3Afaoz+ZWfd6Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJgQuCRA9TVsSAnZWagAAw6oQAKD1kZAFXAByFrLqadYk\nlZB4svO2Wf5Zf2Px8pM0cabE0ZImJfS9i9vTPyv5bhXeD8QIYWsorcPZOr2+\nx5WX0xSxaGrTAE72FtiPKuaG9dwAwwGPseAYvhM7jvTQgllaII4ppV0L1ubx\nygB8jBZpxLDqYNEzg88fV9qDg6TwgfXWXyZru6+H4xi0eN6uiFmazgwnyjqD\nzKEBvwihmOQgOVBDxwWZzdMF7ot8fr3WtanOQYrQfPWHZXRiNvUGuNT/7x19\naC2/CXpho3O8OcwZrMWkZuOL2mijWZx3pvZEgaKcL5782+bHrxxuGopxLY+5\nzKhuaiN08gh4HAGE/RRUix/3Cm007uLKcEmefyuHuWhST9xvLqJWbovUoEym\nHHX+Sz454MGj72ao1exGKK3hInbYaLakOCA5YaaMEMFelAoJh4Zcw1j8PvZI\nttvDSPkWJvLmGSJT00YDIgUTcsFnxEHiWFa+oD1zf9Hf4CyEPNbUoD12XSUE\nimLtq0J3xeoFDWPJTGLg+3LDFzKIoO3BF90mJ3fQ85I6aBS2eayBsLEqGplZ\nwSLu1xiNlkQadVfCf2ACwDvjyu7pwDFfnkk9IrAqBh/D7uIwZjM2I9x79wBV\nO/6pXDUfOA3iY0AV+UskmviFyXyLFIujvd8u/WxDHxtW4AkwoPXk3p4TGlEH\nQtPK\r\n=aoSb\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"8f241a2f549ae5b1fefdbb0c93ddadbc1e1705a6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_11.0.0-canary.0393bdc4b.0_1613104173911_0.20947794910303918","host":"s3://npm-registry-packages"}},"11.0.0-canary.7cd26af4d.0":{"name":"@material/density","version":"11.0.0-canary.7cd26af4d.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@11.0.0-canary.7cd26af4d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ca9096fcde47e189395cb8006eef436033c742ea","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-11.0.0-canary.7cd26af4d.0.tgz","fileCount":10,"integrity":"sha512-V2TP/iIDv3h+p/0vlins3w1HbD32vhBfAlVOcgc29wbNzrPBEIFKKIHnk9VjV26BvzrHb7PmDJLWka5CO8ayvQ==","signatures":[{"sig":"MEQCIBWpsgWZp39+crB++xi6194uNMYJDdntxBlSSYDKSb+cAiAB8iZ1iT4lrBILayYBbdsaX7+rMHjf4cTucBiD9JV5vw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJqWTCRA9TVsSAnZWagAAGiMQAIqU3JUz7krIr6xkL99E\nCnYSZ/TrR/IGvuPAfQvwl/nZFGmmaeP54vBouO4fMXw4p2pkfxTI3JpYDFu3\n/6vYp26oNHLP7KTponaTtOyfKFd1bYSMaNB1Izeyq0iZVcsAW5RGceO4Flsg\nZyYPKdUqJ1X9vUQrZLmKGnoFrR2OBrSG5Wuju3ukLe9+lN/wvyLsBX3d7UaR\n7XZ1afyyWOhAx8HQCUJ3peSaOaoHH7T/C5TC37iQW/a1yHif7KK71tUKiH/2\nYmjioH7DfpegQhOABiYzHR0GFiVkwovPQSIWVNhh0G2NtGZqeGjXmHF+oapX\nIf8DrP0dAEAmzFaOcpVcRWu4gpSmIEVBokjA1VX6Da5jUH74ijnneUXQQSwF\nXebu2BJl673GjFOljbA0D4hAdydwT7LnI9d2dXR9V4Tiza0eDoWwoyGZyZJV\nN4Yqc1kvWl5RJts7nD7LUZLRkFjB8W68xs6vAbpCJbe3u51USsZ5YUAQf9YZ\nJ6SV6HQ/bdLWEYTuEMQdU3l0DKHRnH5kpETEFkr1eIOTWfsKKbd6A2EWz6t1\naBH0ZgqVMpQC6QF1a7prRJSy3e0hNwNvt2ATUuz1W5KKFK5Oq4V/iSGCCuBk\nCCA44zK0kZzCoXNru0flnqi7M5M2JRAQcY718iFN8YkB3jyq6Z94ETMib9c0\nZxiV\r\n=W1l9\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"da78e237011a9e38abc623fed26601ad22a7426d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_11.0.0-canary.7cd26af4d.0_1613145490636_0.9671098273104646","host":"s3://npm-registry-packages"}},"11.0.0-canary.71fe9a067.0":{"name":"@material/density","version":"11.0.0-canary.71fe9a067.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@11.0.0-canary.71fe9a067.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"970766719e0a96142d721de22b07ee22c0fa92d4","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-11.0.0-canary.71fe9a067.0.tgz","fileCount":10,"integrity":"sha512-mLCbMyw1yLg622VpAE93oxxi4DzRa/ziZplGNPxP+5BKlwyYXwyh7FT8IoobbM6nsCwigBpOrJ9HsXoWx/lShw==","signatures":[{"sig":"MEUCIEVBHQ/bKqkEIy/YRfnfJk0GppnG9sp/V0RHo3lVRs2aAiEAiKBAlqSMv/hdfzrDS4xwBpRV43qPzDOE2l0CKepMgFE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJqzmCRA9TVsSAnZWagAAW+YP/RQjS75cZlR+W++vKYMO\niNXKwvbkwGOC41gMpv5jNgHSR/SAVokySXvFziNxKuMoLOc+ZSrH5ABU+BUi\nC9JCS0zK4/5e0J9c8GgYj4xhwtCxSuXuiorsCSEZZytsYCv8ggkoVj/5cHJx\n4Vk4ffdmxBbqulhFO4OjebyoT18Leip4dAXpdttnWpYmvMlDUlSI83IikRtl\nOzz/ifyvahJs2srrMyv7qSfVbPQVT1pkHyRwTjm9Dm2A5Bqr/oHvrseCuaRn\npXGDT4iR/eaNhcY2gPY7Nh01xn/rFTM4c/z53n4LnTThkRtaTf4z3Ao5V4I1\nuq5lR25Il8Aq7tq7E1s1c+pKFxHQqbcUdCS5v8vI17B+/nKUzo7fjj0K2Sct\nN/2mibVnepQSBYFa+8XOax4DN7uFzUjkqu+RxMc0OTe+H+rjAlLzTTkLAqGg\nUN5eykYORgRE9uODk6RzftTGIF/0YwVl/cQPgMw43qpDpntDOZWzNSHVSAae\nzb1zjmDmGTQW5VQ9Et4MVV8xIPVV3INCvkTS2P8j/16cDvc87PoPMjrOEfEX\nC1w100hI8OvN9RcPDAgOZQ74UyvZc3aabgBi3056rHIVSIpgj8Fg6Pb2XenG\nbK86aNqS78cjygy/lkxPbBof4EYnbGRspNoo2FTZDmytCLheuSvANGC+uhpT\nzrAA\r\n=86zr\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"c79890da6d0bcf08c3d7c57e31df805b50394019","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_11.0.0-canary.71fe9a067.0_1613147365446_0.18168223114380355","host":"s3://npm-registry-packages"}},"11.0.0-canary.0fd56a86b.0":{"name":"@material/density","version":"11.0.0-canary.0fd56a86b.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@11.0.0-canary.0fd56a86b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"df27f1e41cfefd9758aa9e94505d986e4257c917","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-11.0.0-canary.0fd56a86b.0.tgz","fileCount":10,"integrity":"sha512-hf51YNbUKLgf8wDTEP6hs8nen9Gghpu3wAQGpNEUP+AailNDHg3U7g0SKKLmT4oN3c8OpJjQPvnaePH4PhfbWA==","signatures":[{"sig":"MEUCIQCnLyyEF9Q0vSz83AaGEv9pWNnmf5UByKF8cJFSgBibQwIgIZsDCcDDHs/4bYVq+hGK6fSWkCm9xzjNK9Dr77QcuTI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJxj5CRA9TVsSAnZWagAAIN4QAII9Aadd1F+uQ3CRSGqy\nEJYUGS7jimAT/Ihg4M5vFuPrzmVVWW2ivwEX60KLVl5SprIHK4aS9kuivLel\n/2XEojVgTOYCkz4IfrjdTesd/UuT0ykq4kZY7MMv2IFs16jpScCgT3Y2L4cd\njQm5mDr4+/G1g06HOY6jNDcVNzmGRmEMh//o3IjDaChrHtbYnvt42AJY53sP\ns86XG9WqBlPrMkGU1+xwHq/Tx9M6f/roAwKCCJG6jLCHM0FolY8BzBAwmls7\nJ9pgxXAphqxc8ctfHYyqzWIOvubBZtvH+2RP+cEnii29opFQeq/slyqfoiK0\nnvN6WOU7j0koT+3AHkfQ7RKx56BAH3B5KsZw1E50WUwH9Ktj08b5yzFdef4c\nWjACzFQ5veSloB6Zb3FyiV5/Pd4etPHM+uei+jXO9fwoMmjuk82QPjknj3XY\nkhU4Rrw6Qt/j2DDkxwTCzTLWLNQniE4a7DmqJaxktYiBTXhVEZAulKO3lcKf\novystlGxtQp9xZX1gH1F9AmDqw292/nMdXoIExo9qjOMz7204zwjoaKUF4rD\nEdJDWfHzhObHziwoJSBuR5KQCyqS6w/PFDPDFVdvi0q86FwQ8D+UWkIk5U5k\nOK24KNsi2aMmcLnA5IyfhiAbaYEbYv7iodt0BLzGBnR57Jgj0kHT8Ukaircz\nyV2T\r\n=3l7f\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"b5d7e78bfa318c864343a15754f4c5ab98160ff6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_11.0.0-canary.0fd56a86b.0_1613175032348_0.26599690995808256","host":"s3://npm-registry-packages"}},"11.0.0-canary.f19bbc4af.0":{"name":"@material/density","version":"11.0.0-canary.f19bbc4af.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@11.0.0-canary.f19bbc4af.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"03070793c0cf761432775bc6ad3b7212cef41802","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-11.0.0-canary.f19bbc4af.0.tgz","fileCount":10,"integrity":"sha512-R6t2YX2ONtYS49xCFemcBCb9ielmg9DXvGnieDhmxGOCeP7vSyYBc3cdM5S8vLjo/1JdTZFl4kx8oykfel5sHw==","signatures":[{"sig":"MEUCIHzFdp/9jEniSvI7AGoHyUmeDesv5SFfViW9ya7/o8mBAiEAggREn4WbVVy1eHuc5VxkPJTffuqVMhdJaN7JIMWdt1M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLEPfCRA9TVsSAnZWagAATHgP/RL6sI84jInT76S5b0Vu\nTmPbq+DIq9RNB8EBcP9Cl0rpN7kWF8/Xdbj7fPwCRNaxuZDiaGxcKPPotgDG\nArR0KDxdHxsUjpVaw7e/+xIfqweparxiRyP68NzFMY+4pxiw7n4JNyqCqdSE\nUxwN3R4Z8dtH/IHO9EItH+1n7FzoypIDQ6F/7dgdOMs0CUb07B1sqnQLUjBT\nyIyhAAPF6gFi2CbOoaDSDow+7abdgdXYpGpKYcNkuyN8VBZ5nXbxdFDY44ss\n34dAuDmfuZ/HdgWOvjic6GK0feBw4P0F8B3wSmM5IkeRVASRNi99Q2pan4Mi\nO83gOAcLVSYBY4g0uC47EhsKr5Ux0vkkIfXHcx9jD1XietxyS0a/UODvgfJp\nMmkSyYSPAAqW7Dh3zRJOUgXTiPDT9seZ5wjkz3QCjNEplRo78C3uvNTMpLHC\n3t8bamMBoOKFK2y/jIW79pbAB3yXBYIp6eihPOxem4J1/bDnZggOL42I1Uq2\n+6IEmyWy0i8EAjEwSLVpp2RpvPollK/QbPH7uvd7JzUAVznS/q9mJKzypnR+\n1A+v9awTjI60TMgIDge/rN9KHGYekU8roFdPVqJ7b6CZMcTAg7FKKbNmQzS9\ng1Q7pU1kobezG5ib+5+8QJglqDaZFAdBI+jQtU/UwjSsMNHbEe2u3+1md1o5\nyBVm\r\n=9ncI\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"842729c260f5a3be9fec8618b41657a90e725af0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_11.0.0-canary.f19bbc4af.0_1613513694978_0.2973031283066807","host":"s3://npm-registry-packages"}},"11.0.0-canary.f9cac96cc.0":{"name":"@material/density","version":"11.0.0-canary.f9cac96cc.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@11.0.0-canary.f9cac96cc.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c85e62faaa3b91df7d67eebb1d15609c4758f684","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-11.0.0-canary.f9cac96cc.0.tgz","fileCount":10,"integrity":"sha512-uSEoFQnPIh3oTEYpwVU7sl8DLm3R2SpQ3KcuRVPDLUbAnBG+K2T29Httq4c8WQRVFREu8N6LtJ/V3XEwqvKjdg==","signatures":[{"sig":"MEUCIDHxH/uZdOGWmC+GIJ8dnlO9aL0FBE3IL1IbBiXDluCEAiEA0eiybGC1HIi63vEosD5CR/rQQLdjEKaTQ/XNJ3Q8hXs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLT91CRA9TVsSAnZWagAAiXMP/RLONx96veUynkDtIHJ1\n/ACkpVcmnN97jdgJuMJIpuI8OgsXcR2kvMm8WIiTmn0zzHR7KJdQ2haBeqtO\n+SdmHUBWxfHQI5y3q+f9AITfJBf0OVZl/2ur3rMt1WTTZySrsaQbqxFNNG75\nKLJyItI513bLGcHFZ7wih5tUI/sJtG2d29RukOqGTf+XpQ1EyAOZT1n+0qhz\n+78mNUJgnTKiHpHnCH26cI7k2TrhJ63o5jbLHPK1t4NkIo8XEG337byJ/F1O\nnlY/Bcp90N4G8MSkKIPuh03KgXC9aT4vVLjD7DlySyTJi9xiLt5/hBlpkrk8\nFJLKzZJrfcIJWDfnPISTX9GnxNZ9FZYVj79SRZhj8Z9gnRk0IQy7D+ZS/kth\nrrmwh/CO6VRo+yn+lYjx6hMZq1yqnqOd2eOAZpJ5tlxBL9EDSqTp4OILzbGK\nR7BRuDHkN/qw7DHw1j7NSsf+dOZEeP7OAyUIHmBUWpoa3QOzD4tJUXaKO/oC\nfK4bA1SVEAuISQ6Ba4dT2NwnnKGebUDbj8zC4c4l0WLEnRCed2wL4kLGI0Gx\nlYnX95GhrzCxvG9Gci7gXWwdKN4abBz5tdIl2o2GRmpvfI2IHMMwhDA/TiR6\nPRwl800ZZS/dRXYxXBNgpybECpcllGGtkubnpn5sBCPnnb7DEx0lNtrsW987\nQ12y\r\n=h6TA\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"993e327235c8cd36a8c15095389eb149ada97cee","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_11.0.0-canary.f9cac96cc.0_1613578101244_0.06377847848558393","host":"s3://npm-registry-packages"}},"11.0.0-canary.79ce0878b.0":{"name":"@material/density","version":"11.0.0-canary.79ce0878b.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@11.0.0-canary.79ce0878b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eb0a9ef76f4eb32dcb3895bd3f3bb5c2b6a34fae","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-11.0.0-canary.79ce0878b.0.tgz","fileCount":10,"integrity":"sha512-sBYFcvtvIoH3pWlD4Z5mYNbXM1Dimnruh1keGKXp7NqgE+UDeN43bOKSQiTcnFnmf5SCwYSR3J+gemLsPTRLXg==","signatures":[{"sig":"MEUCIDlssuHCD3O1FdR1P9hYt8WwafwXLAdF/l48LxEFcORBAiEAt4zBIBD/V7piotMA/TpFpPiNm/tD1ElojR7uWUzm99s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLW03CRA9TVsSAnZWagAA4CkP/R+9rhgpuG5WsLvLSLGT\n/yJjuSoFz7wQJOhbv8pSDL15RQS0wcaNQR2Ki/5o1aD48S4mmPxv2SQTdGVp\nRM6wU0boFNnag/zhNglLrC+mQBQeAsuFPqF69baQrpKQXC1YppWWSXkB729s\npDMV52EP54V9Jfso/pxZJj2X6oogag25hCFvkO90/57dhQnp84jYzAbTz1Nb\nyZWEu0JufR6ZnKD5aEALUuXNxpqwbYTNBc94K0Mjrkq67be7+r/Q+82AwI6j\nkzYVG6GC7Q4LqtXouBr/VgbdZNv2y2vOffXjw7q2mF8Grln0bXBb6tyBNDyp\n1JT3121OU9unn7latC9FH5NDupmgNlhfB59nWY8NiQDIE0moRbk1P9mXF5E6\n8EjHmD0Q6Wc00HpevhvAUFAkkjDhNZP9GhYh3dJ+0FMX61AgwiGAbK0Hwq+a\necds6tRJwIhOOyX1E5zpdujb8ddXGzf7HeSquX9m2zQB1ikHdND9L7vfU06y\n20MLtTL53anbMZsq7UFgaHpzc0kgo6DXibIG4evNbRhPlXqjQy3q0AsGtxoH\nGHL/rH6jtqBbxQy7RmatLylpNqE3qsIUhXjq9j01p5UGP3YbZJsHotdQSBKt\nsdyeCzamGHtsfEBOtN46vJKsUaq/JeZO87jJlH9p9vRRx1omkSTlOU2oTUNK\na8Sh\r\n=RDJw\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"3941c218ed650b1d1767cd6b17652d4e1b5f7ac9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_11.0.0-canary.79ce0878b.0_1613589815293_0.8185323382926859","host":"s3://npm-registry-packages"}},"11.0.0-canary.d6e507b5b.0":{"name":"@material/density","version":"11.0.0-canary.d6e507b5b.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@11.0.0-canary.d6e507b5b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"61d0afc0ce9977168dea6b7b94e167e165639f9a","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-11.0.0-canary.d6e507b5b.0.tgz","fileCount":10,"integrity":"sha512-hlH5BF3Plw4OvAMTOgjwYpBvDCNgj+aqybE5F2vZgP08VuusbPiLE6B9+dbEI5s5eRjNKQbLMkHkqVTEFLLIig==","signatures":[{"sig":"MEQCIGQR6tcOoE/HXHZI334Tm+r5QitynPh3pJshfikYHz69AiAC5Y38W/yrWmkKt0lPNhdZ6z/FTze9NxUJRoM+Wr53ow==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLXUICRA9TVsSAnZWagAAG1UP/iuuswlh5sjsOxAEqYrO\nWzf7n+f2u8Vu5HNY+qvlybRjlY29rDgNg4CK54q5SUjwboOHmxPkH7Zx0ETZ\ntjteIL6XapLfYES3+JA5FPIhcQVchUqErgIvALykrFJ6M5NsyFc9el0JAVlQ\nSLB8UWjOUZG1xif4TeV5ASAlkyztcGVl0Tmc8Yh2L7dn4xlBl7hATZjbVbFz\nmtPv9nWa6Qb/t+dtSsZuR8B2GaElIqDJ75E9Oj+y7XJvCnf0OU1pS5JJY+nN\nDGqtgQiJEdJiqHKBlt509yuV/2yhGw69f+54cttMqau1o9chwVh49KRNf4qU\nrM8qTxflf3Gl1/Jo2HCdJ21AJ+hYeQ+/4u6UKKrrm+CKgjTCoJ7SmxlBxBHd\nRwO2La3EAxZXBR2m1bv53BYqN+fLFe/BSyDIVfRSJTZtFPfBMDw+0eA5ouTZ\nofq2F5FRBUD2GjMeiN21zLoFbuPeRZwqGlqDETZcmnJW4rEqOvSU+Z2K31pt\n3jVo/4AyPD8hhHvpTjGFqJKAD4ovN5fH2Du1Hh38K4OfIn0AKFgUlbthVOYk\nkdiyzvSHv4P6U6zNeS57Pii3r7GPJqu6H4PMdvRsbXlivlWqH2oj8c3VEQFw\nwynEZ/fiaXFwnNA1VpOnr2Hrbgts6BInLO9qu8A5k0fS70nsnTRlN1yP/tDN\nmGYa\r\n=szmh\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"b20b73a4aa16995dcd0b73e46e4dc31f7914a367","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_11.0.0-canary.d6e507b5b.0_1613591815596_0.6684907001712033","host":"s3://npm-registry-packages"}},"11.0.0-canary.f2658381b.0":{"name":"@material/density","version":"11.0.0-canary.f2658381b.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@11.0.0-canary.f2658381b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a030eb37d5235cd65bad753ae4cd4ebce7ff14b6","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-11.0.0-canary.f2658381b.0.tgz","fileCount":10,"integrity":"sha512-TG8zZ21fIDLiAZap1GkYKTHA1RRKbCK36R8yZe59zh5oJOz+dIy1GIbmr9jxm8ZwX4iorDV/z4o68wzwmepi2g==","signatures":[{"sig":"MEUCIQCwJlFmitOX9QBbWti0HjdYoS5321BPGu6sUYbik5qOewIge6UZ6jKEThAH5c6kktGCQMh+xBLOlx4aCFAlPWauKOM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLZwKCRA9TVsSAnZWagAANOoP+wboLn6jr930A3rPyF42\nmASGKQNlehdX3rBYiqY+K7PvjRDxa6gmdG5TrWl3rtthGsIQzKtZYoeJ9Dz3\nbt8yfLz+CGwXd+MkJ9d2kPuVuJ36zY33rN3/V62VThISpqhh/kI/bQLGBjg/\nwQGaMTlcysJv3nIyz2jLc1S/OHAJJwb5iMbzwNusYkcKCZSWTwMPdXQIS501\n/NgDXn3YM2u2slQfjZtuXmbv0uY3YUrIJG4tz/F6rxs6WUd7xWp11WvCjQTZ\nIoLjb1ZzvunM5HF2iqnqJzt5GqyI5pv//8QV+kFFjuGmUI7jwFb/4Gf4cpDa\n+wbfQNS8fMudG0Qy2UVgemwKXpvRHozBNPwV0c6Opy3Pfma83NFWas08Hq3Q\nmMD3KElt4vzz/o3tCy7fRcsx0woUxARfTT30jVZHvWNy0A/BbMs8sCv93zgk\nLh9/1lG9wgJXQ6qU830vPt7cm2oHdaZhrA4/uAsXlCS3FS/FKyWzstI+ZeCk\n+sFRViAxGCCJfj3Y5TQ/hkMVjmBTavmE8KpJTrfCnLl2BII5bDGSNYg8Eu0+\nKfQ7unDfDDgkacYpBdtI6nB4q5yIGSL1csN29IX+BhtcuNC1qOYDfPzucvA4\nc19kicmU4R/3GJpdlp7JM2QZECPdCy8CzVwlHJdX+ztsFmSFFpoYuzkrFKle\nvNrN\r\n=ws1T\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"bb1b60f60cf9b1a4184aa52e590bcb4003d3c09b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_11.0.0-canary.f2658381b.0_1613601802393_0.4390832387386765","host":"s3://npm-registry-packages"}},"11.0.0-canary.97c4d4035.0":{"name":"@material/density","version":"11.0.0-canary.97c4d4035.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@11.0.0-canary.97c4d4035.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3276180569b46152b94f3d4ec4d83072a5ed2f09","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-11.0.0-canary.97c4d4035.0.tgz","fileCount":10,"integrity":"sha512-lpfg2NoZY6DJFbWzEwaYbhyw6N/LOOh+CFozDgbL+dm64hIU4FwBdp5EMoOr41uYIO468JRvYZZt0xnCSai7CA==","signatures":[{"sig":"MEYCIQC8Sd9SaTN6QDqhFhpeUMG13AF8sWZD9Ji8LUk8mvTx6gIhANDZyMkdraM0U9N8LS9gQ7IhYeD54LkGbeKo6CgtBge0","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLdIPCRA9TVsSAnZWagAA2mkP/A9i8cSk8OW5PGCCqSWh\nrvyO0LBzjyEfrAq0Ku1iPLvsQjK9hJfsZWJgf4YbVBrWuot6MOXH+2lqjtLP\nNbiPR6EHBWVxOWleWPE+nIuCdMytZb1wUJjkqkmVmZ3jO6xczQ7NGhGNneU4\ngSjh944pG8wih/Itqo3cHX/kVLcJmwSIWClZ0qL2x8XGc543kLcmQmJAtm/U\niyU6HyLFphRLTOOAOVL0vNsMbaBqIdVrhZdyfGb3haQikBWu7DLjh/r5fW80\nemNgNquvmXDJpUqgOdOaFxHJDDsgm4WAOYx9UvIsLhuohXqr7YP5M3usVxQj\nzGOEIMKPl0/tOEkyT4UwFtK2jc9B9Z9q7jmMKTYQ/F5YwB66UGeSLgnm2f1l\nsKPqXad2WIht5qNy7ZCjYakidyumHQfbMrP3vSOlkKHQNNM0jryGH1EyiAev\nqLli2jyB+iTUyI+FW+ZZEkQkE8TnPAr2Y79IYqlciG43/OfhUNac6j3HXo+Z\nJv6ylbGt8RXLkxHkcqVp5jt2OT7Jfz6wM299x49y9Be8z6mfUAMnicjHKJ6s\nZ3xziAbzXtiE6/IcQEKDVIck7uhnCSquzBUnyR4fB6HcVJd9kqZAlaZCLiqG\nADtdZs6MGMPISCWiGuhw/Uk0t/N+b53E87Ei8uqFqC5mG8EiTJeVfJLJxwJ5\njn01\r\n=NIWv\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"1d9a223ae17277dc00b76dbbc4263232d38e50c9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_11.0.0-canary.97c4d4035.0_1613615630867_0.8354058008087293","host":"s3://npm-registry-packages"}},"11.0.0-canary.2482cecc6.0":{"name":"@material/density","version":"11.0.0-canary.2482cecc6.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@11.0.0-canary.2482cecc6.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5ffce79ba791328c53a064a70827c689b6c7a098","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-11.0.0-canary.2482cecc6.0.tgz","fileCount":10,"integrity":"sha512-roInBBUpgQNWJ2jUFlQFTWvk+y1mXYBkENMePTPgp7LvJzlFNA0gkevD3YXKaEbmMM1Fv1aoEDhch2s9HY0d5g==","signatures":[{"sig":"MEQCIGmcUGO9uLlcvnKmGW68YrhlZ+0y/zYSOyhh6IS/KQhKAiAglLyogdzcjmp5WKyBTR5HHinP7O6m5Ub7CcpcwNnR7A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLoL1CRA9TVsSAnZWagAA9+8P/3HKBbZrBSS4wTfCfzJX\n45dAU8r17eOxRuF/6ZKhKcK8iWWnrmNIKaiiYiShNpZLlUpTahwA8NcLpC6+\nRDPPKS2LjCf5SKFJ8W3ElOEzpyvrk4zZx95r0PzrHbliZnvgHSqazo2WgXzM\nKOHCtnmvEHv5wnElkOZn1MM9ZsFQHbWjHkLgFcZUJHLVSm2qIM5v8itviY9Y\n+f89mmkgiTJ+XwMO9sDiz2mF3tC0RqYfaKKxffQDo+iySnbR1/qJkq7MtXOt\nb6yCH7e4zBfh6hsjUxS5hFz5RFqr5LSq16pexa6rUpisuo9eP8ulTB+on4NK\nSu+Bz9RAGAqL0kW87pYx2KjlkCp2TZ24fOOlEJA7T1+o+jEocTFY8VIX0p5n\ny8DnvophcPUh3FJtWeSM/e6Bs4aEQP+mwUy8ocvnV8OmMnP9+4wja7hE59FO\nf9R3uKHTrJpl19y7XHUruDzuMd7L8Ur9Jv9ZE5yAFNHajEIlKmRCMeGsef9D\n6wdeYFkkfgM5OMEAe55vK0+panuVQj4Z5LxystPeWTDzevN3cly47UGLfBTw\nVu/6a41wmQnEkYOSuUwfwYmyAAlqRaxuUxoP75dAb/2gK7XvdmmN3zGEsb07\n3MXx2DI1Q/SpcboGx2efYMHul9dQvHkvpBUzyk+fENX20Kmwe1CrwpmbWw3A\ni9Yp\r\n=7tpp\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"0f7f837f9e604902ad63f7b6e2dbfd1d117d3510","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_11.0.0-canary.2482cecc6.0_1613660911343_0.916283577493578","host":"s3://npm-registry-packages"}},"11.0.0-canary.f5bb4648c.0":{"name":"@material/density","version":"11.0.0-canary.f5bb4648c.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@11.0.0-canary.f5bb4648c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2b3be7e026cd6d4b359e8e0559ac7c5b0815f219","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-11.0.0-canary.f5bb4648c.0.tgz","fileCount":10,"integrity":"sha512-ddZ8ngmdMdWrKVn2/v8gUiGNu7XivxeAOdY5ZTiVP6uDWMIthyPKlXNVB+/EfwVTptD9gm78uxqeBrCye0cSrA==","signatures":[{"sig":"MEYCIQDkAa6REoRNso+TRTOaKXz4MznkCielkfZ3CiYCi0VDUQIhANzQfQM8bHtrcfBrCIcLXWtvNDjQ58cDouHi2oTj2zO9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLo/fCRA9TVsSAnZWagAA0gIP/2xtWos0oyEkTErTGecv\nD/TA1xXOJdXW+lBVUtpWVpdvTkJiIWSJBFy67eO+z+GuKXzl2i0i0LMfTSEn\nLH9jZJ8Ytqcq9t42XUs4buqsx4E52b8TDGbY+gcC0MbVIulTvQ/1/bBfEAU6\nHg/r9bqqRxruW5noUAjq1vnwspAhtCYADQAY9wUbDrigAisr2UCpzTtEz1w7\nGKzGHwv0D6tl9V9Ub9nOUJgK6fVrRybDh8WE1Y314+hSKQMwSRcwMNsML3ty\n+8RG/N3GFcghc4CsYZNK4qsXlxCH8BEmFvesOsHiQJI1cSc0wJbF4WRM5Zbb\nVnjyoOVB5HsLPtojr6wxlRitbnWWsEc7HjPEh8qlKU8hyQOszuZkSREayM5O\nU5sIHniuQ0SLYdFd372w13Bh64BldcoUNToF2hJLtMfu8glvNWV7OI35TjQQ\nH3CFpKfXUck7jxdkErqFYxB+uOKCjyX5SQWr+Wi0F1muVoVX9cCeeL0eIBwp\nTNfIImXSCJI3QRfYxmKRg+aAzlma4kzuEHD2wfwCtrldUcu1HAHC5qPcCO0I\nD6AXMGYC2CO26difP5LzkUslV15DwUABxhiGgrhEJawSqPBofPUAqciKntTr\np3axTxvOV/vl5VKaGExF7ISWV2zszf1UyrX+DS965CzEO9CtR0SeBXytEIzn\n1DOW\r\n=if03\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"3abc3c2f94ce48fd3a6cc689419e03b8f7769ce0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_11.0.0-canary.f5bb4648c.0_1613664223522_0.6636792351022316","host":"s3://npm-registry-packages"}},"11.0.0-canary.302c7a960.0":{"name":"@material/density","version":"11.0.0-canary.302c7a960.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@11.0.0-canary.302c7a960.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"93b8c1db35073e355578867ef79689c1c37efb5f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-11.0.0-canary.302c7a960.0.tgz","fileCount":10,"integrity":"sha512-UYRrY8lievemArnjK355wKA5DBHjV6GQWcag9zYpef5GXk6b0Ua8HksAm58dUaGAooqhF8viigoAomWNtn0bBw==","signatures":[{"sig":"MEUCIQCZ6vIdiOBYqFV55WGRayj1m6rqFjgNuHn9WENzgXt4KwIgLT061lM/ATHBk53XFfgq+JKZGbsefg8sIJC2BYFAn5Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLrOnCRA9TVsSAnZWagAAYdkP/j0SF+V4D9TR79whViGn\nThKsXZ4VKKH607xcSrOsU4m4+rQ+I4bl5EOFAgV1etwQz6uDQkeEX1Zy80V2\nit6ZOSm3blc1OFXquzYVlFvozJXXGCfnRvDBZlbHpJ+JNjzEqGvdTJQNggbq\nHIOoK1A2bB28RQU95+7lPMj/ePnG57AVTCahD2Vy5xwcKDqMogT3XqH3g/lp\nOv6Bodi6joGWynVQKT3NNzaC2iLX4Cm7HL4kJ/J4/b8F0+HOSZOcvOO2aI6z\nwGjon9Z10m503QS5dTb52PD9oMt6moviZbs8srOdVX04bfVzYEwBD5vkYBKG\n6RizVQ5smj/iZePc2/OmPAO4joixK0PGL1a3NcbGa4ekTwhOqds3BNkQBKNX\nFRcU8MpG9EPqKz1EFYiQKxIecvZ2D5AsAPxFjr2rdhxO+wus+/yxNiEF1oXd\ncwuD8ZUtMnJHzqHRezSIdEvuDmCel8z6/sY1bxNFFXrM9oLjx/PSq+t257ab\n3pSsFbqDt0A5XhDd85kjJdT8ss40b16JOXryuNVPe7+h8L85cTIQeb/642/L\nI8DgqAbVFIe+a31bChF8RnptOnwh8tqGa4uxN6IaPEFiifEZ4Skv4bUT/dYP\nP2zY+2wcAATm5HQ1sTjWKfoDneOD2jHTgWuopltHYx/uLBcfX14wUPVj7Asw\nR+ET\r\n=uLgy\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"b16c4cf1d0826970ff04a72b663f1838cf8c37d0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_11.0.0-canary.302c7a960.0_1613673383068_0.9265111831316859","host":"s3://npm-registry-packages"}},"11.0.0-canary.aa0aaf026.0":{"name":"@material/density","version":"11.0.0-canary.aa0aaf026.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@11.0.0-canary.aa0aaf026.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ba707da2b7b0eb1aa3c8d18be1c142475e00c555","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-11.0.0-canary.aa0aaf026.0.tgz","fileCount":10,"integrity":"sha512-ycB9bgwqNXrV3oAKfDtyQDdaio08H8xr7+p1gJzRt53eJXEG48/KSQ7rIOAKTI/BeOaDYj83PtUMcMEgJlv32Q==","signatures":[{"sig":"MEYCIQCu3YxWW+P83tGCmRVRTwXYjPwBF8fAueNhY9H3BjVLIwIhANxiEFgE3nRrSAHIlO/uGVOa4L3u0lwa++3ubkTxEJP0","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLr5OCRA9TVsSAnZWagAAiBgQAIXFuW8Az29gr7yCTxRy\nXV02A4540iUmm5N+GhNIf31xGFWNxYEOx6v86Ga+tN0zfLDyTc3ssRulm0FN\nPlBhAGE+eUPecqGIWTuBq0PY4ItWv09ncMVLAHR9lcMbddQxkanLjvhphZwJ\n/qSh1tc1xY4Md2Adgo6AhaTHxOx0naetSZKD+mwvJQ7626YrQGD80KZ8bzsu\npdge/ZZ7X1oeKmcUhi24uKnmXRXpkQ6jFMjrHrRRw15bKjPVIFFmKtyT+0Ex\ndGWdNj5gbDTsF67MOiXseUpftXE5XPi+l7Ik3w6kvLkI06dU3vjdgubuRQgd\n7ECCh+VordRfVhqr5Y4gAM2biEYQxSdAQRaL5IE4e36QzZs1ZcVJ8vvrMyZY\naKoPf62249VyPyNTuuEx7X2rbFyxsLM6L2+DCJwhIAX5+9BBGSnyPk12AbUX\nDNrvmmc37xnOYmlYQW+1w62AZ5ltqWkqyPeJW3D6RGlgdc0SJCQXaCyjbocK\nI5OUA0YrSChw5y1RdVacMAJWizAKbHzx4pf0KxC6y7ItJrfkhWLGANX3XfSc\nUoS1O1RqOwdeAV3XN46QCpRH7d8smqfvQJHp3yzsFzk8xf6wrlJpTnQqNiHr\n23IziOyR4vBbdAEbSYN34I7TLr+lglntmZUz9smCIS3MuTPt+qsveZKLIKg3\nQaVK\r\n=FjLX\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"de542de1d7c4c8f5f51199fe207ef527fc1265fe","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_11.0.0-canary.aa0aaf026.0_1613676110451_0.10201939024188","host":"s3://npm-registry-packages"}},"11.0.0-canary.07ff0c452.0":{"name":"@material/density","version":"11.0.0-canary.07ff0c452.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@11.0.0-canary.07ff0c452.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9196db5b11f66771f09c41fe5fcfcec3d5359b06","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-11.0.0-canary.07ff0c452.0.tgz","fileCount":10,"integrity":"sha512-dS4+w9IiNlcisMDoH3vkLnwYzmMZmcjiMO89TdeXPeN1gOcDuMxfHN+7OL0vQfemXVMVZXCJxEgzY/yFft3Aug==","signatures":[{"sig":"MEQCIEi7U02z9Fi1CBjAaz/E2L1STFZn+cUOkypdV+p9Qe+3AiBMntUnfaf0mJ3Sfrf6TSnoTZ/l7B73I0r4/PfZQz8raw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLsLfCRA9TVsSAnZWagAARr8QAKAeQgh6D8O1HZY+cvgK\n3HT9xWQ+CFhLnIz962hqS7WdSu/nHY1GVQh352On/5cVB8OHkzR0PX4b+HUG\nApAo2/0OUphwM58ovYZronPvkWbc1F2OJh5g9SRbECFoCdDmjWolMWRlYaCA\nSbN9FkmGaL2cedteGM3lqd3kHuSE6u43O6vPMnJeK7Oajw0nq0cjmGYzHa49\nXJ/ZullPaG9rGWle8N+tQdtoYXadh37M1z6EPUufiShpyg6Ppf3N8nYOPmp2\n3RZNcy1YO4o+wBi1ZPuLYB2PIwnNt94hHOd3F08IRmuBxc4kjJZPy6Z1wx+p\nJO7Y75QtyCsgeYcb9q64UdHIlWHPjrz/AaM5JOCH2Qb+NLzrJ8ArM96yllS3\n/BrkIGTqnO99VXIOwS4ATQMR4ddo0dIrjM2d5T9hQBwH6Kyv3U+pOLityG7g\n0DSJZVnD1JHV2u6TQ8v30m4bfUt+OjaEEvlJvzEFpo1kJ6Z6EFL4kOXlAg4p\n3ijZ5kVj9OiWFiWUNanRZYGg6ya6amzcIWjzUN9D+SKJevqpfFXsPgI8LpmM\n1ET+bzghZUj2Y9p/+RyAqUakdKmNQE7CsTRyhPTGt1dfVJeObh1dVfCsIc+j\nNfzTXzzyF9fNP62zZ3+2L0fakxhYZWzlN9RANAOI45UiUVT9foi/J+j0hyzo\nHXYB\r\n=e3rC\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"52e3f1cc8fd4568a48ba4314f982d5613f53ef5b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_11.0.0-canary.07ff0c452.0_1613677278694_0.10813528196766131","host":"s3://npm-registry-packages"}},"11.0.0-canary.bed7ecd3e.0":{"name":"@material/density","version":"11.0.0-canary.bed7ecd3e.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@11.0.0-canary.bed7ecd3e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3a3be8b55c5d78ff54560f886ee9ae545c722456","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-11.0.0-canary.bed7ecd3e.0.tgz","fileCount":10,"integrity":"sha512-GxM70A/Nlb2vUEBwFZzk9L7VKK2Q2vVMO7SBTmqGm3lNxUiJWauX7Eo1FHvvQdWcmBMT0SV3xoDgFWc5H68k0Q==","signatures":[{"sig":"MEUCIFIhlOF15zHFZ7KqTRD1BAxduY4GLxtgC1hcsgerw7XeAiEA2eS6uxm89H3r5+sWeehc4+UpT8D7bvZ1s2jCMW4xwIo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLvedCRA9TVsSAnZWagAAVzUP/1KsnyPpXahqgt9uBiBQ\nXdCFWvX7sOZXjYnynVCVpR/we0TVZBOcpmtAh2jHHu+71zsR2ReMTsT5Oh7A\nwGdp3c4DpQXais4yGWmQ3Ca4/KISENC4l0OGZqnn5kznPm6KE+Hnxhw8qMyY\n93x/QAPIN6BcZAmc/BccRdDWVj6hPnbI0bRoc5b4KL7OZSXvit0s/wEMwM1V\nKYhnTfDUCHSztD0+wyPUi833wTru9HbloSs+WDh0IVFD+w/WQ58NQfKJvRY9\niA+I1rFZkJCySH/oKSkcTaTDSGROGoS0NBnaAD9IB2mh+woSH1Opav0UNYcR\n8yHNEPiJzxebWHJHWLbiE/JI4hUxWtpz1Ru12o/TUZBCgu3fyXbo3wvfeBkO\n/En89MIyQMhvMKp7fWaXRJ5klS7edT4FiDV7wjhuClObOE9+xTnuFq591crV\nfPTWO1iiWYLJtg/QEXUQwueeXGyZnHOJN3GaCLwCb//HbLIdVPmsXAwITK3D\nUEfMOryHxYl/dWXq3F1LIBbnWOLSQ22QnTlaGeXiB7sAz4vZPVraM9F1UOwo\nJGnm2exhm14DTc/T6XGO+Pr+aeMjAJNL1HU8Wss8n6nn67RNxll9aOsV5JnA\nohK66erPgd6Ali8gFwczZuYb9JX6RwKcQdkTbkCbvohrVowJc33eOQJ9E1/1\n3yxs\r\n=uBsj\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"c23b9ab547a5ebb36a108742217a017fed1886a5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_11.0.0-canary.bed7ecd3e.0_1613690781326_0.9792794789768189","host":"s3://npm-registry-packages"}},"11.0.0-canary.06dead2d6.0":{"name":"@material/density","version":"11.0.0-canary.06dead2d6.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@11.0.0-canary.06dead2d6.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"90dd9925cbbd24cc296c1ec8abc12f9c435d0649","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-11.0.0-canary.06dead2d6.0.tgz","fileCount":10,"integrity":"sha512-Dy7jV+0/R9jiHWyTKO4/IO4aYd9hKRYbxRZTKvj66bd8Ps4VRFKptCwYfVIsNDFw9M74RjGvI6pBlboPO5M38w==","signatures":[{"sig":"MEUCIQDdvIiVknX4Q+mE2zBJ5eUhH+6bvM5MslyhGttmfY5AfwIgUIjGMHNyjtBqPzrVH35CUS3oE+x0fX+/pCr+68ZkiFs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLwffCRA9TVsSAnZWagAA1xMP/iGly7b6WsSNyB/WB8fg\nWRkXXlC67ehNpcTONAc/YbjKBZXbZD2+P1Ry17kv4b01Y3zYerR2Hcs2oCHj\nIem/VCCwIM8UdyfnpWx6/9nC7Lr3ckJE2SZZhXCZLDVN+FVv3QvRcchzP+0L\nnkbP9nx08+ccS/ohdv8cCUAtAbKhWgAYzODXC8ZhgKWABMNC0ThKOy+iXYsf\n3qcnIYrSQz9R4GfJDZnhJWODQyc78sHw1F9q+ptFhvbBhHwWTo0l8fQNLSpV\ne24WECYxPWgEN9NgSEJLckST/xjfhpphjOkpTGtNBRQ+mFpX2S5d1z2gT2FB\nURG6gtH9gw+21MjLd5el9Byah2HI1JnePq1RVpNGt7k9N7mjpsxvjuQKDbxe\nu5hn+l6doVXLfNAL5rpPvBechJ2tiILcIpiFDlfW/2AZ0PdkL4jcUHcX1/Ln\nJJ0FN1R8Dy0IboEz83b48ENBLD8V0NYOpA8sKh0X+gOzxOnd7kY3mNbP5gmA\nVRL+l3iTzFVPnQcm4ZTFPbHJnHjSTCIeaUybdGBQ3zGzj/KNySEVmxXJQtoR\nE8SXql7YxAnc/7u51d9sOCh/3PirnNFMxWXG0pbf3QrdOYBdVafgAQ74C2b4\noFlU6OSTgHXYDkKPuT6iayigCm+hRfS36oyk9VsQ3wQaYp/tTiijmVP9DV9f\nEWyg\r\n=Cchz\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"7458ca9f14be94c1a279bd594f262289d278bd39","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_11.0.0-canary.06dead2d6.0_1613694943249_0.22439887385095814","host":"s3://npm-registry-packages"}},"11.0.0-canary.cddb03553.0":{"name":"@material/density","version":"11.0.0-canary.cddb03553.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@11.0.0-canary.cddb03553.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"75cdbc18627227d5ee83f85c2972f7935b13432d","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-11.0.0-canary.cddb03553.0.tgz","fileCount":10,"integrity":"sha512-ZHTBGeunY4JGyZmzMl4687BEzdXvRaWKzs3URWDeEEkthiZ21aKaRgxG73VVmdKx8TxJmkW6+NOWcHmpvH9Dbw==","signatures":[{"sig":"MEYCIQDHGUsYCyHh7bBAVmkUNSZ+SnWy0j3pR6wFYlMLZgBHlQIhAMBWW/00MQaXndGG0JML64X1pi0BHrZuXPmLTkoFbPOw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLyx9CRA9TVsSAnZWagAA6rsP/2GqEUV3NZ3cNQsRWu3T\n9bovyrGy4tnBFF26Td+7dSMSVkNzkLjD7r/+DOC7YfqgWK7+WueAv1j0gqze\n9Y5BMFcdBYgvEIq1ew99DdPsrgSNiVwMKDGgcwBnCRlCaVgx7XUuZwj3MGQy\nQhbwLIHiJiFPV338UmExwisy6fPUjnBOxd6Gk89PsFsAse7dg1HpdZ00vWo9\nU3iQBKPUBOT8zhA+iWf5waPjThjkGDmfINkr654EUa05sv6Ybl3i5FyxAhej\njAARs4NW/45HOHsdR/YPrV0CWNOyWjzF49mkDy6dA4Yf4ymTdy6U7GlF2MXZ\nU3F7kf06WceZFn3zrhK0cdnCWIYju7ZcthFrn9zZI9LxSJO2R80Zfap/8ahR\n9DQn8vAvyDb2RwH79E5h9wS85GRmhc3rqgiNiWZENsllZU/jNMqRc/+PQGC/\nt3ypXAGf5QNt8f5pHpskA5wobnRiWmUtLw9xHZU77xmwISGmjo6jdRVUC0MO\nH9I+ecQQTFZl63ejFxx8RrZ3v8OMT2IrMkkNVfmD3+UBkrmlJ1ZPjIDPjJxl\nQkV4dm87TNeVjHV73Z51XZZLHfWIbx/x4szs054qtSWmqH1r3xb8EdGh2Uk9\ntH8o8PUOQWUqOPeJQKeTLp9jEHjJN9rpAtXleg6+JoA74yX2RqrT/py4OEiP\nw2rS\r\n=0JO9\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"a8deff13e5978e42ae51f60c844f7ca0abf64b45","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_11.0.0-canary.cddb03553.0_1613704317171_0.3467418724815421","host":"s3://npm-registry-packages"}},"11.0.0-canary.d6d8d0476.0":{"name":"@material/density","version":"11.0.0-canary.d6d8d0476.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@11.0.0-canary.d6d8d0476.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"97fba3b9165b221554c6f8af4eef2f6a450fe1ed","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-11.0.0-canary.d6d8d0476.0.tgz","fileCount":10,"integrity":"sha512-DbKBWWLCluhEmphFXocwixxrth6mNvKYsdznCikMo3bOURCcIbomDurf/s7S8enD/eGQJ/CSzIqfNUJqym2KIA==","signatures":[{"sig":"MEUCIQCWFiz5QpQTsVhUANE2Sb3ImLKqJ6rxGi1HhTS7tqnDFgIgIHX5+YgnF1o4/9b+Mmix0uCB8++8jw1gkIRUU3rFdoo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgL04SCRA9TVsSAnZWagAAYR0P+gMEuIGNRDrkXLW5awlE\nBb6nHJ21+M6PKRXYVU4a4hUg++jCA7eMfmQ61I2tABQ7zts74AFQ+3BdLpsV\nP/kHkD75leKi2KY06beMP7VrLhI94z2wfTuepjqn6pYZV/z1QzwVNgi0pg2R\nm5ZwBHjkcJhr8qKyObFm4yp4C0vak7oqEab8qsn2J3TOF2G3rTvgR1UAxcww\nx9C5VyfA1CMyT0HX6LG4j2zlkc1fjefYZ049DQweIJUVltzjMQwiPH2gUete\n8uAnge2G5yYmHW9KIYQRR91TQm2jUczzIDfTQ9N/w97cNeVUocw06qXld3he\nHgd386TApwm6+5szJ04jQGOHzqEUQ1x2aQiVVXHTwq7Cxp3/u3cEB8XII3aY\nSXT6D79pgx/uXKAOVprKm23Qr2awMTeh+gJOirbTpBOPFJBmNqiRwHKsE+Zh\nKc8uJ1U1CN4LSZDnQgvmgFYsaqYoAWboiIawq9+lj2qJNm6hv5B39/aCzJkD\nMp4y/8dKVNxkYuQjFEQe9IYq2oMIjCPnRU8szrOq2oge0xPvwFnw+lnVMNp6\nqpXbKE903JPUxJNXW2PCe3YuSkV6sGzJDasx6m4b4J1o5rCCOpv5+CjNL6cN\nyCH++p47S04TAn03d7bCM/ObdYpsHe++WtkrZkKWNWbRFV0S/hyXNU/paJ9Z\nGerE\r\n=osBr\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"17aa6317e2c1a8109a8bae34e962d438f170f811","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_11.0.0-canary.d6d8d0476.0_1613712914453_0.34564329893042145","host":"s3://npm-registry-packages"}},"11.0.0-canary.0b4a4b2eb.0":{"name":"@material/density","version":"11.0.0-canary.0b4a4b2eb.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@11.0.0-canary.0b4a4b2eb.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"df7b119b704a59a8cb6a331cd043366458aec627","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-11.0.0-canary.0b4a4b2eb.0.tgz","fileCount":10,"integrity":"sha512-03AYivTqYkss3fipfPFg7Av0wi0/LL2iGRT48sVy/xxX4vfsgWU7mE7merLWuV6W4DeeVcmIk59s0mSsqZV28A==","signatures":[{"sig":"MEYCIQDfVxWV8qJYd+qO7i7p25gK2FG8vacL1RTA3gMaahAZsgIhAKpbvO6gXf0tQETr4A/V1SLawNES0e4NiscirX/xmQWL","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgL9zXCRA9TVsSAnZWagAAkl0P/0PVHs+uOSdDRDgUkptM\nE+PgK/m3bTWlR1JNqUr6KRFxbh0ySTbcEiiwEIp3MRKPwS3EbrJ8kz20Vlfj\nFwJgT7x1jYjIM+6nt5FA1YsbtIY9I0SLsHww3H1/vSatViDZFrJfnNyqrxlx\n/jk9vXc6zIg8il8feg+geA2RlNVP/hPqdlg1N+z3DWeLQcap/H7VAn3x/rHu\nUMnEma4h/FwJzjaBPSjrc0InuROirOzp8A7XzCc4TS2BsDdEUNIDvtG7Yv4X\nqvHVqQbJSK+iRdNfVS6f26+HfUWpZf1TYIBa8tQW+jzmVeri5ONaJTDNXkJe\nngT0sGQkqRXuXlosxxzf73re4go/krGtIK7sPdW7l6XnZYe47C0wlmtHi9Nv\nQPrprOOQ9gtxfXbRe9uTzkb1GjuSX2qMLu4J9Ej3bpOrok++EqgpmEOCysgk\nwyEPzX3K9h4VstW9GkFxVcTDIYxBNZClLt3xypiscCsovAuQSBaD+/0kWLji\nei3FWsO2KA/gPOBblQ5ctJ7l1cXcVQf1ld6LRUOsf/2FSsCts0bDjdBWerXg\nFxEqjdkND+BYZ5aE0O6ffNinbHO60rMkoEi+1ze8Ss/6RIpv3eUiQOA0kriD\nGhr2+juduigs6CWRnUejwbKp7hxD3SUvHo1H3PuJUOMdarW0Bw+840Bbl+ww\nrjna\r\n=bCKB\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"d96f438a60c2d44b9a3f9ec055d1dad78d316e6c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_11.0.0-canary.0b4a4b2eb.0_1613749463310_0.6797472126214628","host":"s3://npm-registry-packages"}},"11.0.0-canary.3201cae47.0":{"name":"@material/density","version":"11.0.0-canary.3201cae47.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@11.0.0-canary.3201cae47.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"078a01f5dc5ede01d04ad48035a46fb82c0c5324","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-11.0.0-canary.3201cae47.0.tgz","fileCount":10,"integrity":"sha512-ZaxIP7Y+1W8Tl3W6zAahOvmROX19cLTGOgiZIuVz52lzj5UPupCH9y6ibxSn9o2+/RnqSNSjLa0V709Jcd1AYQ==","signatures":[{"sig":"MEQCIA9FZpeE20aL/uM3lc76GGpMMLylb1uvaWVAVfqQSqttAiBp2RIfu7wA4SZzheuqV64NPjXZGYXXy7roO5jnwZmpGA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgMELGCRA9TVsSAnZWagAAgm4P/jEQGdfcBKeh5FnXRlCA\nu54uuYFiBUZ6H5JcRA7aChL+ybE0MELEDkGdve6QIsk3Cq1IYm+svOfhhycG\nCz8vhjNSRU1LKFkd8R/+AIgEIjrPjp8mJA2ppP8E5ytZV0aKlXgMv3Q7piH2\nGXflnR7dCgBXsrBsu8nL4W96w0lW6i36Q1gtCKv9VyL5/Kdyc8xF4L3TqkjF\nTs/sq+dH1AP1aSCwfwCDWD0IG9DvkQ00zxf7KbpsejGWpjx5/tGYClq6L0Tk\nmL/RtWCi567aICl9Kjs5aITUkV50/7Q55wnx9QTixwrLiV7d26/ryYMd7uWT\nNMFIUXZCxWS2jA12YPz6ZDNWzGg9SPBpL7d66GBgvsSeegN9fSLkZ+Fy7gr/\ntljP2AGaY6N2PGbviXixQ+3wdfskUmIXMmTie0p9JlR3d56Imf9dZyh9O2za\n9BRKurHApL+V9FOgm0vmIIp/JZgitJL95BYSfH2HNBtxduk2M3TdwEcYWv9J\nNnLWLS55caWRH6boD5/xm7IJJnrSfXGCVo/YoiOQnUjkp1Rld9x4jMUixnbP\nYn9+ZhOKS9WUigrA6tSv/OIdtFskVCHb5j6FilgGUaAxJMlMigpoiARlRa9r\n4/EOjadX2E0hMdQ7tmvhEz7DIOtFCGZamZ0BPDRONN8STPnVysZEKUEsm3U3\nisE/\r\n=KuA7\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"274d3ca7227bee74ffff3d46ddf3ae266226bca7","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_11.0.0-canary.3201cae47.0_1613775558252_0.08943600257924467","host":"s3://npm-registry-packages"}},"11.0.0-canary.f1b1fd5d3.0":{"name":"@material/density","version":"11.0.0-canary.f1b1fd5d3.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@11.0.0-canary.f1b1fd5d3.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6bc544cf8fa410add79288dc45c1df14ea5ea068","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-11.0.0-canary.f1b1fd5d3.0.tgz","fileCount":10,"integrity":"sha512-7OrStl/lFEKTmFYSwKrjKRbAGP8/jOwieXBiB52pvQYUNsXRiTsh35YvznL0Um5J0oRJrPSLV8cU7T0VklKg6w==","signatures":[{"sig":"MEYCIQD7iTc0d8KgWxii1qsBWpB3+2zoDYUyoScPacikua/LQAIhAPuNKlu2JsrwGa14EEfNnJ2ILxfeYR0VAUqMI3BT0XAv","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNAp4CRA9TVsSAnZWagAA9xYP/3x6AmS/rzCXo11jiBxh\nnGdTvbgVpooSklN2BuDqhuuJPagTa+yM6e7iSSYalXI1KdQtJu3NM4w+limo\nICf0AVCX5xcZv0UOLuSZUqmUrsZ6OlOwJeId7zyn8saWvi0g5N5tWVCyc4EZ\n2DGNF/AvNZ05R1di9CNY2OxPDCleeWTOoZDHQrqHsl9P7mrn1bFYGxr7+U6f\nvdwJvQ/uKKbqLwoLV0N4VYDhlPhx3xN8EEoLrsRGIs/5alm5b7UIiki2FOx+\n7nfkEjpOAYYBQ/n8R2hViboiR6uQ3XkDrM9vCAsNNfku6TE4b99pQqIKUyVG\nTE8ghgHXAsM4uyRgn4h5s1EbwHBMcF+B/KMXVvOo4xtUVyPojiE9vLS/OJyT\nKtqWIYAlUkFAa25L6Z1kpNTrvS8scVtmLY6NrawuUM+28mN0nF8TsYcQNhHl\noXPf2hxd+9RVBTUAjyvJPMmr6+AwHaB424ao7HdsqIrkoL+qeGdvnQ93+FJa\nnEz3ioZcNOknoxUXeCfogpHoc4+MqAZQ2rFcOmUkN/anxEbHDpOtq1neW4sx\nLxW4YZkK5ANsT6KeCZWYGkltjLFcHNHbDxHT2JXyjNIhadUGjN7jq+RodkkO\nJNmakjSqyPaOPRoD1kD4kI+fvbj3xmjMHPGVXNdHOAU4cpADIqkoqTvBvkp+\n3FnL\r\n=ijol\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"b73a5cc3b15b450664de92ee70312cc1e8b17304","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_11.0.0-canary.f1b1fd5d3.0_1614023287552_0.2657324405864494","host":"s3://npm-registry-packages"}},"11.0.0-canary.7899e0fe0.0":{"name":"@material/density","version":"11.0.0-canary.7899e0fe0.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@11.0.0-canary.7899e0fe0.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5aece0ba04055e59d333e6fe1a16049cc1c436c9","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-11.0.0-canary.7899e0fe0.0.tgz","fileCount":10,"integrity":"sha512-8qKerDKdRJ6UD66Bcatc5UCtQHUW5AEEwzVJduDoue8ke4WE6N8UOvy0BcgPrV2NVFOYPP6V0wTFvIdKAEoZyw==","signatures":[{"sig":"MEQCIBj7nSYxX/3/DSDeY3LDb6Go2zJwZ55z5u8zZ0fQpJBDAiAp0Aw0/i79jkEwRjayeHb27pKwXo3Fx1iqP54fE1/Bsw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNDPTCRA9TVsSAnZWagAACv8QAJyYRMu8yYyg7KW1xDft\nNDMPH/2jOPTdehmQsWG7QrL25hdGU09rh5bfMmDJcDjUCxbo5hOlqjc+e3/s\nYNTXDCMYfF8wbJNQ5FxEyPNpt0ck2Z1w6i9QfjHq2NvNQr7RFKhn/H2Sv7TH\n3Sx8XfDG85rotIU21UtAd2OW8RMhegbN+SYesc9B+tt2qo2C9Z0Y4X1Vp1EH\nLMVPllv+8rdmaBeUtoyF+kEberguXN2iAhj9GLm0IxmawGDsweYVO4PSKE5c\ntTdDm3Vk1Y1lSanlSJyazrVR338ZLNUMwNmQl9JJKoP1RC9XpdJLke7/FCUG\nvNTJ/DfyUQhy0+UYZH0Lzziu4a9VRfwTU5WhpMVCG2CrgrrmDUCAJa3RAKPk\nLRHVQyuR8Fs0WZ4ZxgYmZIlWBrD2P4xFY4UaBj1eJ2UDZwxJ5t+caYQshOXa\nnpKGXMauhw8fmMxzgFB2hxxlwqrW/GuCbhnyy8nsxjc0kpHbE1y3wxB2XR10\nYTM8M1PWy3qRXAz4OlLT18QEiYC03UzUVDtzCiPlrDRaCc+Ch8VFWuRwDWYJ\nP3aBse2Ii+OKkasqMEdv1c9lHFTBXCHwD4HSK99Pphmljb/jMbk0qmQ3mnsE\nBF4SPet3WLeu8WM34tGv5iBy9jbiU0XFHWSE38VZ2HNzauVOXgoryQefjJ8e\nuC93\r\n=GulZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"73b260d2233a31311cff76e4c10438913b91c2ea","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_11.0.0-canary.7899e0fe0.0_1614033874923_0.46843570138299007","host":"s3://npm-registry-packages"}},"11.0.0-canary.f19c86d13.0":{"name":"@material/density","version":"11.0.0-canary.f19c86d13.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@11.0.0-canary.f19c86d13.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"957387dace657ee9c585b02db79b28ff01c0d0bd","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-11.0.0-canary.f19c86d13.0.tgz","fileCount":10,"integrity":"sha512-OH7hHp3KF1BNxJVnKX+OoE1OFBnRuf6JF+oBtx4JV7G06HXy2I7mXIi+6vtA/6aIr0K3HUabEmrvnPWhwoC0Gg==","signatures":[{"sig":"MEYCIQDZYjZhugz/5v6/WCi2ZRbPwjFktszhIXwMh+GcS7YHFAIhAMmXirWP3WqArYzleJDgQWJwGquJuj1rgWxpTntUNJ2C","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgND5PCRA9TVsSAnZWagAAs+gP/0Lyl254+3oE6WYqdkO8\nDQPRTX2Lx9UEKjpEWHe4XKQj9qhTFoUebqzeMYxj17EYwVOQOGLjVq1fkO1m\n4ugVFOdyAu2EKx1NwpVckKzTk4fzJQSowkh5aWd0XIeIyiANmiBX6N+8IlC5\nCEOudThEfmJzf7ojlE4JkyY6lvSoegQbdxIFFyDicD0dCBxweKGCBCk92DGr\nbfvjF+C9Ie4CQeVCeYQgGNg/VQKMAhdQRvSSnlUiP4AXXXgJHOqW2a52OSAf\nj0HmJUMQBjHXhaCH4+X0Bc/Exc3PJNMNM/UmuNwMqxZtraSazed+Ar+tqpvE\n3CXHJor3fGFxFEYNAuolGSX4levvfTyjuX42FPBWZvkn/QN/1rqp145CqodX\nI7Y6l8QX1S8W1d6pYGQGiq1Xsliwr/QYjTr7wZLrol+SNi7PFKy53hsjs1hg\nOCLTckUfqegC+H4MC8LPgvZLti/BE7Rdvvv0zXqsdFtPYItCWxP6z7a3b+QU\nCx0ORFzYu1RPLVmSIxAAYvzlXCcfM9BCqheYYkiSZpvABiPKvLvH0fca1BLO\nnrC5RzktAJAw8MGhwaYIwu8af3+4fxnY+InMhxRv+Z/jHueaY0wTOtN2yEW9\n47JLmdtgHjmqmGLht0QlKLFZcSYj4WKdlEY9g4ZNSjyds0arxKP2tSDu+AsF\nG9Jh\r\n=iwDS\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"a4b2b851fa6f3895a9e915d4bdc5b6b6715a4260","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_11.0.0-canary.f19c86d13.0_1614036558968_0.649087818559116","host":"s3://npm-registry-packages"}},"11.0.0-canary.60e892d79.0":{"name":"@material/density","version":"11.0.0-canary.60e892d79.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@11.0.0-canary.60e892d79.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e0580d0f75546a8b19b43116a37311b1b6d6886c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-11.0.0-canary.60e892d79.0.tgz","fileCount":10,"integrity":"sha512-BRRGbBGcU3iE9zNR08jMGNaqUry2GRSlAV7c3lpNAxe+BfLN2weDjIRh69MXgZwm1Y7kMAQtx+iu++OCygNZng==","signatures":[{"sig":"MEUCIE5oIoQ3cNs/k2RPZr9vN/8UtUniPw1MxSLKfu6CjYA/AiEAqVh3396SjwoIt0heb+7kZ00T2Spu/fb8m0D3v2ceQp4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNFZhCRA9TVsSAnZWagAAz78QAJSolk0DhRjoRKFpK8f6\nmz5ek/fJR/0jdM9i2UbKUigTc3rew5sRzHPw17kPkpeqXzOfgVWoXEjuQJKQ\nduqy/c9VAhEsx+GK0/U5pjEls5nox1aObgO8Oi4JryhPS5ie9ha9Vp8UEGlB\nvRO5oSIZdQoH3Ac8TPItRRt+GsxfDeML8a6oiuVK+RoRAIbjRR/+evCOMO4K\neku4uAfzzL+vypFSKGBozmKrCF4gz//WefFdwerjKOfIsKOB7HFF0QLzs35M\n+ttfWrFm81RzTqG8pDHJ4IgbOPUgD/JPHkJokGrMZKnJjSNMF4M36yZxEH0t\n4S1UNy61RegwXXVDKGJIQPtjijVJ+XCLfW8+ltP55ndPxhj/499OQfxEsxQ3\nahZzszopTLFBHk80UKA1friO5RchNe1Mhy7MTpqsMrrsNUJGtFlAoNfVsrB+\n5O2SFQ1CV7ua5MvPIb5tzttBJfUVAweJECGEpkbQsNJN4FJAhK8XPCeH9/Hf\nFWMKPtyNap+rCJvBxugzJovzo519CrvNIrsTE14Djn+kpOCHLTa+68ejyr0C\nycmPpgGgsak+fBN3OIYEKPvvDG4s+ZBE9RjgTMAeJUoyCE2lrTIFqiO7ovUC\nFOD7JYCMUI9F/FhJJ8AOZM7rQNVhSzUgOx1Q89ZM8AlFuECKeuqIAhfnFtQZ\nVLWI\r\n=6vEA\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"c94f9f392484897a962a9b7101ddc6d70e5df67e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_11.0.0-canary.60e892d79.0_1614042720760_0.028868452361730634","host":"s3://npm-registry-packages"}},"11.0.0-canary.c96bfa495.0":{"name":"@material/density","version":"11.0.0-canary.c96bfa495.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@11.0.0-canary.c96bfa495.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2564a20ddbae393ba8d676d42c36efe648faa837","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-11.0.0-canary.c96bfa495.0.tgz","fileCount":10,"integrity":"sha512-37jHX8o18kFOhcbY7CyrOH4+vei/5ym8D//DyCIpPwcb7uff14a/k7XsJqT+lSPUQ8L+qayJrMZtrYh9iQSSZA==","signatures":[{"sig":"MEYCIQDH9R4olJR4RN4i+AUJs2mPiPfROMMRL6bmA5oBc4EjQwIhAOmNTG1YCuZDCBXTap+wY4g0TpuYlsZMl2/+SL0+x9Eo","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNVgUCRA9TVsSAnZWagAAn8YQAI5BsxoH6XNhjCVhRD//\nxpY9K92u0zvUaZsEu8+IhmSJ26wKopQgUuNLZVgeFMtJ5g66tlDC4a+BYYHs\nGoeAQtWdiol0Qpk14S95SDXC4g+0ERsnbTFwDkJ6ucTcKAZumjau2i7aO1Uo\nk9Vg6MITZO+xccEnpIZuO/alqwMZgb/hrBk1FEjAfMckShDhjYGKtWQEb0jn\neVVGi7qfzNAPCwjj3uyyDgLjFnBOKOL9QDrVrxxrlrck35U1hfd7rsPlHZe0\ni5ZYOVMbMKxbo1GD6yME1UzaapVrPoq/AAnaZZ+cPhgGJFOnx5diAK/MKTp/\nd6IJ1I6dlTB4FE1fIFjm5ez3NSL+cTHypWIOvIUBhD1yG125vwCXV5a5HwaD\n+wJSxHQYoEYLAv+Cvrw0mLcPijDdGwzUwVsMNu7UcL4DVdsfw8S7He2ZQHsq\nRGw8YYMxMEptxb7B5PHyHJWU2wFGsAdLtpVqX+bf4JoxmaLGvrp3FtObXhUd\nA0KeQwUKq+Aw8kqll8NXJ2uZlovgmji2qC+YyalT0hY5iPiWCIwfoacvZ6mY\nDiiK+Pset4PvoV2Jw+sAcNN6rDbRvVNLRlDcZS1e1P46NPbaACKisXVCGGLG\nxCi/4YNOjJSEKxEkloKNc78g9mCd7K9U9K8nB9mlVr7dV4JBGfMYHndcF5yZ\nwjcT\r\n=g9D+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"1fd35f98370bc606c6677b7045a8acf16c0ea7a1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_11.0.0-canary.c96bfa495.0_1614108691717_0.15523631266330185","host":"s3://npm-registry-packages"}},"11.0.0-canary.fa9b59f67.0":{"name":"@material/density","version":"11.0.0-canary.fa9b59f67.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@11.0.0-canary.fa9b59f67.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"36c36a44f483ad8b611289a92e086c57957d4236","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-11.0.0-canary.fa9b59f67.0.tgz","fileCount":10,"integrity":"sha512-kYEBwEPDcvA0aOZekT7Xx48D5nCtWwr4XK88cCBXSEBJcGtOvo/IKwDgKtjAA0TDOB0YRM5GrFA4vMsq0PcQIA==","signatures":[{"sig":"MEYCIQCtzXwRm/IYc6sMrLbYqFlIgRSNeyV1roRJrYFBQDJHCgIhAKJNAJr7qI89f/g7rTDTixykRWt8jOQMk9WKvpO03Odo","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNVhYCRA9TVsSAnZWagAA0AEP/A/wMnGDsJx/loEj568C\n0oZjeCFz5mH5ajZT4ZkV+1puzGo1LRpD9OJo3nZPDHORdpKQ4zZSAV0L0vM4\nQ1j64PYkq4rt8m6z7Y1ExRt2xSE5TWU6T/vi6iYHX3hBu0vd4ZoDpi+oxBtX\nsLMMdHvwCFtp7BHdg5BtjvPJoDc+c/DKhP1jbP5JvwN/7SqjO7UkNzdt0f2c\nvvedMMqDf0R0ZnfbecN222sHHyS5BHXW7fgOunpLD29SMEh3KGsVrdTdxMPX\nZ/Jze77p0dDg/7IiuW8k6h+UwAIiECzQCs+FYZ8QE7S918DbGdrkYcf/SPuN\ntsvkMNm8GE/IZ/iumdGkoDV8jCcquPOPL3kGVaLyC6AZ92dV+vVFX6r69qAm\not54WMiF5K1BDXMRXb2YWqy397zmKHQiVjTwSuLETBxbshKYJ7c2UlH4n9Si\nui2fQyIpzMy3drtuiFO7bXcj02RpUfVtbJKXLkgHvkVdIdccYFRWyTIfQ5j4\nXy8pc3EjYgttu6CTO2Og/81GABMulGsW1MOwdasxEJgjZFSSqGopljRu5x/d\njR7u50eDcJUtGxUj9wqaIjybdpz0LXMjOCQgnKrv2G9C/oRyLBR17LoQug1p\n2lyQcbu0VlZ1YBxL9gE2y+VxJQx4Ld2Lx74/Fge+wc9eMhRvPvyCKQN+9Wrp\nD7uK\r\n=47to\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"5fd97ca8b5906f3b3097bd333237976e3e93d192","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_11.0.0-canary.fa9b59f67.0_1614108760078_0.14352620966107454","host":"s3://npm-registry-packages"}},"11.0.0-canary.869e3497c.0":{"name":"@material/density","version":"11.0.0-canary.869e3497c.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@11.0.0-canary.869e3497c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f8ba7da17defc6a77cf7dbae1d08b20a05384925","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-11.0.0-canary.869e3497c.0.tgz","fileCount":10,"integrity":"sha512-/bQszYQbXmcjn8BCCbsfFGaOxhIm3uhQk6HzpCcooSJupuAkTs83Hc8BabTajAXwqhPuxX51KmFx8FeqUL0G+w==","signatures":[{"sig":"MEYCIQDi4xTAdEfpAXkuRJ23uqd4dhOCOykKMbmEbQlCx0yqIQIhAKDBCGmKE6RA5HekYezYnEkD+EAoRuFrvkcghmNu18dC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNVh9CRA9TVsSAnZWagAAMBMP/As0g9l3SANWuvdwatcn\n3lbcmfPpuZbSkCYCDT81IsZkmo9JfDUbeeN+ggIuG/RsJznY29deA+HfRvkd\nqBHGcWzKGddaDkt1GmgvL0mjAfDlUOnD+jnzmVogdQcBUyPstesk/8NswsMu\n7JnAubgekQ8M0dHcXXXMBjYKDgeJNr3Lf8IbM57cN6wzY1WB/qEg588+QbkU\nU0aKH7gYasigGPw6fv14ai6RPqqq5pTTQPYULvEwFH8E5mJ9+kNdBs11m4xM\nn0QOp9y0rbpPJE53i+JbIRDZv8OuNQm1dWAr1bI52cOHJPQe06w2o3kwtqUB\nJMBPoPVVeZ0psRVnhuxeEIvK8fcnCeLXzrO2L7XR0vaJkxjVQzxg8Fxscs+K\nmAMb37UuKP8GvvcbbOWey9e6C4UqgAoraJPPnTJfV9EzDpPBVKcaN6hkmLIo\nIij9BW7Q4LsalLEIjZCECJVkw0F6tO7D4zF4S7SdMKTMlFkCtMDv4zaMZpuS\nwM2FQKdutK3hs8NDbXGZVJoP0cHaFYgDENxjr6Md/k22bS4IEAvd71n70eWj\nogXA76ociGNjLPgPzDG2LDilrIqEYcQo+yYtpcWDZO0HwuNALY0IRKtsQcpT\n9am90P744R231j3oq2H96/i427fOQsI2+W44nvOf0x6z2EeSOtqZjUz3FKZR\nm35O\r\n=aWH6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"2e1e116734dbd0e962ee4e11a9952ba9ee6684da","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_11.0.0-canary.869e3497c.0_1614108796675_0.30850509990097996","host":"s3://npm-registry-packages"}},"11.0.0-canary.750980728.0":{"name":"@material/density","version":"11.0.0-canary.750980728.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@11.0.0-canary.750980728.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cf34c900639946ddc28648156dfd974eb7083358","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-11.0.0-canary.750980728.0.tgz","fileCount":10,"integrity":"sha512-k+4bhwDy20B7g/Tj1/ADBoeQrSnYE2IewnjIpI/Z44zqUCsvJupiSio2XpRJRYeJvMVVYmHw2gwDs8Z/FjUK2A==","signatures":[{"sig":"MEUCIFu3qT0ER8vBcCi7N3fdq/S/mkF+lFDCfmJmvpzVlf+UAiEA8KNA/UWhAMPHsSbcGFpEo8ZoVxN1VEUABshvcHiSKkM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNViHCRA9TVsSAnZWagAArYUP/0D4goGt/bPZa+Z1DPBt\nmwL9brVXKWlKRq0HnC6e0uXbRVBNYLX/69owy0xKqtRQnNjP/xoxX71PW93v\nrqt5Lz1bj2VlDwKw0ITyN7LhB8W8Sl6NigcyighPMWUSgSMamYOznaoflj/2\nR1dnff7z8+1dk8JdP+NJSZgnHfeZex6J4iE0DP3GEyphnAbuzN2eHO82f4I4\nZ7oTNBfs6/xF0pExLND/gS8pD4cE9oELsEo7/XxPKkZhckxJGQR9vkApHEm8\n6seqY4/YoGQl2fhZXUkkJz8pE8rHDUqPiAlruj5VQ3IgOoBO2jjGgUKdqhkG\nHbsK85EVrfLznBEcnT4ksEYJf5ZMEpNSUbCd7yeORZuBjcVaQNmJVanayueK\nJR1E1/lERtopRcFcz8dpS3XI+oYb6d7LnliYA2ESmS9YN7g5ZUZB+c6vDGBB\n2fwSLiP403YHxtzJghvzXZ6Pz1lte7yLBhsFv6m46eBS+taRiTg/yD9uGgwv\nYevqehEmmZNO3iMXcg0y7iHZ96BbpswqKWSgW6AXlRRfDTAyRVvZi8TJzFdU\nSXalG95sLl/r1diQVh+f9bQn8MeHK639/G4uYCBHyLndKA9BH2utdC6Rufkz\nxaH0OEWzEszyVQc1QEoRBtPemQxw+Is/T7kh6Of1XbY/CWj+G3eMPq6Uy05N\nntmm\r\n=A+5u\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"7cf47593c91398b8080d7a614ffea3df68ac954b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_11.0.0-canary.750980728.0_1614108807178_0.10154520283674495","host":"s3://npm-registry-packages"}},"11.0.0-canary.8ecd7c9a9.0":{"name":"@material/density","version":"11.0.0-canary.8ecd7c9a9.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@11.0.0-canary.8ecd7c9a9.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dc20b574d0479bf336b0b82dee495d78ed3df9db","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-11.0.0-canary.8ecd7c9a9.0.tgz","fileCount":10,"integrity":"sha512-ZrlELvhqkuUWS0dAxfhiZEwsadez+tgWU7OtroYw/npAc8IYY4YJ/6rOcsnfFwnDkCqm0cN6ktkAc4/wTRh+7A==","signatures":[{"sig":"MEUCIEHVypgoaTxPlL4qAHmumjeHuhGGa+bFMgTTJS4AeWy2AiEAwVO2ovB0tnDzwHmdzgkOJaZdEPI0igJ6a0kWL7h49+c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNVxACRA9TVsSAnZWagAARHEP/1lgxDKUnKPkwkNmf5Mq\nBnUdg/ZNpvRzx24amwAd/op1bkYB+sIzWFxTflzPqY9HRb4BgTe8mjS4RJRi\nNgu7YpipqEcwu9gsE8/ArUhgVcAxpyViWCHLjTPTlj7KODC7J19+wEWmmgPK\n5FmAYNeCgcGrqyClsXWFOLjqOOMUIW2Dz5QxjPY/t8dyhyLnN8t66VsMQT+Y\nZOlvKoC3PJCY3jdek5JapZ53yuX9AkbpaCdcHbE0sbdcSOlN0YUjI9rMpHB7\n0uwMtoPkb3qY67ZsZlzmf+YS32kPdi6SqsMAhU8nYLz1IiupgMzli1QEcgoW\npLag6fTr/3gV53ZF+wV6axhwdLR+otq+h+RQ4Utum4yLaSWqmhfj/j/sXtw0\nd+MVl/DvkkUZOF9Gu9hHJVViwGp5MbGKuNzDG9ip/WOWcih9LsUn4LvbVruB\nGaXXSJ7OA412hwYCKRTS9V7WTePNRsH1qEsWGsKAFSrdPiw4OletVr/eATPj\nbNW9z3SzQOyrAAvX6vXtvoMFw8IuB+jYnDzbQklyD7s8ilrsROVv3xThaf9M\n3enMUoAK9hT18ihgjQjRazqEJq34wJ897N2+DQwfRM+HVMcF3edNrBBo+93k\ntSIQaKxEoIJTuLQ/PvSlN7KpZs7nu5VV1c7zFEJXAu0XibkmGygEL26hubZW\nJAz6\r\n=ksok\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"ec70d22f543f79f769bc5b509c9dc06cb8114af1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_11.0.0-canary.8ecd7c9a9.0_1614109759984_0.6355649974964572","host":"s3://npm-registry-packages"}},"11.0.0-canary.9c85d505b.0":{"name":"@material/density","version":"11.0.0-canary.9c85d505b.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@11.0.0-canary.9c85d505b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"866ce4f8d34a4f1e281671d14ceb7eebf94ab749","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-11.0.0-canary.9c85d505b.0.tgz","fileCount":10,"integrity":"sha512-vMNYUXF5V0u5vzeN/yvujMwL67j3OXxh3kRclc18+FDh0SgQ5OOrqzrPa7PFPww5rAmnHW1b423QXSpECWbk+A==","signatures":[{"sig":"MEUCIQDe0er/ebhiDzrZAaBZzaIchxB9IfxILx6InPnPQd/jHgIgIzFtTQ3hyZrj9wTYN3NDT+C+1xtufONBbN3SS9+9TwQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNX44CRA9TVsSAnZWagAAkQQP/0/RcJoFolPo/j3Fm7Yz\nuV8JDJxuzzZ09EbcJ77j+bfesGwrgoVBJ1rCyDCYsvSsLnTZKmM5c6yvOEUb\nTfbYs01gvpXy9ZIMMm544ms+Skb1bcXQrawmZZaGj0GKFsjXu9QqEUQXx66T\ncZjcnppadnaDaZye27KwwdiBaaIYdqGEfnwNVo6Ne1lFF8OrSqJVPj2LzmVi\nr3inbZO5tCT4TdgCukOBu0hNIvg0Nea8/QIJpHyqu9VhJe2LZGtzCII7qVMo\nmaEAh8Mijbx3haj9rcqfeXCKNYEtnZJ7vL1Rh1+61eLUZ5bER0ANITzvSEj7\nj9sJ+7d05x3c725tuGzJYLGPDfTV9/BhlY1ApjVoVj56RElKZd3tvvDD1nEF\nrh62rqL43LboHg/q3otQubhBAyHE4Y7Ywvk2aqkGXTrdJZl99FcotfaT5Nln\nr126FJxw7H0/j0F9qM+PUXBm1R8LdD2IB2XRFaVjztyQo68Oh4SsgZcesC0L\nCBLY2NExpaBxD2Ok6yf6/dvT3rLybC7pGQJGOUb5uJXp7gSgMtfapfegolPF\n+hNc1YvRvrsq/cLe01D3hYEySnYVykVJ2cayR8epWJTnZbPTh8Xwt6nvxAg9\n80VPskHvDbpLYc7HrHkKjAErL6rAOenemiX1sR+EvCyUzlxTN6pJfz9Bfoig\nTOkC\r\n=ZrZ0\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"374562c85250daef48b37a0e27a506a7e81c56d2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_11.0.0-canary.9c85d505b.0_1614118455563_0.12147818193807836","host":"s3://npm-registry-packages"}},"11.0.0-canary.9f2e85fb8.0":{"name":"@material/density","version":"11.0.0-canary.9f2e85fb8.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@11.0.0-canary.9f2e85fb8.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"127d34534247c8681ce2d26135432b001c702af8","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-11.0.0-canary.9f2e85fb8.0.tgz","fileCount":10,"integrity":"sha512-fUJeULktxYJI7RmYkYKDltCdongeM2gs37k/qJ2FTiuZ9X+bmP1bIEV8cOmkGHz0nCuo/SNWGPVrEnr5G+bjIA==","signatures":[{"sig":"MEYCIQD0sMt81qxVsHnweqYuB6qYpnM4JEfvguM/4H8l6GC8/AIhANyiPmcOcF27XNo7jhaQafdcsSZxoyq9ucHoPJzINmPr","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNa/vCRA9TVsSAnZWagAAZPYP/Ar7RSOzJIm2pdFaX3LK\n1giD0TXhbIcLSLIpszJTI3jNzJcZlz8fjJcYvGRtYmIo7EtkJLyiy2IP2PQo\nXookhQWnSaG/vttbW/o9j3jBZ5iamJjZInI0drpU5IaoDh96VAPD2+v9NErN\nzdfQRkv7M25EjFGiLd5bGxN78Gi9ysdy+zlbGQIR3VS8oaVqrsbdH5wfVfzf\n4HQ4oEXcmdoxIeXHe0BioR4g215K/Sx3Zb4RgK7JG70cZ9l2aNpM/d/13ViU\nP2iIxZz+V1c5wTHJNLuOFIFlp7AmkP1pd91CBf6HzQ5ZhniRfh2jC50gxEWV\nns7vS2YJI6fRfJF93kJ1q0h+F2pj7xw4xuiLEEaGW6Kf1hLvwZAVRbBrqJTl\nU1kPhs0CYuTTsBSTlDDzbJQY/UBmBf92IJ16YCY+tvaPdhvZo8OP7N6klED7\nPL7E7fuatX/Mvlp/764fRhNN/N8JA7GoOLYfqPbSEDtVF2SmPNyCS7AJ/ejM\naEy0IfW6ZknAF1vFfFROcXAC9Y0UfESJnj+6DEQDQlVyWbUGmxmF675DSM2T\nCedH3UCOHmB/8GlR3S2864BVJFF9nNnIPso1nQ7hXIUxn/8eiiLG2Ar/FnVm\nT/bxuOTNQWOUDlt1X8/OkiWTIeklLE0pnjeibdP1Xrzxp1N+aOcjv5ifoLOX\nyJd6\r\n=Y3p8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"4dfe4e49ca9339b2914b3dfd9e5c12642a0fd60e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_11.0.0-canary.9f2e85fb8.0_1614131182779_0.8374582715240364","host":"s3://npm-registry-packages"}},"11.0.0-canary.19c4f29ef.0":{"name":"@material/density","version":"11.0.0-canary.19c4f29ef.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@11.0.0-canary.19c4f29ef.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6a77810620d647872603c71487cbc0f9e1d83561","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-11.0.0-canary.19c4f29ef.0.tgz","fileCount":10,"integrity":"sha512-mNRsPz8Yyz50roq2Pxj5EtG//75VrDE2xoeqS6I2jbtGYmm1rq7pwZtRYvVMCxBTob6uB1VrCboWFzUNvJyhxg==","signatures":[{"sig":"MEUCIQDJUdM2uwQ5HBI01KgExiJJ/6vOeOvez+Pdev8I0dhOGQIgKqRH/Qfi9+bDzVYW24gHVnLgTZ335RHwuxP9E33nsXk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgN/idCRA9TVsSAnZWagAAVq0P/2P/X791lGtXEpVPNx5+\nBv4Jmalc5AAynvGQZMx9FmZpi41Kqv3eKDi3N2OrHYkvvPoe5qnfqd4wXJie\nf6u2GwT7I+nNaUphSXl4L0p/n0azltBkKQ/pm7nF2BiklGC5AUU0aaiDHHyt\nZAWqvz0GEPacxJbm/dk87ALbaeniTGT0ZdBqbZiSHt3xMdJJa/33roqX/wuj\nx2yUgjt4luoScu+J92cbKRIMNYekP10Bs5uV/qyIi0hLsCd+xU9zG2H0Du1U\nbFA/gDtBs1RVV/lugZBcn1L6xxqabFr3QQaNFvr3JHtckyW5XvapuWJ1jfwA\nGtWDuiM2LpqamSQ6u3GNLP9306WmZ9VyfFfSRzTQZ+V+Pkc2oR/vwn3+O91W\ndSg9bIIxLmDVGQ3QTgP78qST4NkNM60YD1VYABsVrhY1nXM2SzpQ97ExwDLE\nDBjUnDKNzbP3NwhslDRkQLgDBbhsZyHlqT+k+zEStVK1RrZS6s2mnBStrC1I\nGLKo1Z/t1TJVrCdN2t8pjvgIdt8BA5AkUwrdz3Nczu3xBKZsadNsTX1KwvoS\nNtoE9NoteFpRB0Fumn4Qi1AAj4Q8tU7iRDhzkI2eNu7jcsHqnGLfxKZ9n6vW\nBtA/LK9BHel8WtZ2Bs8/2IWZG1XLUH8TXTxWVNLFx6vpZs1KE3z2aDc1RWYn\nJ26b\r\n=CxBm\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"cf61b54810b37e81ab57d447f7d050104a2f6f46","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_11.0.0-canary.19c4f29ef.0_1614280860956_0.21519362798604935","host":"s3://npm-registry-packages"}},"11.0.0-canary.63df6e9bf.0":{"name":"@material/density","version":"11.0.0-canary.63df6e9bf.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@11.0.0-canary.63df6e9bf.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f4649a63c227c40c5ad7ce1cdedcafab36510d3c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-11.0.0-canary.63df6e9bf.0.tgz","fileCount":10,"integrity":"sha512-O1I0LFdiz7/MO9dDTFmH+cgyulsbIa8lZdOiLLAv+S0hKsVAbXFeU1AliAXeBXXgF0mnIYL6iADQFOZbWRzhLQ==","signatures":[{"sig":"MEQCIAFSKyRTxBTOphZOVEdfXHe4Wg9y/8UeWJnZ2SAARFBmAiAQp09FfmDohPk0sh1P1wBpsv823r/mHWTVUt1TfOvUog==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgN/wDCRA9TVsSAnZWagAA1ngQAJ7ltqaxJqjBBoNQXjyy\noBhSLwGEFKPMIS6GyD0jbCH4EtxazfQaANTcIml65Qz6Y1PP6pQc2B2+HygO\nrZ+Ur5z+f9QgJMloBhP3hW+4Kz0oBBG9PEywWwf4vYlkSR8Hf5EH/ifFaFl2\nvdKP29Q9AwYazOnzI874s0BBOqDYhCWE3P8qh+pT2T5eSlhJxYsktr6nfCXX\nj0GnW9k3Qx6f1TA4iYQY6eWJJOTN2lFzHIY7B2BQnjuO7Eq+7YlFbrDlC8hb\nyz7yrY5UwrI8NB/2c3kHxo0Fee8WN1TqdYIgW9+43fzfcbElOIp6ZjT48vpm\nSayllqkd5BDsn7h+6+LZZVS+oIcTIFCp6EMVXNgQppOsXEmGWUjyxQUTltv+\nCI7jrRgGz5jwDWbtS8+u0+0/8NCyxfQdhe0U25UFKqaX3LL5FoRatYzUEovA\nv6zbtKMq7s8zzefA1o4LfJSMsxsSeMaFAKm4YUT//m3WzRo5lSYdaKsm007i\nv0G8l6L0eP1yYuKksXfSnJfCLDUNThIwEp1xgJ69tlDtoOq+pwXUNmfSK7wJ\nj/t5T68FZBOAvSC34bBDxwjlVLW5Y25x9gmAc+4ZGTxjpu+UbLzH75+AtLB+\nBmQnFbZ/Sd6A4019OXXHoWgFJTaJ7yv94a825TYKPxS4sVFJVqNZ35clm/sT\nv5N/\r\n=G8gY\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"6d11b414d4ea43b5c780988e2437ee30c9f1c0b3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_11.0.0-canary.63df6e9bf.0_1614281730379_0.22851429096905518","host":"s3://npm-registry-packages"}},"11.0.0-canary.981ad970a.0":{"name":"@material/density","version":"11.0.0-canary.981ad970a.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@11.0.0-canary.981ad970a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b1e3b0fe889ad3a15c04743e642c07dac63b7f26","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-11.0.0-canary.981ad970a.0.tgz","fileCount":10,"integrity":"sha512-xbcLz57ZQFIg5Y8ma6uV0jShGVfl2FFCD47YE2HKchHXBUZRBh71QQUJM+hHHqF9Jes9kqazrwuKl7RQjSMlrA==","signatures":[{"sig":"MEUCIBI6RTviCmXUcKF0pHE+Zn0yZ2GmOBInPiVzKoIZRU1oAiEAu4U0zNo60PtGL2qeaBm6yDArgclsqxuAvLZZmY+3/r4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgODtpCRA9TVsSAnZWagAAB34QAJcVj+tcX0TeWKinGhyN\nOiTxRd/6bfP8ObX0rRLwK42upZS0u2njR9r1fb3a/ksg5tgO4nSMCQgL13Mi\nberXAmLom624IgePrbetFHIwYGBHqPpCfJejPyeMS9+aY6M78m7AH/Eop4Ut\nsmNQacwuONE6IFrlGEEhKwS+uynXt1mq4cp2HnGib8tdH7dpeDz3aPelfDVf\n9SiY+fGnTOQ6hwIVCDXjlB6vlXRv2KYyXFTukZYYGLsZ0Ps7XGjd/N3myIak\n+r+o2ksoEN72tOsXnWpkvGFBKp0wFvi8nXIIA8KPR+fEiVcXT68tVginT55Q\nSQqPMbw8NvM7Xx1xq3AiOWQ1kMYLqkT4i3P5cSqy1X7eXkzXqSIqvv7zBFMo\n//tMqcBaw25O1ngRyiuwiuZK2K/76beYj1ngF7uT3bAo0WX8kJIynh2hAgMY\neuMyoKE0MeP216Rb2RAlDr6dqTckSg0e8teiWzg06bGbEsc05T04opMfdh9X\nQCHN+a9ELskAiPv+PQ26FsdGqPvCWOwp8KkmMjffgf4ou5GgERJXclx5DDjX\nz2j0SDW5bvyvxa87ZvPMipOrATv6gDOSKcs0S/eeZX8qmwv1+7T5f8PwWow2\nfYDGFR3pTyajIyIWc8ICzSx9hgq7Cb5jzLGkP/eDx1G1DBVIe7iUGARWZzhR\nC3PE\r\n=FyRl\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"0faf6e6b78f0c9b2c63f416ae85331d13aea198e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_11.0.0-canary.981ad970a.0_1614297961231_0.9056170420560432","host":"s3://npm-registry-packages"}},"11.0.0-canary.f9c9e39d6.0":{"name":"@material/density","version":"11.0.0-canary.f9c9e39d6.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@11.0.0-canary.f9c9e39d6.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0c65591fd19a76414aad6dd889fac776549ef24b","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-11.0.0-canary.f9c9e39d6.0.tgz","fileCount":10,"integrity":"sha512-CTsrDKjUZpf1YXSrc8UyC6lnPXD3cwTZ7oazYJXV+f9/nS7UktFR2NfOuEZUdSu9v2pq8MEO+HFd3uqa00PvoA==","signatures":[{"sig":"MEYCIQCoX7c4vXZkWr6HMgwXRdGvHf/Tx1x6SIHFUMubaBgsRwIhAM6hXLPJ25KKDDwNKnckp06Uqibq1ezL01+7LCt/S8Ko","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgOT/wCRA9TVsSAnZWagAAq8wP/3MDPcNB/T+ypeMvDJqG\n0qPddHzrm6BNUOFWWJ6MlLHkeTOfafRa6Phc+pgMGcCIghq2HnpUhm5cWPRc\nfezS4WfNn9jGTV1vNSa9XZYSaEVfUFBso29MYb1Rg2AO6l/l8xthZWn0PCQj\n8j1k44BCrEVi4LB0tCCEx8Yv3HCu+SQDNZFdYnfNRZhaHg6HmhP+exIayTZo\nywSIyqS3oWWUhXmcJ8EQiShErJCBRRtpiYSxd2N9v5Sw08a+SDn+KGgmsW52\nzDeohjZMouoZIh/SaneabF96qzpv52Y/wqHXhYQ+OWz/xfIjKUmpOJL8AmOD\noZEJFMQOzhfHPWz1y6rOgsokuKhhHrzk9kvsbvJdQQJKYwdTkbgOKDrP0q0r\nzCZ58fq34QsxM8IEVG+jvZT4g1HJ68MUOkcGCTm1vGis41mjotl6LEhHagkY\nHKCZK1IzfUF+8TUFUfutTR2zkdlZyy6XGZUMPXlM2pTtSBACrMypVtT823eV\nhm2LE+VfZm32hSGLTNVWzCuVFBX4keS+bcwbOW1ZgZm31Y2gYEWcXw4sSVU4\n7AqPuGbgdlVrfD4ZDXk9hdpvXuuP/MoY6EBxFHbOMhUfFMCshTwn4soZNvED\n3wZ0DVTLB7IvkseEXJAje9t4e5Mekp5yCuQLR16i7J0P2l03FKlNz5t/tKde\nK889\r\n=HAQh\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"81d489ae3f1defd63ee64de05a2a330040ae6406","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_11.0.0-canary.f9c9e39d6.0_1614364656160_0.8435808702793899","host":"s3://npm-registry-packages"}},"11.0.0-canary.c97d7d881.0":{"name":"@material/density","version":"11.0.0-canary.c97d7d881.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@11.0.0-canary.c97d7d881.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7aa739317d68cb68ce358d34c186932e8047c288","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-11.0.0-canary.c97d7d881.0.tgz","fileCount":10,"integrity":"sha512-VFmFbHjt/iyEZx8NWSI8tWtVGagCN8lcLnynrzdTi2XWzFlhlIl789i/2DSEayLqQF7erf7TqdUFVx62XNZgcw==","signatures":[{"sig":"MEYCIQD5eMhuuzDLxAkzyjquiVWids5qDFnZ35A1FnUdanESpgIhAOqqCgssedGfTbPBVrWIyr7MQ8AnElhDiWSmBSEbE/vY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPVPrCRA9TVsSAnZWagAAvjIQAKJYiqWzfykeCBC3wjYt\nCFW01u+cZnoXLnQPSXRia5JoqwjzipedH2TSjHFGtOdRFVhlfDxgymcOMqaM\nu51wO/KkOVZnurkQ5AX9c+omYACv0UOA0uEmGKYEjBOkvke2E6e3u1w8WD5g\n+ZTuFwKnXQU4iDywDI62QIriWv8cW5FTT7fHj3Bku6pAQXv8E5PrGP5A3RG3\np9r17vpm4yY+cD8zOeNYoWk2gfFfmuVygSvoRJhsH/19HLg3qjn7eBUtUilT\n1S1URDtWFZq9f1fFeLlCS2CSdq4u6b15NB7qMiGIPjZI9RxREFQ4wIRaL7t9\n/vig2ShdN/rEzHjPujgoph33yJJ89QUBT11OLyIlJFw8Pwx4lUX2SL1pf2bb\nNbHymbjCB8Ogy8bBsE+khYNAv/+gf0AbAshsaAoeYYRhipLkjpZcE2hMeR/r\nd1svdUTyvKUIETjbHA1USSg20ueW8EP0FBRjhOMe5f9fOUB5OlU4o1UcB5EQ\nUNsbz8US4MTOPioP3aJS5Tg0gd80gG5zo8ApasV0JnhyBob6h3JGu8uq++wg\nITKCWCCOa0oer+DPM1xzvfiT5R2XqO7EE0wFay8DIsA5+Umku7RVbD7GhR5F\nJXS7uTlFuXOxxuIvJmaBfJQV0I/0KaDBvRFWdrimDkKolIet5lEaf2JJT5Lt\nysiY\r\n=RGl3\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"27a49055320511cea9f431f9c62d44a6490bb64a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_11.0.0-canary.c97d7d881.0_1614631915263_0.4011063178142169","host":"s3://npm-registry-packages"}},"11.0.0-canary.bf670dad7.0":{"name":"@material/density","version":"11.0.0-canary.bf670dad7.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@11.0.0-canary.bf670dad7.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"60c58b56ea5d49d901905e697b537e20c09944c9","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-11.0.0-canary.bf670dad7.0.tgz","fileCount":10,"integrity":"sha512-NSaYODGFVJWEh5AD69URUYQy6D56dqfSHU8qpsbxjnfmrQRL7DWhlXJwp61E8+/vmqkkSKjbTSRo90Zmf1Ng6Q==","signatures":[{"sig":"MEUCIQCl9LoD/PEw8OpvGFJxTY9oIrkUV3XR5q0+UD6oT6ntFAIgDGnfyzjLkfKHtlhglIW+VOgLe37Bf2q70PH6kPZvCUc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPtYXCRA9TVsSAnZWagAAQAYP/0GCxld2ykWuet1ex46W\nAiSOQkPQSYPZFHq8g/pJ2ogWH2SY6QEXnQjCJpSTOuxE3HJawQho1EsAqgws\n7bPeRSIPniSav066+2aTeqPsqb5Uibb6np5KAyaf6GCV+/hQk2jlXHhvF3hO\nlOW/ZazX/qBDJS9nPtm5PjZHrB7vthhNV+ncd1vym+2ojBs5ypRK4bVKXLg3\niZrn6PDojLRa0p4JAsA13BfgllabY40d2XVujHGE49uUTVi+bnpNByhTdaSN\niiZbUuzp08XmxJjmfAztWIJBVxSZalH/RSnrT5bBXb5jIeYFuDsrE0eHSqYz\nytwRnOoDQ8TSGrqesvW606NfWPkuD1ES08Nw0uZJuISrIXAS0xPhzVEQzNV5\neT2QiSwuXB/HEXlSjvXSIdJrcOt7onFoWetNNRYscarNO2XTnvYpn16LMmyw\n+DZYVJzdWn6VvMppWFmVlh07okpc/Zh07Zb/qJ1d+F17lI30JruMm+WmJKq5\nL8gQS+steXVmurWTPcR/QiYd37c54U5JTc1yH1hETJOoFUO7SNQH/wmDndHF\naTU2+WoRT7cw5C2zRB2kbd99WYMqttsRl7PSIJk0Hq2veEGxhtxNr68aZGSV\nKQzFK7ydHbgEjv5T08tw2f2rZp+fn2Z6lHOA4xYyPmJtrQeH0ilv540QN2bk\nKZsU\r\n=anIC\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"61b03e5331bd5c886de5c4a57a4edc1b53878e47","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_11.0.0-canary.bf670dad7.0_1614730774503_0.2310212943018186","host":"s3://npm-registry-packages"}},"11.0.0-canary.c7d98fcde.0":{"name":"@material/density","version":"11.0.0-canary.c7d98fcde.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@11.0.0-canary.c7d98fcde.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aca9e3bdb33c54e0da9a896616102e660e89d1db","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-11.0.0-canary.c7d98fcde.0.tgz","fileCount":10,"integrity":"sha512-GMqHI2n97LfsLXBiPunOiBk/w4V2KaN0a/vrAFDQLuWNbQilN0DbtBUlk5Gn+8vaiKKcckssF+n5z9AXhLWLiw==","signatures":[{"sig":"MEQCICojZcyAClqajDTGVv8ds1bXqHbAb/DWnReIKE1Pa5qNAiAkvqZLg/3POkWwEiuLgjvpl+ZQ7fIHLA/4TNHUln7vnA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13726,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgP/HeCRA9TVsSAnZWagAAuBYP/37MpdNqljLxzN2sFsTM\nRMzCLBmicNSFFqFbqTQ6+H7TmaAkTO8KdBZmeiDuRFOipQKiWoM+F3J4NL9W\nzBXMVRW1OSNpHtNK/6Db7Tb+5E6H8VD63RCTr/XpFtktfca5Wivd3ToDoyo1\nsIMC1eo5E6gMiYrs9IXveKAsLgpMC+zP7CJ3F/dwXGgajIMje3DR64VmqI0A\nS/72ZnzpwntGal7PYSXjF4pDy23fDDEncsKYcKTvkfSP43K7ZVWDb71zEkh/\neoYbAiYSkTrbu4V+vhng0UM/sWEt2A/2pWN6xtT1TQNL0/mDEfF0ZzCwKU6W\nuV3MN54w7i5MXHD4KTLkU/OCtcsNrtUygqUUS0YVwtTXjpv1Vkoq8bYebNeW\nAG31oXSB62pA1lBnifmjN4B3NlFTnrMQ0Xui2x6cbo2gEEioHvQKCLhpNO+Z\nWlQ4zmFO2qId7viXNfSb1I+rbP2/EsGSY2JkW+6j0lpuBSyfX0SF9jgJ2j3x\njEaYVjvoStuNYRbOSJKlQaUUu0oWqQAAYZ039PP6mtx/5aAVF2VxIL5XfYOP\nyEs5FAAFd1Cs/RDbABCclW2I8zBcIzkGZRjn/Zvh191RKXrQg37NPG01fTTD\nZ+Siykc8lYcdtLkfWTxp3ehTPtvyFSN1YVD74SkAkLxCcuSX9hjtz/Gjjnsp\nSeOe\r\n=gHQR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"c5c4c5b417df34d141edcb1fd743d83d7a2b49cc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_11.0.0-canary.c7d98fcde.0_1614803421858_0.3842195706430236","host":"s3://npm-registry-packages"}},"11.0.0-canary.4fef8bc1e.0":{"name":"@material/density","version":"11.0.0-canary.4fef8bc1e.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@11.0.0-canary.4fef8bc1e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2cd58220e3718407d63562b96c440732443a1b38","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-11.0.0-canary.4fef8bc1e.0.tgz","fileCount":10,"integrity":"sha512-sqK5fHbkfRg1ckClYb7T3uFiIEMHuw1uWEnmy+N4FoeCqviYHYqOO3mY4ZQZSc4PezsECWJiMVmiYsD503uIow==","signatures":[{"sig":"MEQCIHR6FdFxyhFZhJNRX17CUFTH3SlCVek0t5TYH2PQX2l8AiBS/EWeUHLJmCtqAuZGc1P5O0VlURhrylZXm/oTZkA5LQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQBpPCRA9TVsSAnZWagAAD9oP/2DmgaYKX17WJP+DQ4ww\nlfilrjXCpTrFycEz3shPgAZjCwZg1z27S+Vo+LCb2nltZcYqkvri7GZpTqG4\ndNsx8yTeTDZAhD/IXQtJBxzMr8ypAsMgYj3f3JJTLHy56V78FU3/02Duz7kd\n5yIDEUr/iKvj5e3CRgkDdNLfeI82NdHrFbCe2y/5ILm7bl2pTqPVnTKQBQOM\nnxRX83LSnQ/Wls0lTMH5q6UANpAQmmtlEzLsauYYwQgrvOtWKq1RKov3TDmn\n+psuOZ0lZGPZ+Pd+uwQZFiv3sijt2eZwiFX8bvmWxJtCJBg/38GThLn4+VvQ\n8ptEdZhYJStq1jere0fHQ2F45Q2zQShG/8FyFShKeZEnRpitUFIIAfblBOMh\n20ZzumwRtwuIWw3YoBdo+tK63F156bAUh2ijT55yD/CFHagVZB7BaV5w7uoO\nNiuWN9Xxcg4ckMymS0Ywa4ozi1YGN2GV/nkJBWZ/K2TJHycycUHSNX0Cnux2\n5+5sbHR/jYpiA2b0YUlabtIEXQ0NmhHDOqrJnP0jCnq7o+BfAaVOQbyLGpRM\nstYnmsR94sUP0FUCr3e2iOP1EI+CCz3zm9k3CR+nhUSumhMJfXNlNqgOgnx1\nqUCTt67MXgwBEZ2POT+z0pPC9Hirj4rnRLf+zqdIQWXX3wL+qxBX5jDvYtZW\nrIH3\r\n=LPtR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"933905005f9c16276caed5327bc6ca581afabb6f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_11.0.0-canary.4fef8bc1e.0_1614813774820_0.022784441226927132","host":"s3://npm-registry-packages"}},"11.0.0-canary.afae3a3ec.0":{"name":"@material/density","version":"11.0.0-canary.afae3a3ec.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@11.0.0-canary.afae3a3ec.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1ec44bca2cf8e859de39e08adffca9cbc9c155a0","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-11.0.0-canary.afae3a3ec.0.tgz","fileCount":10,"integrity":"sha512-ASDo948717wi183i6WyBmcS1RtXok7/TlJwRz00ppgUYRZBf+hkM5j0ivCJfRIPhcobQEjCiqZeXHc38i0+hsw==","signatures":[{"sig":"MEUCIAjL/Qxd1lVjEIt4t7Hc5e0a5ryX0IQgSsMo+TZw7XgOAiEA6juEKHy9wRbuXxi6/ojcmQq21k7KzHADORMfB0D0jUc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQB6OCRA9TVsSAnZWagAAEOcP/3Zwg1sx5eKHEsNdecDw\niexl1ZWHkGBC3KSRSUz65oCljRMkQKngCeBboLMrBsfmaQOEwnlIri0kWMMk\ng74n2LLa7dcGvqWSfdAM/+Y1waa0A4KyAzSAeUNeUev4ABOyFcbnVPhca+T+\nvnGffwpompa14AFHsnjQ4ntzShO3TaH/YmhriqfwXq1zwkCEfBUrSEXKDpwz\nVtWsytw6b/wYgz6R+ASPI7y6u86ZM6KGGk0MIGHkrxVqXLhd9rrg61jQSDrA\n+OAttWiPbeFBOlcNy2vyUbFfZ50rgqlKQmY+GXr3AF5XRDXi46p5GQEsE+Kj\nz/1d15AaF8MdSrXZbrwfjVWHINTQg++BrwuZGglcY14gfp85qYvsPPVfNxtH\njzyCycAjw1m8DEFceAc+nxymthgD7zb04NKkDn4S7r74aTCSwi3KkGyu7BJt\nwOP9whNdhZCO69gk57jmU/DGdD/OYXkVKxl3XAYg+d43p9pd6+l1rl0oBzV8\nhvFvFYKSYta0xfAhHEtQ4cMLu/g/RPhO8+0lH5TAZ9IIRcPIrLSdQH9Cr8M0\n/w4UO4ZqIpHRRzULwXhLjo0O7bavOlJl9rCPg2DCcGSATTA39o1/78EFhQ1j\nH+M2W9KHwoGdaL16aGNG3w+5aRkQJegSB9xzF6gYOGSMZkJoQsuyAo6ChjqY\nlo4Y\r\n=NtNc\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"054b07cc588568c82346f2cab8aa8948b77a80d9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_11.0.0-canary.afae3a3ec.0_1614814862516_0.4270442429225074","host":"s3://npm-registry-packages"}},"11.0.0-canary.0a0b10f22.0":{"name":"@material/density","version":"11.0.0-canary.0a0b10f22.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@11.0.0-canary.0a0b10f22.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1bbfdfe8f321f20e0063dc9231c9fe768f7d7a6d","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-11.0.0-canary.0a0b10f22.0.tgz","fileCount":10,"integrity":"sha512-fixhP1uwPf2GYikwvGSI7XwfeUnA5yvIY1CslVmAGK2iaARJn1DW7dRRKRPNC+AbX0Els+tL8LgVemu75Rj/hw==","signatures":[{"sig":"MEQCIBQwZdhvpwr+CpaCvac8DsdTR1LpXZHHKsJKCiYl7FFSAiAfHdcvg6FJk9xj6Zdm3dS4cNUtCLKVv3IYFnhjMSogHg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQCLUCRA9TVsSAnZWagAA1TIQAINHtAJMp2Nw1x+F9cLE\nF0/Ov9Z1xB+RHEEfo3Fskkjd+LlSM6uXlWPkqDueKC9cvyrPAzO3zsDFQwE6\nZiGlCqYfSlU040gMiboKixgzJbbDOtq5J3KvOOIAfHrZ7tuogvp7+A8NpKyf\nfnCGy+Xr7AvXZMWmstprH3gbf08p5ONw8wKgM765TqdxAxi6qCUhY+NjtXVJ\nvttNbVqs5+PabQAbW9v8wcVb3OwPTBsnqpln+poNzoh3Z4Tf6zMhc+2qT0PC\nUCDi3NyHr5ZWxvsA0YfJ3sQlw6EoESRUg1v0Y+ezNi5tLaZHtIRD86x7BuRo\nMfO6tQ2eaPodefb6yWvIYDwxDl3yqnD1qbVUwTrnIQxMtZPl8QRDK8qp9X2h\n2RrpfnoH4m6NSY1yG89B9jVL5p7Vaf2ub4BZXD/mWPkCr7YDQb2vp10IpkkS\nPytqn2LhuV9cW6l1o9TqB+jz4bK4/cSgp4ipa8s6zynhph22jVQwA0lyh1Ta\nnkxRvQr2hi3EhFndXV1dComkK38qiCsTxj1ZCBkuxZXRIvX2Ica3JeRqjuDm\nkZMExpryz4O/uAokFp7o0Vdn3fFc+LATQDGV0rPqHBfRXbaXPVb1ZqEM7M36\n5o6CwoJBln201grSxf2z/vrzhakSrUJXMPpjtjFxErpOxlz1gHOYKxblovr/\nlPJJ\r\n=jxft\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"5b560f4bc4c4b50a124c9432e81b3287bd348abe","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_11.0.0-canary.0a0b10f22.0_1614815956510_0.30122942707675526","host":"s3://npm-registry-packages"}},"11.0.0-canary.6f678a91a.0":{"name":"@material/density","version":"11.0.0-canary.6f678a91a.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@11.0.0-canary.6f678a91a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"099f3e71430e88160971a80c0637fdb67287d41e","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-11.0.0-canary.6f678a91a.0.tgz","fileCount":10,"integrity":"sha512-9Jtf/S/D9CspqP+0PSskFQnIlbdLHOqDRTpBzTtUAaK5rKC0bXxyoqOMnbDSjLvrc8siFXPL4X5ApUmeYcygKA==","signatures":[{"sig":"MEQCIHtiSLVtyGatXu4/K+yvyu4lZFrxo5uadrUH7D2u49aZAiB7CO0N7IqUsBypgX5sesuY/fnZHIe1AqC74cKfyHvbOA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQSk1CRA9TVsSAnZWagAAiGgP/RNk+u5sfG4HvIOY8xg7\nq3KaUTydBo2MnYNkwDyZi8LT50zDyw9UKULZUU+LS0hL+/gfqEVV6SWdDiVo\nPJ0TRAuJIznZrQlF8tA1xcWBajDYOCbMNiGdYfr3q13/JnWsF5rZNRtfggCA\nbtcHrleEHmeOVgQVdqzT9JC3z4xJPEHDFsvvyFgynyU+t5E7L1lP8ztHbZiZ\nF8zTN50XjTi3umra46veRz8tmwCTccL4QedWm1YcYGQlczj42HwxhWCfFJO4\nH2xt9HMNSTWACb+q8UXjTAAxBiw+uXwKq7iK4NiNPEnP44Z5sY4bn7CRq6fx\n2oiKK2FqyoXZR/NbIaX6MsaIWsa+gDu68AqI9JM3Xt8A63KIeR/ga9ZwSV99\nfuja12h8y6rZEtDBaKCElleNKe4uc5F/MEzANKxyQH76wjhu+qNwBo2D5b64\n1p+Qz+rdWQJGFHom5uKMczkq06FGMOyUll4tO53kdJ7ChqInKwVkXx3/wq/X\nM4ZGcToMBBjlyf5N2CGuhlvsEHyJ01Gd+AfC/6j9oLZgAmYaPDvxMjRTCdMs\nhu6+YGsVY+YtbJDVzFzYZdrpFTMK+cBSYurFSsAo24p+V5Bc8x0UbK2JIPuX\nyGrK9Dfkl72OR6JqaPhGafYBzsSSvgokqhWYkNicMCTlLClNnsnf599lu9xK\n99rB\r\n=YAHZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"863e8a04081286602f8b0c9bf446655b9399e8c6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_11.0.0-canary.6f678a91a.0_1614883125343_0.8054557655436867","host":"s3://npm-registry-packages"}},"11.0.0-canary.f5f1b613c.0":{"name":"@material/density","version":"11.0.0-canary.f5f1b613c.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@11.0.0-canary.f5f1b613c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9af39070f0a02c5e4fdbab54eec51fb26cc77257","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-11.0.0-canary.f5f1b613c.0.tgz","fileCount":10,"integrity":"sha512-TaHTI+kmy+PvTeccE7caxighsJStZ9lzekfNSLGidijl5r13yem8gtox9yw/KNAd4haQRBPVsRNupaS0eRKNaw==","signatures":[{"sig":"MEQCIAjTLHqHC/KII7edAHH3sw5yl74tu9tzZognlimgImhhAiANx1/Qw8GJ6w5zlVD6fThYw5pggAOXu8dSn5rnVT/IHQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQUeFCRA9TVsSAnZWagAAFq4P+wZAmf6FSXhGQnSfNjbi\nZw2JeTBFc4J4s2W0l2zqMJBy7SexRQaDHjJ69VGpNQfUYTeaozBIst7q3xD7\n1cehtG6zWiqIkAHaTcaRI8HZXRh7EgAU4hU2ZRnD8K2rDC5V/6lwH/NPh5UE\ngP59eljoVY/nREAdYBGuAgNMuDd+M7IadPXT/0lxqenGrl19k/CalY6D0kCK\nYH0OYOeM5kNbSLYhVAAtJQoYEsvL8ZnoMj/+LZCw5xgaDNl2l3wxQKoeUmiM\nsRDpRLpPljaotvEG08sDYxpa2JoP1FRSLRte/Z6j0MC6Li69OguIQgMvoDHm\nsf39ou9Yb8iFp6nO5Jz0XDKVtIw8SCUTBTwaKWD+JD4OUsSeVLKbUWpUusBs\nK/ssAa/ZiUnE0S2B8xzEJR6E6VjU9Rbb3bdjIHbooW32O9JLGuHHdNpRtAQB\nXgzE8OS3irDe6iF7vIjRZQ0BuJl+D99dfx/r1k5U/mv6ExZ8ioMRXzmsa7e5\nQViGc7G4coekKjKZt3rEEn0UVF/1Mvx8NQFynSU7C0vmX97/HYnpkJHiRfnr\nl6XN1/uV/0qJq6H2pePIWd+7ObypPBzI0ZcBmh/7FMcJKtvCOzqS5h6TUK8k\n5ozWVujcc8aIr4A1CWcZqOMipWQkL6iTwc2q2XHlEzQmIJapLDj48w5N1Mdt\nL/iG\r\n=cSTA\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"20e2000d9ec732c7cdd0b5c15381f0a55f778036","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_11.0.0-canary.f5f1b613c.0_1614890884714_0.31243054982801444","host":"s3://npm-registry-packages"}},"11.0.0-canary.606e767ef.0":{"name":"@material/density","version":"11.0.0-canary.606e767ef.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@11.0.0-canary.606e767ef.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6882fc4a94a2a9a6df0c0a88bd84642ea8e898ea","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-11.0.0-canary.606e767ef.0.tgz","fileCount":10,"integrity":"sha512-7j26Yb2iYEX1mmqr43gMHQ2J9bhaATSlACuEI7jFfMfHOWURbaxKt9h705TnFVbWKvA4ilSaR2KpSequTc7STA==","signatures":[{"sig":"MEUCIFZxQg1pGKkFfi3hPGDcSDjknNRuqlLc92Crt5Y3V31hAiEApffTabgsQHSIm9eCac+enSuTBf/7fFvdtpiYnysF5dk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQVSdCRA9TVsSAnZWagAAoYQP/iu3DeVa1yCXlulLQIkG\nHFhdDpZhzJkZJW9BECvQ2lRzWJUlrFqry00gCCzuAgMyWZRFPBURXbH+RJXf\nDcMA2RuDRJ92Y5kC+mv7BEbkNkTS3q1DRsf8BE4f2LaGYVpthhIqcRu/MtRl\n477Pibr7LOQy3WyNspaQOdlfB/sbyN6kD3uElpeCkIgpicWuMDUqLxt7XeQE\n1DIZxO7rEZsEa63IVBJU+lUwMvaAe8zIs/YjfGhv4IEmZ9QeCodaZHTxbA+K\ngMhlPvGs4fRkQNbHuo8KBXLtUC8cxmhfC4xIPp4wxvgEENwd0SKRmubzGlzF\nA4NSEPusrfeUm6Vghn1HriQMtCaWlojW4jCeoaLdbGqP0uTTM963WMkdGUBn\nYkIJWut2NgGm8TaVuvW8RqFunIQzXguuS5ZtRwZ10GY9vsVdAdUVFrHzIEMR\n0fHpl/KgIqTl5x92oA9bPAUQpttsZvmak8jGKHYFbpdQxYGypeh7JOt4ASej\nwwyZOQ9HPEm/mD4GILDyyoTUV5PKFv5UXmE/RsCkC+SkctWF1PzGJhCs/RRI\nrn/WHgp85BiJ7Hv+sVK8w3NS7sBZzyX21QJlTnUno0R3oW3K65RVBOsKYKu3\n63KUHEp/s66xXoFcMW7Iq0feiISufEdNSjAYhlF+CVC3Tt40LurbkOHYGJ8B\nYkj3\r\n=T2Cf\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"34c41b3553e1ca4ee49c0c36a1685f3f462d33ce","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_11.0.0-canary.606e767ef.0_1614894236881_0.9132054548624717","host":"s3://npm-registry-packages"}},"11.0.0-canary.f77a4dd1a.0":{"name":"@material/density","version":"11.0.0-canary.f77a4dd1a.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@11.0.0-canary.f77a4dd1a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"805931fe6583895a05caa04ea04c5b04688cf36b","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-11.0.0-canary.f77a4dd1a.0.tgz","fileCount":10,"integrity":"sha512-UQXRNnaxmb7G1HtoRdEMZMuL15+UQ6w44MVZnrltBUnAttktevgTiWmFHO3eLBDJCBDnoBvB6UXTfJj9TE1GDw==","signatures":[{"sig":"MEUCIQDzNDVSACEsZAiby4tME4GQQ2ExJUYubknA3pbhCjOhLAIgagpQK3zYz2Ab7jAAJdy/xe8OqfyIOTln2+AcJof0hkY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQwdICRA9TVsSAnZWagAAsJUQAIjb5BtF3D+YxvY6fMNa\nNBFYyfpUVamKP/VEDnWJPn1qnsBuM8MvbINfh6Vh0c6COZC2e9W9Cc7TKoOz\nG916FslVheO9ghAGj/tr4unR/arscsfUdFFdzt2Eqvex0+HpvCJFowhGICBa\n2eBxV0TYBIwaxbg+STzrJdrAhKSl2MWtrsnd7kkQB/B9T/bpp8xp8R4gu41Z\nGFbEuX4Pq8oAeHivzHhzc30ZiyxW+zPhxWCTSoHTgoOfL9GDmxB9kG2RzXvt\nfv/gDy4WtUv5lZQDV2WjS0toiVDGPKXWblIZntqlAoNhrZ3oh7lNhln77YiC\nEdFVohSW0wbKFSUCIcfO1XGGOVEUbOun+Zj1mg3BUWKEG285WpkYtm0MgOKc\nMnQvqE3sMTgYZkJWypiccIfc0aFQMtjxJmRUXq/UiAYZvAECyuiwnxPO5aZU\n4/r1GBbpbNuI8eWIvamgYLlnBsa+sW+gzo+ccw299mqdGGC33E7jT4MTDPqV\nMqx31sObQzT6EIplM+1pLCkEDvHHMBGjaFYJAGFezAiOdtcvwHECqxP+CbJF\nl7PsUTX4T/P6jCXZxYk6sW2XUqDNLdrC9bAJBVCAEUl0APLhcgmg4I3jWThS\n+1hDJ0u+dZzYs6psbJO9sAjqzQFvVNbAgLqRG1oiUMunnWOkATvSx/hhoQ9a\nHPzU\r\n=LbVN\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"9a729bc3e368dfd8685190e8460ffef16eac8947","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_11.0.0-canary.f77a4dd1a.0_1615005512260_0.3844122608673697","host":"s3://npm-registry-packages"}},"11.0.0-canary.2d6ba2c23.0":{"name":"@material/density","version":"11.0.0-canary.2d6ba2c23.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@11.0.0-canary.2d6ba2c23.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aa756eceeaec6b8525841771ba0a13903b1b7432","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-11.0.0-canary.2d6ba2c23.0.tgz","fileCount":10,"integrity":"sha512-rS2GkbgEcpCLfbgH/wcIYEwNcPnveAY34aBoNtv3gNi/Fcrc2fNdhaMYOW+rf3rjR/a4DdbBqLCrVXMfBhrV7g==","signatures":[{"sig":"MEQCIBQ9oX8v5p+XjOzVzWN+l2oy9vBoAwvshtHBdenD/JVnAiAYg5Ag4ml0ImLurRtyth3Zoh6spr3wlIClZYH44u9LaA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgRqhxCRA9TVsSAnZWagAAmdIP/je+QX/8XDudNwcNmmWM\nOG+6kmctu35ejb9tp2pqmdTgom7Xj0EbO5E4e3p3Antajw5oDmEnrpKbZcy8\nhkD58GPL1o30obLpB/LGeLwT9b9cqtSrIOSxSdkffcqlynuShOCbK4mO1pZE\n8m8qP+WkKbgdeY9RW5h2m2alwXjGbYXXMgANgvLdBk61IuTmCpKXR3fIiQPr\ndgja945HLDpaKPldjfcWEru2rOyAcsZJtpuK81Vsq4dekZhfv6+iIldqxJoZ\n84IRqpUp48SDGKM859zsuGsO94VU8g/VRgR6AVRsXt+o/Vq+RSO1e50Cm7nq\nOpLa5jO0XxZpT3QVzBm2sMKh8SapqqLpJj5vzW0xnK6O/7QKY+m3sgR2IkuC\nkVkg/r63pgJrZLhZjFFNV9jx8Kz3RlpdSsoavD6ofP6w/bzOD8pOE55ixo9/\ny67Qez+FNGBbcH6ueJr8Jb1si+nrYcP8nHaoDj+WYdGCZOJNMmabY4QCvyxJ\nb99rYOvrhmMFtA56W7EXIYtWyvxL4CINNmKV0SaZFcFxm+tlcAXXWG0SS7lO\njKvAXclSYt4zZUY1DcmIRSIGm6v2DnF0RXHMVTk9O1FcA+X4ipfYUF3hpGb+\n9WATCdw0017+0B0ibi+Qh0yHLjDtFr+cBPdeXgkdtfCr6EuerDEy8sXwFwda\nczqt\r\n=hYDB\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"a0b889753d981e10bf70b9bcaead70c1549cf865","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_11.0.0-canary.2d6ba2c23.0_1615243376053_0.6513475333737291","host":"s3://npm-registry-packages"}},"11.0.0-canary.7522dcaca.0":{"name":"@material/density","version":"11.0.0-canary.7522dcaca.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@11.0.0-canary.7522dcaca.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"64e34e438e3a055ec59012dcc274f10b47486523","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-11.0.0-canary.7522dcaca.0.tgz","fileCount":10,"integrity":"sha512-+LnDr8vuSNAXeMPCZfeyKmHSOyPx3lMxBAduqazy+Wt+xbbpBYWuH2yuUoMD+n9eRsb0N5hca9Of45u7ldSRqQ==","signatures":[{"sig":"MEQCIHsVIx1qQau8fWKsHbjLiZYA5kjp/IROBnoAR5vlvsyfAiAH1Ragbr6h6JO6ixbzNyAt575QR30HzCCaRFX03383jA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgRsCgCRA9TVsSAnZWagAAgXAP/i/asEMgM25S8AO/aosf\nXAi01lUdU13icotj5l6vZ0TA/JiQm14O0Zy4bnlOCDrDvApqsZ68utZGhKo6\nu40lqqIg4Ht2L9WsH/gwBN85fTPcKWHPy+LG8xFiRAibhFampEfCX73rpzj6\nT4v3n1fhKPYQjayQVtzPPq33SrpA1mxIcBvOizV2eyleQpQqHqktcS05jWnn\n+5dS4NMYuJL4LFsexjpeF7fS8C4LF/4ykILIh/YkBSu/2K+2MIbcX8y7MYh/\nsjWLrrGjltDcN9utovdQpJi3Yy8YQSn/uaAwF0z6EpsJ+R7QnoX5Yaq9dx3Q\nKuVcQmo+rhI8zoNMehPifAWlmx3AATp2jA6Qx4u9cWuymvPenPMWRiCPy/LJ\nH4OgQ/Ev9clU+yDPfJqKnx+YUvdo5Ev99h+e7fTWe4gOngsK4ld0zYAeN04J\nJ8Iv8IQJVbC1WBq+WopVg367mSWcNNxIvdpOXLFT62wcxODeRBVgZDh3wIc0\naA5l53mXVo7KaxTGmzKUIDqmOghhgmPR0HWKG/nLgDrJCWEgwDbQm8syjqi3\nsCgsQ+TjF+qasGZZRChahaLpw4wMMtm+832zz5kaeNfQHTV43988QIycsF7s\nKoMCvZZHFx6ZGd7cj8Z+bfZEZxjA05VmjXiChU8goAzHzoSWRgHETVlWCVcA\n7nVf\r\n=URsr\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"6e73ae404aecb0602a5da37f40b650181ac48062","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_11.0.0-canary.7522dcaca.0_1615249567686_0.2376228963957585","host":"s3://npm-registry-packages"}},"11.0.0-canary.5c0ab7401.0":{"name":"@material/density","version":"11.0.0-canary.5c0ab7401.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@11.0.0-canary.5c0ab7401.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"65235a51c713108d1d34132cf73e44fa32a9b644","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-11.0.0-canary.5c0ab7401.0.tgz","fileCount":10,"integrity":"sha512-598jsi2d+kWK/Qj4Toyryi87VV6+XANnIo/o6AnN4ktjU1Hlo/hLqeO8CVRnkcgs12IJ1qoz4TSmZpHS6/uGkA==","signatures":[{"sig":"MEQCIH0QfP3rIkPwlbadzrvUYuAtla+FhtzgBUlstF4qRl7mAiAVD4SEXDVcUUgHX2aOjS0jZZUfBwLxI/chMA3aYP3lbQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgR/vaCRA9TVsSAnZWagAAc0sP/3LbSGSju6tQ9ZAHhee4\np+nILdAiGIliY5nPPTCrbZ8W1+kE8k1KgAXWq668mTK9XswqYvFTy5B86p/j\nbmW+cSds7v8pcrXPPBiHWYwxFZRAA0EdH3FkZ39qMJ3Yt/H+g/7UECJa6wAx\ngwsJX9/wDVniL4Jgc5zPRMmg5VXe7Xy5Zt9AI9ep3Rlx4eGToz5GEolFEcrh\nrZdj1HSIRUJf8VM59R7FtYzjW6Pa6nU+66GG31ig0jgLLwvFN//X9L3jlDu0\ndIpG9tcOhpRIxMdFjxp2I4J6wmhDWApX3hzg3UQAPXlvTLlMf0RHCvjhZUCl\nWi4IuZnuA2ap3dcJyhc8XY/lb7iFPIQFVyL7oCYzP7lYd2RcZ+jABAnZVLWd\nTsImQdaJe5abohM/woIZbIXGJQ0c89W98oNtIJ2XA7YA+CkuunME4efPS7GY\nwv6JtjAFKCN3+YC9/3ZpESpX+2OMBupa/173kytDFwa769WJwBHXAq1HzKgD\nRMUj1nyfpKKnH7Bj1ekDTAN2K1OFwwkyJJVcWw35jvdOPV7cQh3eTpnFiGIg\nGhOA6ZbvwMKFlmY6loZjMzJ2vtltKaV975D0Wr7zS4PrNnbdXLbhQOJTR/Cn\n185QBvLSTxi9O5hF83yzVGmsEJ8K6BHMxlBPKFNLRrFc1htV25UOd713gq4H\nTpnR\r\n=JOyK\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"95ff5a1121ca15128776896b8e4759594ec51246","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_11.0.0-canary.5c0ab7401.0_1615330266280_0.6626049814635206","host":"s3://npm-registry-packages"}},"11.0.0-canary.59010b6dc.0":{"name":"@material/density","version":"11.0.0-canary.59010b6dc.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@11.0.0-canary.59010b6dc.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0514398c4a4d137424789752920fa4bd86eaf63a","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-11.0.0-canary.59010b6dc.0.tgz","fileCount":10,"integrity":"sha512-7YIEzwTCVsvCMwcwxtqyy1s+kRs5vN4Ah/2qa5AZ0CaTBmuSH+YeOREtR3ZiTKb+g1pHs5NdYcnroU16chk1Og==","signatures":[{"sig":"MEYCIQCdbU0jbbTJLh4t5krDc3q5l77oVojOb/RYih4eV/uuTgIhAKwmOa4UYNH+2uADpwZrjs5jc9WlO5/FU854tICg1ItW","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSPoGCRA9TVsSAnZWagAAZt8P/3rt+VoXqTSVTDI6DN2d\nH75Xy7dk4PT7aU+Us4pBInUED+RbfG1FTcwBiGtxODnBoBbAT/hsn+gdmMkI\nQKJ4Hueff20QPhatNSENLLossuUwH73AGju5+H73ZDD0M66UjcxVhs0S+iLM\nnbM6x1P0l4DLJrZ70luVSM3uY3EAM+mU5aeTSujUWejAYzW4V+uLcMa3ftSq\n4WmGFuka4WTEdfaK38xfFQbcpbcg2kPHjqgvihiBnncxMLJ10mC8hfZQ3JGs\nzbF/RatBabXk/lsCrDDNABQ8EpvucQvUwf+bVts4AYjVr5V0L4cCEAJE6a3T\ncJhuBr4AJWaq872f53q9BLCjVxtTCSoHUpy3bHJdd2DfdZXS1kLoMtwYuxKZ\nPC9egYYwGJAGWDrgRPH4V9yut9+fYbYubVY//b0yi71TLB5eG+RtyP4oBVV0\n846L7NJ+wBhONZvd4SGUNEjo7UDDI16bpO2hDATaXHg4CbA9U69KKkMjlNnK\n92aNhIu2eBD1tTXL3d8r2BfRs/WC79MTPd+8JHyiE3iqCvhyqZoIoGTL5UL9\nyjBqx9tIRy+c8QQuGozwNkeNaf/O/IRjI9rGqF+bdHYQiggKA93MD1vjohyZ\ncFAL2OOCxEF5+h6RJC3iLK782S6HuIYZ+R17o2yTCzFEuTX+zx7Efatg/y6e\nwFfV\r\n=N/Oi\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"e697574285a5102f4c1e5002a85ae33a3bf2210b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_11.0.0-canary.59010b6dc.0_1615395333792_0.8647515809815485","host":"s3://npm-registry-packages"}},"11.0.0-canary.9e52f5544.0":{"name":"@material/density","version":"11.0.0-canary.9e52f5544.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@11.0.0-canary.9e52f5544.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e18301ff1bb12468eeb0de01a790be41cbc23786","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-11.0.0-canary.9e52f5544.0.tgz","fileCount":10,"integrity":"sha512-z/JV7mXEJzzmpJZ4t+0PW8ZxTYUle2ICTL84hTiHcChMEVhuW5nPL3F9npL9hrk09KD0VoC+hMNSU7tLCSPbrg==","signatures":[{"sig":"MEUCIQD8Ykq3DNLZBJcrZNyQMb2uEXlUYsRQQeoidwy/4kBi/wIgYukpSLLzX1Ttq7VksnZLinsHPVIkcuu7X0FwgcyXW3Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSVUACRA9TVsSAnZWagAASJMP/3RMM1pMsqGZkNWuBrIf\npQ9TDBFze0jNcMOx6tdMH+znzORb3UscyOkmP1/TkJO0cYN+Y5kOMpDAGvjG\nnyWs6cpfQNROmf66tsQfRD9x0K7SbWHxQlV3NoF94+6yJUZU4GCn1kS7CqzK\nMxwmltyA1dM2UBKNndVgEHMwbtjRfk+j2qLsjLoH/qk2mz78X6oqB9yconJP\npFC5LQiB/3zvdQSCkWacFf6XO1tbNP6/nH6QqMusJCItEPszmR+j2LeXUuS0\nxR9uYQHissZbSZcAXbLhleaZl6Cck+gI7YTPJdZ43hszKEAecT3mjfhCvbNe\nvrqiVBAZ7Nir3yxRTg96MVgqPbmrveP7Qyxzkt7yoQNdLW9e+gnTSRi3YiYK\n9Cz1c4lUeYOlq0vrjfO13RF7llBH9iS15CxeETyMULVQQ5ZifPzcq7bDg9Bn\ndeeT8BJhtHaHg1hWwsBKU1HQToc2RrfaJPMEz2QuXx8zPUb3i1uQW/XC4nZa\n5DQo3vHa370G6FlvwTzS1i0ya1hV3prtaAx9qGI2EZzNzLyG+vyjhYc/bkvZ\nkA5qHYPvzPrzqA0UYxd8HqqfUaGUdgwBLlZwwSnXmQLfgAtSmfk2OooUG0y0\nVx/7I+j0YW+QNmFJfuxvuMyItrNd/1UbjaUjgli368noeH8knFCP1Q+YE7JZ\npuJB\r\n=7x7y\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"4763f125770ec8e3a6ea4d8f1f5f607371847e45","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_11.0.0-canary.9e52f5544.0_1615418623558_0.4860657473555794","host":"s3://npm-registry-packages"}},"11.0.0-canary.a678806f5.0":{"name":"@material/density","version":"11.0.0-canary.a678806f5.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@11.0.0-canary.a678806f5.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"40082c0199b7e2fb6d9501948c74e863936a5479","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-11.0.0-canary.a678806f5.0.tgz","fileCount":10,"integrity":"sha512-X31/v68E5V7QHcfZIkpVbODWY53ZB2UFRWdZYyxz9xSauv1ukFB5lRhCNCAYpQ8KRbAtC+jsi5bMJLPQVIOkxA==","signatures":[{"sig":"MEQCIDDMlTTQ3GVt8M0DejDRTgvPV1+THZkAOTpkRn05j4RnAiAawfz63Pp3HPPtdY0+pOyHqAIDAeBWd7+LBcXgaOfiBA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSXbzCRA9TVsSAnZWagAANEIQAKOOWYO/itb+mzqE5FYz\nnvKhPWe4MTmKzzLpveGoSENuJ2ozZhUrHZLOKf/2MrRRC7T1LotOw5u4lRGv\nYNsvKneZZtD3FcGNHNPs8emVoQrCOD6xTJT/j6KDtzwXHB5l5TU1usVqlzUs\no45zY8tcPBAzEMqEwGUc+0FCWpQaV8VlPddN806xwB54e8xgql6VA/9f9+Sy\n+orwl7fxXWNR1txitZIj5Hy/0MmWtvTmP1UqjDmuwmUJGdMJ3v07c7VcEsgz\npXS1uuV5jOrTULYoPKOKEwUynUIMnYNhU0QpbdCqrWfQzeqgww0Re8QI/KD5\n5aPlpEGWRQy+52mRangHwkqySpJL2O3G1F6xtIdPR1xKb72syO1NdkIhLVJm\nL7LCvWm9xQUHePKB0U8BL8o0g+HG7GX0KKGuGbxODmLqnNC/M6DPlhwPOykj\nlvBzDdop9XXRCYj/WD848gjgulcSvB5MxX7nQa/6iJZfVBRB0zSe5eXzLmKl\n6BnmWj5Ym/z4NhHKUYuRYlOGpBckmJUtPzGRi4iMXl7TdkoOeSQ8+GH5cVHX\nvJU7lJnrfqfVKkPSQrM71ffj17Upx6DXq3USHxL5AXTcC8Ix1/rRalIekFQe\nmonlLh6T8pbyxIpy8+Sbl0pOWYk6VO1ceZ4p8uAe5vCzUh6sQ1n1nOeadwIy\neXpU\r\n=J3MH\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"a724ed1e64d54989ee4c27c71935f90fd5614f3e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_11.0.0-canary.a678806f5.0_1615427314973_0.4141390933338793","host":"s3://npm-registry-packages"}},"11.0.0-canary.b2d22df5b.0":{"name":"@material/density","version":"11.0.0-canary.b2d22df5b.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@11.0.0-canary.b2d22df5b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eaa75bc71ce766675c100c759e2abbbf0342031b","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-11.0.0-canary.b2d22df5b.0.tgz","fileCount":10,"integrity":"sha512-iWRTig0pU9VWaMo3gGwEEqqtBIm4tbDqw7zcM+0cCKZO8VjcJaT5pcgfWXAoEnakwIa06SlJDJRo64FiOgvdlw==","signatures":[{"sig":"MEUCIQCqalMb3E7JFaevRBlAKDZ/LVdL2zxzkAfQVUyqPH88IgIgPsauWHgd92VTwIFKaaPc3y8jZ2wlg5Juu/qTU6rDnPM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSkzeCRA9TVsSAnZWagAAdf4P/3/1JuM+j5vgfc4kOnll\npnELGJpDCK7yCuYipQ7jHt/1xLwWl8+LLU9laK7PXgYUPtFiwu5nyxPFscVO\nGiBNXSNB3/DLINyaEpaqmQl+KOGds+JxkNPVPfXL9Cq9y53/KTD3eod2qsIm\n2a/+zfJSmZPrgi6AhSyWlcf6f1GPNiVZerx2gUCbeUKN8Mj+quiCaYYA088a\nMpxgyl7Aq/scpAI5Homf47z69QNevLRnxHT8PQIOcTaHswopyrn0zat3nR8Z\ntNnoYExvoGipWwP6gJzr2keoGzdpx8jcXY5PEAIxp20msTO7RnXmtow/WEul\nM5jLNF0+LDFgtBHKbYMpV/tx297NUDiwocyBKIo6W3JVgrg3Ufdt/HGU/y9o\nHqjMlp0kfa34IR5vYgPMxG/9zn5oYjd0aHC+qJ8NN0qgd7y7UMF1xKju1zes\n/xE5W87xMoudzXbghm3Mavx9Xb7fG79hA6UAoEpWJn02djIFIFj5KOpkjKKb\nWIzKIVfDZDmoMJA1TY+/yP4/sZtugQDrfi/PESwRC0tBf+Vods9gt7V4P3LH\nKPc2F8pTTsNsNxKpUyOj3CbV4F3WlXHUjetnPDyYhFbcwAEQaIgNwFYD3Idp\noiGVlre0ZVQ61yVZX+nMiJACv+V+nHChvtYUVC2rcZvLPV/HC5ipPpS7GoQW\n8dXc\r\n=YJip\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"5c38fa8d841f5b293e55e4a22202bc6ea8220874","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_11.0.0-canary.b2d22df5b.0_1615482076467_0.18527551821823307","host":"s3://npm-registry-packages"}},"11.0.0-canary.81911b707.0":{"name":"@material/density","version":"11.0.0-canary.81911b707.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@11.0.0-canary.81911b707.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e2d8acb62d5dfa6cc8cd3d7eee61e97223bfcafc","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-11.0.0-canary.81911b707.0.tgz","fileCount":10,"integrity":"sha512-p+HmG+WCXsx8+V0Sw4Nyy+PrVnXhWTehHMBdtYLCpszhVOY2p+6GDFZkZ4kzwanUbUi+oHcWVHTRPwE4uSPe+g==","signatures":[{"sig":"MEUCIBLd2TWrp2LIVFqDy1IY4iII4F7AJBCmt4Yzw6/0Xb9XAiEAmwiaGwLTGxVWO1tcpsnyVVMbKQA7pGM5vO8Q9N+nnnk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSl+/CRA9TVsSAnZWagAAi2UQAImcbQ6VwnSaesSFW7fs\n2aMoPbypIYoXX757KJMie7lov7sRQMyIQaDplmRwUtFw31DRcj88NdBCVp/q\nAlRxllmhKYbaUfNsIKq9A6Awi7lK9vvUN9LthgUQ9IfuVVktCrJRo4ReqdbE\nC1Gywvwdw5vROLiylv/9/TXuc49p1q/r90al8wLWw7MPMp5fiZLp/3+fur5L\nyj27BHWdfsFJskrVM7jcvRtMYG0XOZ4axKrjz9+8ftW1ppBi6pt3B68vmKv9\n+Gen1HKZJqWjfMaED64CRZF6xJbygVk9tMdr4P7Ulweoh/SPf7kZUP8sUpo8\nJAjCp3z0asPIR9NDce1hilTm8WMkhy07xK5+b1GyJxwZkTXhPIqQoV6J8wnJ\nvIDtwUOCzeSiR/7Pqjo7BhonP1+XTQjgfsS70aOqwLk9TtH6teTYzKcLrtif\nD/nfGjHlYrmfATOPUsTKq8Limo6rXd/mNTzisyZxXmzcplF+qN+WSG+c/hfh\nw/kR1U0Fi4FTWWau1L9F/gGnjYUPfaJhgdyoJCSf+FG1ClOxY+g1pEPtSrlC\n4vUnYw5okBccIxVINm2Cmoyi1n7afnOfTdJSfkMuTOx8eWhSo1+of8Q1EZ4F\n/blPHgM49B0/YPKO1MZkTOEN8r8UyJcnmoS4XXQ5sK1ok+ocayyah2Lf9Guv\nDwEW\r\n=075h\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"3c1bd5b1d6d6453c4f616633e1d16b1fe0812814","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_11.0.0-canary.81911b707.0_1615486910461_0.40541637733057256","host":"s3://npm-registry-packages"}},"11.0.0-canary.9eeb35c38.0":{"name":"@material/density","version":"11.0.0-canary.9eeb35c38.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@11.0.0-canary.9eeb35c38.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e7d46f89468b8fb9355ff569d8446d654848f389","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-11.0.0-canary.9eeb35c38.0.tgz","fileCount":10,"integrity":"sha512-dDUxIuLjsbivsKqWHRri7OrnAhXUESDYY5vjAD7g2J2xY//rGeVOmYIfL7P0WovPbun7vPnPGSteKrpmIH061A==","signatures":[{"sig":"MEYCIQD1zEr2TNLb17rG14QNs4qwdYhbO0jIkYNOIP+4qUHBSgIhAOWpvxOkEXBnJULuDKA2rkDuyGXpUmsQNF7OD7jvolKG","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSnD8CRA9TVsSAnZWagAA02EQAIWpf41cLMH89eNILuhl\nwjKiqWegjLKT0Y7JCow5DLrOA8AKR0iEBGjGRzuGs3d9qS5OI0UVBfddPsyt\nZoG0DG6o2/Yc5a9/K6mTHIzNBYWtp1UoMCex+aiNhGsPgx9HeeVfXvUYpsoQ\n4kCsi5oobO0k3+J3ihtbwGlsbN+LGU8BPD6POZl0chYs8bAYSucNWmmkk4eU\nLpfuXWace3tY3ZQsFibst5L6i8dhdSRzWqiQSC/UEhYbpZxXXYm17ic81CBJ\nEhGLhk4XndQdda5K6S7yvaD1Bxs6oyzCjHJ337m4aUXfquLuSMo0lhdW3Hdd\nUj+Wp8Jn9vVLrzZg4/pwSLe1RtnYkkj7F2iG69a8gA4hFHsZ/DbpK0AF8imy\nZvULLcdgAAhNe2of6eZzsmecvqH5r/Vfhoa31JjDOXamoKY/5KITSnNYUqRI\nmEAtCRGW+oNUjOFWMX0TM6kXc4/CBQ3q94LmtjTm2YceLOZXqnCpAJ1I0mva\netPBru0PSBDSCPlbOBcw2sLfontNjqZ1wO92j7E5d5816a5epm/N4bdwOhYF\nk4SWG1bxFlcaI5CuWmR8TedP44K60wHZkq4i4p3WozqT8jZ1s0gBRiCCGdM6\nFxxkt2uGTBKUBB6+hdSNFnmFYRtLVgHRdwdWgpOJagq1EsrQ0zqLiL3IUsO6\nIt9j\r\n=CZmn\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"147a2a556e5155bedce0b0f267f64c26cf87d0bd","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_11.0.0-canary.9eeb35c38.0_1615491323897_0.1367092789435418","host":"s3://npm-registry-packages"}},"11.0.0-canary.12be3e95a.0":{"name":"@material/density","version":"11.0.0-canary.12be3e95a.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@11.0.0-canary.12be3e95a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cae5956a8c0bb83b82a9c7bf26409b3ac8b960f3","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-11.0.0-canary.12be3e95a.0.tgz","fileCount":10,"integrity":"sha512-nwKqLOrjeg+YbJ1eaXntOneh+laFVKlUKCiyEZ9OGegzLvRsPWp+rXaNCq+GBqkvrhrE0KEz95pcbcus7eLp3A==","signatures":[{"sig":"MEUCIAP70kwl/ue/dFPwzAAhsLDpd4B5ZJ8lCnLUIpkybuVfAiEA1JEBipgFKKEbBjv16FHMFjUAp/yz/mllTlnephTQnF0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSnbFCRA9TVsSAnZWagAAE4AP/3cbFvN1pgOixzVE9g6j\nYD1uYPysuxc+v00nMPKZDWqU7rEVkL+cleebeBjfmllqHxKk4xG8512t7Eu3\n1SUzNs8E/H5YEYXpOqUpbG5HML7aEmXVrDF1merP7kVV3J0CrXx2Tb3/Xun5\nKnGcfEIPR1SsbLjfltD+JMMonHOQXhwBA7rTDa+g4CCcwRojRSRIoARYCgio\nXlYYRaAc904rCFJ1ltmmDMc+kbib/CH1Oh+HDVNuite7cvLNv3wnD+49oH0B\nYZoF6ac5TOnzr8hkqEWufezSW6CCKvWBYDzn/M4n/Ui1A6owWHbZCDL6FwvW\n4rseRfLjTWpX8oJalL/8PsO+uY6bj0AAYALrMSLZWO1eJYOzYur2p97wCpyf\nTXlSNz/L8JuTLQqYUZHoVfnYfrKV6+hjorOJ+9F1Ma2jq0lYX510KMMcMqU8\n9d38+9h4rT9vKlUZ0erljNdqdFF7wpK0phgDHKxVAX2/ces3aHG4m2ij8Xqu\nQqqtUQ8eALr+EOkkNYF5w9KrwjbkIpwTm7ssj5JcEXU39k7CZXkinJG2OtKC\nRAx+78Xe8gVRVbUV+ODua/KcglOQEiPzwCUQolYKPjSpOYScCiS4FDy5NM5o\ns/0/Z00Xtrq9cek+0qZtLAieI31BNs/SNT9Vq1xrU46OBVsImNJboRLzbgRG\nZ3X8\r\n=GYIK\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"883077446617b632d698e09818dc9d5903a7586e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_11.0.0-canary.12be3e95a.0_1615492805025_0.6907340287282626","host":"s3://npm-registry-packages"}},"11.0.0-canary.e683bdf4a.0":{"name":"@material/density","version":"11.0.0-canary.e683bdf4a.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@11.0.0-canary.e683bdf4a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b6db6e2abe27a6e1dc63e04d769325c991f73bc8","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-11.0.0-canary.e683bdf4a.0.tgz","fileCount":10,"integrity":"sha512-tvkEhtiJQt7FJXLMKyqlFa0v1aIOKZ+u/aAUsrZY/l0Hdlh+0f7QfjOXa3C3/3tlY4l2gMqxb8nOlpjGaB9svA==","signatures":[{"sig":"MEUCIQCF6s2iiqXTUgJjFIO39pyQEFKDYv4sQlOoai0r2+KKMgIgDLMYI0mdepurVr6ETXwTD2k3a91TLW8TvI1NI20U7Bw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSnh3CRA9TVsSAnZWagAAE3sP/3mVNlch7eDFM3sptk84\nC9tMPz4pPz9ja1dyLpLZuavfWUNGJiNmcCOnI4rwTBtNsda38/dtUSfYdQD/\nkDZJHKY8jx78ENtcI5Ue2R2DRAE0Q2AZ0+6ukHLHDcNx4hXJ6BJNEXCxdJ8L\nuMGG8jk03SSsoA10TZzYUl5FXEBIUbqvU7FIib/rmeVv9w90Shn42yRppjYx\nh2oLD8Xoupk+gQfM3MeblM6GBYJLC2MgssJ/Nan1lV4WvgE0/2nTOdeRm36k\nvMH08m405Mn0/ep/7+/n84DOsKj3yqUbBskrY1fVvjgag6LLjoaXku6cChF/\nbfTXEWX9p4FlOvFtFAnZeyxn/fUv29afFzjg6BFjYSXqST+GKI6jzZgQRDac\nUUcs3amgwB5LakHxXnn7rUlMrQoFzc8mjNDb6MR+Yb4E3cJCQZwXc0WqzSPX\n2uIGcVelY7IWdFPEW/qNhmLFiMlQOuuSlBvPur14G0uFv8l4NPcSvaTONrnc\nqZHObAyUsscDZ4Gg8th2N4xNzqwmWFZ/pzL/loksr/T3qo8peBH4Y6m6ARKP\n9wbIwkAXqBhUFVYlMO2zKLk8ATjagZTFIKvwal16vNIxRX2l7a1kXRa7dH+b\ne/JuohNCoajQQHibLuna2YUfZSb8+1l20goE3E8nvREwICHs57VbGOCQq5ht\neowA\r\n=HZnL\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"0323fd7f39f825f8717fba8542628d111777ae35","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_11.0.0-canary.e683bdf4a.0_1615493238974_0.6097606903797526","host":"s3://npm-registry-packages"}},"11.0.0-canary.a07b6d486.0":{"name":"@material/density","version":"11.0.0-canary.a07b6d486.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@11.0.0-canary.a07b6d486.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"70388e56ff19b44f5aa85aa084e695addb0c2515","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-11.0.0-canary.a07b6d486.0.tgz","fileCount":10,"integrity":"sha512-gR3mwPFwTM3OEAzXQ4nSKsnXhbDmrLtq9qoLI7+E7R8SfWM/qslSVqLyr55tY6PbF+KeBpBf1kOfzNU3n5MvVA==","signatures":[{"sig":"MEQCIBpzIBdNMK2xJe/QE76W7SDl6v9kgV0UxCnhib8QcCKaAiBQqhjraIzEieyp/uDLYTC+TGUQV7DYPOXD3oz7dCv7Vw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSn4lCRA9TVsSAnZWagAA8SQP/iRldFsIqaQbZfH6xq3Q\nA18yCuxarMuOUKxqvLneKQbMKw0GEPcwVd+U1xtY+BMh91o3VsnTLuwIuaKm\njl/X9NGUH4rDrv+U37mK6X2+Hkjs0QlHCPIwi5clUKxbe8OEd/Da1Do9j+EI\nk72Z9KcCUI6SDDfXZQ7vnYui2SKOXoskp6ZRhHl/+jv5VVghktTmN/F0CZzD\nXGyhvm+g/c27YF1C2k/cK2nMbq2RlNbjVrNWpugmj0mXVkXgNitE2ZeeR/TR\nAhqjWSlPgT9XTqCnXujkjRxEBx5CnVEa06e3GzyU5QQMhiSkXKv9eLArhvek\nH1mv5TjWYQZ65vTQx7JU5LpgAdWwzbMOL/aQNdXXq2SZbwlNLzVrA6P3SHQO\nf1YDlETdSWQfyjRCi2IMPsTnwK6iusZjzbHK3Fv3yHvJUrMBGLsgCTO7ZRS4\ndloZrk7N+NmYU9TlQosBoAmmFjXUsYupz/jjAs2apeV2rIuf3uxTauAhr2OP\nJSBaylfBzr1Qssdwrs58MCg4i+kyHm03qJ8FXLjkgKUUXn9hZ0E+sKMoyNQU\nAVmyTgX5EGsRMoMU3SGn62waN6ynbhYqs0LaVJVZdbNt1w36BauSoRURkocB\nLS2CwlI0bbEG/MLllLiR3rtvBnMgwvVeR7gl0WXRSfcrEzelO0z8P3EuKwM/\nqfpz\r\n=1CdY\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"425bbecac77849f8786f0a32de18a168e1874c9b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_11.0.0-canary.a07b6d486.0_1615494692820_0.4538398742332219","host":"s3://npm-registry-packages"}},"11.0.0-canary.1e0653477.0":{"name":"@material/density","version":"11.0.0-canary.1e0653477.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@11.0.0-canary.1e0653477.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1188dc642a7df024e0409f3f9478c46ca31bac0d","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-11.0.0-canary.1e0653477.0.tgz","fileCount":10,"integrity":"sha512-FvEPbB7nkJWadykJTpzDxp3k9K1p9H6+joWWyRvYoroN0upruSYUrFUTI/ZXEMdJ++5iPy3KsSfC3RJTI1MBIA==","signatures":[{"sig":"MEUCIHxveesHc9yxGOfg8YLwhAyvecrBgM0C8rX7zvtqOKNXAiEA9zrz/PRZQndiRORgHAJVckzWuADAGB58A3q+C+Fo0R8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSn/nCRA9TVsSAnZWagAAbmUP/3J8etXenIHrKe5Qy7Qv\ngP1zNfvr10uWR/thh36zSrQp215z7yJGm9jT/guXqHs9Ii1ACLZ36W2e7KXh\nHY/QkdtH1mPh/g27qJFARzqB7H2O8lxVMKmjenh/T9aQduZjPsMAMRRkDECA\njie1B28aS82bdQAfFFAGs6FN39x2/U32okOmgfv/LaTxVmB6tQIMSTy/GWL+\nMG0T/126CzW3yft1frCrGI0U4B+dI9YUidQZMoPWSim/aGlXUbk980dcnE1k\ntZeacBHhpWTtek/nLmLkSgmxi+C33X6hxMZ8nzzYCjut+2tJJP3PYzAm/72q\n/J88sqK7T/iflx8PMoVh8CPYmHCQ9Qd37uSr5JCWhNXPWSI80zs0paIoCzws\nch+bcukhFHpTaGscNpG4xfdpweT/+1OPzbWLqfZKJAnMEvRi7Et+S8zLIiY7\nFujpdiKNGlWlDk6C5mOFESZMwRpseL1gfOgpTfk42qL0Y9U7EWIb69erNVKn\np4sbYjC/vVbGABC9ENAosITXWIu54G9sZVyhajj0OglrSS4RDSrHond8J8cw\nEpEYkXqtXxEC6In1NI8nO7/j0bP+BDedKWRt4oMG0rPldw0mvmzIEcY5A9Pl\n+/ew2ItAHNsXRw3GjXr6MS1k4dANMFSZcmsbtDUGgq76O4+HpEeL9TcZTumG\nDpGk\r\n=jp4H\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"6130e0fb82d7c39da4ae1e02df8f0851da419fba","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_11.0.0-canary.1e0653477.0_1615495143272_0.07979518781438277","host":"s3://npm-registry-packages"}},"11.0.0-canary.148e8cfcc.0":{"name":"@material/density","version":"11.0.0-canary.148e8cfcc.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@11.0.0-canary.148e8cfcc.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6b6916fa023560928a2e45a3a566a3d4e422d98e","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-11.0.0-canary.148e8cfcc.0.tgz","fileCount":10,"integrity":"sha512-uN72N3nSEgQi4j1p0H18NDNzheQwjjIFOhZqcfzIuoZS9MczZCz+PwKlg6mCsxW4beAv1B9VyTLoeBVMZqttZA==","signatures":[{"sig":"MEUCIAtl8rJR/g9ZkGixv8I8VH+CsBzePpYCb7ngBl/MN27oAiEAkzjHa5R47pNptXxHzK60P42XHzcPNhnjlYvjYJA/XYE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSpztCRA9TVsSAnZWagAAOjQP/Apf22+vzaTf5DngWjV3\nBJIlWq4gKWrMqFkt6/NlRkrJgWriFgcfhr1Y/roUaZFmy9I886wJ5BHZah2O\nvF2zbQ7oaV2AZ710NxkHZ8pxfS4b7JxlkY6i8BPZ3bJI4VO9KiaF74yftaat\nXxs1cEE0xdAdJiduGOOTJPjiK2BSVj9uK+EwW8mIXBrWvQ1ze9E6nn++7JgH\nBfbPPzqohGVacPGLRQ4PQtyh30ixyzg34sAq5Y8sq8C85xpIuiJG1QoR8MFy\nWnb//yswfQmCTUOZ3EUJV8l45dajYWKk/iTQWlEBuOAf2Bw7XuQ14oS3uBKA\nrX+Jv2tkHQgEUgCi9m5Ar9TgoRmwXMdINLtCUiGaqQwokTQMQBL8qU32+rm6\nc9LwzZOpZknC8A2Yc9Cw3N1ZvgecQZ3SPaPtcgFeZEcs3EJLBql9gRN/G/dk\nOfRwywM2U4H37udgk7qO9vrxBI1rYKcTX9psZ1Na5bnL5zYacX9rNO22SW7v\n+sr2PKuPFgRxocp0xqgS36EdipotkyYxekl+W5b6pNR68v2xCxyj+Dtrw80i\nxAav8S3ifoYcj7mJ7wYVRDHY44HbYC+PTr6B0IdzlSVCaG0HyhT8RE/tnZEe\n562jOaP4esbeN1gHVZen2HL7nBKWQ9k4owVW57ORn46sDzAwSuOdr/fGjyr2\n0XG+\r\n=n+Fq\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"2e686ac2d72b7a249bc4deb8b09742bba99ce581","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_11.0.0-canary.148e8cfcc.0_1615502572938_0.9538901673562743","host":"s3://npm-registry-packages"}},"11.0.0-canary.73a227194.0":{"name":"@material/density","version":"11.0.0-canary.73a227194.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@11.0.0-canary.73a227194.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a120bbad6d0776a7420bfd25908f40d4e114fe79","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-11.0.0-canary.73a227194.0.tgz","fileCount":10,"integrity":"sha512-f/2Bg2QHUG0sqyWRstEcKOlradoykKi0EehrF7e3+kzqcWMa4Y+P9znqFCqmN2JSd+ljHjl6k41hOyEma1yp1A==","signatures":[{"sig":"MEYCIQCINnunSm3YGJEYKKu6zoeFuNUetMoZHehqHog6fZGRIQIhAOmktukF+p9kOfYMo8cbWGvVDN733fPrmJDY7WhojGxc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSrRACRA9TVsSAnZWagAAhIUQAI6D5Mh5sYzvGNmBya/L\n4yhsGYaH8ZEFDzYOZaWj0iow1lHSvAK6Sqd3UUuRm5V8JQR4gWr/YaQ46EiH\n5oBsOoEAq7SyJ1iWgV59K8CCfHgmljm2SHKkLfN0IRjdf8YbsmqXmwyXIPJe\nHYgxmer0eYmEJ594Erz3V/fOEwGn5kRwNGzcM8xH1cfg2WBRG6YsBRL5Yt+T\neRAOzkzKZRx3VK7Zgj2nMmgvW5sQrfypP0841gcogLIfTdcIIEGd31uC40Zl\nrPASmzJKE1nZQ0gG/DYXN97dVsA1CYtVlmx/MMwcx3dmZsZF5ihjJ93o4zxG\nDDK+KGvvfCLjDN/w6R13eZpqa4cvatBWy6mOOJYomu8gsc6JCrxWV/ryhDyS\nZT6fOH38KYHKf8+sCDdHfkMvmfE+LER/ZqLNGneUvAcH8Ll+ZDLuZOz50QcN\niGCqTRVHX/Or8TLeMllBTJI85JPHvrgIWCfebKPpCccoqEqsP/Y2NNgp11i5\nThkWEG53KrqAy8pjHwoOLNgWkAy4cDuB9YdVZGZlQ1vRKSKO9aFo4h5pgShD\nOtXXJ/5dnsMmfDj7blfn1MiKR5/TWG7wDE4GGPha6PdtN5L3ZUMc9s5QGRZ2\nV6x7j2i7VmO0UjV5x9eht60g7GjBExlWABcHI2yNYt9QrSKL5fDRy7KInLog\nxp1P\r\n=2rAv\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"3bb5344393057d23abf5414ff61402a5091ac74b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_11.0.0-canary.73a227194.0_1615508543588_0.619705165283136","host":"s3://npm-registry-packages"}},"11.0.0-canary.f8579b7ea.0":{"name":"@material/density","version":"11.0.0-canary.f8579b7ea.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@11.0.0-canary.f8579b7ea.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7559e010a1437fc1abb639cac08245dab960806d","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-11.0.0-canary.f8579b7ea.0.tgz","fileCount":10,"integrity":"sha512-22v/I0WhdVfTYEAYwk8gtTw6AWCQSqoJN7uD9264wUgr30XmBxDuhBZh22yNgVwQvtwwJSg0yR+Iep8He+8lSg==","signatures":[{"sig":"MEUCIGOADILg1MTEWob3qL2Ac9Vu4u8QeFpEgIihnld56TvMAiEAtoLCcc3xJ2vyqA8rw/K5OuwaWO4ULVVXHRvlkuhFhOY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgTBzlCRA9TVsSAnZWagAAqssQAIhPbEW0KV24vOoOlO4n\nLncbg5h9FWHlrFr18zghqU2r95wpqEOuaufgIhB3oZ3WSCmKchigDl8Kjq2K\n737Npr3Uoy/g1gqQ57ia34eZigAfUJdfvB7jwQ3sRKXfFlVW2ZBG99fJX4rl\nzDBEipvVyoNBb43xxE9GdFOlBbTV+aklIpqgFUtWTNjhY6W3EV9esI+PpAEf\nW8l1+6CPFYQGOLzqy1g3IV6eNZOTjVbaG4IqQXXSVnlb3WnbxYBpXawtEFvB\nkDPRkv0vTeNSVyZKzK1xHf5uZGw/tI4KZy10gpRKPvrP5eTMbeUhe+I8C3ec\nrW64y8A996oAD1wwnFL8Q8W3CRoyQSuptoc56XNXGdWb8fFirXo8J6U5IPy+\n+9jawyp8Y5iEiVrC6htMfMVISDHMxMcUpMOIt5zoDywezKEi0xg0eDwWVL24\nI7Xy9BCCximyvHn6ufFn+CZcqPz66Jz1g2ImROc+QfBicU3QmaYUX2vsI55U\nJ+q3QGev1GJrXNWXnHD8RvU65jnW8sANrviN4sfUM5TNqbeLd8fQCDi/5mCv\nc8Rg8w7CtpnebrjN8xFD3g/HnjB8lbKbwWymOjjnN46FR5k9dCzKM0A3l5Mv\n74jPZ9YnwP9mbyWq4UHKAMB1AFeOi1TzqT9vrJwGvb1nlyJ+dIwIA1D6ELil\ntSEa\r\n=Sjrm\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"8b1a0816c0d3a68a851c5e6a199c4a9ff75cce07","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_11.0.0-canary.f8579b7ea.0_1615600868065_0.7220150344012319","host":"s3://npm-registry-packages"}},"11.0.0-canary.d2a39d300.0":{"name":"@material/density","version":"11.0.0-canary.d2a39d300.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@11.0.0-canary.d2a39d300.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1b9b63532b9d38787500cc1b22c416206a5b6f9e","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-11.0.0-canary.d2a39d300.0.tgz","fileCount":10,"integrity":"sha512-gjGY+LiOx1FmRJbHoFETe/Zy9VjeCdiNna/f/6SE8AwiPpEbM7FdxyyO2vgu9x+KD9VWHsHzbcXJv3YlIHo2Ug==","signatures":[{"sig":"MEUCIQDapdQKJ//qSlBQ4hf24jv51uEzbRDfCCD0l4/S2GJfvAIgW3Ft888YAsu1St2SUTg9ObQAJXdOdn1zrE88XzszNbM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgT/zZCRA9TVsSAnZWagAAG54QAI1iYbI3K3XOdQfJ1PGD\nadH/P/zpMQcVuZHfSGM/9JrsZj/BsvTN27HYYVUN3X1B+ryY7s50+cz1JUY7\ncSrNsnOYtD9fDJagiS1/z84DR6zWWKOi//sN3TyGWNCmNioLqevx1PePJrjX\ntJqGsGJ7GLfmjAxRpGwgOFiUWYRHyP8TzwwZHimbs0+wqS+NDlXxTiWVmdEC\n/6cnS/aN+nkd5eMpJPDJyGy4n2tuQSZ/ZzV8xrAE+1RbCGMTKCFi+rpWycwi\nqwzsMoB6yFy98l2rnOw9waapHt7xZNLZbMRcCU9ziVyPskWyOdAyrRykmBz8\neJRHXVb1WlOtC6JwS6InEI+9AjlbkZFu4FAUlbmxqOmH36xtfx97+hyctY/b\nSMjobeOsOB4Te2E7L9eoW3Xeo+VWcR4pyechvZh762+zunJ4KBBXulqEvzwo\nG6qpT+p6Xu7/+z3la8UJ9mgwfGa0oKxqC7VQZQa/7QU0VuU9qAUNWs1Fi613\nYSTCwtUZTjtRK4v9Q75cyoj38BEmgnMmONXer2hTZXIKI0ScKMvTrZeBHlCD\nXpxTXHFoDO/5q3Vrq0OPioKmDByNPf9VI9wXOTxXAQD9hx9o0S6n4nk+Uxa8\nJw/G7ttoeJh60iRa/B1K+3UPkjWnNmHm5pvKjLJV0oXqFyAU63DjFofvOZV1\njx3j\r\n=6Nm3\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"4e928ba6e35dc70b34314c7509f647a6fbc4be00","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_11.0.0-canary.d2a39d300.0_1615854809259_0.09910348596591101","host":"s3://npm-registry-packages"}},"11.0.0-canary.7cf67823e.0":{"name":"@material/density","version":"11.0.0-canary.7cf67823e.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@11.0.0-canary.7cf67823e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1c62b02f154da19bf01065f6b611b2b35ad80be2","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-11.0.0-canary.7cf67823e.0.tgz","fileCount":10,"integrity":"sha512-zMhz66wzLY4ELqjnEYCaYmVC7unuGt0xoVO6J7Z6VFqAl0QZ5jDt/Oo3pV8ZjT+0aDKXyoEZPIPkSjTweNepGw==","signatures":[{"sig":"MEUCIFXs21WmQKRLacKBWtFWqz/a7zCIRma+3NGT7pVnF1R/AiEAiiWrsPwiRNvP0cDK0lRbu1B4AqTCYy4lQJCO2fM8EWE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUPaCCRA9TVsSAnZWagAAesgP/A03mRDG59XdJk9R7sHx\nB33Jhs0dolJy0nqtwDLe8M1gnB9kl0UEEnblC9JxDtBlp0UZ2EmUvYZVsq3Y\nJDV8uVBXDUTat1TE/t8+YASbB1ADvaXgWwneBZuuDQH3OlBYpZbrXiXsytbI\npFzu/p1YLsITkvEXf4Y47zv2/vZB7mP6SDmzQcK+jInJeyUs9n6f+K9hWegC\nbuuoonu8sy033UJ/inqWKFsdkbWPm8Q2mHaU6Z78cF78TQM5nkQxFQ9laAlY\nsEcE/Or/gB4brPfVmyFGL/+U8J3yb6KHxd5I6OVQCFbg1Hh9dOxVPf8GGwjF\n/t5J4qzi1fCQbPWFTkwEVg1/wbKWObnb7CVEBKeZkAxa/Lvrte1vkVfCRSK0\n3lwnWIRtR/cchFf4t21V2jCQO3bXvg11iA0K8JiHil02f7lM1wy6YOBpYikW\nTfxKSnEYLKbG3BwO4ty2QBe+8b0F5i1XZEKrmbGprclFfphlMzJpom7mVI9X\nR/c0oY6tJW+X+Nxdrg7Tlu8MbC9Rpxk86imG4LgPjwBLKqDwoJwADJg0J51Y\nhadENOVPymvTHZjUUnLrCWf23cMd2bHl92SUI+Cw2U0v+LW+Qal0WoFoKOaN\ngcVsncZaB1E117Rd5ASEW1sGEwSV1lWuUe9N88klNGingLtlqR0T0IkJXoF/\np7fg\r\n=cqAU\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"afabf42a48ec8775fa133ab10e023c1b5d2ab802","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_11.0.0-canary.7cf67823e.0_1615918721604_0.1585720369512389","host":"s3://npm-registry-packages"}},"11.0.0-canary.67d780c79.0":{"name":"@material/density","version":"11.0.0-canary.67d780c79.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@11.0.0-canary.67d780c79.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e94f2f4f082de89be5f43354f5550e85d16df92b","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-11.0.0-canary.67d780c79.0.tgz","fileCount":10,"integrity":"sha512-cHe9ZHEqI3fbYj+7E/nb7Ee9CaJxYYLV/fU3lG+MtP2Ute7xGPmnQb/TaVPPTkczlswohblQP0yY+iIuZf67hg==","signatures":[{"sig":"MEQCIG/+LuVj/sPuWthL0wnb+nzCe2KzLsrE890Hi79AFFs4AiAIj0gx1lBTDsOqpAriu1l+GcfzivaAXoXfHYeqh2dg6g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUQsQCRA9TVsSAnZWagAARckP/2KxlHCNU+dv7JXe1uyL\nS6ig5m2bMRQvWWJU0b0Ovo5qkNrYnmy9b89q5Uz/RXq7hT4h/mpo7dUcAn6L\nrs+wNZKDZ1Ge3tF8+3tMDQ6SAkfOZy9cVBeOIIuqTIdQKRkYEikAenjITJRh\nQRU2HS+FlB0t8Q8ouuk6ex7iDZlg37Uaw2hdcHlZcKsiPK+3oW9iUNrYljCh\n+yaYaMhfTr6ydPjlOOXhFdJhMKCQsa/+yoKxZCWDlKrsNkvSthw+zwtPZblD\nq4B9oH1+R2284w59hxy/bc5XglZavJSBVnDN8dVLhAeS7xUfNlCjBd1fJEEE\n6Szb9Dv/rL0E/mvVYalFOmaD8hakPzWekEg4ovBXqYI+4JJkfpVDAP/det5M\n4bmUV//7h7piRuDF16h7cODaNdPrgQpWBJOMDS0dJciR6fXrzQJJWprV9tQi\ne9V4yc/c6j/nSQ5v7xEWffUezy4ePeCqHHeai3DWG4uXEmqRcRo0kcLdRII/\nttlDUTebOJkr7OyMzanMoG3bG1G7zREhDK9vF1S1/v7cqypp4YZGYHiKKTsG\nPOLprb9QPakLw1f/V8U2EGjk4wBUPXT5haKYHxdC9Fw9FDAXxAWtbjHOMJzn\nbJMiQ2TBCfaQ38U5s6kTx49KmVuu+v4sScSPvZ/zguCRHAmU6iOGTEW1XYu1\nwhyU\r\n=loCh\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"05a76ad8cd6b15550e685799fb6b9b5643d7e0e0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_11.0.0-canary.67d780c79.0_1615923983658_0.8335852220607156","host":"s3://npm-registry-packages"}},"11.0.0-canary.0f358ddae.0":{"name":"@material/density","version":"11.0.0-canary.0f358ddae.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@11.0.0-canary.0f358ddae.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8184c1881aa0bd2b267a76be6688042931af0f15","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-11.0.0-canary.0f358ddae.0.tgz","fileCount":10,"integrity":"sha512-TK7HsJ72A+dargw8lYFtmh1FbCssnsEu302qss/VSr9rdePL3jwGxXvC8v4McDWYq5zMeDwQAPpNyz4AMNOAUw==","signatures":[{"sig":"MEYCIQDTf8FGf0YZEenYla8es3ODDoFZ82YlVGY9Ekwf6KF5/AIhAKyuIGtXUfCWxdManJ6JeQ3LDT5+OAOdiKh00c63BF+C","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUSzoCRA9TVsSAnZWagAAxgoQAKTHIwhPgQ1NViDGXukw\nqVsbf0oro79OSJ+fiJZGK3bhxYgQOCp+IgviqLzkL4OCJ99tzGmj6Q+mG/WP\nNo7HQKVB8Zb+WHD+jUXT8+iiiGfw+3p+IrF0sysD1YOaCTaUJIginW9GFpnK\n6T0pwr3DbxPbubB+dTB7i8Tj9FMepHuvNQ1SeibjEQ8/oTuaMeYOlyletMr1\nNxsR2BOp1D7ERu8gE7zrLRnACXxg5CR4BDqgF+gLisvMSkTO1RV4rGyUSLh1\nFE0/zMgFoEizbiRKxrcmhsZHiHvbB6kRxM6kuKzr0EcECXCtgce2TqvANW36\nBqp5xta+0xStWj4rYsoR+nAPljw0ZPR2f7QGYGgDLet0S9eTAZ5uGcjWhy3O\n91zH4vEKoKqhuW8sIxaMo8ME6o+9QxMHCpef32moPVoJCX9RMhxhdZqtjbOA\nqx1/OK5Ksd0jyQyuJyKH6+YPNcyedNzy9fkGCjbygSM1jFEQR1pximT+NowX\nFVBf8P7b3JEyyegHZA26DTos7kvfXuuvw7jRNPA7lRB+tukB10/e0ngsAzjn\nwUzPy/9LRCo+gGbsCmK3VyYOROqB0JuKNvUlHVu68r1dZf3VoQJ+XoiGcVj4\n8UzgmfvIu7CKpwcc8DuJ103D4d0EpBVfsQq7tmVyMa1s4/8HWASQWGVQ0l4B\naZ8X\r\n=pa0q\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"6acdc7677f01b6502d0b491a9816d6600ea9cbd7","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_11.0.0-canary.0f358ddae.0_1615932648114_0.28789868937993757","host":"s3://npm-registry-packages"}},"11.0.0-canary.67eb0df80.0":{"name":"@material/density","version":"11.0.0-canary.67eb0df80.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@11.0.0-canary.67eb0df80.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c503adbef74614251fc48a11ba7031982dfae24c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-11.0.0-canary.67eb0df80.0.tgz","fileCount":10,"integrity":"sha512-XFpFB6JxP/CLy/d/S4v2/AncROEAmB+krw9mQSv2okCuLbiRJ2CDyK8Jgo6MSmqrW++3OeoBG5RUHzMUkzXc8w==","signatures":[{"sig":"MEYCIQCB0cGuiyu2GgIVg3rooKqOESFoKrWIeVnJqqqZ1yo7nQIhAKbzicbKTlvKnPlVf2LBYJbkIVytbGQFqM10NH5zTjPb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUTNQCRA9TVsSAnZWagAAk6wP/0yDS/8Oo52IDYcdKHUw\n9Mgm+JpSEJYq5pbjOiWvN6ZCPAOJJYmIVhFsMqE/vyGVMFQcyArnhqffL1O6\nTQ/uvdke6eZUZz0dUJRLjx05oPBuDDJ1Z3LR41X1+eLMUJXCNRgKfab++nIL\nga1VYDNFijtQa3LXGMPnvM2YGEFt7fIgxYrU8/JEif0BgbGnQyyWzVcTlbc4\nfqzDiO3X7d/6iN25yRNwj2OZ4rYk9BKzYIDo88ATeGqn5VGZgMdWU2MowsMb\n3Nti5BfkDjholna3ZJyzidlESN0Rye9toBYUo5D8mDFFHUiUo+MmiCnJp2vP\nb4OOVpPbckE7nYJpZZWVww9Tm0B7QJWBrKmJiIl26pmHfRDiJf0qX4Q75ZT/\nVkiwv9Mj4IoSKZkYTQbGnjOriob+m+pV24zU43At8lJbyscUhH9mqgEcod2+\nVHeCjoj4ut4wiLoIhH9r+I/umdnUiGY5txXRo+v0qgScCPWJUY1ab1AYopK2\n2lsV/OASV3F/qPYuqywlokheP6qtkGHmV5Ex03jB41Wm2cEdBYms4DDtqJ8M\n4Z9rejIAFFJVvvo5wjmvszrpoTgoWbbrfBfJFRYsHVL3zcuQlq3qimm/j01z\nbSR6rG+9KlQCGz3Z8CgUmiwoswjWDZZYhV2sb2POzejU2e5DBwJoAKgqZauP\nAmHn\r\n=/iaP\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"5f5e9d259d95bf3abf565622edf7345e62993020","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_11.0.0-canary.67eb0df80.0_1615934287716_0.15366430636519435","host":"s3://npm-registry-packages"}},"11.0.0-canary.941ca3b3c.0":{"name":"@material/density","version":"11.0.0-canary.941ca3b3c.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@11.0.0-canary.941ca3b3c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2584ff4430b36e7bbede40299a236ba77e359bfb","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-11.0.0-canary.941ca3b3c.0.tgz","fileCount":10,"integrity":"sha512-n6UqxBmzd8RlDw5bWTt8RXJ4g2OHuyvSocRrf63RAHAjvm3c85lMGT3KJTvGxlNnQ350TR9p5vgZbUJ6Uim45g==","signatures":[{"sig":"MEUCIDnnbD3wyXoDRxuF/d4840cM5SEU4gOErmg2DcagwLcxAiEA+knNWFrJaDIiVXULMBce4VvRuFJtDHkDyP85Ebf5XGQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUTO5CRA9TVsSAnZWagAAdQ8P/1jjVjyFXowtSNpkcHZC\n+M/M2+G63FWveoRqh+eACw4559sNIUbE2vZVmlk5sJPwWSbXe5wGBdgrrr2p\nC0XtN1N36qj37GJOw7NORvwri5l3enYT43euTv0NTyzljH9RYtn73h/ishyC\ncWiDcUAcuTcLN5/GZXVB4Yw0byoTCLtUo7zf+YGwQOyoLCOV2rCwbBEuuxyn\niE4q0e9Ng44y0XYRc3U+HzMEEVAayfu5RhzRwquLqE5AS3QFBOFiJTPDlQ2z\nOyj69/KmyKOTbVbC5oPaX32DHovVijId2CJACxXMho74CgW5OnK+k2DTKiRZ\nRTqkLgmAxtfoJ+GX5np1MUIskYoANswbmowNxscLGsmIzTlvSQCbhpIUcG0Z\nBVRuZQV+t6nOUzv0BLkUkYbRD95ogYGzZYALlKSzXYhgtl+30vDD+DOaDSa3\nwpzGFZDMQ2iordOSV1nEi7DSrzy/wBoyz1FpbXMEYnAWiWi4HDOz9SGU37tu\neTZVXh4loNH10Lijgep4DFG7aixVjXqtdJTRUd74UCfzpSYUozjZZaIWji+Z\nJZyLUgvVhLZPPsjRx6bNaJDuzEEBBDUPi+v2ISERyQf6/wO3t3EdsJcI9pA/\nkUtsLK+fxr+dBi+sNtDuj8gUz6JpkDuiDz9Piu8APzJbNayygURiVb1s/Qhj\nECa8\r\n=fiZd\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"27181e4c2c90af170c9149616613beb6599ff94a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_11.0.0-canary.941ca3b3c.0_1615934393321_0.00862462197872449","host":"s3://npm-registry-packages"}},"11.0.0-canary.3344d12ad.0":{"name":"@material/density","version":"11.0.0-canary.3344d12ad.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@11.0.0-canary.3344d12ad.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5eb07e6fa742f14c3456cf149d08810320404a99","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-11.0.0-canary.3344d12ad.0.tgz","fileCount":10,"integrity":"sha512-3V5guusZXFzH61CwEzArlN6kJyQbvLxYRWVvNAGrT2UKqVkfc+Q3T3jobV0vx+NLfDOWkXTPWr+WChtQtGMR8w==","signatures":[{"sig":"MEYCIQD/j/0JdkBqdmz9wjMBuirhViFWYa8eKnywuPP0pAhpcQIhAP/SNSsOskPo0G4gmOncB4gOciIlG6nIlUYXQIHfxWdU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUdMvCRA9TVsSAnZWagAAzR4P/0v7jM7QWYmOz9ZUIQMh\n8VYR5ocvlOwNhRh6wR987V5kbQor7RSrwoI6hb8WF/POrkjPmhRgerPnsoqL\n++UylqohxWWs0aopGxuOpeHOw0t8WV1VcvIYsWubbt87seUbp32wG/Wkq0+U\nFtMXzRau8BBwiTZHuW4AiSIJklEvRvmKSHQpiLeHLvU+mfF4iiLvXVe5FT1a\nX+PohWhevPn1Qmf6BzDldtAcvOnENoSBKPBgp92ichpMUTlMn3rhiLq74FBN\n+ecJZOfTwYFPMJzPKWbaHkkMw0mRgHmLyfX6PXxVPGd44YT+COQH5+lyARe/\nx3gwqB+bhyMUKcC5CgWnIRJfjOYMd7UPC/M8B9taHZJWUoWy/Z9lNZyGON9B\n7mVoQGKOYOwvfwf1YWcKTnXkVKshq7PYKhTuw7dVG5A6kksibbqhUrETWDMF\nYW3Dlh5q0yQbPX9unxWKIv653ohnaQR1QZmb9tdImNFkf/xxVPQbkTlPe+rH\n5BTpNDjsg3LvTNbFtxhl2ojwDHg1b5PtlBg1pMW/m8SaRRX1toKAcSVxkmM0\nLVMJGy2nl+G4jUUvexvJeP758H8vugXuKcMH/UnFjBZJ2Pw11CJTzPRYQ8Wo\nU+DZiGo1YHHeWwBh+WT11hHF6AtLNJDGsgr9phYOVrXr6hLfUCJkssozYVYN\nYYAy\r\n=K2xZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"fc17c547b4aa66b6412c0b0b56b75978332702cc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_11.0.0-canary.3344d12ad.0_1615975215090_0.42256316441087494","host":"s3://npm-registry-packages"}},"11.0.0-canary.6072ed604.0":{"name":"@material/density","version":"11.0.0-canary.6072ed604.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@11.0.0-canary.6072ed604.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6b08b401ec79c4d8a249db528e6eab781253edbe","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-11.0.0-canary.6072ed604.0.tgz","fileCount":10,"integrity":"sha512-RdE6tTa+TUQNuL6fu5IJLXpCy9Bkb/Zn9o+6M4QEEYDOFB2pS8WhVeiLlQtssetAE4ljjksaUQaBLeujj2aURg==","signatures":[{"sig":"MEUCIQCu5TkUMpL81sl6hdGVp1gTXrzUPBuFR3JzvIyA9szVwAIgChJ1gI1XHJL3wAtx001dsvzFyYlaJ2hIUW0wQ6BPYyc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUol/CRA9TVsSAnZWagAAvyUP/0Rme4c8Iq41AXQZ9xes\nVkYCS5xcrptEbYhsJdoJJ5vORQaN7QjnyBgx9UEHHelhi2e3whaCMUTbjn62\nP1s91EFXcW5W0HGhlhZ7sQaQJrYg+VM/jamrUeqAUF+AjWfkZSPl1gtLUCPk\niAs7vzClSnXXoz8ZO11UHKIi/w3RXZmDh+ifbamd64vFQd9v+dlQEDG6rH8i\nxvHIP6nMUUipcyq3FJHYOJlyMiVu8POfrTRIRdxRhC4JYCR3cwhsqk9yNu9M\n3ldivlea2tN7ZW9NP7qUs/e8dfhxxv259awK0vsqqvSlxBpkV+rV3roLRrFy\neAaGtXBXIc70zCStxJ3tzws6qLQOe7YoADlFTJaMDEqBlfEA9vuP6vGF7jOZ\n8lyf4e5rojBeBwPFbLtSXQtyasGMOoGoULeQnD9+x/fWYym0m3qM/dhOe4KH\nKizJWWxZRa0lRLD7uO5H4xNrQ/sIXO1IQBaNnk1wepNNEZFEcT4nKTK6sqsZ\ny6PFrh/KmplDwSsc/t8Ipi2twQrg5OpM+VJXBZopsCHhDGHwSYAORvdNS5jB\nozpda3W6Xbl/GU4XOFO8mqWBg7ACRpHcktEuohFYfbxhTux/WHOIZNEjFzs4\nuz0RzdUaZGhqCL3WfR2C+Wpz3Reph+mjcA7kx/2pjVnXclSVjWOp3+qMTfJu\nBLAg\r\n=huHR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"219b085de7ee97c7b75e5f25dc757e7b5240916b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_11.0.0-canary.6072ed604.0_1616021887369_0.15052243858545178","host":"s3://npm-registry-packages"}},"11.0.0-canary.d3a6862af.0":{"name":"@material/density","version":"11.0.0-canary.d3a6862af.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@11.0.0-canary.d3a6862af.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"85e864d2f2293286725f715dfb798bbc150efd52","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-11.0.0-canary.d3a6862af.0.tgz","fileCount":10,"integrity":"sha512-RLxyajNpsEuIyZjT2WBn+Une0rbCbuYQ7aPJ3G4h3s7eNOHmYWmoC3XPwcbyrUtBRQpQ1RVPJr8eqGgsV7Cxew==","signatures":[{"sig":"MEQCIDbb4iTBFKhZtwx4la4HKK3oaAayjR6s65HyAaSyMd2WAiASPdWEjOMNX6E2wd56XAqTU3BdkgyOo0uSRtiK3FyPEg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU31KCRA9TVsSAnZWagAA6jMP/3/Qlsih4QhKvk3LXAIm\nwMxf/Ro3bdFkzIpjY7PMWmka6pwLy6C5Q4zbI6d2zdlRFU8D8RJECyBmz/8U\nHRUjUhTLVkcRMvoh9gSVkPqh9kbBgoxYhlhYPagosOe7yrbHQ4F2zHzcGNiE\nP+PONO6dwwEBEHx37E5eKZVlqOG6F5qJ8y7Q2BmCtp1FNQDc604Lls/c0K/K\nVbnxkIKngzrBpKIN52MmN4fGCuEfxKmRR5ys3SVET8FtlFA8XpYYs9ih9l47\nFQBQpYhrL5lTVVInfAGcwjh5iF9uM50QnUsZdOsllIlm5YfSpsfic0qM8Gs+\nZaiEzd2HSd4XzL3JbxMN7n+BPwSb+IBrw4LB+bBngyyzbufw5nIMipT/HlYo\nEqVIXmeBAgk6OvKXMwWVfKFsU6aI+uwGoTEk0q+VQWO6zk7vFCexK0o600RT\ngfX8A1gQ/Yn3wavYWVigxchh8zKruk17TABK3PwsvBp0sch6WpADo65Cbi7s\nkWe+EOiSBoyD/0JJ/rq067fYG/QIYTE3kbFKmHPfXp8mVjnp/RZbUH+GdPj8\nGDtuqJR399aQX87lRsa7w7JCVZE0ZcDHXbqH/Oh+ZqIYfcZXewICY/oIEmfJ\nuYF+Bq9mqhhT5sf9XSINSeHNRZoMYWJqcOH9OfopOSDq3LVIsDVFbM0tWZFv\ngypi\r\n=/uRC\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"ab10f53a050cbeb103a3ee070a9134ff428deae0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_11.0.0-canary.d3a6862af.0_1616084297698_0.8460124845621522","host":"s3://npm-registry-packages"}},"11.0.0-canary.40dd242d5.0":{"name":"@material/density","version":"11.0.0-canary.40dd242d5.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@11.0.0-canary.40dd242d5.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"feb7880a321350b1d27292e58c435b67144faec6","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-11.0.0-canary.40dd242d5.0.tgz","fileCount":10,"integrity":"sha512-ZzrA/ZSEhpwXbBPCNhrETT/lpQH7mHtt1wZbN3rdFORRWPEiFODF+4RIiHo5pjSTUPNvHCSzBiqVpXmbvnbHiQ==","signatures":[{"sig":"MEUCIDsbqmE0tY0tRDwTnLGCEIX17NOs1ZcTr9Y1yBdxkLS+AiEAkh12zE1NQj3SQYOkm7iqEtGlNdRqYLwCadGmPJww8vg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU8MCCRA9TVsSAnZWagAASiQP/iqPSJLjpCFh/yECxHh6\nnYnFRX+j2tuK/igmhmlyWTbDuLH1TSxjvpx5raIgt9QPk+yG+iHQ+WKtLvfK\n6BSYuDIuvEqC6Bythb9ogVsBUf7sc1J1IrwZ/Oi1Yptei30woe2Yyz6VkXpL\n/qBel0kSoEMInRr28ohJW6NlWS2D7dBlwsEWUwCE15wQcQQbZLwkNPRhdhBM\nMQw5DGI/vkKCG8wNEhwBMKAUScQi1hocvvYT8F7FOe5BXRrr1IqmcC5w/6be\nIfTfU7QvYEi/SoQJ0qRHXRumw7Zdoa6PM4L+oIG89UnJO6MCusS6KT2Yskzt\nQZ0W2SubrlSdwTfJR4JoIpRwClbHx0k6PeiqQVD5GStutdbtdHMfXc7CSV7/\nD03NZHaTRgTS1Ig9OBE7D8NQeIxyvfJH+Rus3GzAA0YB6H8zf2RkP94o3AUl\nJz0w7i0DhXAIJL7zac7A4qQjg97RzI4cCLB8B48oPQ2TVrrk/XkuIrYDfvAb\nrefw+M4scV93mytuawaudjIaGbSKHsoojais/VJtW0yJ0L3ba2GNGMgDuAc0\nXNg0er9Yvfgc8bZGQo3yqm8KAEpxPfFCP6CQaOQ/PjhEUxAQ6Ce3hJ9YnKRK\nsis83fQNrDiJ8OdUiT4YtyfinlVCPre4sVcxgcd3SQiNRF0mhL7aQ7x0VnZR\n6AHb\r\n=gOmB\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"07de383ae306cbdee42be69fa0a06884d97ec259","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_11.0.0-canary.40dd242d5.0_1616102146210_0.8402905579892876","host":"s3://npm-registry-packages"}},"11.0.0-canary.ec8f8465f.0":{"name":"@material/density","version":"11.0.0-canary.ec8f8465f.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@11.0.0-canary.ec8f8465f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"abb9e6d93f5c1a2113f2500e3bcde1b23205a72b","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-11.0.0-canary.ec8f8465f.0.tgz","fileCount":10,"integrity":"sha512-xQJBs+s/45VllxqnXv+MfxYAqCGV3rON+80fc8UCsxLKj95mYZ4vrPQIiBWlzuGR2gpiA4f3jew9L/OMPvPbVA==","signatures":[{"sig":"MEQCIA2QfMTRnLPAOCBLAq4UPx9SI1YxEuLlHHWVBbqcku52AiAk70UD1XaBNCuH8uSAEhlmxL5gB3HBjhz4ugU+/7Jwig==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU8lNCRA9TVsSAnZWagAAVvUQAJMKJ393Hb0e88JaL2n/\nip/vPBHYGl+iYf2ZkOeoxCjVJTHvdVIcdXbsnLlQ75woBXWt8g5vRXNMrhhk\nncDE5DoxH43YwsuZRiRzUOQInz75KsG2CNL102w1M3pb+cqUAAH8Ma8dQNgN\nhAO/E3Jqje2VFHp5Lzl/b+GQpcmD52BFSYVtTQHxwdtoTltFS5InZL2PlUeK\nTdVuDmuGYyMS7sIu5xvj8aeAtJhMvWMV6Qq0TWkC2F7Rfggss5PVIDjbjpyn\ny5CrvnVIzGvsLp4c7Gpq6tzuf3M29Qm3CCJARVDxu7HHCSlpKpfL9W5qUc2O\neY7vRK5ot/cutB8gGi3QLYPynmQiiq8wIjW5L0KMhp4kuCgPmEVepkL8NWL2\ntltN4DZBRgEoX266vK91J+rlTkbzFby/j/FmzKchJQoIngfdofDK4z4JR6y5\n/WRH+LrM39vJJeh1xPOZgxjRh2bvPHblZH+k/aOtycTfb6eo17pomjBf9Gpf\nqXot/VRDz7g+4QS9Pavo9csI/GZtyUaJD+QasrejdYjvAozWLrqdJxHZlizf\n0JCF6lKpdjR9QCfM1WH0OyP1KhbTBeMPiuLoCmT2KGiFYPWdO7guZwQ/oE5X\neZWUC9jQtcF59yPzfb+deBqD5TnLAwKwpSqeiY6Cjb3GS3xhp31OyRk5RNja\nalY2\r\n=fI1Y\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"896f8e45effbe3c44209b4542bcd3d10a7f8421b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_11.0.0-canary.ec8f8465f.0_1616103757316_0.5241468515539336","host":"s3://npm-registry-packages"}},"11.0.0-canary.da38969ec.0":{"name":"@material/density","version":"11.0.0-canary.da38969ec.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@11.0.0-canary.da38969ec.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f672ec0edff082457c7230dae7a813e1433f6b8e","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-11.0.0-canary.da38969ec.0.tgz","fileCount":10,"integrity":"sha512-tnbu5kAmmHxRGBGq/FuO/JiG+tUGRHYIc1+inyB/suiVQo3Jx0NQmHi+toPjDoWdeAwekKzjPm6R9od55sL96w==","signatures":[{"sig":"MEYCIQCS4j/f1b9xb23CYs5fpKXAfmik8FtQH2GuhW29q9y5xgIhAPcCxqteBFmTGkckvHCuyKR6TIRRMyEsl8MydcSur151","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU9E4CRA9TVsSAnZWagAAJV4P/RwyqgqVbI5kkD5xvr0l\njd6UKSuwH3TZK2e6k2KZQztzgO3+qCmMJrR6fjhDMJlpgE1iZamm1Os1+OGP\nrQlwhTnBk3n6Pj+BfB3ZrzNY6KMFhrvkPsFywU7GmxC4GZZdPWNLp/RlWAyv\nv5U/dfrmO73cHiivkFV2fy3GCDMsQhlNZSNPAUF703DrHMWT9P3FWHw3cuy+\nvp0QQI+bfZaQf1E92BaSIzcJC16u9t0WLgD0q6EoHMAigK7EG2hukMlX+Sn8\nriKnPs6IMyacuOU342Ja3cGKRngitbUdc/HhWV1wkkrYpXHrnqT4QJ5oZWae\nYFWq0YoacjKUi26QuUI1YF5G7J5Qpq6x87jadfGz7CoQj1gHrM4jWvpENNmp\nja5J5BSmO5nJ8b03M4UstjOFrEv8aC/7LZVr8onAGBjArehdxiXEW0g6Fh7e\nKaBbj88Pct3HKRw+J3v3TtoR01I5AxyNjO0sD1ZV8oJcxiSDTw6r5TPKiA6e\n1rwK6a0hotLVJsfV3HJulAYNC9RddNw20TSOixW/LWhsFPuv+7vetkX5cVW8\nNkNBKX46opUqpLbfDQWKZji0kkHG1jQ7L49QsTCA6FJ4d6sZSlZaLudygHDH\nkBH4SNt1VH3lBBhFvenY6RDk3GC7jtU28UvhztH7zbM2UDlAEGfRbN7n83/6\nvEvK\r\n=qmXq\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"b43d112facdf74c62e02576a918d522587133fa9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_11.0.0-canary.da38969ec.0_1616105784299_0.19931684913603998","host":"s3://npm-registry-packages"}},"11.0.0-canary.f5246264d.0":{"name":"@material/density","version":"11.0.0-canary.f5246264d.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@11.0.0-canary.f5246264d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"21fe04e3f63b983ecfb0b4276adb56acd05d25c2","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-11.0.0-canary.f5246264d.0.tgz","fileCount":10,"integrity":"sha512-Eumk7ShpYstWidka73xBS1uWOd2CDNaGjxoiuPm8ecwi2bPqJ+ygFbcNUVI8ryIeaCukl+CWlYPb9nPjRU0+eQ==","signatures":[{"sig":"MEUCIEoVgZd0yQqA0vAxo4lk8H9GgYhufY0sGqXR14UDo38cAiEA0fqxcj+3KTNBIMIFrvQsOYsip6aBV9abN8WQOTRH+Zc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU/IDCRA9TVsSAnZWagAAnNQP/iMQP9O+lQJyioTYtV/3\nTo4m9Ioc6ozJbAXtoIP4CBJ2D4VsjjKd1yppjFb6QD1w1XFQP22+a8ZO417l\ngNOPp0y7YhT/c+1NnQdXY6ZzBmjpg9Y3/hbGUziK36zrgcE4+TlgS54XATiS\nZmcScQWyce0J2egL9lmjEH3Q8ioBexfDOvBiJ7MmxS5VmBCmgiabVjTvho02\nOZeEQYrmA5ER20RWvQN0nSUUT25W0VzbOK8+jMmqEY0UHGAi2U0/s3+OK8GY\naC8lvpkAphxfsDNiiE8mPJxLVVIKLWQWEJ82SFYrQQbKZeTDrO6wjADQgIl9\nSWLNCAcqENnyEMqqvHRFtx+Llw3r/Rejts/eOqb1u/XUpDQ6jZKx+FK+MFAE\nhtoZyGNTec65IXu/mJIj+v+iuAPC7s6dia9gLHnwggioXMhj6/pTVT7GG31P\nwNU86qYPez7LTyMugCI8Vsqa63XdaLTY/o4YslN9ocyL2GgMPh7cVYgDrt2d\nge82lxKssmCxaKtJ9BCeEzfzuOEvKh/+PUf2u3AYEm6K/ABVuPvsTY/DJt38\n8fGxthkY0A6y3tG+TLjt7OB7TH+ZiHRzFmxvr+b0TMUxTn/IT6zb2m9utnby\nUFsrgTFT3vVxWCziy9ttQkVbb8Pgm8du/Ze5T4MQHTmjrD8YTyQvKpjvr0jF\nrAX7\r\n=FpYc\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"e5bc1717405750210bb9d7e3572f0cd36c9bc0cb","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_11.0.0-canary.f5246264d.0_1616114178849_0.4646680651304145","host":"s3://npm-registry-packages"}},"11.0.0-canary.03d34bbad.0":{"name":"@material/density","version":"11.0.0-canary.03d34bbad.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@11.0.0-canary.03d34bbad.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ca682202093566e7b7e3935cfa111c7dd3939ebd","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-11.0.0-canary.03d34bbad.0.tgz","fileCount":10,"integrity":"sha512-Mdz69E7VXFDKYyY7gjob/J1y28aII7rvJSvS+vanWfRgFkVE2n+Ff90gvL2qkU6ym43rI1iTt3VST9tkqA/whQ==","signatures":[{"sig":"MEYCIQCEOd+sQygsxigicqE5UtFmYI3dVsDh5mNw9GyG0ZIUkwIhAKTzllMhqsA32Y54igr99AbNOBquLfADlfwuFv9SBJCo","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU/UVCRA9TVsSAnZWagAAxN4P/RL3UVoTuXlcaSRfg1m5\nNDGuMy0IFyFDMH6jBo96cM53BO6P+tD/aXpwOxsjFj+/MGpShslFkyMl5Soi\nRMR7SjExcSuKxCwj2zGt3SJSNHSGUazz12cfhSswS/T/auUHgPUBsTYBvRTD\n6Ouk0l6kPvc2zhfX7MicCQCIR45wfegHHZgzhePjpDx9xioL4DWA+0KWTdPz\ni7FA4djCPi/INIR6TpaWJSON3Rtf/Vi4QBquCljz+IJE8+flQ5axl+tkAKnr\nhb2TXOMB8Yj1oGp0x6NaCvRTyGhqhOZtJgwks5V9CJjgMx48VgEHRhPLhsmK\n7O+lIDuXlcRPptsT7rXMIP6gk9rp6iyYxNHLgFevZoW/+YCq2hEhMfHIDXQE\nTvxlxXedAMV+OpICiLi9JgS3Y5fdEZPViJwV5Pk/ZdxOE0URo041wsIodWKl\nZ2nbZzcVjir/7Cb/2swxJgCyE9a15Tqwq5CnihxfqZ/buYyYmUwRsaWmr6nY\nqgvdGkTj5TpgbvpzgM8N7D2MCwMQ81RBp+efu93VQA6Cp2zFDzZ+AxgNL7J/\nrGYRYAY8183DqqDLO1P5nGUqn4KgNfD+pGPZyQM7jarn1ypAENLK7+lxY7Lc\n/8UKhWGGZxGHUqp5lzWVuTSOynUazJAqzwpsN1lLb8L2dbqT4FuGlajbG6ta\naFC1\r\n=eFZa\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"650c89999524e7131f5808d28c8ea2fa15db0c86","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_11.0.0-canary.03d34bbad.0_1616114965567_0.7309656936672257","host":"s3://npm-registry-packages"}},"11.0.0-canary.cbc57c600.0":{"name":"@material/density","version":"11.0.0-canary.cbc57c600.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@11.0.0-canary.cbc57c600.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"09c039fad13fb489b81035237598c55a2e0d5066","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-11.0.0-canary.cbc57c600.0.tgz","fileCount":10,"integrity":"sha512-DEWUBoaHyavRGRpzvZL9gHHttDfj1KPkFXveMBkiED/MscoRKAzQBVodtN+98fU5gt1J6uvXKaODRI/Ea/vlgg==","signatures":[{"sig":"MEUCIQCCmPfh1u0iDXKAz28UZzgG5kwA1mc6dxIT9eolTBt/HgIgOEShtkPvPnImIFWMw1991b1ct2Pl0I6scElHAYHm5Cc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU/ctCRA9TVsSAnZWagAAPwQP/AqIe5y/WhbwGiX1bkBj\ndZ7q1JhyilPGFEzpSYbVhS17FR83wlqukJZvm01RGmObH88WRJUyAMAiRnOD\n2dmkQzfAfAHX/AVsT58OQGA20m1IvyrN78TDcGydVj1RoTePFuhwq2XM/mcT\n8PPucyZd68PCLMIu5fnYtIVSBNDtSOe37SwaPfBwButUdkDBLGTb+zYy+bcI\nMT30tnro1xSUdUgblXS1rOma+QxJf5m2BTczN5rWLr1VDJv1nJF66E5zHVUv\nriEJMA+GyW9zKabDk+WC4S5zVs8t3WmIQsbhurWsid81HrWE6aKWdxIgqDPV\nDgN2el3A4SCnrbubIIdopvEYnYCGOl5iybqHrqpAziNSVhVtXqV40jVpY1a0\nMSAU3SE2tH6Ros21Wm0A/hA/ARM0oNzR1l9PtHLx4mrNIXnEV5RPcUUtCIW9\n5ESIypuVNk3wkOVbImIcbdh9rb6Kbbd0gJ9BPgfpobRPhCrDxo3AXeTwGKJ+\n84yrGs5a5xlUyKo5SCvA8f0N6D7yYYyZgXVS112PF4XMzxdXlWNjYarNwql+\n5bx+6FqolGZRtI37cp6f0u05MflBVNqB/ApmPgtKqzhgXxszicSgKX9KkfpI\n7M0BPKecyyr3GT7G4nXkjj/ET1+u6LMFd1BfRWVqukDHqulcLqy+j/wPbmi2\n/ZnA\r\n=CFLt\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"c16ee9654e2ac3913ee3140dbc31e34bbc443c00","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_11.0.0-canary.cbc57c600.0_1616115500786_0.9564915108518128","host":"s3://npm-registry-packages"}},"11.0.0-canary.d6c5bcf37.0":{"name":"@material/density","version":"11.0.0-canary.d6c5bcf37.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@11.0.0-canary.d6c5bcf37.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1c33185abc3cba39ceb257ec86a9329aed9b9126","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-11.0.0-canary.d6c5bcf37.0.tgz","fileCount":10,"integrity":"sha512-u8h9Y9hgVQdc2DceyhhNtJq1yo6RTDfEh210gVy/D6lrxZQVkkYlMFTEOo++t5R6V1Hf8gCK5Q0eQNU3CtL5Xw==","signatures":[{"sig":"MEQCIE5lxZFlJIft1Y/5hZvHRs19q/OFT7+SU3FNoVr7erg1AiAu22qJk6shyrEmkJn98OH4CjZJp7f2mHSqfz02GSVqEw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU/n9CRA9TVsSAnZWagAAgjAP/1llueFrAFRHVuz6ew5+\nO4MDBT9GRHsGO1ZQs/hmk4Pi/agB+8WJ7+bwnXEIKzYNcDtJTVBFRlNtMeyM\nFHUaTl/u9JPZ/IPNcWzbOJhcHp0z6OavyGr082izpp26RGHa1XkDoxr2CRTv\ndwxOgZ0ihUL6xNg1oa9kd94e7EMufW4EpdbHUbwzjm7CjMSZgezE7TTIZhIy\nDIMnf3ekfVlZZQ7+iv1zKVDfgzQfqO62k6Sq8HwOaCwsT+1mfgESXpxULfZ8\nRgU9FK28u1zm31MHK6tPcwIZRZZWksMPMDv7GyZQE9idYEsIYpberbLtrKPV\nnFsIhHdrSf/MrbN83Mv5xikrcvYx/b9MqMmVDc4NAypXtNxKSQX++jsgvVZE\n37afn99V1+qlnbWhaqLPM/DtkOhIqfKqEpsoPPNxy3YABP6k3thfq6+ShMxD\nCd+p1UvLsKpB9XAFKgchIkOKY9Q2+mBGpXO8ZZM2siFMyRP8qV+xYL2mNXbe\nEnBtmRCQfKyS9LxWkmNughfWAmBXxc+1cQJJglGlekFgeZMNbcyMHHXFKfsR\nF4X/Eyrzxaa1XG1K3H4qSatp0Ab1ONpcVW6No58oOZTBar7x8BsomSyPSSi0\nMwDdyyMxCP/wv61kpyjRY4KkuO+/KNZFBTEp3lM5Ys7r/U5UJSOyCyQAFUCt\ncyJP\r\n=eP3R\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"7ed31c18c565964157fdadec7c7876ba58c6dfff","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_11.0.0-canary.d6c5bcf37.0_1616116220570_0.19544841661238954","host":"s3://npm-registry-packages"}},"11.0.0-canary.fefc668d7.0":{"name":"@material/density","version":"11.0.0-canary.fefc668d7.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@11.0.0-canary.fefc668d7.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a45788048d6ad59a5e68ce37009bdbbfc6f5a273","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-11.0.0-canary.fefc668d7.0.tgz","fileCount":10,"integrity":"sha512-OqgJRufEyCebWgEJN/Qc0p2xIiwEVHlJvLgHCfQovLSadqDbaCIvHlHOpsapcXIRHJZzSTRbmHiY3VcaSUR4CQ==","signatures":[{"sig":"MEQCIHysJVhwnBgQoWFSZ3Lqr+kAaC2Mx8uh3AJYWTWZnaH5AiA/X5O71UL9dSWaihheN+pWOTn/aHcfO8lUjnMDXZ1oIw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU/8jCRA9TVsSAnZWagAAYRIP+gM0DjltLJEGfa/5b7KZ\nxBWkRktIS3/z9mJ0B2+e9I+wb7g6qLXgVdxZBbZA+WUG22PiCSYtl0eK7W3X\nhOR5S3rOMPwD8ebRTYgMuBM9aG9vBu8DdduWU95lsyUaYQiSKne6RuGGkNqD\nfQAXEt6LcpGtFuJ0waf3biDSiOZzBVixa9b2dDxt4zklYCgSBv8fDfJoMqmf\n448AeWlokU/U61NDO6aHDdry4/jOIPl0sV4NowO6C6GZ2KQ1pVqTl0u02z6M\nbVGfCJRJmHQXfqPJwAZf1C68oVU3/oQLAAxwoApIRCu+zOyqEdjgmphcYc7y\njfJXT9vbHLeanKa5aXQeLtqVqwMv/kGjj9vnaNIFzQLYhLXz93OGZsvd6nIX\npwLJsvZ7R0ZGKAC/7yb/9TVHx05FHUXIBoxfZl04uXfN4EQQcZ/bdArGyjrt\nPyGVUph+ZNPdo0+gyG79YIbl1E+QtifcGJDFxirxK6NRu+yuS9cR6GL+N9Q0\nIqhMPd+TUj8gJ/hSoUtD9S/PYx5xxBaVvMSCmHiAyuoQlCLXRXA5ONV20dkB\naOQu0BotXSLaQTnCZJKGvQyZ1V8hTaEdMAGhbHZEvcFozLVRZVFwYc/WiEUY\nq0uwPug+59Shq8g5mgXHxqZzr4KzB++LlvPlWzZEnf4ZU0p7isaIgXlGLzDr\nVBh/\r\n=Kpne\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"7c976c590b16e8f3a000dcf5cf2b4daf6269aa21","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_11.0.0-canary.fefc668d7.0_1616117538681_0.2730043848965731","host":"s3://npm-registry-packages"}},"11.0.0-canary.faa7d3226.0":{"name":"@material/density","version":"11.0.0-canary.faa7d3226.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@11.0.0-canary.faa7d3226.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d266268a6f3ca9f00fa0f7097fa80d405a221234","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-11.0.0-canary.faa7d3226.0.tgz","fileCount":10,"integrity":"sha512-O2hH0cBs3YKN/Bn25/8J1v5t28IlV3VG/DC1k/55UBcAZhVqaW63OoWaSTNNcbjhG2EM+xQomuibNpwhrPha0Q==","signatures":[{"sig":"MEUCIEjetxU9TYEW3vb7ezso6YXbr1FOuEY5Z4Si3ydFO0aPAiEAnAz0m3P5OYvg840FD3qAFFpoGlZwaoIfUvf0v0fb/Lk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVOKACRA9TVsSAnZWagAAp3QP/AytrvQyn/rp6nJPrDUR\nuDVfReAtxHzwUAQhqNtxXmCN/MGjTxIT1Kxlf8zzHLFqasIlhQtNLGvUabyC\n4IP+5XSapH74oLAnNymeFUYA4O5O2cXO6BMU+1NrrR2GsdcSLAF5MAhxcEQe\nKM9+ri9vsFfxOC4AJlf18W7XsLl2y37EBPEXk5/VNAq7Q06m6/bNEIH3Obaf\npl03jBHK3eYVmG65qHqTWgxdxvWvbKjSLH1Qr456sXygSYY63iArD+oGcnkx\n66ieTsDY5BKTcnABHbRRyOPKvF/kfVhezrdhoVMtjpmkHbP7r0SYYVqlx2Xe\n0/jSxBT3j0I+AKPvC/ooh+w4DwQDAC/Nhg+1LzEhqlXYeLOSYPcQqSL0v9JL\nHNjxPhcHweuXnH5B1g6BmzmQ6OmGdIzJVAyEWH6MJIMys4YLes0IsyejmNjo\nLPTyM9/mgaimX9T06G9J2VCTLR11Cfm+YwYWcA/IKo2sIcE0+TD78hgDC/qL\njNiwcNPUj73EW7d/tNii6YlkTO35vy/1o8Q0AwsHFbnn6CdsqzvrnggrG/j8\nUVs+BKI19YY8+QripiI0rr+uMP/NAV1cEcA+GoZW9WjdyoeSyuuaU7pQOGLW\nAImAeW593xtZlt9vbr9xO3mjJ5gyG4lfFTI3L5QQt9v4FpWVc3Ik0m6oSMCX\ni9P7\r\n=farI\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"c6038c8b2af85b70f2434939a69416e1593d5a36","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_11.0.0-canary.faa7d3226.0_1616175743678_0.6636687287806153","host":"s3://npm-registry-packages"}},"11.0.0-canary.c60449bc8.0":{"name":"@material/density","version":"11.0.0-canary.c60449bc8.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@11.0.0-canary.c60449bc8.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ac574c2462062e22e9ffe6f827a6776d717165c7","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-11.0.0-canary.c60449bc8.0.tgz","fileCount":10,"integrity":"sha512-SOlIsy5ZwbHg9cyO55CbUt85eZqhkJhTDSudS6tNIriubYt26RAXPltpTy7iPKCYB/B3vvtfdjxBg/n/JotSzA==","signatures":[{"sig":"MEUCIQDyJHynFdJ/F/Bw8pmhtqn3i3PtKQ/TYJiLgvSquc75RAIgN1XZNTN2zH9RIqqR0hvPujXmIcRzAQFHzR5a/vWcdAg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVOd8CRA9TVsSAnZWagAA3TMP/2eGLbWw5x1kpCfsomfM\nkiyno6ntPzSLJXBBpnbGmv/QWEaw5ZYN7TXwvSbKnURV6EMzWxEeFv2VWMwn\nf5Bfh73Otwc9vLUaIwZ5v8MWd6AFut5aCcQXzkwagva/rtGx6f6W2wCkfVW1\nQmfOIHwJO9DITxqdi9Mo170rhPqgH6IVkXRpmXOFYqVhcxeHVs8bmpBQdz3W\nqG4jj4NcuvJWHBcABhrKbUzW0pPWOre6GOXItDjFb4WA6uA9ezb1tVubiOk4\nYVD86k7saw7YOTbyKAhUapb23DWL/gnXg2W2a0E8SUNWZanYzovVmgh9/OIH\nA4Xwg/YrepEZAmy60oxU+0ATMfl0tE2Iw5cKofoGLqEXlE3LsNBWhP/EzFRF\nbyyzjS7A1aLTdzdW3e30m7jZP9wumqXbb0wrDLXxvjfcDZ+W+Wlw5YjzgTX1\nBJDM5PsE94zCpoecdeeNKst80DliR3ikdDmmT9BrlQ+rHRluTlb8lj1AeBWU\ngwe9MwKSxVEIeXD+pjHJKFWneUeJlaNx+Ewi7zL6i+FFuJDULisLFGspL36z\nSPGN9is2LmxwFwZaU48+6Hp222x2GEb4EP2lvrfxgHNpU+QYQe2uvStE/WLK\nEFm63XERZaRdhpndwAJT1h2/RNLz7nmsVmRW+JunRrfgcBZZNwcccfZstele\nD9FZ\r\n=ArlG\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"874083f8b4dbf457158a7eaf9924ce1143ef6fa0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_11.0.0-canary.c60449bc8.0_1616177020366_0.4102707371169956","host":"s3://npm-registry-packages"}},"11.0.0-canary.5f0fc444a.0":{"name":"@material/density","version":"11.0.0-canary.5f0fc444a.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@11.0.0-canary.5f0fc444a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5f547364054cf18f7568d10251257cd860a49a93","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-11.0.0-canary.5f0fc444a.0.tgz","fileCount":10,"integrity":"sha512-NeqgQrvRdvDlshuMTAR6E8sbIxHDv330CfPO1Xbo3u1jh4hdzcelkldzcr/nbX7T21XujInjtLKbLytn/gbVng==","signatures":[{"sig":"MEYCIQDr9zFNNSPYr0YuFyUdtnjjWgUuRqcwGvZTcl3BX0WVKQIhAPg34169sk+Q5SKffxt81RdFRL4Dqsa9J5psLLbhuPgv","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVO8fCRA9TVsSAnZWagAAIDAQAIRLPvoI0iawhdhLl4sP\n0xpsg1PPzsqOUP0NXMLvp0ybuzZgBOfcnx1u4RVUgMAws8VYzgjcfeYyfxQB\nNoLhMW/j+lnvVnoz9Ews6Qoah094OnAnvpVXVl4Z2NLlwuITsulKSxdHjeaw\njRD+n4odskZqnZsVykGnkLUvhb0ZS0n7M/F10Rvq0CZYKngfALesM3HNnGlQ\nO07m9kQlBoedrqmR1endxoHLW3VzdJ2k+Od70YE7kgRtpoH1EjRjHqi73pUU\nvKKFjwOUKfsKqPa/JVrTk+QcmEFMkEdI/q2OezZPN5YRKBZK3/r1cIWBmElV\nOhgWpXLEWYiKbbfyVh/sTwBV+284u4QKr5FEX4HFk+fUZLzOFiGGOhNSV3z7\nLCF5hyZjHuO42ibGbEI+9paUjrWXv84IN/pvTg94Uj5X8D7SGlYFbEsQ22kr\nA4xWfSjPHB2f/p1X+JcFEIVQVXyylf79mOMvTmlAmXowCLrwoe9DXFiLihNe\nDcx2d6JYGWgagfO9ZqGGnwe40cZMfHGUxBr7EKvV5sNE+yign3/l1oqEF8fN\njw+JSWeIGVvdBaROpLMr0HCsOD91m5sRb/KgBCdHd38sAxCgnJYedAkish6L\nxNyU4PzrjZCoETeTDgq+76mCUITtlPd6BvFKO30Osyr4cWw2LfaTcKdXx7AP\nv7TV\r\n=Ny4P\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"122f31622300f5877c850a516d74f7c692d0718e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_11.0.0-canary.5f0fc444a.0_1616178975056_0.031186314202060306","host":"s3://npm-registry-packages"}},"11.0.0-canary.4567a750d.0":{"name":"@material/density","version":"11.0.0-canary.4567a750d.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@11.0.0-canary.4567a750d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"98afff8b3aa4f51f082fc2b74b2781da5543c2dd","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-11.0.0-canary.4567a750d.0.tgz","fileCount":10,"integrity":"sha512-mSmYgC3t0uPQzAAsh+Hnky/r8NEtY8A3xcAmC7/VRj+b6p9RUEQE6fYOAuTfzVXiVbaEA04kuVnbeXPA65KdHA==","signatures":[{"sig":"MEUCIF4pVVwTPoFyI0jQeKlSDwhExjSFiUUOpUCPyasDEdjTAiEA+11pm9GEFluXpNZcXFImuhr8BEdTcjXFNWqizT2gJrE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVViRCRA9TVsSAnZWagAAspgP/0o07Zl+wqpp5CRhkNT8\nGWeAwnIfWsnePZg7m4yCnFLj4e2OxAqvr6Dy99Ilj3No2LYUJshh4noeZnbH\nefpnbu96R+DpIqJIc9Hvf0gJvi33UNu6AD8whncU4w2S9k5avT2lM0xwRKMh\n9zdyajVcqsHi7AivNUq3Ie8Y5RAohYZTfL+X/8o5CgIY+AjLe/Uf6fwsTERT\n/M6JK/dMKq9zi5HQTwLLBtZCD/ADTumseQd+bEwRwJqiwHuY6k8tFY19YANX\nhf71JTC7wb7VxI7NA6YTbvC/cNrkYzgOKPsa6EWSZEbDyWWaDNgCi3P49UaU\nFH2n1cNhjAn7NwsHwIfj82HMyN8LyqaHqIAsYSEl3I+bs0Q6MSq+vbCp5QaM\nlxh9xsGARd+FZQxoIGvUefFqI/EoJfpxeNLCorc8kOBKDw6aFV78QZf1yxGf\nubldkQrTLOIr6MfezuKmXTUPSBBUzPH2lYoA5o8/qWVHL9Vy750iK0GDACbC\nBeiG+wWkQongeCGLFY6Vu5rilET4+H1XyWI5C8dhHOJ85shdmxnzYPe+0n0o\ngkRV/yQX73X06jCKTwZmeFwGVJczzB0orsB0FHli75Km75lLOxLqZzjn3EAi\nPgi2KXNhzPeADnxHsoEI44/tNPJwj7PemX1+Mc2LtN6B53e7RS4/2SvWcDTL\nb80Z\r\n=SkCD\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"e165b3e1af02e963deb71d6f39a7df6962710c30","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_11.0.0-canary.4567a750d.0_1616205969270_0.8240819884547463","host":"s3://npm-registry-packages"}},"11.0.0-canary.0cde52f5a.0":{"name":"@material/density","version":"11.0.0-canary.0cde52f5a.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@11.0.0-canary.0cde52f5a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"66ac08869c47fe26427384097ad1acc3ebe6415f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-11.0.0-canary.0cde52f5a.0.tgz","fileCount":10,"integrity":"sha512-p1EdzscJnNsU3qGGxSGOjOlhLSQrxWv8LkmaB1RyycAyQzTBox84P1gGDSSSK88ar6ERdhVG4lkvi0AriVjcAw==","signatures":[{"sig":"MEUCIEhyV77uaDWxoQzLyQbkjkANv+TKvNAVwdNzoMqQ01dKAiEAp7UHYdAoaSOUvZwSZk1zM1987Rbp4J3qT5UHnbOlUOA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWS/UCRA9TVsSAnZWagAAbt8P/jSYEZ1cfHbO7qsil6+F\nDTQ0V9StxNMkmMpbyNQttAHMmfH2M8ygo4ggUB1CtLfo7FxlKQLp7Pepjemv\nMEa0ojk4zTm+tgp+Jr8l86LsSaBXtHdy6pnEhmRkNACZhAK489IIYBLcqDvA\n7Hvxa7UGDWwT9mL4Sf9mcyYcjEzmTQIIytIng46a57PtCmQSRj1Ixr9MfIol\nYOqaXAlMqYC6BBrq2CfZcW2qtrA7qVCcDgIu6ByFVfRmeLX7fRspg3cU803/\nBBCRssd9gwWtCi/ypSb4pl45ccfwSa/UPDx2YU+7Kf4Ahk3uN5o7OG/iPaC4\no31YewihBPxW8djQ/Erv/e1fbNgcQlz81SPGchxIj+g1UsaNi7Xc6UpceAKE\n12zgSBnVTlKx4TKT0H2BOZ35IwsXxKMl+frzInHe6URExH+NpFOIyPQmLLlV\nuhAqFl6y3p/6AUKXWbUz2DP6T420CFH2sUM8mqGZrsfkEKCIVIG/+SGkTDlr\n9g6cDzzE2cXLtjLatIhkFmLxI5B6IKC8RaRVwVLLFMA4cyyXfJF8E3n/UN7O\nOmMloSijS8PngY5W0Lb+1R3gpmdP+4GT8/WP6IQ06lU2wtyY+5GhkLzLvfaR\nxqrsktDZU/5tZpnCE5LC198hefIGti2ttwhaGUAeCmGSwAAHBxQKaYlcvn94\nkG1l\r\n=bM3B\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"6f6719c5270f569fd2ab44620e89ccd53a31f98c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_11.0.0-canary.0cde52f5a.0_1616457684296_0.2327404206008139","host":"s3://npm-registry-packages"}},"11.0.0-canary.48f4b67fb.0":{"name":"@material/density","version":"11.0.0-canary.48f4b67fb.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@11.0.0-canary.48f4b67fb.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"34166363839cb78efc1757e593e32903d6c1632b","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-11.0.0-canary.48f4b67fb.0.tgz","fileCount":10,"integrity":"sha512-lwCKPw3WIkBKIJe5CbIdKcUIqJ32uY1o3wCdfwdUaS5xgsOSwu5hG9V2guNecOcU8Nw//cpk93oInXW1pC5Gfw==","signatures":[{"sig":"MEUCIGVXYlY267HtbvRfpeIJLe7GSauZWmAKp8JfocAxFvJfAiEApgv1r2Z9O5z4oXUgeqQ6RkMdybNLTKbrLqjnfzzG+Bk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWkbiCRA9TVsSAnZWagAAIEIQAIQrRgLVOBkPJheQHO6l\nUC6kDwvRwwLBJx3hGde0DoDXiqCyk9kngrtKt7YMk+CT85dJ3+6zcsCE/b7p\nQN184aIXbPrug0LSCZrQgsQ7crs8CN3W6zc0IGl2biDVN06ubbc7yRWYLG45\nq46xuFgr29XeP5KUbQlXtuAUfg3GYhlCCJIzTn4Au+RMf8GpIZifpS8oFrTB\nTmQaoDetnWj/Sr3FEA5QjFLfvnogUYbjaFoL4L4vrRhy7gegblsYqHM6R+3D\nzhNq6dwsxTeb6ehx/xDIxbqYNY+6J1VGzdojGIy23gZitr3LaWonGsVoQOv4\nhLntxIO/V5NGJfPLFpzBKzwoAvOYuZOh98SV6U84ERaCxhxGhnqkUPhu9EL6\nsF81ibq0syQgfVmmSj4/WGzw59Z3tJQpIqvWj9YmdWUaHvKGCMv/PzagtzRN\n/myUrqtIVl5ezE2RaFNv+4RqwWySGLtw8JQISVKMnIvFRM7TmYF+0cpe8c+x\nYHAajNGvEirE7HTwVl1y4vV7zoKleK7kzr3Q2xdFmlXYRuzq80/Jug8Kx8m9\nIbtHPl4cM3t0h6AdX41rxuLGg/JBlJVmRzpAXvKmHcb6U0cH4TIQamvi6m4Y\nRdFZLxzvWwJfZk+T/vLL+o03NVgRrcjpzW5c9mCUDWfWe2V++h7alYRVJRpu\nbf4M\r\n=g/sc\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"f83669b240feaba73206d330f10c80a9aa31c1f7","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_11.0.0-canary.48f4b67fb.0_1616529122011_0.499723708941866","host":"s3://npm-registry-packages"}},"11.0.0-canary.0b8cff734.0":{"name":"@material/density","version":"11.0.0-canary.0b8cff734.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@11.0.0-canary.0b8cff734.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8c3996d7851a0e5e0caea19c2c3a3f30a4782900","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-11.0.0-canary.0b8cff734.0.tgz","fileCount":10,"integrity":"sha512-G1yUMsHHUx+7lVe7dgzOXKXkezOD83hrG7And5IQlUj5lyaqQF6p69DAW8/WpA11S3UGFTJh5mzDr8pxpaQAww==","signatures":[{"sig":"MEQCIHMRiJ+t/sHmPOE1IQb+fV5xbJGDEBt2EmbdvUSEbF8mAiB5i4n6FthXIwDv9RTYQRfuIT710t1Jlx9+F+lNyhGyVQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWkmACRA9TVsSAnZWagAAo2UQAJ1tcnikxpYtI1K/xLYm\nOXU477HG+UP3DoKsrxS5eNXYResT0jMz9tFpzPudPuVziG86oJ1MIBnxWha6\nRWmaqqyFfyJdkxnxLNuA7ZDjYX17Ywi45frF/ebgSSeu4NU2G5kEHLcij+K5\nsb96V+/E5Ty56VZAfHZuMQoIik9jxV2qhzgpO3DWE+EgAEzBoIaAo6vxsjps\n3U4gcvAz4q5/EvWqtXRstikLkbbHNHCaLrUYn1b+zGeYFIkCUh+VqLFFT9rH\nN6gQdLqdK0ZV9A3enO6VKCruOJONHwmZKDtPVXU11gwaZhhVmGuaLJCxzXdL\nHpmQFVQNCaJpYroz6/OvI99CxBmq78rVbYAGvGvCDrz7DWhbZ0/FSMVP0aOb\nddzSVyGAN17N7X1rKW5Hioy8vkx9Nw4F5rGiV+pQRn5c+g9pZExDJ1XiFK5F\nEsk1z+jnEo6X2o/kn1fQV9bTkf6qr4m8dWYmBHoW2RMqD5mjl1noe4cHTvBK\n5TvCUFzlACjLQaulhb5wPzIg1/deJQNG5iIqkuq5MIDBErGDiSDHxsiKLsS5\nI22AsPQ/EUDhaNbwzONag2ScJ9cg88+hhd6n3sWgQxo449qMZUnknDSS7wm7\nVDtI6l4WwFoDjghLRSSUBWYaHgD+BSxF28yuIo3prBzAYvnaAJ7AUJdS6trA\nLWNl\r\n=xHoN\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"0371cb1671557f9e1d8a3bee3ffce11bdea058d8","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_11.0.0-canary.0b8cff734.0_1616529791790_0.022562900321209778","host":"s3://npm-registry-packages"}},"11.0.0-canary.8943b991f.0":{"name":"@material/density","version":"11.0.0-canary.8943b991f.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@11.0.0-canary.8943b991f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"657f4589ff24ced601bd3576cea5b443f2f13015","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-11.0.0-canary.8943b991f.0.tgz","fileCount":10,"integrity":"sha512-781rVF2x6WXggWhZ1PIISvvjPI4PCKZJlyVc7gb5og09ltwj7UqcAu+z5gRNfaU4xrxG51fLqZH8q2xjSgzFUA==","signatures":[{"sig":"MEYCIQD4Q2OEu2eBDJYIkYm01vIjqgE9AWwdjARF8mpdHOUs5gIhAJfmdHk31WGeg/7LVnegjTs5DS8/z3UbcBmAA+//HUwZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWk9WCRA9TVsSAnZWagAASS0P/jh5rBZX+15NtW4mAC+v\nV57e3GNrPYqAnMbOSHLDjtwQg/zeBbbX8h7Y1hQnnc/7lH3orSnX7W5/ms6F\nZ8uXM0txIuRb3lumDbs6yZ3zdjtd8B68VToKhdP8rK5tsiHpB8eFmNnp+b29\nFofqC+EJ3wMjqP0vVllsjr+Lk1+ocgbPDSobtoiOywtjbsRPx0M54I0RbexV\nG81ArfhjOiNLRgn0pv58DVh31LTLT0X6ZiVnLfBlHp3Rqk5xrMCQ/vpm9ISf\nET87j1PSBBh0yxGzQMjmZ2qxwLAw3N+5d4sfygzk35HOfvWD70IfaXC9MfFl\nIsbyqLCisIKVSH9dDmPlzRskZcMszVn/B5BcJNv484wncTWP27YpIrsmRFWy\n6mS5wjgdefEBBDK2UAIwy9yRx63jCDdRzo+syjV7yYTkrfyn9plscIJJ6ZCj\nD0lVRO9QmzM62f75NpdeNn0OoosAOACY55ar6aC6S+xRrd6xwpy/R8gszwPa\nEV0Si7xcCR1eSoEV556MHA3cp5RXCQ7TYbYNr/Xfx1VqT3GsOhHm5rCsjnIR\nGwkGRmK1yoXznAaS/st7Myj4iG6LMQwhXkfg6Iye0/4CetmOPy8srVIOS7AF\nhyXJVMvNQhGky8YgjlfvH0Xx84r6TEb537NECjIE/rlgMeqgJpjdgFurAF2k\ni3jh\r\n=P3n0\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"85cb2528143c5117974441e499367a5fc252b745","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_11.0.0-canary.8943b991f.0_1616531285804_0.7346559485729856","host":"s3://npm-registry-packages"}},"11.0.0-canary.3955d8d3d.0":{"name":"@material/density","version":"11.0.0-canary.3955d8d3d.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@11.0.0-canary.3955d8d3d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"61c22a806bf22d72bacb07460fea4150aa34d348","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-11.0.0-canary.3955d8d3d.0.tgz","fileCount":10,"integrity":"sha512-/HauUKU4HVyVGIXRoS8Au/BfGTJ9VKlkDwH7ue1hBHn00+0+9QLsT+92lUuFbS5vi+yZUjFXccqiU7iaRjrKrA==","signatures":[{"sig":"MEUCIQCJxn0mEH6HFQcHZGdF48YTJvzOTtDglcfrOXLYQbtl5QIgLjBns8TtqGyBiMtNykyIIBa0Ac6FvgB+X+HBwNV7fjg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgW4+pCRA9TVsSAnZWagAAlwIP/iexQ6Rb2US9K/1qBwdV\nheUfVfPeAmgSsLWMCJkSv0JaHE9JPH2R2flVlkgCO+bbYJ2FZZQ+T8wxPNC+\noIt0fZHfWrt0GVuZTyRVORHTyNy49Tawu4tZGal4rEIIRuujrK5KSDCXC16p\npy7olBh6EA5szxENPXCbVt8U981xhF3oGLV6kRn/yfNCN/u8LZ+sFXrAjzp+\nZ1CuHv540oygV3xaCi33vhw1vPlUE4plVMDVr8REzMszXrZu61Cb78xp8IS9\ncamvTQ5MmqTWa/3T/WjrFaQ7b+npqA3LUwRzw4g92alp+G48WnHktDCiK5Kd\nrmkXukdgWa6dfjThKBl6zMSuhCwa/E+dRGmZuouGJ3WNpScttFUpam5I+ut7\nbo31hefYsMzmHOvMnqllQu+7lpr5Z8vDe2L02rBkxYeHqrkhSky6Ov5Tjgl6\nLwQXnNuqjsDT+RFQ+nk0ofts9QYi5IHN0Q5XhSiME1IZ4UurpCGn38ITjIZB\nbMdhcobXi7xRRau73RY2wgK7V4RwtfP++sf7LMkASnDjHO+uwXT8YlmA+A+7\nLeZci7InuwbOoZO9qQoLQ/amljUZC2k1e5pxYCpqoRh4pvJoBD2nVDgDXrp5\noNCq9fChGQk0S3SkT8TUhaLW0ApR0nDZS/JHpAP8NJoapg9UNc49WdqO4CQy\nP9/r\r\n=dgK1\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"2679d736975b17823079a52aad1e329d8c2a3b71","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_11.0.0-canary.3955d8d3d.0_1616613289519_0.25467801316827954","host":"s3://npm-registry-packages"}},"11.0.0-canary.23ea2d85e.0":{"name":"@material/density","version":"11.0.0-canary.23ea2d85e.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@11.0.0-canary.23ea2d85e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f07bc0fdc3ca00686cfab57040495a8e0cb47d0d","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-11.0.0-canary.23ea2d85e.0.tgz","fileCount":10,"integrity":"sha512-c5nfsLE4DG4LDOR+iyM/IEAnxifVwUxVXImix0A/En/8pZMAHQzaqaA4LgeU4eOcb/vITHVahwt/iJWXeO6E+w==","signatures":[{"sig":"MEUCIQCyWV8UQUdlOiMi3eZK4KSebHrtPsyQL4qVxKEkTEHiCQIgMM3DHBO+AZSmVXgfMeXxsVi+ayOqFDi3vzUVzm5D8rM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgXMjBCRA9TVsSAnZWagAAIy8QAKRwUS76adWsfVzORFWO\nsl0a/R+xEELS4fXnUzfuH6GxCgAahEkzRreiAqetTskGvSu9VVsMscBbXAqQ\n1aXS/PfobOIDjGXKhNGkBCfosiHo//K/acrDPZA9suUBWXuQu5KX6SvyzsHZ\n3VVcw0YAoRL0R5SdCq8y+TtOLzgA+vRpctTfwFEOLOcB4hVTAXuS2VsyNNHE\nxjIVmDybTussExUFMKLiQ9p629QDEiwtgPTXYo6kbqayutXMo9oo/lhW9rnn\nYphaOiGZ8CqHzlFhZ1ilKR1Z/oOB6DRs5RVIwzJT8NbRIWKyntbU4EO8khTp\nnT6Qf3vZpJxpjWJopnVsYTl5xIXeA0cJOO1Vz1cAbz+serE+IErwmGqfhrJq\ngQt5cEpLfSkLJvVKEvwpkPc9+Nt3EMidd6pwVbwvA2sp8a1NZHzB2F9CTwtc\nUYVNwZ5kQwJwXsc6DKwJVsfB2/ROlcfKovKBiRhGKWWaxHRQ55TXqEe9lUgy\nGuJSRREmeS1XhxwEg9IrKGXnj3tdV4Wim9foX/fPVzNKJlHMFM9iZqNE1W7B\nhGxLsrmvEa434h42WUrrvRrPSZktt16Bp77kfOUXolKKjnatHT2riTSuh0aK\nFTlZBnmmEe5HU+Gc9ekIDaDgcei9lItOABwKT5bfLVPTsXtPiOa1ezSD+2zx\nnxXa\r\n=eVSq\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"705a9cbab9462d9e300da18c26d7992aec452ff4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_11.0.0-canary.23ea2d85e.0_1616693440672_0.5399584152166863","host":"s3://npm-registry-packages"}},"11.0.0-canary.e3ec22f45.0":{"name":"@material/density","version":"11.0.0-canary.e3ec22f45.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@11.0.0-canary.e3ec22f45.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fd340367f77be9929869f1b8568400f989cadb8a","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-11.0.0-canary.e3ec22f45.0.tgz","fileCount":10,"integrity":"sha512-ZEwbo+2A5wLsw04DLG+RxVov3B8hwJsXFUo13oaXGyzaM3U4YdrXkzrklJv1brCBLgGLBu7OW2dANDgguwsa/w==","signatures":[{"sig":"MEYCIQDQ9REtwFFYcSlBxcxseJ9QtKUg+jeRMNDl25vvWsfBKwIhAPzeC3RjysJz44xPKHBPxyxQhFUyhBO8H6aN+XtDaIl4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgXM4lCRA9TVsSAnZWagAAvt8P/2goClX9LZyw5jKVUEYi\nklYyzxIYHOyMC81IYZe98ys//GXH92TyCoRFUJR7E/3E5n5I3hA4MZmwL3iP\navGNaLoe5Z0YR+nGsywimFvyL4/XZxDmKs7f53Eg3NKrkpR4qWbXglrWItaM\nlwaYnwrnz4zjal8iIe6+8y0jfXwTRVQHtYhOqrZTy8cXXzio3TXo9mL0pxvv\nk9qIWtEBUYj5j3uibVqK7KZFYNb5u1hKRQ7yqFTganjDbkDj3R9zZMkmgL0j\nkb4xkJndU9OYq3hNluYMOe3Yb7zISHnUwndOx3bVKIwirS+iKBVRkRN+6HEV\n2IYghWu13u72evOnjzjBMi9EgwJya+yAMfx72VKQSWBJgx9geV3tir/CAtd3\n7vUJGHDXuFeiqjwVZ8ovw5RHeUpllM88SsdQQMK8mwraa92i92RqVmd2mrN+\nVUf/dM6JrQCoHQeKYJxHPzxk1pVGzfDU5EFOSkXOOZM3vAqJ5P0XkWtQgaYv\nwuVGy7+e/Y78KO36SI1DpNvODvPUzhxTHWG4VkbGx6BhdwZhjSkt6MgNfb9l\nxs0wxJIvYwsF8dDTkqlj+H/YuTwRFuHX4nRC6uoapzZRGkoUyu25Kqi5x6CD\n843ZYQOcABWjPUCiPjsS0Sgv8GA85hWZac381oG1QnkL1X0P1+P3LD/Z2joA\n8app\r\n=uNtE\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"2827fdf50a2ab264554f8f307d61fddbab82c5cc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_11.0.0-canary.e3ec22f45.0_1616694820921_0.35338982359003723","host":"s3://npm-registry-packages"}},"11.0.0-canary.4ceb42220.0":{"name":"@material/density","version":"11.0.0-canary.4ceb42220.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@11.0.0-canary.4ceb42220.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b1c8abf38ae83936b9f9f0b59afdead206a2d985","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-11.0.0-canary.4ceb42220.0.tgz","fileCount":10,"integrity":"sha512-fA0oGK5Vlevkc+Yh1o3SAm+OqWNr4UgfXaAXwbCx/bSzmSjKdKciaSjl6tNdPezbbIMCoMI24sQ8NwxC8jehZQ==","signatures":[{"sig":"MEUCIHk5UP/afFbfMQdtiAEG3QBa+JTzOYuhZXFLchHh0BzKAiEAq5x7/rnOvw51vzdaJPOtCzk2wm1Iygz8LEAuV4zbh+w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgXZOLCRA9TVsSAnZWagAA40AP/RIIsCJK0Qgle5kX4TX1\ncnI8uIxPp4hFSKpdvmUVzWxiqZGqfQEqjtEkWSqtm3hFQL0VLnkvilEfWXbb\nfRYKjKXO046uDMUwRyDbSObNcsX1IPK/bY3oPNw4qIgzMdyHg/y62VyC+LeG\nhL/b4pRAEeIEcS1E7C0jaF9GAp5RTONGVQ9GOkB3LKcKVz8123Kr0+pANiwE\nOTfUmQ07hDnllUg3adU2RmcyelsaRiAhhqfhQrl+75zBp9Q9cEsjoabFGFeP\nHORbDrTw5TFPSl/5IF9JJAM3JL8oyb+9WtlNgYkSj80a4OzwvggjeW89hAMo\n14qbtlUqXB7TumhoaYqMj0K14hk7H3O5Hhe6OtIqAMcBhEJ8HKSwTHhJmy63\ntQTZNaHFvTxfECPDLaNeCGxfNEl/p7D9Ilc5Jc1/IaXqiH4DNG1/5I2eov4A\nqbdKVQ71rWvmspd2Nv9t3e0lQ8zZDqIB+Yr91KiqmE/JDYCmjuTCoKlTccY5\nUxBkE0tI2zY3yVwu5k3JiDjuZX6pXeA7uHB2Umi589Fhzcb3/As1aLyFewbf\nwiIDdQmehdYog2seawHZF02SP1+9nDjSn1RrW1s/caFsZYivtc4LKzgbqWdz\nq86lECSPfyo2Q47SqhmTPkOTfX802d1c+xjCVNpkTnNZiQasj2MMTrceXp8N\nXpQ9\r\n=myIJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"75fb611f33737c857d1b59245ff5a31676d7f3ee","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_11.0.0-canary.4ceb42220.0_1616745355044_0.6401971236928541","host":"s3://npm-registry-packages"}},"11.0.0-canary.dc9c84023.0":{"name":"@material/density","version":"11.0.0-canary.dc9c84023.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@11.0.0-canary.dc9c84023.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2f4c5a869f8a52c3ac89043853802bc7b58e31c4","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-11.0.0-canary.dc9c84023.0.tgz","fileCount":10,"integrity":"sha512-FNBSmdy3Ks1GGGXEV5vfqcmsbO+JuB2Xzrs3Kg3fk0pG8i/22TmS4T9C9t73dG7T0kFv02HgJzEaOP7L1B7H9w==","signatures":[{"sig":"MEYCIQCQrK2384Zzf+Yu9GfuvCLaajx7642nKhd9Kh7v8KzwDwIhAIj4bzH233K8CFcLs4f/El+UBJNmudVCLR7L1qcuArm1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgY2QdCRA9TVsSAnZWagAAYikP/i1oO3WhP3UmyU8GR8l6\nlKNqGpYo58esQ2nxhk2MuRHgJ0KqjBqrKChHF2XK5ybHaxVCUdlnmdH83NmW\n2Vl4nfHjug6ULmoHzgCDmVatR97XyKTmCgxzWp945IQVgE7jh4ubrEupqp4o\nLFZJSmOez8sZ2lJ6yHk0OfKXTaeOdGuv1+S+pIPAxMnJXlme1e6xq8FEqel6\nS9/IoGBo3o4B9tCUJYFl/CR+AvOnfnUn0J81lEWStlRh/L3Vvi4wvbaG+iYB\ndtJQ9zLWCId7e9CZMiZr5jjlJqm+jrny+gENBPYNiC27pZ4yszVZC2XZhvak\n+XA/izMNCjB1SQgwQwYSIf/0XUo6Yd+Eggi+QEbOoCa2dEcWoJwBKUpCXH0Z\nmIs7npH/sSwEAM629dIPr4BWDfrxb96JdJoDdG7zALvm2VpcTA+5f4Q+CeUy\n5E7DrOQYMlkyc5BQXy5HXBnTBT0oV7fsAjA8Xsz0DcZhErb7DefNS04tdVeK\ntmCPBSpakMVxrnwmNqKJjDRgYUrF+mAhqClSXQHEhMb75FK3XIh1dhUGg54a\nFdMBzChXsO0nPq6IZ6g0gDszW4yBGG1SLRpS0Pm2yg0JOLBenQoAgveEvd62\nQnzPYugoJh2kUOgqgSYeOOHDqOM8I/zEzIXfygTZZddLWNkNedDeNMiSA+KB\nykvp\r\n=7gbU\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"d7f7ddbc4309b6a8ce5cca3772255dcc6acdc701","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_11.0.0-canary.dc9c84023.0_1617126428537_0.29221317874462427","host":"s3://npm-registry-packages"}},"11.0.0-canary.56fc26962.0":{"name":"@material/density","version":"11.0.0-canary.56fc26962.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@11.0.0-canary.56fc26962.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f3cd19f8ec032a62514a50137cc6215635695ec5","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-11.0.0-canary.56fc26962.0.tgz","fileCount":10,"integrity":"sha512-3aeMu6jgnHYoxCRs3bygUYlAP1Fp7hQDuPWuOzmEklBHmc/Cq89VZB6oyTrM5+qjSD8bwZe338G++P+6VwA3cA==","signatures":[{"sig":"MEUCIDRH8F7K925LnXDUn3A8sYzlKq8SLEU38OnY0ZGqgVOiAiEAzIGpVl7l6cUwGXyGELgDIvpS8CXCBfiNr6ejfIv99VA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgY8AYCRA9TVsSAnZWagAAJ6EP/iy95iNNbyFpn4ymewCR\nVZbcBM4xknhBUcPwGdGLl9/1Nw6BVx23ZdevWgmr/N72NSZHZqQ3VR+LtcKW\ngqBDf+VX6RDxCfdWIVW2qnsCJrjYp06TWyCu1g/KSmjedUt+8sxUsUNGLdbq\nDtgEP20ckWlj9PQA7FpN+3mPQmb5RUShLUjAQVobte+9oiERsh996waW9EnE\n1oGkHrR09K+vFUccygZ6QGBaFy0YQ0/pNZWK67GhJmzHn/Nh+qiLVg6P8vmm\nzrduPu4E6aHvh3+M6NNpQ72+fmffNR0MWl0/+qbXBlvHeXh+VYfNzGnhcJUy\nOAcHnHLdBTt1tNaF6yjcOH6b8kIesEjZBhvK5br3hy5bWZVfkeCssEBJcrPN\nrQgGvWffWRVn/xp6sEsGcEfOzbnYwjzwNeR7R6jmJlfGzv5PqocP+SmqY/uT\nes9Hh83dkEKj8NTYUQpDTiuLPIkVofaoqcZjE1HrNMJEICO9i1eE6mfvLDDd\nQWe79pSCaboLJo+t8e60YCvbry6sdIg5AJjvJqwz0pbvbo/EyCDXJGUvmqvm\nc4uqJ1PYYpXJbG3hpgV1kCQ8Vkw+652A3aIe1pdS8w2wVPHzhm0bdB2H4PMz\nA3gCIHrHlys02A0mt3cDT/LzQ1i2PwWaY6VwmWZ2ywUSJRAS3+r9fsahdvNx\nO45g\r\n=TCfH\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"dfdb8792d4ee8bddc61386ac6a8e7e216c1681a3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_11.0.0-canary.56fc26962.0_1617149976362_0.9008235772259443","host":"s3://npm-registry-packages"}},"11.0.0-canary.bc318250e.0":{"name":"@material/density","version":"11.0.0-canary.bc318250e.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@11.0.0-canary.bc318250e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3413592ae2191e83f31013839261f10f5cbdb67b","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-11.0.0-canary.bc318250e.0.tgz","fileCount":10,"integrity":"sha512-z59pYQc9CLOQZhm/6qSNnIHTcW817KBxZoOFFGn35kF5JvEz6ygekZcKh1NccFnGiZTKILzlG6rIV/9t+rAnjQ==","signatures":[{"sig":"MEYCIQDEBx+ogrD/LHNDJWXR5B4nwBI2UjqdsiDWYO8NQEFgIgIhANV+2WUriz+2/SwsiAeEqlsRdHk/s8Mr0+bS4Byp/9Bv","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgY9EmCRA9TVsSAnZWagAA4aMP/054Sx54qWbqvFF37KuM\nyzNHXlukAH4pg9PyBkh6josCuHFMMo3n/eBYzB5VU7M+ie9f//JgsJ6xl3U6\nUKJJ2MnZXaLpWZZ+yfAr4464F5KfuNicLfqxh/jPmtYjjCvludx5t+RFZkHl\nAGzHjYGDA98aW5sc/DN7xK4/N1xJYM2xwzctkkfP4XeAEs/dRtG/+pHEX7qh\ntmOoMN2uAXcM93KO4ZyKLWx3gcVm0nAt2WA0qwOLAgojAviz2kgkaNnT+g6c\nZxxLxMizryPVLWOUT5BNrh7W11XwGZwQez5g53hUbF3n8Fpy1x9JwW7B3y4b\nWFp1nFblu6AaaFsRVAY+IcekL9sZ9I8HCH1du6TY3f0/1EZzLFXwC8IITquv\nXzD3Y4orjkrUXu4PqxbFOalGNs/friKoeTBoFfKl4dB6KpJg3RO+/Ad/KUMG\nJYwt+4Zboa/oquXfTH9ZDfjLuK6AQSD930iDp74HzoE1p0HyNPiMF/yuTynt\nCOTFgdW00aIgUg6jReHp1adwdW8Bz0rh6H8CcXx1g5NnRg6JNBnQ5VRX36p8\nHSpFfIVE6nm56WePqu4YxKwu8uSzPckxmDarmkbPB0ufwpysFS1/k1JpXhU9\nxhbmLyn/G3IdNuEp9hPBbwIR40Sov32ZoiNfIGdp77xJmW6uO4inYR3RU1R7\n2phJ\r\n=4P3n\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"1de1daa9e4e0ee7a779d524a027b9e7566841b56","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_11.0.0-canary.bc318250e.0_1617154342491_0.9269614561923487","host":"s3://npm-registry-packages"}},"11.0.0-canary.edaee19aa.0":{"name":"@material/density","version":"11.0.0-canary.edaee19aa.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@11.0.0-canary.edaee19aa.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c0389b6cc922b0b9ab4255d1177e9a6331baa2e2","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-11.0.0-canary.edaee19aa.0.tgz","fileCount":10,"integrity":"sha512-PIggXkuMVLjQEbYKPt6tb36n5gYVpOsnleePG03yCUQ3pHehG4LHLFtwMdK5LuaXzku2eBR569b2KZexRU9Liw==","signatures":[{"sig":"MEYCIQCMAhUMkzqmjdCI7RaSV0wFT5trsGNXLymbsaP+adViTAIhANErRmoEFlreokISDE8GUhrP7wsd9/DUpVrtFMhOEq2w","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgY9oQCRA9TVsSAnZWagAAEUcP/1fwggV8JmqnkyTs6tTc\nAqWolvKSsYnz9wHFY/OrcmpIPMMpP12kj/nUzpcKWVX3De6ADScjTxGcnvZT\nOCrZXeZvKoMw39x3JkdlTWeUQj7DZRMZqsYzaScBSp7g/X2WfLp9OFedYVVG\n4fYqDTWUTJvQ7QqsZCR+ByRgvlQ33lu9gfvNasHeO3Lvipnian586QXMwIgM\nqGT1n/y3SKwjrYLS0CsmQJuauINHbcj9SSlmeISGzRQFhBF3WmC8PNB8n48x\nd9aqzLANE6fQS+hWkxV8mtEnLdgdDCHb3giv2LPSCWeP22qg4qdKWHVVqxaU\n56goFwsfCGIXtUNNuTyRJp09U4MB0heEUcARpSCB6f+m0TF5mIBuEmgNXC/l\nW2OR0Tyq71J1xbailfN+VNVH9wg4C+GzS9rLtNaN7lLYiKjVS/y+WrFtE2b6\nkdIQjOtkrXHNGLrfFrPz3LX0sKsZCgOmei4YjjMXnhkqAzz9aASXVaov/Zbe\n+fSfMmMvapmtB3N/NSPJEmcUEpr6Ivz9wV0RuqhoSWhZZRkSmLQpkMmTnpm7\njEL49Airw9wx/SJko6Ic2XMDnwALdPKdhQU4P/dTV5DGmQj+IyCzq0WQnxHJ\nhdWgDihzE3U6TIkTNTpPTElzhGo5nlQwQcBbZTnHVfy9M3SP98uW/XV3fuK8\n4gPI\r\n=y/4W\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"e2249b4be4cc5bba6887f28ddb9a3b9cc8ee09de","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_11.0.0-canary.edaee19aa.0_1617156623868_0.3631121088028557","host":"s3://npm-registry-packages"}},"11.0.0-canary.24609b822.0":{"name":"@material/density","version":"11.0.0-canary.24609b822.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@11.0.0-canary.24609b822.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"03e748fd1e98c3426739a70c45d5f2eb55b120f2","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-11.0.0-canary.24609b822.0.tgz","fileCount":10,"integrity":"sha512-TC5ACBY1QbrFiGQ9L8GUjP7EtoU2Wk1rLvSM8Iamm95yaMJz3fXAkyD9rhTgTe4TFr77IU9YberRyB+jXjgtrA==","signatures":[{"sig":"MEUCIEqUo+8Bz6ykVpXXZeED7SPFOizpnj9eVKius+ubMe41AiEAl0gfDUrxvDIODtyLsT9fzR02z9MqKKovL6XW/ybgIZo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZOHZCRA9TVsSAnZWagAABqgP/jGmVEr9E+iIY7UxISJr\nrLsEJFfIeK1qsDnXNVXiyobRmFsoJ6ZAOtKKg2DDQRxuLfCtf4yqLTPe3XUA\ngINa4myIeTSFjzzwzWtdHA7pUrdhNzMtY16rpSuan28lX5vKINZLY1rgrCNC\nkxz91DamFj1Ttd2YH+j0nOTl689v0TXi/iC8Bf363fC6Ve/OS91jNMAz7t1g\nO2vas+gjyFaflRxy/8O6MvlZ4RzhxtFNfgOebtvslHxm4FkohCnkG17s4AEL\nHQfezln6Nu6yUCM8W4VURSgMxPC0XEsNjtUbCyUzqAHIZ/ylLHgkP6F43HP+\nsdgi73tpur2i2rUzzjsRXUBUva8VfL+eeWLnp5t6+gJzZ1wp39edwrCs5Qlg\n6YPJBv9Nc0hLg7MoF3NNVaQIvcDhabMahR30/hPw4uvsA47wVXg0+39t7Z7g\nPAYjAZnD+u0FoDpOpLfwFXPTOPixvd1K0jZOH78bZtsaQGrIJeUULKOlegSY\nYkynezHZbgK+KOG7XlQhvA/1ezJeqWR4VFIt8F5PCLduuVD0EIki27GOkCAw\noBQziuav6ZKE3PDZRyXehKyWp/QFqn1X3P2BRO91PpQplK3qVT1yoBCgl5Ez\n+ozQWIf6paK/qcEEQjYVcT4ECkRx6vObOLeR4fPujy+b8bRnSt++z7DdlADt\n9YnG\r\n=Tstr\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"50b495134dae6937c2262389aba694d7664f78c9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_11.0.0-canary.24609b822.0_1617224152609_0.20231141601108393","host":"s3://npm-registry-packages"}},"11.0.0-canary.b6cddc2b7.0":{"name":"@material/density","version":"11.0.0-canary.b6cddc2b7.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@11.0.0-canary.b6cddc2b7.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6ea63e0142636f1906595c50be399366ebdfe026","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-11.0.0-canary.b6cddc2b7.0.tgz","fileCount":10,"integrity":"sha512-GEWP3SPN9LHAjB2sSQApUkwwov8UrPI3z3VeBz2hvr8kBQNLEONq5TT7SVyC1NbhmR19HHugIIDijylIhLHdiw==","signatures":[{"sig":"MEUCIQCo7udhEPDkZ0BxCLljJwzJdpV9RbSgXSFyMJyxNt32WwIgW80KJtndE6wKasTM7tEdTihOIAIdGD66D9f/fszZXD0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZeDPCRA9TVsSAnZWagAAEAkP/A7GGp802Fl0bg4sJHjK\nKSVbqekJuJuxXV6ZlWFRoL0hq7VGe1RgXphV9LRdyAh51RWHahiThRtI/ltB\nl/R6DN/+9Ru8FA6L8JgOebR1lnkd1OFc13IU1g3Q7vNLkElo2yHAjh6Iy5Pa\nSfAaQi4zTiUbeM3w0z52Gs8mxNQ8xeFk2PeK++sL/tuUs4ZyNMMc8YYK8hA/\nGlWLXv+s5q/ea1+rO86WI7qkgcNY2IacYMbQKj010n09fn/ONJoPXDgPRfkz\nrVtM7n+z0ClmLy6iP5evCaTMSfP/QtkzqWteNTm95rl0yH9Z0W+qodvCOtmK\n4Q3MlsoXsVXk5JbD6mzjQAeSFFJm7zIbJOcCon9pgNYvIdQ3DTVSDAFGQqOQ\naCqEq3uEldDuctE/FtoQMAygRq1RZv54TilLdyC6Zrj/7BtDT46T1jB0RhJF\nVksAEjPSfIK8+ulzVVHo7jLBg81gzL/frHtMA5Pz3obvU6V1Pw5f3qrW/vT/\naQ1i5Ey/T/rQ9z/um/XRdidQ2phLBlCtTQKetk+VlykaNkWo5uYhYrlUFUqM\nBYFIorXgTYw4S18NufkZCZnRpwqWbFLRoyvhqFN4hKEVayA7TDjaJigJhIKK\n+Tt7op1PcbruMT8Hu58n8Kq6ylmnctMc7SZdK9xHzOmexlDLbVfwB5yBDoDW\nf8gH\r\n=1dDO\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"dbd92fa1a28a9b31a1e4eb476b15f4cff38986b8","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_11.0.0-canary.b6cddc2b7.0_1617289422720_0.7688245339960265","host":"s3://npm-registry-packages"}},"11.0.0-canary.94937c78c.0":{"name":"@material/density","version":"11.0.0-canary.94937c78c.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@11.0.0-canary.94937c78c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"08e887828dd8729347e383a1e076846ccd49e4f5","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-11.0.0-canary.94937c78c.0.tgz","fileCount":10,"integrity":"sha512-Xpka0BP6CJqUE6N1Zk0zID2luXhIkYautcBXbWP7I8tJCseYImBPGKuCo16k4nJB6clb86YYBpYBvmfggON+qw==","signatures":[{"sig":"MEQCIBQfAeJgvwaVKUvaaYfIHcnJQU7Sn3o0nS33RH0+Tol2AiAL8IL0b7aw2xh3OQq8FYK7v5LeaGwHt27ZfIZwhed5vA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZjQtCRA9TVsSAnZWagAA8LAP/A2gp7TJMANxSejtEnoE\nkG0D+y4L6upX4CpPjqKJ+4g2sDR5xSxXTok4uaj+XvwBlhLvh0hP67f98uaW\n2JBpyiDaPus48r9DctnqccEXSRVGzDr2lmzrsj0+wO1QZD0y3FzdxWhIqAWL\nw6zZPIkURfVVr6U31b9tm9UKa/8W6VpLW5HBGEip/ThppH9WbLX9O7kQuF0C\ncR/NeP9Kyjpv2jxKD31Ssolr6yIEpsWdejkIydDT+eNYy0MAiDCWYtjWqC4F\nTLpqZXL1tsAGuN87G4g+52T4esQS5iu78xJh+/EV2iXtc47tU6WzTnLY+aKP\npmaVvWQ/2SjCLcbpq/ZdmCvXZR73uXkukLI7LlZJ+u0LhiI3MdhBdWPXX1E5\nwlHbZIOQ6uvMxhmVqrgELyhfJO4KL5IuWskJaA2iGN4ZrgN6rMfK6DViq3lT\nKwD+JCWTbVMR2vArjHp/3zH5QhQscwzSK26ye3dAtGCejAX7pq15PsrtU2Kr\n8WMx9/M8DFvimAAMGXlnXqPrvFYDDRNxA15OrKJucXTUx1RWCecTtd8KJbqn\np06QVPMfmaZoUHqcmkSIbewZBv8LXV8tyeE4ALVdQ5bZ87al2M1Lpy7x1GHF\n3zUSs/gpWUmhaeALISykY5QigGoC5lByemysVUyNxk7pHX3OlWp/IkJJVuJD\nY0EG\r\n=428e\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"ada608c773d2657680fffa3be444debd83967f00","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_11.0.0-canary.94937c78c.0_1617310765101_0.23327325165550072","host":"s3://npm-registry-packages"}},"11.0.0-canary.e7202cb57.0":{"name":"@material/density","version":"11.0.0-canary.e7202cb57.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@11.0.0-canary.e7202cb57.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"558e41a6a7d1bd06e499ae3198638233d2c762d3","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-11.0.0-canary.e7202cb57.0.tgz","fileCount":10,"integrity":"sha512-mfDHRQeAyYDYqJgMfTSVDgQFkSKwHFrO5xbiwe3osX5ysfd0Jpr0WCb9G5B250MeR/5vbuoJYSF/6iAiRN6tIQ==","signatures":[{"sig":"MEUCIC3NRGMSsEm4fBbhAxpxcE9JQW+5+b9RsybVBmzouUoNAiEAkDksQrlal2qM4L8hq7Su27AVj4xEEepeb0rwzV0Ph8E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZk0qCRA9TVsSAnZWagAAtssP/RPL+Id9BvWyFOgQQSE8\n5l4PkTAote80QFUVBlZdYJz3sc1sH5iOPJdSrPJCfdllUakfCg9A2nc7tKlX\nAQSP/RboCc8+ZKbL4PrK5NmJDgSKWnIUKp0gguxFyJkcmLDaH/hVzJM6j79S\nKbPAee+yre/D6WizAM0nGbgL3CTKgaI2wey4QQop5BL2acUZCMACHPWTaDEC\nYgSPYDoUcVMvPYfDxAS3Vx4vYaBMi0R1dtvbnsdyLE4lj9Y8pKBKtJdoIaSe\n8Q+qv3Y26T6B13uKwHwg6wC8oN6hoinfY+V2ltPwnGIsKs0SHQY6nS2WNbrH\nRMuymdQRPal5Hq+yd74iYwPeiCVmNu5sfeptXaohQ/dqv+t9xBdnQnBbRZrx\nRdGCQZ+kyipqrem/C/AX7DsbeqLPefRmZFno4X7ZLLXB626Yd0Rm4LnHOIV7\nFB2fCe7n6xJAi2oty52a2CCM9ak77gi3030p9Ljyu+vCeQNxYSV3RzgET47l\nl1VdVMQsOQWVDUhJMZysntWxKmJ7GHw+JKQFMJknPiaMXUP2B6N7ktQjlHUP\nHRfCcecwTKxox/CNtwrKo5QiCcFEr/84y3693hyCZE+6KKgknVVen6JfrCyd\nU7LA5D4v/KMiqdFDqpaTzYgM+Mfjvt6O0Hmua9HTX8bfyw+CJ/wu9Z038030\n3m2t\r\n=L/7f\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"113d79c2879cb1503ff12c8064eeb38ada16b472","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_11.0.0-canary.e7202cb57.0_1617317162484_0.4374256337260085","host":"s3://npm-registry-packages"}},"11.0.0-canary.1f636b205.0":{"name":"@material/density","version":"11.0.0-canary.1f636b205.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@11.0.0-canary.1f636b205.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"15ffbea0d61d0eed16ff09e52463bf43df71714d","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-11.0.0-canary.1f636b205.0.tgz","fileCount":10,"integrity":"sha512-29tYw7sUoXLllbleFKMo0M7Fv/KhbbETcTZtwuofGTknaB88p9SQvixl2n+bJFupkqAIrhwqC0a2zyqB12wkFA==","signatures":[{"sig":"MEQCH2DbP+gKlKyaTGV0oQUP38OHAvYmjvmNZtJvQRB5agACIQD7sahi/BrGQBnVFUJuJU7ifai+PTk92L4jpexl3zbAyQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZ5k2CRA9TVsSAnZWagAA20sP/0JqOIrYabu4fI1TNrMM\nGGwcX7yEux5UKe4DO1fxXjWJABfVk63niDLbMW7mDir202OqBmd3AHL45ggf\n99Ff1QDk7jBDIcUQ8bkV4a+0duk2PTJ+p5g3AYtcm51ZUvewZW23Xkt6Bf/W\nZo+6/jR+7pU2j9SCsW/MQ6kuDnvciUOSh8aF+L8A/vaoyWyiwt5pGpbReI+3\nSC3ebE0ep6DbGju1WWXgtk8nM0Xm09uds1FXuC6z/SmuyMH8/ylWkGClYxXN\n++YVSmxvRSjFbJsgPQxJ2ztS1SDXENwFlsB+b+d0tSVAQZCIdPfOVdR0vrfu\nl8rnHESVThhuL7XwsdcRDy5U8VefHyy+HpeK6t6ysxEJW78BMcPIX2e78qjn\n6AvxD72Q6B3gPhXyCyOj3oAqAajzLqSzfaeoNfCrtq33iGEtMdC9wJbe9MfX\nrNzV3iVUOh0ArA+wE4Np1BvwZ4+SpMF4STtaM/Z4qCrrW6A5GoLmJXFugniP\nk0JXg1ib9/YW+lTk8QXnexYXH5LbgFRLgvsDIuAZlNFRLemMhypopFmXq19L\nBP6eE/xiNa1p3MX9KZPKKoKV2eGQxXHq/wRuUqoqEKSJtGC5Vy2atjKsCfNk\nyl2HSDlfugw3xcSpDuIjcJ6qgxvvruIUrwG5zj6qhhgEhHlFCfG1lYldw6Rz\n6PM6\r\n=wMRW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"a523c6467be13e8aeead7e4e2e5f20c418871bb2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_11.0.0-canary.1f636b205.0_1617402165725_0.23040911636281303","host":"s3://npm-registry-packages"}},"11.0.0-canary.94f50b260.0":{"name":"@material/density","version":"11.0.0-canary.94f50b260.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@11.0.0-canary.94f50b260.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7f4a7eaf8f62f11a22e06c01677d2834092fb7d1","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-11.0.0-canary.94f50b260.0.tgz","fileCount":10,"integrity":"sha512-oghcNfPhsFDKzKRCzocRuQzudxxbPkOz/cfSBEBSRBGHmR9jbPP3WmWwvYnrW7K4S7cK8MEYAaywuGWe/azuWA==","signatures":[{"sig":"MEUCIQC7O2FjuRKNOaEp9SoZYcDoutlhN+m00ac+rSv+XOsTCwIgTM69cNvmQwlHin5DSxSSgGsuFtSpwZ33u+uVX5zJNic=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgaybPCRA9TVsSAnZWagAACg0P/2Z3afswe/dn7qOylbXi\nLtV4a3blH92r0mO0oTOxtmSXrqD6kR8W9nLj0sNpweY0NWOFsnNLdi2HO+Jh\nH0YUaRxHaga4jC0p7cQjPBCiVdMc/312dcYKzPnibfUU//bbXFoKi5zCcgnI\nzafYLURQFy5z8Hv/0LnOngI1rfdx8ZziPUXIDTPnZebkUAgO95zvRxyskYVo\ncBiPpuFAGP2mJqJWN8f/dUMwqyH3kVSPqUv/sTsDZ3PjH8DGkjuwOcnf0kiE\nsehuN7DPsiffqBWd4/wGEjZ6/5yCD/8tT5Lpt/kazyRiqt4AGjeW+uLbsERi\nhlcyOWCWjl3SvREzXyVBaOkiqX9m1G4Bc+t6y1ES72VnRArX+ynuEofNDGkc\nFG1pnJOAPsT/9saKSc8slF9dzlRVY8SeXbGrS9Zusx1pfq4FKLfSpyFJwibT\nyrhYMHaOlyMY6ci6ZYft0bbqaGDXx2dGW2WYeihI3LKjgCyzRMPNJzTtRezR\nHsLkWqQlpC/RMthrn6MTKOqXFELOobtOaGXdVwMZVeSw++nfTVl/xDupAr6P\nfFg86BspLsZMm8eJcFUwfMoMKbHvPgGygpYXgxzffYqRrF0+siKXctNqoA2c\n4q5V/BOUutRYRpgoVM9PP2+TOPsX5GFXIb3nGC6SU8IaCQkOnLqA3clKOv+U\nsAyG\r\n=rXqz\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"b5f84c677cd669d6958748a69435b56ebb640bc6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_11.0.0-canary.94f50b260.0_1617635023360_0.5892830189173486","host":"s3://npm-registry-packages"}},"11.0.0-canary.a4009b80a.0":{"name":"@material/density","version":"11.0.0-canary.a4009b80a.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@11.0.0-canary.a4009b80a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ddfb039286e9165719394ffb4884014bb92c692c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-11.0.0-canary.a4009b80a.0.tgz","fileCount":10,"integrity":"sha512-5jYWQhF6cZmcwhSuSs4vT2Jzc/f4MoYwdNPuZCuOZsR9CVcdOVUOASDYghSUmI9BnSYTJW/7SXA1n6SvNC5VeA==","signatures":[{"sig":"MEYCIQDkP4OriuXhOcPM2CQvszsJw4IyVGHRoLfXcD28AH+GoAIhALQSWplU1g2RBC4jk4PtCU0kcxysHq6ejj81DD0Qfojs","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJga4gtCRA9TVsSAnZWagAAB+sP/iLoM+JQYyZUjobLU7xL\nbrb1mtVTQpe2PMPYL0UMQUftYARPe1ZXvIJ72nX4MwyU2CSdXV7voOgzhUNa\nGJZuZCBKduHNTy8hUS9MK4LKqfaqi40faWnm76/1iNAGQeOof0ePxC5xjBt9\n5ndzIzMGtgdXkvnLHCZjioPVhhUFp4dpCyc+byiVNA1W24JWwLMkfhbV5e7c\nfX7D4H89sM40sV9C2oXv2e5IbqBg4Btkrd8VkB+8aE8nAWLGD9yxjiF2EeD8\nAnhVS9uHxQlOYpODGpfhtOfDkQvna7Ud9cxntfNRprySN/84XIhtWZzsfhG5\nKASyQqiiVt6smi07DU1NJu+qahjOGOwVIXctBsZMK7MYFHh11GSkuE6hpJyM\nHCUWikTfwUHkX3xHw86uNmF7KpgwvfsLw+U+5Qw0pUUugq5pjuzrUi/Ip/bj\nmcyjESfDobcb2c8puIqlfGSo1RFOgiINXCWubKmbRuRl4+95mmAtw6Cx3sP2\nS/sio2OC1A+aLZGOeBOMnCJUNg1B+B4tGVBtXVfH7FGsJtyg9xTss6+IP4VU\nOMKs7uPkET4hgPr9gow+mSuSrqS2xOxI3vwvoytbrfMbd7pPRoAbGzOCu3ZK\n9x0caHyeEwRrsq/omji2j9FbG+bgOnepNaRNOGPSMBKhVZzFY9zU/fj9K8ol\nJ36p\r\n=dtuP\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"35eef76af32a43b61b6a0fb725dbb83cfa5d3421","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_11.0.0-canary.a4009b80a.0_1617659948985_0.806382106807304","host":"s3://npm-registry-packages"}},"11.0.0-canary.15604bd0d.0":{"name":"@material/density","version":"11.0.0-canary.15604bd0d.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@11.0.0-canary.15604bd0d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c9659fcf11bdaa2757080b42c85e315dc770ab32","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-11.0.0-canary.15604bd0d.0.tgz","fileCount":10,"integrity":"sha512-/oGIQuPKOtnuDTa+eFUJJAlGazlAzlFbMgACAz6qNYqSS9NTE7YlJAcwxzjaB7yK/CddTx+EIX/7cYAZAj/AHQ==","signatures":[{"sig":"MEYCIQD1IjSKKgOsP7HecaY8x9q7ilT3cfodztylby4qoYtlogIhAL0vLdJSOjL/siXwMJ2YnIfqjuBOArcp6lD51yyJFTS6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJga5H5CRA9TVsSAnZWagAAHGAP/jKTtocYdfJ6r7frTqK/\njjn3dMD82zURq78I+dJhMVYFebk1kMb35E6ZS1Q7a0De08HxJb6w3x37h7xI\n6flcd6jMa1rZtWQWnWLuTaoXQRepOttw3PugRfZLxLzAw+4MvG5B8EJUF/GX\nAGVU9ArR27m5czLcXNaUA4ed83VO5uAYU66NcaoFkjuZEiO5oqLYFFAPtPsy\nrz9qyS7UuwskrhE7E8C5FOiPmQ7pccDyAA5/wyAC7WPr6MW4pvQ2QgWjjP5e\nTxCkMsyIOmJ5kBw14VsQabJlU7fMqaXmE37sjmrVCU7glyIdGTrC7aCog+Mc\nrEBl8WuIOyrAJo60DL64ozktsiB3S7DFr2Jx9aGTM9agYk/TFO8TKANI/w6R\nZesfum0BrsV99nB5LjsqqN4wvFDYMKnk2fLAfKhunBGUTVvrYFZw2B9nb5YP\nlVxx9nbelu+HbXQOvf4mjMGNFGGXBHDW5S5zTW9KRGv5yWb+A173bpgjqOxE\n5XYmXhApxMee/A/7KR1ALv0nKfhYjQQFxkF9n1VADhwt306UKg5yM0OXGj14\nMlovCHVZb0GzS9Eo/ylIfBP8YPbTEtvEHdywJQ/dMBOfe3NPj/Hx8obxnPy/\n06jNq3lZzBXMoN+7JgLXQ7yV79JxuwiXWhOgMLlW033YlwuSs5WBAJ5GRAd2\n2+vo\r\n=QKlH\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"ea3949c02ab8da1a812a2127f1fbc7e7a3c98532","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_11.0.0-canary.15604bd0d.0_1617662457334_0.6702476537568463","host":"s3://npm-registry-packages"}},"11.0.0-canary.76da7876c.0":{"name":"@material/density","version":"11.0.0-canary.76da7876c.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@11.0.0-canary.76da7876c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c4995425518a2cccc42eb2da02d7c72f8d777899","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-11.0.0-canary.76da7876c.0.tgz","fileCount":10,"integrity":"sha512-//p7pPUmGFQMc9tWsb/bEnp9jI3grZsNtorm8Cv8O2ePXBLC3YNYz9gbd4xjcu1TE77yPjNFhChMtsk3wrnbPg==","signatures":[{"sig":"MEQCIE4rjLnMRwRa2AwnMektKyewmiYAiefw9luPSNPPm6cjAiAe2ZZ5EXU2lxt8rA1or1wEJENKzYcjKyLc0oDhC498wg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbQ4wCRA9TVsSAnZWagAA/UoP/0SKPYVdyH004l3DPxRN\nHihwKZ3oT8s3/HKrkwnCHaJN9BEgIi8MU1K230cg53wNPWLfiTdyW8+8kDAP\n7Hm+QudVSHTXlIsf/00qiqRpuv3vwiQ3DbCvqSfM+IwBlN9a3Ot9yUJw2NWD\nXJX9nMMdxEfh7TyGvmZ4fh6JpibCg9GaelTt15lxYI6vyjuA9ca19htHIVke\nz0VOB2aRpSjtWIhunu3mzPXNrPxf19/ptniCYnz4B1V6tBtBbqsucOP8FDW6\nJ/D6+kejT6opOZwdrkcevMPBKqncvOyAY6KtzV4wQJKujjCCf4EPEa9bw2x6\nNqL3dGtE68wrjgR+xlTunIGUqeK7IjOcpZWZVV+oCNojmSTAXWzNP98aA7E3\nX/xu6VBJ8x0LBAfrxv4uQaXFnW57ZN8AFlK9yhd6IBnq6R3yxzkN0UFQLr05\n+XCqQw+qnTvxBN9ZYgONOb6012Cxpsh+Q3y1xfvP41BhMS8dhJNjpMM410ac\nCMptOnGoOLxJTbqtkcEPp8TI12XCsko8U3G3LRWoImzWCteieD0hen/PiicB\nCkcd1fLEZ5TA3o16RU659fOt1vwJrieUa9DgTWB76F3bfOTs5E5xlSQeU+8S\n3wz/nowzsOeKd7I/NgVo7t9LxcjTBXdhr3CK7wrIq9UNHKUaV1PyJwuofxvx\n8Vkw\r\n=k80V\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"4bace63831a45c0c9e6f786768b2aad0d79087f1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_11.0.0-canary.76da7876c.0_1617759791767_0.3519048151792272","host":"s3://npm-registry-packages"}},"11.0.0-canary.6bcb6cbd2.0":{"name":"@material/density","version":"11.0.0-canary.6bcb6cbd2.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@11.0.0-canary.6bcb6cbd2.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6a039a20a6912397f286c015dff82137089c9a30","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-11.0.0-canary.6bcb6cbd2.0.tgz","fileCount":10,"integrity":"sha512-ZzHL+i5ZNy5kHLSwPdpzTR/WL9mM3ajJIzVAtRgmcT1bE3jF9zwUSu7ZLOwuxfWz6D74x+sjHN0GRg6qHTf7sQ==","signatures":[{"sig":"MEUCIQDApw1aXkn1wmqU4P0WmZWAyOWftFRio2VILSbVGCIAzwIgVWhHHo+vJq9YCgHFvhiUmbGL374nuPcEfA50JuUrEjo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbf93CRA9TVsSAnZWagAA54kQAIz2NavQtd5jRBHbgg55\nE1/lgK0I5QGdnLrweZSW05pb5K1jg/Ietc9OrLvKxS5SFhkGgUMkkKDpx0d6\nr9bnEOCElIWm20Dh8Ecci5k5ibPVvkoT5oNO9ZVGHzhNljwYYH4nG05F1hKN\nn0uJlg+eticqkHM8wLQ8gAU2gEsdVWJ3z8nNOl8vKoMV/TX98E+jQ1VWoUZH\nhOLfZp/Vmf7UU0mg6tny4oESnvfLosszQzy8ZwM779zOJdCiQx1OE+ZH2dPJ\ng0K16nnj3HjyRS+h80gQJtcEwzDf/99xIPl4I1XMes485d6pwPyYZRSqz5Ya\n4JGp1lrT3xzbOaneJ2uUuw/uEkTzzsl1ik5TzTqzZKEsicp2i8TKMGzAJxBz\n+EczPIycwK1yewKr5FyIfrfbXzCsxo0nltBPWOk+/TT2idvN7fDO4PB9GRWL\nkEsChdi3h2JepYGNrpdldefYz3IUAD/lqV/YMNCU6BSWdSq9gyU2eZhVH+9Z\nX2e7mKR5L5/PPziJQ14AlpkM4FXkPaiDPqxtvaDInlHHJ3Mjz+o/EZnUVuKc\nVmicu0CH+9x4rijRPAme60Xu7k4LjGPJIemfNWjxk2BzOZwEHnuNrrlTn7O/\nMmmgiFtHa22szHPjGfFUHS7NGOF63Mg4hgNaNhct6Gyoh/XJBxRdkv9DR3qU\nogQL\r\n=G7FG\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"f3ec57093899a7f082bd51cae05b398c31619392","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_11.0.0-canary.6bcb6cbd2.0_1617821558975_0.007640233625945569","host":"s3://npm-registry-packages"}},"11.0.0-canary.c91e8d141.0":{"name":"@material/density","version":"11.0.0-canary.c91e8d141.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@11.0.0-canary.c91e8d141.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3e65bd00e8c3e2607efcf8b5a5f0e9080b77a13f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-11.0.0-canary.c91e8d141.0.tgz","fileCount":10,"integrity":"sha512-wyM1cN2BA3DvDYrit/mPPz77orYM5sL1tbX3hJnnT4KKFAMr7QZlRkxdHCPFmosjA7zZygoAdmIg7YbD8/7ggQ==","signatures":[{"sig":"MEYCIQCVcB+zy350tFo1tVkp52uHj4PEe679yid4TX2HA3jPoQIhAOsl3QN31R/0F9WLP40hXTcSluSb63Eg5sz37M7ifrnT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbgBiCRA9TVsSAnZWagAASbgP/jce32xxcAFK1DLi87XX\nCfUMS/+qIw3Wk2XITWF7tCxdk5k3rUyxJgO2i/ztPtATbwM5zLckAo9X8XYn\nEuaydTf79eiiAMyIS3c4XWWZJHmA1BFyW2J3ao548lOBXmqaTzntrio8xvhh\nCnPr8HRZYXA3yERx3ga10ZzrifzzpCCE111hAEp+hi/EhSGNuFetA/zbZRAr\nvypC/REN5/nFYFX1d03zl4uSPbCFR+zLMXebPPSv836H2IlOAQ3SQ7gOOGaq\nIzPszmOdrbL5ME8D3PbQmDlpnHrBaYxVsWoUY4kGqgROi/0YMR5jqdHl9EEX\nI7x99qjKye82cQlxrzJQPgDW4E2ijbjs1goQB1BIXJR6mQKgLqgA04HT7sbf\n5ePLIfVylKT7GrH8b/KGUiVJ9cdN4YNEpjzhS7kg2JI9amyCCGud8BI9jZAk\nSESJLUGKnfLOTnw4RyI+pi5uKM2aiYet/ddiiur1smciq98RytJ37MiEHAU0\npnu02A25gTD04QqQen/thgrtNDrmrmySUid8LLpimG1YG8BRBkX7TBRUzL3Q\nz0Egco+95OgzXegMYa1c+iNrD22vECxMk3bw7XunOh3YV0h6tq7JbUbUFaI8\nZvlZYmQA6xauwKCjT9A0GxWsvDL8wI/f3NJ2ANOSATVCA6P0r4v5oB2aHuHB\nQmXB\r\n=O357\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"b13009a2b12843e6eefaa0c3ae66fc519af7bb29","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_11.0.0-canary.c91e8d141.0_1617821793900_0.8933671544676518","host":"s3://npm-registry-packages"}},"11.0.0-canary.f77c50860.0":{"name":"@material/density","version":"11.0.0-canary.f77c50860.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@11.0.0-canary.f77c50860.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"527fdecffd99d652171cf86184df986ed1020ba7","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-11.0.0-canary.f77c50860.0.tgz","fileCount":10,"integrity":"sha512-wmm79uUiJuTlJEcULpYDgawBahHVwOMcOWI5S1CsOviYSgNs2S4rzZRPwcH6DWgsgxjp7ZY8K997upzFz1xqPQ==","signatures":[{"sig":"MEYCIQC7CQfg8yAzy9LwyGqpHNEFKEN3OI4ncreKNkJEJ9wLeAIhAPxEWXvJeacg7w3kF4wt4ztvpVqeyBdIDWPywrjiJgoU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbyKDCRA9TVsSAnZWagAAvowQAJc9jZldvBbRGlPw6OPn\nBYsZHgbMwgk+pEDCVHvsTMAIkphGq7LQjgFJZTEghigFo5nXp/WBBuu3nJI5\ndbtaPkgEXaLgfINhgJz2ekLwCb2B1/2eei0DLohP/Z4d+c3R5nLYIBuMxuES\nMmyjfoO3XebsfGzWkWVcjVXz/WBf/yTsa3M3Glt/Mp1mCT2RK7p5Itulpd2j\nalQAIu4xTNUyrnGY4cfqdUYz83CEBjjE8B/f/Wsn+PDy+eTM4Qo9fcC8yFP7\ntOFhIDLjPTyELicfJUsPZtVf4tvxSrgGq1E+Ikuge1NmzdfRSP29+YpIXK9V\n7fUOS1ygquGHlWSOiEpPqjrMLXd3Yjtr1TMfOTus0gKPbQJGMslS2x2uC92r\nEwDgyOGBBz3R9Yktp58IXhogIbYSWPtruUZ41Mx+Za6Sh1y/5v3SsI0Sbo9Y\nl4S+Be4/MUB483wIwgm5/sZ0CnKHPXbV5eRK3vILQhSGBay9i+c5PjTIdm9J\nq6ouzBKPTL0b2Q0MHmVkKRfiRxcKS7gQkoHN3H07bGvz0RboXPAwOqgEq1iL\nvHhIYtRJ9tj5dwGN408pqDpYMHVPQ9WLp+Y1bppt+Dm06oN6ux34wlVVmUpL\nr73DPLw2L+V94SO+no4pJSi+LsY3DK9ScSUc65rjeoX08+eBOvs/PLpHXQOV\nsSEW\r\n=AXAD\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"d35db9665d4a8a4f385b134c9c1a23bda8668fa2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_11.0.0-canary.f77c50860.0_1617896067489_0.23977132228927545","host":"s3://npm-registry-packages"}},"11.0.0-canary.367d88bdb.0":{"name":"@material/density","version":"11.0.0-canary.367d88bdb.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@11.0.0-canary.367d88bdb.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e076a3412608141e5e0a52d92c80f621ce7ee055","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-11.0.0-canary.367d88bdb.0.tgz","fileCount":10,"integrity":"sha512-HlEOApR5lIi461a3S62I9O4swBEiYEWHRQP3Q5LpRwhPQAxAq6MDdfU993LsNbKeTwtIsP4egoxWJ9jFaa+yLw==","signatures":[{"sig":"MEQCIAJTUs5VX9oCafCrBAsPwQwx+El+rQz5u2R5wP8RvOgCAiBoSER6tJGdwjr9kNW9ibmbHGsuehCcVkjaTnMz0XDX9A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbzFDCRA9TVsSAnZWagAAovMP/ikN7f2Mp/7/2zeaFXrL\nfnLjt0Q1+5WLS6qc12kjpSWkyzVodkt6ep24mtmP5NuQGPa6MlWPL1Z/0b2g\nBv9WZayoE3yeeV3AhSEBvl9/rO9ZD3z1Xcv6FTXGFIP8QtH+rAA1KIJJacUo\nlG44C/5IEJJHwGKnISF+xMlTA7GiFLwYESCzZ6oBTmFcb8v9K5ULNs2Yx0Q/\nMpaGzEeav86JCSEOpoBksJCXGaA/+BavNywNshEL4+NDmFkiNDGaZ7Kdc4w7\nxlEcblUYGFIDPAcqXWMXCBmDz6YmryrOFf2XBlGLeybG8OjoZf80aKRjJJB9\n3UTrgj0CmLBdnAmUdNULlmNsLFFh1Y05c4gYSFAyDdK4f+M10dbiYy195i9e\nyLusLElzKjScP7XbbBioa4kVCqEBIlQCqH8OdwqAE4Z621J6Qr/ffU7dbW3S\nd2qg8o+JxtnVZzbblFyAVCanKUJReIe/j3+QR0POAmoNNcPojsi98mzvtN4M\nBDI93wmAhMVezkvqIP+Y0LT8UjQd7xHOU6NNTxZ+Up18ymE4T4wl8uL1s413\nGgHu4LuNsmBLxETF4UmG2p8+9XdQgOUejmPXKZQBVhlZhMsdT1GQ/6HA4gkd\nMiGiIOF4yaVWNv2DXnoA3MHDzP7x6DNBfz5caMGtpp9T5zMgoQ/cQv2tqvlC\nBzvx\r\n=8n6j\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"ba9cee87fe351c7e76ccb32f2572bf3ca91e88d7","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_11.0.0-canary.367d88bdb.0_1617899842636_0.5397492991613868","host":"s3://npm-registry-packages"}},"11.0.0-canary.0ec437d3b.0":{"name":"@material/density","version":"11.0.0-canary.0ec437d3b.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@11.0.0-canary.0ec437d3b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"39c4e6f1ac387e2eac532145846d1c1e23cc307e","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-11.0.0-canary.0ec437d3b.0.tgz","fileCount":10,"integrity":"sha512-T3GzZ4vD9qzx5oNQmb4W0X9S7+NQrVb8drYZJEDkii2F8dtAJnepAcnIN8SPeQgYsvgF/M5+qv2+CITr/OlyWA==","signatures":[{"sig":"MEUCIQCWLV/bAJLa7jS0eMRX8evaZN6vGYm/bQc37+uh74v3JAIgLxV7Ew0jbw0E9tkopDeqlbRMGNEqvT8HDOpUUfZ/KSs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgb1q2CRA9TVsSAnZWagAAERMQAJidp/e+N76PWssg4vo/\noDUoY20S9CuD08R/QvfrxRi4JRDJAcmoTo97XOT2962/4RF9hgGDcyRCe5/H\nSytCmkXf3EQvc6deTmPv2k4cFunqUrVbKhu3M0Nc2aCyiHrcjq2r3oCgHZKD\n8s5l8LVdyPERELB7Kpmlb9qMcPwLUQweN1bFuSdwslCvkTT5kt1/QmIRRPMd\n5YKfQj8tl2bHrUnF0zoHFY5fCq5rZCOJ2a2NUZnuQam+08CheUbOQKezEraf\nGbjHpaEMrQ4BV/+HOzkttM5jDz/C1Wq/x6NpLfhLv3AMArnCobUrvAb05MNt\nuWkIzfukg2G48S7LBnWB46d9Hgx3rzGsEBaEMo0rWuBuEeM62XBUxB/vSnQU\nMaEAMQ5RGUvkWFGeMwucNf2O7FXkfn5MiR5R4iQA/lWcFeimHXUemjpbZruX\nFykBZ30XgLmM2L0oBy26FEfpFmnAs8JGHkZ6YYf0ajA0Q5ajz2a/kn4u2oQa\ns0+QzBwfOEEnpBTPH+HxMc+NQwyShFfZ42vpvZbYcfR2WB82Kgka5VwQ+55n\ne3jpYFeTjivak0bzFvIRpOmLDCFV+p3cz6CfQWkRUvRHHorCxgi25vlH6M/d\nh16RSpIkZ7ZyocW95keieJV9Xe5Pnf6yFpuROAs0p+kvgzCfXVCjv8F6Ipj6\nDSEi\r\n=rm2n\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"50ed2429a570432fef9747a954d7c31d2dd11f0a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_11.0.0-canary.0ec437d3b.0_1617910453762_0.6816886833422866","host":"s3://npm-registry-packages"}},"11.0.0-canary.b2fa996a1.0":{"name":"@material/density","version":"11.0.0-canary.b2fa996a1.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@11.0.0-canary.b2fa996a1.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"070e3ec4feda29e40ab2bfb7ee17bb8fc18228ef","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-11.0.0-canary.b2fa996a1.0.tgz","fileCount":10,"integrity":"sha512-yZgca6y6XRrciZW7q8UlViu9M8fathKdK+8hBJn8KgmDUZBd4VLJLwZF3QBsWy4Wz9btWFZg68H+8UioB9f36A==","signatures":[{"sig":"MEQCIAIOThpodNsxyvmqYtvmxDsaq1NsUssQNQQOhXWDE9wOAiATr98wC+j6n8HrKjwGc5UnEj/loJBbfP0PBRohoWFwYQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgcG46CRA9TVsSAnZWagAAxowP/i8YEB2iYmhCPKUWrJnQ\nDA+tq6GAsIPh3X9TQlrRxAkUOFG/g0UllEePjLLqPRV87tk5ijIsbs080Qkc\nODQDGM0FVR+Xbj7M1wM/L/3DgQvH6CPs+QS+xiPnJXU+WQLQqXs14xVFs3Hy\n82jyjzDw+PaCtOx2ElK0qKzfJ/ostr5s4oCzzcVQaS6kxymedLZ7XZUod4xo\neBTkauECcOe17OGFY8OdKFQBGIn2e6Fbgij96ZuuLl1AR831CVR+fDcWmnPM\nNcqMLP+2hl0PeMEwwLIFDlGk1L7mtkSsSVVQ/CCQq1AU0jq7flrHVGWGcE6X\n68s4EgP/iNAmkOth4Xsxa6HQNIkzytUTvlxfJ15MsZwWT+/IKyMlKsnEQUrL\nUvMEOL48f4Z6tqjhgsQeBmXyFmNe+mnV6FzrnFyJRqdzv2L2WtJefJKQ8qjP\nFgh+U9vXoSQagpvyX00fLRKNL5erbqoyrNOc/FbdsJ46XpBIqVpuzknXJFKR\nLgtsSX+Nw1ea18ME1LJjNxoWTA3IG7O832SFcsHPxqBj+RJVokuuryZ23g0I\n1E456MyHVt4EwXafw7HaDygIGTZKYmbHHX/hVIFTxjO/KucyI4kKfu8bY9q3\nFvSpwNFbs4e9WMgWe6CRMQW0PI2DfgMdPvoYZQqIH1Yhifey4CGPe+so+kS1\nrPyJ\r\n=DmG3\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"0b4eb5b2d30d6d9a7b20f57164a2beba3c20d65e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_11.0.0-canary.b2fa996a1.0_1617980985923_0.5443260571161135","host":"s3://npm-registry-packages"}},"11.0.0-canary.24255c408.0":{"name":"@material/density","version":"11.0.0-canary.24255c408.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@11.0.0-canary.24255c408.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b91ff0752aa915ae7f68c513fc718415b1cfe058","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-11.0.0-canary.24255c408.0.tgz","fileCount":10,"integrity":"sha512-PwXWcl6HjKEJ47eX6ZgSNJKAKOfPMUD9I7JRRVjRNTxu7KPA9UeuNGPON9GyIwRzIllLEI6nhtQwMPnapxacNA==","signatures":[{"sig":"MEUCIFRNXNf9Wg/HamYCgPICfjIAuL32CCnqIqMQ1tDtttF0AiEAxyfyxOq9oJ8hPClS0tUYjIHNYukuaJnCUPsG4ilzxeI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgcLTTCRA9TVsSAnZWagAApTkP/3BBneHXZGEEtqBGl5ZZ\nMJFvSxc16apK9hX2GNcJs8yCoTbTfKT91GTAvjXTF33R8RrmdQzbFDyTNHqw\n5yuYmYcWQcrb7lqcbNhmz8drDu3OPHS/KDcwfEl629D6RS8vCOD57dxweqWv\nI037Mg2lop/EOWDWCn6ngZl0PKxPP3crzaZF4x3pJloiYBxJ1hGmZNxQ5L9c\nMdS7qhQHEIgTwOvlEUJia81cjk8Iukaao/7sHSc0C6kdPpfTZBVqjPRMJw/n\njzXavU01aUrOfJHZhWV/UDvVfC5s5erComx0XjksIj4/3+xMyckgHmTfB+xW\nqwrew1YCdEJ31efRGgNsH6TeRNcRfZmreimeDUwYZFiS1fpEZbWganMbA1rG\n0HbrkaBYfN1Tn8nwL/cufGucJSZadNywHSoHh94J3kauFBsbetM09deKKJGp\nqMBb64AC0QZI5bwYBwWsmBSuF4WWto7nVYrgN85Cmik2mCIMXqYSETQVuOZc\n8sNdWn/T1vdCpHyieqWs60jIanDlpY1HSTn9r+noDpPWRPlKv/5N0xFHHBeP\nR85flwiGMjZ8XmuPvYspkXtjIufYtzb3UROQqOceWtx82etOK/71n+nBZcA3\nG4ZfmS9f5w9UdDekA8rUh6ErIDI0jSgHQ3h+wqL99tWCozjFoUv+N7EIpGo5\n2Ygh\r\n=k51F\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"5cc224c5482fd736af03872db458f031901bb693","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_11.0.0-canary.24255c408.0_1617999056943_0.2177334599735452","host":"s3://npm-registry-packages"}},"11.0.0-canary.7d6a4bb72.0":{"name":"@material/density","version":"11.0.0-canary.7d6a4bb72.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@11.0.0-canary.7d6a4bb72.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8ab4478a1c17ce88ac60545f5c6a3c83d8698cb6","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-11.0.0-canary.7d6a4bb72.0.tgz","fileCount":10,"integrity":"sha512-9TaQiuHbMUdxcufQuvUD+PZfvW8gzZTdw59XdCbNb0p0qUtH22ipMPRiLO1gF+d59q1kdzGUbZSzG3j9+RTlCA==","signatures":[{"sig":"MEUCIG8paYdKLJFEQb2I5MG0vOWGwwIpzY+/nnumtewN1bQlAiEAjxJl05uDlWrLLqAbvtei0N6T7JE209EQJhSoR1kGPtM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgcNqsCRA9TVsSAnZWagAABVQQAJO4iZnF43FBNjJRVCft\nHCSEu+RP1/C5E9rx6R/lTCJeulLPbCWdCvzpC28d+oK3n90sj91wySpcT4IW\n9x6ESBuKUtspAVCr2G62ClV0kfZ4zVfMRxDYW71VDnVeZRBZXdIXfVJWFgM9\nPQOoVh8/ZCMat72yTPjq6Yu2GiYsXOyS9W6jPq1wxij4wpCpPgKJS1RWRvTt\nygHIUS6v5IAKjpeiDU7S1jcLg+wiaqNxtVNTphy4LjuqCq8E0MxEZaRGmbZq\nKKIUe2H1X7ocIN4JyI48sDkHUA6lQuZ/G9SSsdd7t2tSz59duwz+ZQeeZXhV\nbvkYnS3HMJ6JrrNGhv3Jwayar6xkmpBnT83dsA0h9+zUCDtSBfxuMPdv/2h6\nhGzd+wT2r6JxiTb7NeKn3LSMZPRHuqgEGo2e3iW9/vQPAUA2Ni7PZMY51HlG\nBpiif2uXQjuEgYIV1dhE0gw5JKxceodqaA+gX5vklbw23W0bB8z/0Ae2lBjC\n6gKa0N4kDQCVnBj1sbFBGJWc+NlD4nR4Xnxks1NqPlmbTP4XZ8FU/13J+vQm\nUp7E+/4+4Z1FgoHiJvYW0ls+wkzsqY38q62wUg+61FG/qkhxDRKYUENKKKaK\nv9cRXdZV6chmAPBKOJQZVo0ux3mXcIyjMnM9wuOqTWDj3sG4c1RVdETMq05K\nb6Aq\r\n=XZrL\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"1e1f0ea898fe101863062b7a760600cfb1b095e5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_11.0.0-canary.7d6a4bb72.0_1618008748154_0.3003836978882486","host":"s3://npm-registry-packages"}},"11.0.0-canary.352b295c1.0":{"name":"@material/density","version":"11.0.0-canary.352b295c1.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@11.0.0-canary.352b295c1.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a661e2b632f7adeac3751342b0eeb6a6651b93d7","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-11.0.0-canary.352b295c1.0.tgz","fileCount":10,"integrity":"sha512-920rIGndRf2SMpKZukyr+WNQKt7/chP/eLDE1TFWFHrW6XeuHhH442+OU6cqiRR/rYV2hCnx5aemGk74mhiHPg==","signatures":[{"sig":"MEUCIHPlk1GmADxrsmsIRMXq/287OA1+QvSurYs1Dh+Q+XFeAiEAyGaCeXQWGudRLzA/rdP9Mq8YvF4THlmAcvPJph9f/Yo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgdI3+CRA9TVsSAnZWagAAW7QP/iUmziWJp9Kz8Svnp3VT\nZJASNr0A2WpAiLAbIIFpk/uw95WeY426/mD0RoL6ROn1T6D63L1K3t2a1Lqi\nK6ZTodpTreauLRnCxBj/cZfZa12DvF9YAMr0oORqmEHmatTWOsE4zFBmZU9y\ngiCR1ghPi+bbw6leH3VXMViQTpLb1RHKKnkWDcr2XHE57Av4x5qIJULDqCe0\nwtgXP2enAzzP80CSn/kX6uPIPA0rWihjtW3VKW1Kor7T9TnDZVo52BnH6bfA\nqlsnGL2BtDqkzAU6ZaAP8uAIr22j6H1kgUVUFUvDc9X06aSciPtaVcBM6EuG\nsDwkQX39WsOlesI3wKIO1FawGNN0PK9AG0nkNh9Rjpudqr9pBxZKIk/TGllR\naPNrvJuUckVcdjtFO/BQwuY+r2FJWB/pBObX0mqfWmAuEIw+qoZ/0ny7kB2m\nR5m5PiF7BEPV4j6TSplEFiq8GbIoMlVrg7k3pMiUMk+lreoRjmaVqC5p8uk+\nHLK08Do+5WgOpv1wTlz0Xeqqjj9TlxscOpscLLnpSpd0ovTC5yJI0ffRPFj9\n3HRoSvZlHuXmhMAvHr+L2f1DwkvAN4VgvOem4t5GjwRuR5AFGaKE0sKClbQ1\nfnddUR8Lm1sg4IMRfPkKVc1GRMjdUaKH0t2zxdm4rw94DyLFEwn6wAU5Gv5t\nnNf3\r\n=uuEG\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"472a00ecb08e85ff1b602e3bec15d38f2a028f69","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_11.0.0-canary.352b295c1.0_1618251262298_0.572075280727921","host":"s3://npm-registry-packages"}},"11.0.0-canary.ab99b8064.0":{"name":"@material/density","version":"11.0.0-canary.ab99b8064.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@11.0.0-canary.ab99b8064.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ddb42845aec823e35bd55824e60ab334bba9189c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-11.0.0-canary.ab99b8064.0.tgz","fileCount":10,"integrity":"sha512-qUVGDlmryiifhe+6MboG/EpgU0JMPCDIXw/pQwaI1I/FZFb1h1fLUDmC2PYVgbVn05bto2FIT9/IloSp5ww2qQ==","signatures":[{"sig":"MEUCIQC41GCPdOUtQtfz6Y5LBl91FsL/yvNK4k+rI+TMqqZoawIgBmmMmzkipbdvdJIswx9ahaxXD2oSrK02KS1W9H1T6xs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgda3DCRA9TVsSAnZWagAA7dkQAIUsifhl9S6ZuHegi34e\n+kH7tkjRDxcbAueCCSxo0XvZQxtcMLMQec93UYPTJ7BkY/4rwBqfzkluWqIl\na3qXVi7MOUKgiecXTzoT6msvz+dPqmL9MZg6x1NPjMhhUGubKxTEHC2VXCvq\nUGacq6MxLfMCnBycKA4rIAQKAVGowecmCNiPG4KAN820X6Xy8zCzDB0zCVZl\nwUhnPPkzOwZ2JWetFw4yYQym9NzwGV8oT39qNRtAYaevg/4ufMzCLtCXoXHn\ndaBILf76uh0nyq9Y9D+wIuiWq36FNYpAPx7oJ8vuruWjA7WIDtKjg+ZC2ooq\n84OTthjvyPpL1Biw2umf4EJj6cdLmY2C43DOCZj6Ud7cTKrnwHQLT5hQXhq6\n+Ox90hlQuswIZRfZCJ6iaUVtiTZOMaFURTfmpjO1d2BLIZgi/O5D7fWphw6a\nw7P0Gd99CZ1sZidzhe9M6fpf3ENHXfQL1a0mXLmWN1aCwdoqp14RBtfk6b7P\nO7Uhj9shgWMzbTNIwCN+n0fH79rfEJFvbPdO5msiqwjpr5WCLY4tXuUdfgCd\nOAwwZADA/bBEhiy/clhidL/rrXhzQCGZ9EovRLkcZGfZ30hilPCy+BcmGhzP\n3fCwK1faLj465hzCwLQGD88wsPLtXNV5eWOefdPZ6xxyhNmqVeYM7ePyU/5T\nolba\r\n=gtSe\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"7a67c09690e367ad8ebdba2d551f6432c20ccccd","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_11.0.0-canary.ab99b8064.0_1618324931066_0.5398589092197568","host":"s3://npm-registry-packages"}},"11.0.0-canary.8f0a11e32.0":{"name":"@material/density","version":"11.0.0-canary.8f0a11e32.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@11.0.0-canary.8f0a11e32.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cc1a2a49c2869d01db8903361d9688f50b0d6cf6","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-11.0.0-canary.8f0a11e32.0.tgz","fileCount":10,"integrity":"sha512-V3w0E1F2bHW23GhE2h2z1WmGJlksmRS8sODwLPDy2h5cIi5R7Ui/FsodUkTqPYRyEddbtxnxh3NU1hLIwefQIA==","signatures":[{"sig":"MEYCIQCIKHzdSAQBc9A2XWVzv37mLDJlbsANchdY0F5Dt6jLLgIhAP8p3TOOQcfPD0JgJ4vOJQCIu2XZQf4qZwY4pd5y2N+e","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgd0owCRA9TVsSAnZWagAAyzoP/icD/omeKdX0ALNdllS8\n8PGUa6M/piWnAWN3CxMwnKoK8QVgoczAL9KH7sGifL7SsZXoZiu+vDyJseRW\nzNw6ZV9x0hZbwFJBVJv1ixM0OniSQmIrlg+b87aN6KkMZ8oSAaO3D0CebHrP\naDa+d7Dl2d1OAzqsYBPWW5yEB1/Px0cVfmtLO7tP+SLLoZn8ctMDJvVn8MwM\nKeFxtWSGk8Ic0Dr8W/OGRZuS6fCwF7NY/crKF1hLoVzMTBaNSosWojRD71hx\nJptRHWzORoOzrP5FGBoxxO5trjxQDr//dwaw65X259cyNVONdNfCd/OYsoj0\nKMt6zSAl8zqyKFnr1m6RJKoTolTrqKLOajN6l7BsjOgwlROfKmjEgNes+lxm\nhQ1uN51xMWNmkIrWWlsC1MVo4cQsoxZxTsyXcMKWV4M7vIQLffQINwoAVhAP\nN3KBjejKuKOReespQr09no+sL0y+p3D8AARLbdIJqLanm18RAGNVsziu/bl/\nftb/IuPhhk4xCC1KfflRHIAE0AK6OudRBtXIDgUQoOQaDyjm3ZiiBSOKxXvj\nB7mEoI4urUhnhcqQSyOZraqXUrQq3HMOK2ClmCT+dhxBZqT9qSm3UF1GrIWs\nkVMjdHahaOD0zzocSj3+V/Em/nEN0Kx6oqFsA7vbpYMKg3FRQ1gN13FAISlP\nkLRz\r\n=BTrb\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"f09b2c0c350e2f684e84766c95eed5c92b5afb0f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_11.0.0-canary.8f0a11e32.0_1618430511733_0.815173301595586","host":"s3://npm-registry-packages"}},"11.0.0-canary.f5c6db8fc.0":{"name":"@material/density","version":"11.0.0-canary.f5c6db8fc.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@11.0.0-canary.f5c6db8fc.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"026612c207d5d4fda4033455f277aef96d9de0db","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-11.0.0-canary.f5c6db8fc.0.tgz","fileCount":10,"integrity":"sha512-j3lBByaGWaSv9x01mjvAfaJXMs/lJwLjtBBTopIlqQ9/KAi+AUIlgI2SQnAY9NBw21/jZczUy37yKzHkxARuvA==","signatures":[{"sig":"MEYCIQDtQCY4ZcTHEI0ahn8OXGrH6K48NviaV64vx02JQoDHFAIhAME8luQTvo7jZqE1yQl0aAT11r3iwMeibCDpnyQfcJQ9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeH/JCRA9TVsSAnZWagAA4G4P/R8ErpiyRwLJLaLHxatr\nZhWuDemct9jIL2Abi2Mazsi58oAmyv+OfnBG90q0TjKgALdmyVirQjGQiYuf\n2BU8t9AtPYVGSABbxHLH/V8XYCiK2LFhP8zkAlYzTbTDUZLiO2Yhh/02bQSK\nZ5aJWSZ+zYRkt2/BWSxP3RNnDqdIMePtjfSRjU9xXqPG6E6i7nsl5HD1VpZa\nJFlkFIEzCDbplb4eYuzqs+3k7IT1N7CSE5r6D8n9GOH3dYi4MP8MXYHYwFgL\nxkHx4zPg7KoGybSlZNaLjv2lZ0kjW9J3L4V+D+M6deARAa2jwO7gyz0vqFAk\nhY/jFNL+c5Pfnu/F+RnUCe4WZhQ5nDXs+QIPm84a+/7SF/8evPDyn8JksViF\nYtQUlPLmjJLVCWlwtSSQ0KLWmYNcoBd0c7mDecaRxxmTB5GOnY7SVSKl64SZ\n1RArBwsWOu08uY5Cl81/ipRYwOTK1K2EQgFNIasZTcnLmZ4dbC82E22a7bvd\nhJS7+qoX0B3yfAEG/sFraV0Ded0BP7ANJoR9IxI8sglxySvtXUreCoy4jPcd\nZjwu0QNT6iTBrakGhYiIsgu9NYrT7+hYh5w1byBzjX4c/yxzjUQUX4vElti1\njv4JnS4mUvkqtzjUXHBb7Y40fk2WV/CZZKxjeigzssgGsLXFH9CvXz21W6xy\n5BfB\r\n=eQYt\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"eddcbd64f4309f4bf5faecb13428405a28774f15","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_11.0.0-canary.f5c6db8fc.0_1618509768679_0.8074092420508596","host":"s3://npm-registry-packages"}},"11.0.0-canary.3793a3143.0":{"name":"@material/density","version":"11.0.0-canary.3793a3143.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@11.0.0-canary.3793a3143.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ddd19097dd14b6b5a697532d58731cd2da403f22","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-11.0.0-canary.3793a3143.0.tgz","fileCount":10,"integrity":"sha512-oyvA1uhQSR8pLgoRrcjvFXKGfx9eeD4Qy7FrYQp/F+fKGuZGZvRsCRby7gQKxDjlxyCyRs1ZJeSL49uMsVzuDw==","signatures":[{"sig":"MEUCIQC5ZZoti0JPcR2YpQq8xqAHCin1eagbm91usJJnXHFa0wIgAu39pxwMQedAM2Jvxw3oFFgzypqAMB0r8pnTkEKCS3I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeIYpCRA9TVsSAnZWagAAGngP/0QCmzfhw68YWxZsdcrJ\nmPQN35bGsw2b0+OD681/tnAzRk9TT28dt5JdOvR43JHYDElxHK1DUlvf4YCR\nR+B6la5ROb2vT5oIURQkLK7dX6GGGQ2Ro7yZADYEOGHdyTTGodFG6bk3hkPp\ndmTKlyDepRtrr1eg0ahpcLxX/7xrzFrYwuZ2GGhi5Z6OwRWtzhOcXWfBpH82\nz692TpFKalezNjqFP/evPQCd9+9qKxs7twD5w8yTABWYYQdXgUCDQT/g+Xyp\nLBA9i9vsuqfvtFnOxIGubaj9gVd2lsTudGVNeEINeaHVfzyH3p050Td77/bq\nqQhTTH/wOpiSP7zGijdDadBoESq7Xo94MPyxWKG1z7hHOupNleBDTRt/77kW\n3u/YPoluL6f8tbB9bojDQPIzK8UjpfN7L36FlxW+PfWLmJ3IhF7hwuTkNPCn\njQmnDQ/L1xAJxELB1FliL9bd4Slshhp9cRqCOa6ak2O+SHZqw5uC3LQ6+uyb\nLrE6/wW21CidVcJpxWN7iw80pRNkmpnLXvEnke+RPIlgg4jaSa13jcH0ofN0\nU/bhoT9gQpeVaSfTLz01LKOll7xL44aXQgVG8gkVwetdwpw0a/b0sYbEhd4X\nnBsTofrLtq5bm45IgWH7H/+0Wfc5eELK53RsAyYFvpY8m1tv+6M7VAmkFZT9\nBSs5\r\n=km9A\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"3cfbed34975d8f2990425af21414290a96e2240b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_11.0.0-canary.3793a3143.0_1618511401264_0.8266479611399484","host":"s3://npm-registry-packages"}},"11.0.0-canary.bc104bae7.0":{"name":"@material/density","version":"11.0.0-canary.bc104bae7.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@11.0.0-canary.bc104bae7.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e5ae99d362f2309f0598da597f8385e1850ad396","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-11.0.0-canary.bc104bae7.0.tgz","fileCount":10,"integrity":"sha512-1ZWsGX0AM8rGRkE4URTXagtkuxmw/iMJhcvrSrDQMaYcUPvaJs6Pis221Ktq59glWxJunH8oQGOtW+KNAWAYKQ==","signatures":[{"sig":"MEUCIQCUInZU0JruhTziNfw4IYu+s1b3O+ABXO2yQxYv57euxgIgXKwdIN8S6eaoZAgSilUpizTSQk0BYCdu73jq7qG4Gd8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeJe8CRA9TVsSAnZWagAAXE0QAIK9dJO+mqtt4d7eJYgz\ntjFLrnl4spgXc3fMmf5l0JQwA0RTHt9duNvuHKsbrfZDDFwZGqbBBfCJyDvo\n7tmU82EXs3329gKGUogGUwhMoqldHo20diQzn0dO6GfUVgBQ8vgs2ctTtwyN\nO75b6qEfUDXEo4b+ndWGdGNWbEBvgxFIqObIq51+vHXgXclVI6yavrx+Q8U4\n/3iJAkH9XfWJA5POl8Y6/PmTGoVX7dcabJ5F9d9Fa9lXHk/0vmOWW9eiL5sl\nFKjnYfIjVKD96/aYIateYYci/PnrM9gDFG2YhBBZYGBQsblcbmsA+id5brFF\nuF0wGafSZft0CYG4qyWh54GICPYLFS4Jlr3Lisw0y1few6yALfkCx513ZY92\nJD1wV+4fp2aS+jLoEoYjE4n+DKE7yiN0JYl4yzT1K5D6+bPhoI4dkFMPH1wf\nlGVz8OJk5mNYQmtT0fI2+w8Pb8eCGg6i32IIQyw2nqzxj6+xKL9EM8MNW0KD\niQ4sjWNAxeEMwmJoQDeiOVQrQs30yApHiwzFSsygzY4xEcDBuQAmAQ8DDKww\nh9fHCbI42bI/JDeRdQg2K73KTreGvFhwRQzu6kAMo+TLi6O/CJ+9vJ/QvnX9\nIUnclD8/L9Zt9XGuZmSwPsxRQOgne9ntZZl7xiPDwlhazRJSryB5a5hPSk79\nmHU0\r\n=8Bdi\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"fefd0309d7bea91a430a20913f05f501364f2ece","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_11.0.0-canary.bc104bae7.0_1618515900166_0.7592789374396021","host":"s3://npm-registry-packages"}},"12.0.0-canary.3f342c3f4.0":{"name":"@material/density","version":"12.0.0-canary.3f342c3f4.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.3f342c3f4.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8186966b103c37ed5016b94666d221191a521cc1","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.3f342c3f4.0.tgz","fileCount":10,"integrity":"sha512-DBff+QosklUyvzHPe95E/TiaSkI00xb7qHw+pCtlZdN0lqgpubL/Frp0rWu/FPJm2/zThMWQpQkKNSfyWmPV7Q==","signatures":[{"sig":"MEUCICRvqQaeIaDNoLXRzWnfPxkKTYy2OOe7jf6pn2yud1ubAiEAv8jeC7nd5lMsMuj4IsYvNrIoOKI/wfGU0N5KxPi2+10=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeMPSCRA9TVsSAnZWagAAW0sP/1MmqU6zRCryePmElmSU\nGRfSrOdm5sKJCuaPJCOLGexlg2uXBO5j6WZjsocMdOvZZ7z9huOpQNlkK1Fe\nTRgZ4Rr35nSdGltPcsuUSAP+nDEOe0vtTxkqmbY+nrkDSpk/kO/TUdJwiJMr\ndbKMlrjC2uVMrvWhxrWIFf1kbNiPZCtLDVUGNNwJeY47ucisWhYqPGZ75nna\nvaTg90nJ3Zz704EEVLB6MePJeWGcjOx6JRpLJiYnUX3zNaxt03RB76eeg18Z\nGbmEGpbtqMgytDtySg/37BqMgEElCkzHWiDtwHiw/eq91kD8OKo6yaLDl35j\nl2o+U7m2ALeOuhLJo0jBiJ41D59osr6dx3W+4H2D/qm0Km2LBBJNhsvUORth\nmzV6hz2w6+IuJ99TZFJAHKHijNutoLHDoGcVCCmcc8vKIxfY6W62NGGKw4Gn\nQ52vb0ussTxgVDo/YfCAyLVzz+CxDrU9RLy1s3IXXKbsUFhW0sZi1pNrmFcA\nkzy/mGxAQ3JRqMNE+s8gm9djD3FDSXzVRSTZTKQihfilKP/ND6AIPdq92XUX\nnE5UtOP6W+TyjUnURbjmmgogsrYlsO/NLSZVQNEvvRrW+jW7jbj6a0Lf2P8p\nuwAycV3DBsbDekJrtZaIp/ib+r6VeW/hBLR7l+2pw1zIO/PfYWq/DTis7UUl\nB4oO\r\n=VGSf\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"d82c002d3f314f99c3413389c77960016a48bfa7","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.3f342c3f4.0_1618527185772_0.26232111463127583","host":"s3://npm-registry-packages"}},"11.0.0":{"name":"@material/density","version":"11.0.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@11.0.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"862b345007f218ab856ba39f2cb8c59712f18270","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-11.0.0.tgz","fileCount":9,"integrity":"sha512-FuSx0UukH7p9cIAxEg78zwL5iYuoa/YovyHuuEEudyhWsRH+u0KBSQlYWr+ykg//qZF6urlDrVmu7WAKi1SiCw==","signatures":[{"sig":"MEUCIAxtb7QAKZjYtbM2u2aU13dZXnE/IeTDd1xpQnB47ecOAiEAoT0jhRypZ5dw8Ljp4EWMPMsIczZ+geSnyZ4RUML8PuA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13376,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeMTFCRA9TVsSAnZWagAAe68P/1pZmgQYJC8QOqeyPrmW\ncM1QsnahPpc1601XwT2/Rah2JkapgtfoQbXxu0V4BvzGSy3/fT8IjFsOvum8\nZxvuSoV9i2kLYAqC6OhhzCx7UCZnEHV7IR+JYIYbVhobLgX5Rr2lOfb8NCs5\nBEK/qSLxW+NI6JipaKboehXrrXKMHJ9b+pMLdRHN5xcJZfXYoJf0S2mvH5MY\ndpIhWnQ+3DewOjFudOYbV4302V6DVb8I8e8XRvxnwr2QPD3RJB+DqYbB7q7C\ncr5ycUlUqBdUaw9iWVR3rvrCHgCW89VNH90Lror6Os0LfGAV3qk+z9g44qgD\nFZrwVFAcUKaQ+3ZzANVtbNfE5r/cW2wzkLbt+3iB/dSstk20p3+x260ribvj\nB9dRn3SZiqTGx2lhhVQsNCIiwYDQfkrq5Rc+Wnzsdssn3SROBleMaFe4sK6D\n3vTbesHuwMBxVSmMH8ONQ+/VeV20U6R/N+icFTb9x+03+C63wZqg569KUN/5\nWYbl4cKgi4VEmME4JVBv/DMXc6+WCGgmugmf9BLDK63SVJGcl577Mkt6g8Qm\nLCNKrJ6rTcAR3kEpvicHnuC9LyMOlhNSrDHTMe+lLyYuCnUyA+H5SbYO7bWA\nfDblW6ncaXjAaU+BvjCYiR6u33JXoGPFlNt8eHRuNP3iebEoR4YywumvwrN6\ncp4s\r\n=Eplz\r\n-----END PGP SIGNATURE-----\r\n"},"gitHead":"3f342c3f4715fd3587f327ce4ea6b5dd314c5c55","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/density_11.0.0_1618527429080_0.8080014393676005","host":"s3://npm-registry-packages"}},"12.0.0-canary.2ebfc5374.0":{"name":"@material/density","version":"12.0.0-canary.2ebfc5374.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.2ebfc5374.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2097eb8257e38780e2f461b9900c279473a6799f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.2ebfc5374.0.tgz","fileCount":10,"integrity":"sha512-nrws+kjV7QNeat2+Sb3sV9+QpIs0NEh0GipbUJuRS+cvP6fg6NvD2SBil5UwJQybLpIBOzDFZAF6p3S3+vTqcQ==","signatures":[{"sig":"MEUCIBXtlcsIS/ugTRx/iOROvZsRhDGRjlOB3AU7p6n5WK7vAiEA2PyGmH9wjCZwX/ZxKJun5DX3ruNKqY5WUwrKN53kuk4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgefcFCRA9TVsSAnZWagAAJ/QQAIKIOnTtX6kcof2bs8Vp\n4x6LqkujNP+JyZycJ5gA4L6kx8CPC6BLXLi6CIl3fKvc079IINpH8EzV911J\nwolmSDj4S/Fp5jFsCNTKDztg0AfJtZSqPQYMEAmsDvKxirZzSNJUCgiPt1yH\n5w+OHvKcQZ/spbNKm5kj3WhVeGU3YhOjWguJhz+VSvLaEPr5Ajb3c8IE4ZG3\nPyAGI3KyoDLG+hLzXYR30v1Tl0xZlKDZr8LCicdC21rNEf6SMDADexSkHM0l\nkC0z3GqrKf85i7ApUULPrbqjUXT9BJkt9YubJE1LgKZtnA8g0SycPwD2fV3J\nUKNC14wp0w8KMMf59F2rk6tCeTDyuj/fOZbF5TZiywb6V7pH2T2xyamVQKOP\nYP2aQ3DKf9tbiU+AEPB8s1qCip2q1IwnavUbCZYWI0a1G4zgReERVocJ67JX\nYqU/f8PL3EsprZzzMtNDB43GPXssq7TFOK8Xxv38AMc6crwycfcAgCef6iU4\nqvoGnSMR1esZ13MsTOQ1SQF5sbksnZibz2ae2vkOiC3JXZ+kmTubG7E/TLK3\n1SV8gd5KUTmlrwQMRUOp3taX7fwVvs1QYYUJWcokkob8c0n+ntIjvkgG+nCr\nypvWIyL02HRvobDX74b8nsi26rSbKyTS6fw1tMjjlRx/rxNbvYNjEnS62fQw\nmT/g\r\n=Z/D1\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"603bba9493212a7e1b6350d2f12e7488ae1d9594","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.2ebfc5374.0_1618605828395_0.13212702926968478","host":"s3://npm-registry-packages"}},"12.0.0-canary.5631828e1.0":{"name":"@material/density","version":"12.0.0-canary.5631828e1.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.5631828e1.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"98253f3fc2a735d60ee9f6f7853b8f8e3b3e7038","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.5631828e1.0.tgz","fileCount":10,"integrity":"sha512-bUrtU8GolVivzZQWXLCZRL8fI3ZveVgetSsWnPxHaXnxs2HwfMt7MPIc3mBBETbtlOPNeRYECUY1fNsSn5P7DA==","signatures":[{"sig":"MEUCIQDizEO69xK3z0x7nHOomY+jqfdZs6aqzYuQ0vR8aJrQWAIgAzw945+KC63NExFvKyv6lfDEEyVccvlW6pDDBN6j/wk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgepIpCRA9TVsSAnZWagAAZNYP/1QAI9eenG1S+370Zd5n\n/IPscvWxIELV5QFzkDheR6/LU9W2rVBKhHdAZLQhI+Xwk5gQrrPTp7SloN3A\nGjymtAkOqzUbMuDWgrPrxxA/s6WIs3fqtRV6rCuLP/6cuIuHNOiHDEQ80m4k\nGFt5hfVDSRMdQeuA+Vj9Ew/NyGAKdhmhs97dfAdBgpLF609STKoKRvui9ol9\n/ItODtA69S7IeFxsq63QJRXuZnv3o1m9/LlUZWHtDcHbH70moN39HZS3qb1P\n/sf0SSp4gDFZAgn78nQ6GV2H4qHl62tbE2VwWiaObrclHMSH84PRdprkd8tx\ntRr+ZIvyBalcncJcOcU+HygJKDR4382GNnWF8oxUpk9JMwdOyxhIpcpV1ni6\n36Ue5yVsuCRRrIsJicG4cjcE6Zxt6cWdu+3pGoQTiG4kxKug02eA6EdfDnT+\nCSL0E91bIIC4DncTRigOB5wCR1b5CcrSlLnZgrgWYDtbj5bchS1F53GAWi+G\nbaf3kiCAmLqxnT/ubka/QnK+3rn1HKG+ZCuMnBEROQd92QKV88/Udxbcsyom\nyGQXnfQpp16w0bg0iD5E9GYYcyrK2FKlqW3AbAtmW2UhT70q/Zln1zy6CfbM\nSKthc085ZyaMsxEodMmRax0Mk/H6lJNd1vRWEX9Mru5VwzjpiFabvcKjFxvS\nBbyR\r\n=8yEJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"497e1a2527ce0368b4038766ea4893675ced3523","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.5631828e1.0_1618645544738_0.4164654867967268","host":"s3://npm-registry-packages"}},"12.0.0-canary.bd685395b.0":{"name":"@material/density","version":"12.0.0-canary.bd685395b.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.bd685395b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ed0486af42f51553b95b7e81f4d89a3fa9e51af9","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.bd685395b.0.tgz","fileCount":10,"integrity":"sha512-2zF5C6U9TUWPVKrQ32L4N0nYoDpzEDDRkF1azVDs+89TGWqd+0O/dp1BId5QdWzofg1u4xg5JlB1+xuhltILqg==","signatures":[{"sig":"MEQCIGd5wiMUQj4/WFpRED8HcfVu30yNshJfbYGhjh3uPqTeAiBnpcXwT7uzw3Ppc3v7OHFBlYrV2s0sVuJauiyWXvDR3g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgfc6NCRA9TVsSAnZWagAA75kP/0QyYrevLK1c/IU9jqe7\nOS1U1soHGIJzbRRkpko5gXCONj/B6zVasBQlCIOQtqvcGvb8zOHNJ+kZ7K09\nKWc7ykw2AdOi45sgUJB11SuGb25bXm3DaNfmR/jFp4Pd0aojVHt5+nqsIu1a\nEmB7RGaEg93SDf7SM9lV6edvp7aepGFZ8O2ohGfsFwDQSENajmE1uAAvSG5r\nCJONSHvi3qFvRFe82t2ct+XoJEmVVN8JS29LYr8MViD2A2/I3CDB9Iua+jt5\nxeqXWVBF4R2D9zJiwt6NOaPMAw2CbncNVJ2dWIbnmv9y9+v8XVM5Ropi1Gqp\n+F61++FEx2IfNxhGdI6JD0mHBOH4ZrB1n1J2t4bE27+gFNFDTR160rMHFUme\nyL6bryrMi/JEiGg4+45xrLNVlPDV271yWIjHEo1perdHzANxUjqt+qZXL59c\nhAUx4klyaSNpOQSyPW56tOuKS+DFE3gjcpbqPtJfj0oAwhn7QxsAnhApxLJY\neFayIZEKKagvF8tBjbOZPE1UX3hzzk0WBDMxPfBySofInfuA6yi6NTcG4z4B\nGMSdJ0/i2BWv46R//3bYe5+72IH88rRfXMbI0vXXF30PFaZDVxtVA0cCTLaM\nST/DdOkzP9O4aSR+EbhE5TaK5cFhHAp1UZWKH6kBDOq2Q3vn7h2UVcL3omop\nNmx5\r\n=bBd2\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"69c7d9ec7c5de65144c3b2a9b283b6baf7af107a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.bd685395b.0_1618857613444_0.6061632684677556","host":"s3://npm-registry-packages"}},"12.0.0-canary.b52196498.0":{"name":"@material/density","version":"12.0.0-canary.b52196498.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.b52196498.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a2d304eda2eae88bfa8dc7f6f5520800d0537d36","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.b52196498.0.tgz","fileCount":10,"integrity":"sha512-tGYLq0PN1EM5WR5IhBPZZvmWz8GPUXE6vEbJfHCiHJrQWqYLrZYGG7qrT1iGmRAVpGOMIdSR4B4R8rUpJyLUkw==","signatures":[{"sig":"MEYCIQCxJC/HukXkyzZXvHLTwr31WifwmfpprPoBuE/vKDNK8AIhAKQNN6IynsvD47YpaupHLjjA/D5KVbkplFoitwtxXJy+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgfeB+CRA9TVsSAnZWagAA1h0P/07HLMdbBNF34XpsAPpU\n4vgk7+qt5Zb6wTPc5AQixLssIv99mzCK5cKEywPS/5U59XFEApBJBplKynuq\ns2Wz4JnwnFGc0OI+wuCBXl9o3k3s/Ez9WhzwKJBiT9tPvLm6rCJbhbY465WT\nkfvW+qI23JO/AIEivQV2QBG57cROCXrpYTYaOSZ9i6nFWqYH3KSej/HlI4oO\nErVKD7XUBg25jYLBabqyrbhWuW52sIZmKFBRMFtzIT8B+d2KkQvA1Dnok/Dn\n4OMaXnvSANzw4fOZrWWutjSUj70JWkulTIT3jPY/kskgeu5ewx735xrbdl7w\nFW74HvNoqVqx75fyG2DGZi2rnQtcyk/11xRaBAsMkhAa73NRPn0BT9W3sbjc\ne8qSxGVezBurU0ddBL+tq2bmP6EJsD6o54gd01LzF08z1vNQacQsoPSjmXd4\njyEi70dn3OAotBu3z1sSnUIfAG5SThssMlP6U1tVSi8m4wy6sT9/50LUqkyr\ndRKcwxGSRHMAiYJxUjFQgh1MenT3et+jYCxliAo1qDCE0KLnFz20IawfEKWT\nGdhHAEC2U2ZKI56Tv9f7akxRDBluIu5rBe0yVbczCp91du6LkJ3s/igMei9m\nNZgrb17uzKqVxqORpelQh55nqDV0jVv9LCJmsmYNrrFe6QQEx+Vsx8+sj543\nl//P\r\n=kL/2\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"953cfdd3bde4c66a4b6b90171d4ee702958ae1c4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.b52196498.0_1618862206300_0.8585645583562234","host":"s3://npm-registry-packages"}},"12.0.0-canary.8ba3e298c.0":{"name":"@material/density","version":"12.0.0-canary.8ba3e298c.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.8ba3e298c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"151c975770dd12347746834cde9b048ef80ca4f4","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.8ba3e298c.0.tgz","fileCount":10,"integrity":"sha512-i9TGlCazRgoYLAV7xg5UZxURmrifeV3NaY9q1plZhdEDnfXgBkzeVNK6bdewipRBYnTrWNgWONt6/2DzPjattw==","signatures":[{"sig":"MEUCIQDc7ZpqW//pORVN3C464daIGy1T8w1qZ6hivs17yZFL8AIgdA7PbuQCYbINm6/TZFk/+6+t/GNoESG+Yxj+mHT8mjs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggDGaCRA9TVsSAnZWagAAWzgP/AvHuP3CGTALzJuzQEOi\nm59ymxv5CaCPsFAWO/GGPf0N1Or6NpiL90D6iDBw4iTtBKatW+Sh9qISORlE\nhy+CXP8/a2xmqW95csz2ae2zxrtZ+7R1iTLyyM8EtwEZPWtLDjc2Ss09Il9f\nQu8O0rlKcJ2nftYA7a8sw9Zb4Y86+N8Fi7hTNMi7wIDJHmXAkTeiNMKp97qe\n0L0op0n21ncJ2qm64SLkoLa3tzbWuxcDn/P6wujCLNxSd4/KFsLsq0dgATAD\nsUncFVdPtMChME4Ts6dgBLxK4iB/Lf+EzkXiaLp2xe1by/qTB8ltCOkEXSFJ\nJHZOnna2cdtJaKHhKZpD8pzLnUzcSzDaf1CmujFU8jE5aslwu+1xbvxnVRrk\ndYKi6OCKrWrkKBDrrn49eIrrMLUG4bUWrEQXzlzzUW7KhMYeI44mSbHIRLX4\nUIPY3MENNbrgSzIiFZLHNCclW86zrE6VEHyW5wKJ1RJCcZZElyQ4EseHs/E9\n0jixTpLRG3k4cIeIgYUVBET7X3fYS+Lgu5mi8wkFKbaL77M+DNP8zyeuINPd\nwfh4i2np0ofeFH0ISTMt3xOJjuiJrJobk8U1QQk72NUGO5bPvAyjpjA4Iy8H\n2tLTeTGlAr4zt5725sO9GdHxNgN0xR80dMvaJcXqUAWtLYujCJyDTmsiWdd7\nIlga\r\n=OZjm\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"206fcb6cb686d5de97867cb4e4005926e2a94501","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.8ba3e298c.0_1619014042210_0.4791006161116267","host":"s3://npm-registry-packages"}},"12.0.0-canary.c629eab71.0":{"name":"@material/density","version":"12.0.0-canary.c629eab71.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.c629eab71.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a8a467a5276492008f35509fffc228bd423d5fd6","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.c629eab71.0.tgz","fileCount":10,"integrity":"sha512-nmsl+yNjTJDX12nsiKbleZYl3OwGN3M1Hif7UoWPXqpAW0mPjEij2jXdHjIaVRTtMumWY/zl2/Gkzky86/7zKg==","signatures":[{"sig":"MEQCIGmy3IYmZjq3DKJYiC8GJ8TO/YvxAmC05LEJeSlHp2qQAiBSEiEob6ulvXHqe4XMQeJr0Da0EWNJ7SIbe8eBlvmUtQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggINBCRA9TVsSAnZWagAAUeUP/RGcU+wqPflDdbrMzFPt\nVowc98Wa++PMES3XLReJuAddWguvyUSAN3yDBZc70M33ZuLyVm+isvgDdYHK\nRzcpEkCjVLDXDEXNcspjwhAn+15eO97ldiPeZr7gZ0r9BK85TizryU/Rw4nC\n2yTnbXr44AgQRXqKoIC5E/v66R44RHwRV2Zxz6AJE/0KBwvEIyeRXsG1cvlk\nof55NJlAPNe3SLIYizIplHCEDBDg+1kzmHJtGPAERcI9HcdXpOY5Ca11mZ1z\nN9+2ZZDUForCqE+HfumqMusRs+bOOKgo0awa0pCEHk4J4Ds58lFMhNgAFk1u\njInDfPYCWwDsGGhAX7eoHN4xyshfQJvN81vYywh/p2Plrz/5FFuMsu2RGz9U\nG9aEbfpk54m5aFYeeQDDGojjOEA/XXkY9FVPmhWiosEZBUSaxrzgXQUkm7af\nIJuVzGXcQj2LrTR3Vr8oM0tKwFZs340gwCxu7auvmLOs3KC+KpaWXKQwurDv\nDk6vBk+mrWKF26V2Ehz1B1kgPRArZHauwjZKpIlZ+iYL03o8gHolzv3fElae\nYbyQaVSB1pXNHB/YDmiN0JVfEZBgJBCZl1XjoD4UTrIfb+kpF9H68l+TyDIW\nLb+9KrbRf7JHrrDGcsDUUwRfKUj71WYKstY6BfRtI/CMtfcrXOoAQSyIGe+a\nSQuU\r\n=VMAe\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"13ae4a821cd20abff4520de3f38c689af7cd0edc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.c629eab71.0_1619034944665_0.5876802582077938","host":"s3://npm-registry-packages"}},"12.0.0-canary.8ace3b810.0":{"name":"@material/density","version":"12.0.0-canary.8ace3b810.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.8ace3b810.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"47f91c3bff201598d03aeb961149eb4af5ff53cb","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.8ace3b810.0.tgz","fileCount":10,"integrity":"sha512-S4SBsYIDrXn5qalmsWyQXUYCg8Axm0FS22lUGAGrUyGMMy6Pmk9qlY21uisv8XwMxT7UQflRQpHfN/+xRw2clw==","signatures":[{"sig":"MEYCIQDB7UXKlVnPMNw1XOS1qrLbSbJFeSCfmbz5o8EW9YLDLwIhAJnUQ/zMDEiDGQMVgGs5vqLQCEiCwa8CravAlGgFiycR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggIzbCRA9TVsSAnZWagAADMYQAJtb9b1Q0vCIZOHccYcz\nOOOKb0ubJwUeVp2hPYxJnUeg24T0uI/Czibyf9b/+RlBDPsT6UDqM2+7DZJc\n6qkdBrfEXnqGrF8zIEusEY8t/Ge5nlz3yW65OtVO9AFPb8wHVbBPhyvi9W49\nMYgHVOv41+clmlHuibANgV6KlLVz4QdttlaPUwfL0qnMcvXfyso8xer4dKy5\nGTwHUqxrAorWTc3fWbuUsoOye7e58jjYJvJtjMKwvq1YmboHZ/m0f6NK8Tmk\nYhcTw7yCUk3XSJlsS1DHo77HdYivNxKGSdBdkTS6ihMXHtxtM4Zgzl6T/UEN\nAsCTQmObDzevvbEf6kKat7nNSvE6om1k8NLgYQ+Y9nrmM89P1UQxIuYhid9W\nO/krvpEkl5i13XSUxCjP7mTq8d806EYs7m/X39GDcpYhZ3/HsK8SqM5/adBJ\nVZ9vkEH0HpLR++mIlN0HbAJK+/RFE9CnK9Hm6P/3hOy6YYt56HrQX2iolooT\nNygK9pPGr822BTN1T+Uf2X0kO3AcCaYC6v8Y3ce38jfiUnK8tVpYDNy+yC0T\nk5QDSSSGXrZJXeiiAnxDaSQ2HKF5LD5QabOPE1JfvU0m4nK2HcW/G0RaoIEE\nf9bTogBpn1GPk7hLRqN0E4N51GPkPL4/Vheu8UkVViqAQcIDhV/vlKZ1jnXE\nbh81\r\n=TgD4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"622173e8e2308a6104e06bf943b6423381a17e5e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.8ace3b810.0_1619037403007_0.6571072470660277","host":"s3://npm-registry-packages"}},"12.0.0-canary.70beaf42d.0":{"name":"@material/density","version":"12.0.0-canary.70beaf42d.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.70beaf42d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"08e211a2c817e38ea11f196650faf6734b27183b","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.70beaf42d.0.tgz","fileCount":10,"integrity":"sha512-3qlLL70/H4eHp50xfWgyFI7+HsL5tVYICz7ZesVZsFF0Atg07xaDKSmZgrHHinQpDislcGEFbgl3+O8uMw2V7A==","signatures":[{"sig":"MEYCIQDYvFcJ92DMM7pHdP7QjR2+HKvANRg9dfjmVhaP5Uu68QIhAKj4aoU+Z6uXN/ROof8maNq3mqSHWYxi8CZCuUZ/LBdt","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggI+VCRA9TVsSAnZWagAA7R0P/31JRBwzqNwz8RgcOMZm\nawjgydgWkJ8KNr6dMHgj/FK+1Km5gjkGyMjVrw3a7A32INokpfD3qaA4X9eT\nRYrblPfcvSKCgJRanzYIyj+PZA+pki1k0WrfIb3POOofjDWYMJwuPCddJxVS\n0udF7m85kKaWFys9mcVBYeF5mQsOqrZAYX3RtWj+yoqQ65AEZLVA3Ri6eoN6\n0onmiu2W/O1nRfo3IGb1ztVMG3E9QZW35tYOIyPW6mN8EhK4N0YjXjydr0y9\nqWUWUzGXV3FFhGywresq+zoLdOhbI7/OSQjTbfUL8XOIPbn9ztgZR9iSsyir\niImezO2budoARmP+TP1kqF9HH3nkxUtsbyv+WM1YFl34ba5ZXBTb7mhcrIqH\nJfXJk35M4zAR3KNZp2iq9XkDYuvsZMAwDVUfeQrwzP4mtRBcwxKwMJ0i/Vvp\nJYLaeXxw1Vqg2tfCFg1bLmBCuk2YtfH0rOPvBRdbC0eEm2QnANzjgZ3eIaqb\naC+oby9Wkm9IcJhGe2YNpkpmAALo6yDWLN4iImU1FF2yLr7zOxAq17m7sQFS\nBkybiy+x7uIkdxey8Ri0WggffDA00rfxb97EsgkKZkCmvNjNJOB6jZy66AWz\n7cZZzwWiFboGWVWSjAtir5VwyuDNBZyeSVWXdIheufsh5Q2nH6aOkob6cMZ2\nNWoS\r\n=JHRw\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"c5b29092fb8fcd0102b908417d8ed3d61c3448f5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.70beaf42d.0_1619038100928_0.7448750961582444","host":"s3://npm-registry-packages"}},"12.0.0-canary.cad489689.0":{"name":"@material/density","version":"12.0.0-canary.cad489689.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.cad489689.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f0ba6d4af32d17d38781cb865d4386623608a921","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.cad489689.0.tgz","fileCount":10,"integrity":"sha512-mXQLd2jIvkKtVc9SW04OGOuPjk5azOUaRtx7RPFJBveqMBQ0kAQ1qleT+5gcf3s5iAQsLfxltEIKkiZuGnen0w==","signatures":[{"sig":"MEYCIQDKRTPhvkWuVMDcmml594L8rFKz4RKw0sPmMLFgNVHfTQIhAOV2LwQH8jnH0nRAyJqydeI8XBS6uSD/71ll7ThGvTq+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggajPCRA9TVsSAnZWagAAfMIP/AqTX2lQ3X1Ra2NvV4A3\nmXAs266VdwJtL86NubIAOXYY6y5PeNnxLB4Pqqm2C3PYnVJRqy45MIvZOB2A\n7kkZHqlbpoN4b01lAmOUEe9BA1RbnCcgr6EZQ9TcXlBGFduq7T11qGdElGCO\nCx8lFZ0cUbyxclTLXycl9MtpL9qXbnAbq4LtU3GWHVYlcsfL7hCvVx0pUKat\nr4YNigJP9p57ZmvWVHUF5wI9Q7tqxjCvezjv7RpLLpabfpQIzJAAExNUj5ou\ne/YvKcFSRiOZvG6mmOLgZt+XEdXWB8zh/cd4e0tUVE13r/uduZzQHbRDjvDq\n5dT6aTm8vlTWwxBHiN0eUXAnAwIApjPfmkzifNVkGxvQdWibXoIJ7+dQQWtu\nGRx1m/7DJLGNWEX3WHoS1DvVvwbuMb5PbprQSPgKkAGx5C3Qq6U3jqdBDSHL\nGSHvn+YNUqn26RudBC+eGhc8OfQhoBICLf6Irzp4WunelZ/yGj54IYQeIYCU\nFGawAjOOR6uZMWbe1ofHKX6vKXVDUL0KPbMTpCGs+5Y96jX3l59iYOr3IXQR\nnBdH9uywvl5av5es83SIshMD3Tqt7o9/L7Sy/S42O2ioMFBR0ZHL5BF5Dx1d\nu/xzBn0GepyST+2yfDPB0Oe4bH/qjAefL2x/1uqq4Q0y+j90ZxFerjOd0NQG\nxlBy\r\n=d36n\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"3e5c20e059b33965b63d0073bed7e300c57d5781","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.cad489689.0_1619110095224_0.6415178937078017","host":"s3://npm-registry-packages"}},"12.0.0-canary.d928692b5.0":{"name":"@material/density","version":"12.0.0-canary.d928692b5.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.d928692b5.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1c5f03e572dc5e48b72853afd8e3d3c37d494c74","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.d928692b5.0.tgz","fileCount":10,"integrity":"sha512-VX56qNeyCvbZPD1Bw6iETZm2ntIgznD/0wYLtskgVEaZDFV/Ag7x7xiUwIKxrhbuAA+g8ziRQlhRpaESgM34rw==","signatures":[{"sig":"MEUCID82ndZ8+0sndDoXCbSlMS3pPkddmPYIbmfzl5XYOobFAiEArR6ENrCnBXAriHbePzaSrNcId4yQGbd/0euHnmz4MQM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggwTeCRA9TVsSAnZWagAAP2MP/3GMlUbHEzbGWLl/jfPm\nWALNKN9OLyhuZE+QaSx4xT18da/GH8HepoOy6f6BjdKI2UJlvGHUoKCDrDBS\nVRhpPGhd6HiQqmBeL2SqZEakWB8gPpMdFGNlBIe58/sGX0cy3cDSA6HWaqac\nRNP5rFnIwtlzTtrMTCX8ZnHASlP49n7mlDPxZrZPZGdeJGq8KByj+3uP/Qgx\nuzvDBf5P4aKX36JZ4XPqdL3mssxvo+i2t7+7MBufJBWTHUybuYG6g4BprmDm\n/Zj4qmAepjkpcI2R+2GbjTVkLPkF5/Zz1XO/PmqesE/mCeKUTn9Mii35jc8k\nFOCAOJ5H7fwmXGOMksaBML3jx1JJ+0V+PyC5V4OLbv5YoUxZ6BvPBn9k0a9A\nFkSRNVTorHZBV4FBTqwUoTo5Jv/vePoze+OS8rMEZjyMTHBBVP6Xh8vCp8b4\nYaiWkz64bK5w+JjkjcQNtBQQgU4j/GMNoeuU3M0ziJ4gPyNBC5Azf9su6czD\nVBUziRScdkV7+t77xFipXItxcatMyAFyBtmzZbFG18xX80sbhnpS6tWLp8mq\n9ETYseMiBceYVZiEOnxn6Osk/sOzSc+U27jXWiVqCMEjGiSLEx0YcGPYuVzP\na4b6+grB6JrSVRPSp32V1Ps32EQjCKYc23Hymk4ND4MjIfxfhD5TvWLxxs4m\nTcs7\r\n=SCtM\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"ced6a0237d36ed84c4d277fc25a11d9453108e12","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.d928692b5.0_1619199198158_0.046324361239964196","host":"s3://npm-registry-packages"}},"12.0.0-canary.8f68de8f3.0":{"name":"@material/density","version":"12.0.0-canary.8f68de8f3.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.8f68de8f3.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"75d0f899b21fcb748048f5d718f6a3dbfd579ae2","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.8f68de8f3.0.tgz","fileCount":10,"integrity":"sha512-dxGy8fAGx7W88oI7ukRDSDsJyHZfTdslb0ufNrrBmgxgVAqzDMpKPqjU+O6UZbXyFIrNOaEii1ZZFn6NS0uWug==","signatures":[{"sig":"MEUCIQCrDFO2KyekwkK078VoyRHzkax47xS5qUgOWzFhKG8ANQIgXq8nCg2eAjo8SUDoC68QrcIeNAqUKRbGvVxvbLw3Kpc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggw3kCRA9TVsSAnZWagAAFZMQAIUTRE39zfwzonbx0AaF\nau61Sh6c6r1WNqqy9AAoYv8GgUe2pBZm4tret/YFsnnioWSg0YVCqklTH+4l\nL6EK6yd4+q7KwRyBGfF0g2IyCjIX9+TbWkQ0l7yTgnqq4VeIB+poWdsZMN+L\n4mec71gqJ+joQddwGmmQS3X+DIm6JUbrdRafdS4LqQfgiCk1Jy+RE/yTyAgU\nNdKr/NR15CfTK6DDUUVwIoJA1bwhr6NXE8+mGmJsN6ODoVX4GuVIEVSrroXu\nfTZ4M8WO2KWkKyguu0yigdx11L4cQtQ0sxUkOdUpkz3Q0RWEZ2cDxKmAPU7w\nnFIeGs6WSv8+NPfw3dYU3Z5k67IYEGG1lgMqUf85pDMgs73Zy4hEET2IQhcJ\n8IzVJWhe+mp+f3UoF+dml7pZyYrgXs5DvqKBEgySvjfTXE31edEPMkDC+eVd\nnC6u0cH2FB/F719I9IEKTTxnkZzcFhumspP8+HgaA+m3db5/pA0a4R/tIOCK\nuQVzeBE1Rfo8VQl9GC2tRsd2RciiTShroOrgNP5oj5FONP2Cbgyb8nNw0VzF\nq53e+qfG2ntU5lZ5HJTdFKMfNxjpvSBPS2+Ha9HV/lqdjdcuCwjAK7JIberT\n1GgLW3zbHyLKYeT8gKt2bMdXA1Az5S2ShEXwknPKApp+7ZenzF9TrJLZkzGq\nGaXd\r\n=MpEl\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"5bf06e910f57a544c428d7559d72d5fc2a5f30e9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.8f68de8f3.0_1619201507990_0.5029098550931199","host":"s3://npm-registry-packages"}},"12.0.0-canary.05753cf77.0":{"name":"@material/density","version":"12.0.0-canary.05753cf77.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.05753cf77.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a472f8cff23c8a225139ebe36b164a79c2f0dd59","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.05753cf77.0.tgz","fileCount":10,"integrity":"sha512-CIyV5AcFfzGsGB3ZO58xnQ0E//xYn4CXs33E5g3YWuy06HmG5bEGwVOo/019jtwfBhKfFMmwqlu/ls1Kc9wnYg==","signatures":[{"sig":"MEYCIQCP/NuC3pegpgtF2tlHzb9bqruezIyJO6KlfeqvrA+2sgIhAOdgZ1jIgELS0caT6ylTDC8H0+TvtPvqWPbz/otqO/0a","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgg1tNCRA9TVsSAnZWagAAj48P/3wNl9h1u1JHGtYC0KHF\nhATmjz7EDGzUlp0gT4l11O7Ym4G9t0RrQTS/IjEG7ABKeQCgaNk3Gbc1b+Vn\norlyXwL5FZkKsxFCEW6dqBOpVMQHwDKxMqITAvlynSkNwrDnEWqxGDt+cBdc\nrTCv53ulrZrCMX0iJhP/HQbwIleYnWGg4ot3o9dCMbXIJ5lppr8XKQvt4PYk\n8GQQ9Vi+nPnHe9Xh0HCPbHP5OdiA0nSFoUE0p8+KYiBRNR8WQ4KecnvpszAw\nnY0Gb7aPNVzHlpCQse2DnYkfiPGsRWqj24K0f5V1pP9yJ1ewF2SmCTN4cFxd\nY7t1LmaGyf8danBv6Q+5u/d2c3qes6wmWRPo8T3NQi7iPMMaD722uUOWnJHQ\nNTl8fvr5hsHRwknTxmLGweZou7wAECb6GpPKWc5QhqBK5SK/gdhkTC2S42eb\nLhMgmRjMg9fPKLw8xcizioXlzrphxs8+7LKQCt6trjH/XGTj6AJPGE+Pbu52\nyf2ceI2PeFMFfjHODr+A31bQlG1YxeJG4WtZVl4xq3nvDFSjDykTCoyAunTh\nJwyEDJUC7O/xEoTYbpr9H0kErDxta35jIUGysWe6XePUNNEH1Fb8MMihGPUI\nRjhRTiapgMaozoYctHQMl3ANE7/zLAxEWVvv087g84ulpdNg9MzIMaTf9nvq\nfrjg\r\n=F+cB\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"3557c74d7c4f9400f0a8d2c88bc2610c1d600199","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.05753cf77.0_1619221324891_0.7195822778835546","host":"s3://npm-registry-packages"}},"12.0.0-canary.ef43e6d96.0":{"name":"@material/density","version":"12.0.0-canary.ef43e6d96.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.ef43e6d96.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6a4ad15b39269b527757ce571f3841649c1294dc","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.ef43e6d96.0.tgz","fileCount":10,"integrity":"sha512-/wUElaGYN2RkOnEObtUISeuFxUF8JqEywvEjyoKuFq9ptw3OGlnZNoklJ+HAQA9yLAAlSIYrLMLL+hM2hY+7/A==","signatures":[{"sig":"MEQCIH0YABv7zqszMmhKvLBinfiOBtw7vvNWt4+pvJxoFzbXAiA+eyxgmCl4O8H2SydRRtILy0TCw4444meViRIZjjKXdQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgg1zGCRA9TVsSAnZWagAA4KIP/ROaeJp2eShWC4kFCNsT\n5UwFNnQofIAU4AAPfGjPN/lH7Jq2Y2XDiK/ZyTMZJaPDiXuocLmDje7Gaivw\nIkKtckkBHGX3oC4B4erl8f/5iz1XAao+SrWzojCbbjbsVtsQ7+B/zc3xHmtP\n+bY7Z9DcS7V2gkCIhJM0zyaKkIQil52ZXxZslAAlA7MfrqGTIk7G1Xfo8jGw\nTUioBteBm5HeMkKVDRxVyOEKITUK/wyoeRsLAaRNnwkYdpkqz0Jac3pnLvq2\njGnkgb8abaznX/v7PZ+QlDxBJPvdTlimf/+KPvYafc7fNZH2WwrHES7Q2eT2\nuXvajwaMRnkPfDd+loJwM+a9L+o4MFrViEWNJVRA28OKeMddw+GpEmrMKCYd\nfuL38MfaHcxJT2MhWghARixt7d/jLWkhthsqmsgvtGydlSNzDA7WIVjTsNx5\n1W4PpceQhx7bDllChVU9bTET5cynO379cE0CyGsOID4s82H9gWyJM87ucEuv\nCpJZbOQYz0XjDLQ1++yLDyhbiKJ1LGWJQKJztLvLslsG2XD/lKNl9o5CoU3q\nrPyQEXJOKvznBiWFiB8dzYLWp+msmWwbDxu106bwIevtsj65u5YjiKG3wKS0\njf/E7Ygy6/RU79QqNQibqlaZvbsra+XjT3am8brEsTFauQSELsMakjnaC0WR\n3b4/\r\n=d/22\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"bf61e37f943b49cb1c3287501ad6fc31f8c88687","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.ef43e6d96.0_1619221702500_0.6571799723432994","host":"s3://npm-registry-packages"}},"12.0.0-canary.197f64fa2.0":{"name":"@material/density","version":"12.0.0-canary.197f64fa2.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.197f64fa2.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3b9263cd45f3eb793a077847b96af7489620e554","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.197f64fa2.0.tgz","fileCount":10,"integrity":"sha512-6iTkkLBPh+NgDXmjWiGeRSz0FtdWSDG1JTnpNAsu+4wrvt6xAxEDJPu2A5umqI9mXAyMoeOpSsd6I4f5CcpwVA==","signatures":[{"sig":"MEUCIQCXXoZfA0OKSMYYLTDu6lCiax9mNTq25Vwx6oG/uMtLIQIgXi2JeAMkOZmc5RVJaFu2vlf7M+iNs1i6mjvEwlcJJs8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJghvONCRA9TVsSAnZWagAAJIUQAJtKdV4vimNWn4ClUrZy\n6HXA6Yfy+YZ+HOeJE+avShnBvJ+dnjZU2GjTchj1fPyxUcrDfyM8mcY1FG46\nrrPPG9lWeViQav3YD7DCCjzH+rL4SVqdoDzD+7coalGASbis4MPXD8R0TTeP\n/r8zDGXciwUpeZN1cNCUJ/oa/tve3E+dQaALyy85CX0cfSIDEfW6QZyNwzf1\nuZLL7aw5pUwCoqvqIV5I9JiYyGAwYWaoHKXhBnfcrgpUiQTUzElZFNclkaTi\njlh5lHgp6aquKNP805gfzx0S84/1OpUE5/kb5EBcWdgVRx7dwMpkwopujneF\n3OBvT3samzssHQaPJFXp6Ex0ueLiNkt4gd7RtsbiAr3IZ3IRnDsllvh/+Djd\n4Ch5ogwGJ3qagEJHxL5FrKRFnQL47AOgpAdn+34zoiO0WhxLPESQ1+l2lzOS\nmXARC3OU1cmFKjRXBAvYkEik6LG5Td81R8zUV3uw2zElFD9ekHmg+SpP8m3y\neppVQl3kGyuOeo/aX1RBaM8htbahJ1lekgOpApDsmRbaSYdcJd2svFxKbROg\n5YoHaXuRHqHopCjrW26WMJa1Pii0F0YNjMd+ROXsKYUY6P26dTeAo1lZ0a+X\n6jHt8lF4SwVaQGWHuxNQHKGSwHg+gRhc3DzCjDsIlfzPHtaC6VcWBlVAoxJ1\ndlWa\r\n=uXRH\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"8ddcd6186c353b0d99439cebca29eb95eebc705d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.197f64fa2.0_1619456908970_0.6678336032861112","host":"s3://npm-registry-packages"}},"12.0.0-canary.55ad2d7d8.0":{"name":"@material/density","version":"12.0.0-canary.55ad2d7d8.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.55ad2d7d8.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"af7708697731c7746c216e5c17e1c9192300fd57","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.55ad2d7d8.0.tgz","fileCount":10,"integrity":"sha512-9zTkC7hw2+s4lV/BUcCz0SxwfxOJZ/1j5MPbfw8yRno0LvqVI0Tt8Ii1pGEVilkIaILCZlLMttGzLizPpw/W7w==","signatures":[{"sig":"MEQCIGRFqt+d5t+/gWFDose+qowBsMGngyJFishuteSWhCPAAiAs3ov0naLKuwwozW2S5kQL+bcLMnAU+TDLIyQRfXUVtw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgh2ZyCRA9TVsSAnZWagAAPX4QAJcDztzBdOqoh/bE/3vF\nm/3BQ/R9zfcjkLiG4uNp9gs6d+WTNuWpAxAwY8vzrTY8+F87yvThwcZlNZx8\naeYodW0+WguuBsM0cGU3cciRNNJkCEe7MnwBA2CxqrHDvAOZh+aakhMK26rn\ntgSsXO+Ys2jSyHBgd2GjllejIlZNuDh142tC2lPaRp1SCUmVBUtvsi1OV5EU\nwJ/wspjt9fGACLHT6wGpiSHCyXEQHYePjtfwNAhHRT+xloHHAsWhvciv8ATQ\nkkGBtaAlUmCu6uhyNdOS3S8+dCASG2CFvTTSpbE/KtsGsSZdEWgPeucdBI0w\npcPxiWKdfx1WN9FSBrkw/7C//rlyjggKVb4fJ/jzP1fl9EsXNeB6hdeA1Gqz\nTnuzTlWlllXYFCF0iom0wQc2MJE8zESRAAaabv8d1sRDdosZPOmQ/a90EBZW\nADs5ptvWUw2TGmznrPqafYs7S+wN9kbDufps8nxQvDd/gIIr8K7dSn0lXyXw\nMZlk1VtsJI+won1XH4Pdlaszg1c2TvPYMH+WOjrHXlHsKpOVPOMfzikOGTwh\nRHH88m1LF7Ylcg21QVLMT8ETiP8Z3+aW9uaGV/IuROSg7B29Wtd3ES39T7SG\nNNYl7mqzCuOVN5WYLkplHx9GYgeZbK2QRjR/2Cw7NNcklgVre9KPnxpaLSU5\nXGpH\r\n=YcCV\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"ed8a5f8b1756d56e3973815a51d6fc7e51c366ab","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.55ad2d7d8.0_1619486322326_0.3526799918357568","host":"s3://npm-registry-packages"}},"12.0.0-canary.ec4ac5234.0":{"name":"@material/density","version":"12.0.0-canary.ec4ac5234.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.ec4ac5234.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ac1b3eb300288ef09e6b7a601272fc8910f3b00e","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.ec4ac5234.0.tgz","fileCount":10,"integrity":"sha512-BhnJqVH0cQBYICiMT2ZU2KLn4ZLm+EzY6fahQj2CYLbOydpAn2GoulQilJBBIiUM0ozAV6c35z+nODpEoGcM7Q==","signatures":[{"sig":"MEUCIH4UVA5AG6W2zKqM4J2P5TisN63yyZEAqZOCZM6zEzXNAiEA/Joj16UZsa8BaPAq/qdPaGc1oGIk0qhYLWamnEAoh7M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgh8PsCRA9TVsSAnZWagAAucsP+gIiV9zDfQDwUw26U/wh\ncD9dS8wcvBKOB3QYubVhUPVoxRgScWiXs2UwDHsVovsYA/zLFKqurcJ/2cZp\n1+DbCtVnoNqfE/rpUYTUfiv7u6gcB9I5RsEr6Y81/TxJ+ZNqGdZ9YyVA/+v8\nsQBJk4jXwruBxST8stbkaNY7vOYCyT62RpOfA5mBUS/YedSWQCfuJWjJNL/9\nlpv8tRcDJd1ZNioSg02MZ3TqwGaffBPPmCJLuWjjRVKtHW2jSL3EVg4SdqSa\n8RPH61gW33NhRo4OFZMI7+i75eazkrSzDBIWT+9GoT8393CfLhvOoTMqKOKu\nZtbD6I0v2XAM7uIPJzP0Jjf0X0Rzq/cAgF3xHCH9aoCO4iXF2KwbGStCCy5A\nwvlCrOrEfNW/1FPcL/P+VlQzME7KgqCw9Ya0MoQ7GPc66prykTtyu6PCYBGF\nKPu0RcMGSW6wKEePUOBQcqpt3XeJhYw8erSCuyskHMNmr3lDwXgx+1jXPhaQ\nRhhLWzAmGn94Nx2gYHeoZqD3Qh4YVVPbXAW0q5UDp4s1O2dMDRIX6XyvZ4QW\nSVACd1ZE7zH5uf3Ucj1Xk2k7hNWoTASCqCq1pAghCFyNqA4TrukZ7ytpoMel\nKDi1Gmn1pZHCzK+XpNmEv2YTB0yK0+PeYxKWAL5PtAnnYrPmNDtiNfuT3/8h\nTxf8\r\n=MR8p\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"b189e0be8deb45b4e94790f21c377c3884f551b7","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.ec4ac5234.0_1619510252108_0.42564779765471816","host":"s3://npm-registry-packages"}},"12.0.0-canary.b0579acdb.0":{"name":"@material/density","version":"12.0.0-canary.b0579acdb.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.b0579acdb.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b1ec6fcc68da33bce41b8d1f1b5b9bf18e2528f6","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.b0579acdb.0.tgz","fileCount":10,"integrity":"sha512-NByUQBGMoVKOdd8NH6HKOpKAbnmmqj7nQZAkE7+XGB/+zivmW7vZUxFB1dw2vFggRW/uLkiPg+KA0P58ytsNeQ==","signatures":[{"sig":"MEUCIQDYT2XgFDyD37db1XenXay7zJGycqGd3wmeZ8cAX5IJ+gIgMPegQzBEXH29qzHQhaOdccAjWc3330gjvTCraubAd9Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgh8ywCRA9TVsSAnZWagAA3+MP/3RBHW2yGNrag/jxd++V\nAKOsKrID1F/blMuJaRMmbh9FCh+uPlVxicsT/crxy1ei+6ZylJyite9llUpK\nI2t2m6kbm005V5QS2eaqn269XwSphUwRS6QhsEbdRVXehKlXexiWFzSbR5zh\n4pYCCj4S/EJJrX2UaJbLYS4iquJGFhVrb+MnT5rYXpUk2ahP+lf/Is7kT3ni\nbo1xWmop4DNqa/TzsO4BDAHP/UER3kkI5dY7b/b5iddZp0lRSIVVn5DXoIw2\ncpwZl53/9/fhxPqHZ1yWGKY4ch+4EbBC/kBWGI3kTZi1fThERREDOfh28tdA\npEqL8dK90Y0jBABnqh8uPHpgL2T8SMisVQiYuZbrupAaGQnQN/VPSIZbvrDO\nRVUSxDSJyiP7Km/unlI2j9cDEF7oPNov8EmuQKzaL5mdii5dXHdkeiXhRhXM\nVwWsHwhjG0gs20MbmofQhSP7D0X6Q2Pi8+vLL9evl0tYhFWPtkXdsKjTEhiW\nW9RWGDV30cnRbZqwDIQQfQ98n3UQfRWGUVBwoyJ0NKKLli8Y/tPc47ExCqL+\n0Nbjbl0dCnF7pZTX1CP741eMevCKkA6qpCspddyOHYMiwC7RZ2/PIH8LyBev\n+2LxX9cgK30G3tjYl/DebRfLHOSAr51D7KpCSQm3hBU/uNRiH7e0DEgl4HvY\nwEPF\r\n=cR5m\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"d1f704610766e7d0c46b8a40beb1848121809a41","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.b0579acdb.0_1619512495890_0.6671508058441391","host":"s3://npm-registry-packages"}},"12.0.0-canary.81e2d4ff3.0":{"name":"@material/density","version":"12.0.0-canary.81e2d4ff3.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.81e2d4ff3.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d67d811ac0ba52dc5e37915573704f6ff9c97487","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.81e2d4ff3.0.tgz","fileCount":10,"integrity":"sha512-+PZQuV9GxA7D9TjEaHbdadiiLOkEWLakgQrq11fBh7ZB9HZqQbmmy5lWgi7yeHNw7pTv36APenZZSQbWW7x5EQ==","signatures":[{"sig":"MEUCIQDnZB5ReZwz5xcS7pFTY5pSYUXzod8vlQs9SN9pXRZl0wIgDHR9AjcN6BY1gw0M0LGPbwO9YQ2jFr7fK7iohuzIYA4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiHp2CRA9TVsSAnZWagAAE7gP+wa6fGvtutObm/Rgby73\ngZ3GMjk2qouIctvivNzgnPlslC1cU1cRkoXFtR+NcWqahv9WuTUW9lU9Js/n\n0MJ/bXO0cfGxj+haaLqlEcLl4GeqTj0c8T7bmzluI9X/ncQ1RLy+TBSdn+yB\ntARc8NaQRkyEPPWrDmHgZ12xgFYDzDyn91s5YsKrQGvTBj59Gau2qii+QXyb\n1vE8KyYFKQxwWihio5Jwb6YJCObLp5HhZAt9dKHEc8Dt0A+0VKz15R+OGnMY\nHKcJkjsHuat18EN1GBUbHeRRnxyofQ5ibk9wKbcaiv9B1gEts2xOppXUs/JZ\nJHlBhiG6evdVXoD6eXti6IfTpIxSSHFHDQLbdFeN2GhxsPGiEmmdqKYQ9JnY\nBHqOhmvyVSZ5LZXoYrmBVJlPKX8QMBl4m3NLo6fcnfIb4i0lGa+yMk85NORR\n96j2Gyx9ei1la1TWy+NurVS5E9dIMu5oV87ij8CUphvxOIKORo9pjUI78piY\n/MTpj/taOiErrOZF/c8LYmxQhfgrqX30nr6hIUBYm5bEbRD3uwpeqyX3+6Hz\nAW0BI4KhR9Nj5TA722ZasYIqMKEgo6SFosMUBI8Ck4VSUbA5lIwJbEwypZUX\nG9Ylqn6Og6q9mGJpO/qnLkwWucDwlg+O4SZRke+Hc/W9Pa5rHn8/oBFzntwC\nibdh\r\n=Vk0R\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"f55512ab74610e3f3cd0db70822ad9b52b9cfefa","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.81e2d4ff3.0_1619556982057_0.14149971046627652","host":"s3://npm-registry-packages"}},"12.0.0-canary.c8edee52c.0":{"name":"@material/density","version":"12.0.0-canary.c8edee52c.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.c8edee52c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"28553b7028d5aa191691d2a6a744811330b7119a","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.c8edee52c.0.tgz","fileCount":10,"integrity":"sha512-LQlurEEyMrH0tMvMp3LhSvkeSQLcf35NpkVcMqt38qzHI02vopIa4z8VhusqJ9+WnbkAVQww4FCTz/yiyglDsQ==","signatures":[{"sig":"MEUCIFp4u80dMaobKurNVh5qwl9IUfbvHtGY5wJuRGIkSVl6AiEAgFB4/sdCabJfwFOJM8pd3tVRBaSHBovu5c9X4/GFoDc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiIXTCRA9TVsSAnZWagAAbVUP/0yYjFd7jYIB+5wzCG0l\nYOgWUTOBQjNkFGmrHK4NgNCG4O6PMJK/uptaydvkKcYHj7X5lhrt6sf01u7M\nhumMWvrZJ7nVujPNWciitbK4lxA/0672YrR2W+JI5Bn3sumi4T3kYY72oWav\nvinPH0RyGmYhAXgL8an6jE+EwVSkrdZDiSHwxVk3TreK4SKAgce3Ilzn2Kee\nrUeXzS88zNqR33FvDOUv+5axpi54A0IF23O7S8HmhXOnF8vHcjbWVubXLQYo\n0gnT9nr5IQfN/egbxzCirYywASK9edrRqxWoTTIDpsVhb+ke33gaHzTekeYC\npH46IfPcbn1cdDWdBrUSiuKykW/2g2JZkuHTxTRg5cDVetoOocoD5ihHjwU9\nPSHATML4j7UeKJjqZMLzPJZaQ3nknMHK0wUZDHR/i1EEXWePnJVGNpEUUBMJ\nfx46qcM2oVw/oZok7OMIKge5plJRpuLigBN4OZyN0Qf0O4xWpGXeJPNGsHXy\nJyZ0twtOtINSquAFHQrfYsaTLxuj3AXsYxcOJ5Q9kh3zasE3ze780YzQe3Wo\n3Zf6IXCop07pjtEjOME8W9g7JVTs793ByEie5cfI3VJNLz0D22k5mxDCD8ep\nuGp63TQn4u3Os7Hqe6i6wr6dgqGWUOluVMhnku/j1nmOIJntupD6biE5AoaW\n6QS0\r\n=b708\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"e8c7902721c81225e1c8b750094cbe6ac4666a0a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.c8edee52c.0_1619559891016_0.41023933846204175","host":"s3://npm-registry-packages"}},"12.0.0-canary.f5b6110d6.0":{"name":"@material/density","version":"12.0.0-canary.f5b6110d6.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.f5b6110d6.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b9496d7d16f889a695d3cf24be469db1985cb4ee","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.f5b6110d6.0.tgz","fileCount":10,"integrity":"sha512-48I7AyzAutLfYdz+auzI26V2TQDbkmSqDMfUiGH5obahdaisIIUT89T6ocwZAb7koFKcy11gx4CpMxehQTuBMg==","signatures":[{"sig":"MEUCIFEzav6WzecH6sr+AAPxA6HeaqtajYTx98mlfkmikP7wAiEAogxCDcCuU2ISl2NhayoKPrsx3b8/LZBlIRT/G/zENwI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiIraCRA9TVsSAnZWagAAZ/AP/i3dZEAyMV3yXOU+Y5Zv\nOmPDMFe6oESZYLtE6c5mK5KZvKAdt2A0JtMADceIm/pDMZCYgGJPWhTaOVo3\nw/BvrkwtW2DLizkJDMRmHKpCYJL3ExCYa7mEqeuofF/lFkqFYBs/n92qsmwL\njYS3e8+6B6uxMdxeg+pZAV9IqBt3TiiogF5c2dbGY/f9y9AJvM8Xu0lE5WG0\nAQTVeHRD7j7HPVUrN9QLtJPGiZeacy9czsJzC01WCdqI6cH8JL0oq/X7M0N/\nM4lnYxXq6HYyPslniX/n5QtkdBio1OqMIrwKyVoiVSRKy8OhYADn1sHEoqUS\nqc6HCA/aPO4dqbTwgOzuGA4pXd1MgUjB4ldWHAkoECS+dI7nBdmZIT3z3WfQ\nUuHATEYWYUJjg+cazxgzuqCPzKbsdLlO5wTLFu4qSsOoGDY/hLPYuz/8Lc31\nO7Pr5jm1U0AWbmSc8qDJ/N0Td+wGqNDRmWeNgZv/GXUGq3mU5lW/YZHrFytf\nxWEYKahHq+2rcR/BqxNSAr9DOdPtmvWL1xOCA862inMaoszR+2q275JA6E4V\nTKhMPbLjDobI7rynWB0cTYlvm2UX8E3wbsQFC9UmeNLVeR3RDZppmUFZLUkQ\nusymLopDdRvu61jmEhy76mMGHhUJUxjjFiiArQVQ6nA22clroTaluboIBmEA\n7h3T\r\n=PQ1a\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"c7be6486c9ad6826105a70187add5afee2a6b50a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.f5b6110d6.0_1619561177674_0.912124168491562","host":"s3://npm-registry-packages"}},"12.0.0-canary.cee9b9e22.0":{"name":"@material/density","version":"12.0.0-canary.cee9b9e22.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.cee9b9e22.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"09234568146384a49a8003e40494748d3dd9ae99","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.cee9b9e22.0.tgz","fileCount":10,"integrity":"sha512-YBsDOH+Pef1cliWnlISZGTva7z4hdfPrCpGiGkr5TpTxDfLBbciLgLOAegZVrcPL7vUYqe3ygJJx+y+W1LLc0g==","signatures":[{"sig":"MEUCIQCB/lVwtsXdXU98mssmXyT2VyU8iKnz3wxKix+Llk5ZSwIgGuixlOvtJygBKvh7Ed1/0pu/X1lgtCw1u6CCCI4IhW8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiKg1CRA9TVsSAnZWagAAdNkP/RgRFUSvjRvKRlwj3KAW\nealgbov0RQPF/Axslc2H3PDLs3gc1yuP1V7IcSo+9ll+SpyGRlDHWHqudBQ4\nmzcoVX6LTCYJqGtAWs0FyWsvRL8/bG6ucsHkoqnt8uHnnwXck2xssjwpgADd\nQiWJPUNXZWhuAAGu8fxCROBJyiFA+wZszNjW35wazCFOVvRSxg5JW7AaRlio\nASpQvtd/cDQSDNwLAZPhCuwlzSE7Vj4m4jEI2XjdIM6rOnopjCKzxmlpfjbw\nfxZUfsgUnDC5M4pVmzPIx8+jULJyilpOyEgRHfXBERcH8doEKhNPS1y/wPVQ\nRgh8tyU+CFtyNsGBClx0ltB1gjoFUcx+7jY2yPK0tqbIa4pVc5njVM4ePCKo\nR1h8NOa/7W+ZMQew7WhOdgLLV88TsjnaZwrRV6WoptUVgpUucBRLQ3dQgF73\ni3GhwdfEhvw+7UdXfiF0GLZj78xaDVoyVzui1gk7aCdmfI9yG5GkPKh8keku\njpvWkI/ubUIbk3jcX1PGdJcFPjmkIFYa1EXGo0HS0QwpQ0eMH/3trra/tXAq\n9LvSSXKtrpShd4K23uJQ643fhYk8bgp0MHCe9Um3x10OT2HxX5povLDCEHWT\n3eEZaElNUe103zZGM7PRhuBoKRL8SuzwVdViEAXfmtTBQCqMZyBOtq/UCbBG\nsaHM\r\n=ADdb\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"b0c779970f0809be4565910c1abadeed4dab0377","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.cee9b9e22.0_1619568693521_0.6464151787639998","host":"s3://npm-registry-packages"}},"12.0.0-canary.96e83fca7.0":{"name":"@material/density","version":"12.0.0-canary.96e83fca7.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.96e83fca7.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"837871c899bdfbab761566cbcfc7c9d103ddb267","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.96e83fca7.0.tgz","fileCount":10,"integrity":"sha512-8sUA57pFIdMw/LpmW4qNyspHVkPj+mcgW01434Xj+0MLphNJbAafAbRA2JMO08NXa3I/KNimmQF/fqayNu8uyQ==","signatures":[{"sig":"MEUCIQDn+bAF7SDWAuiLTvColB22ZrYlALgfD4+Xt1zZJKx3vAIgS3jE4DDbeBNNq/rznS93XZ9KnGA2lJeSFZv5e6mMMNo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiMyYCRA9TVsSAnZWagAAWk8P/Aq5Ny2xyKMzj726v8cW\nlrcoWPAZPVlETBEgrFlvXOljF1O9O09bvsZV2wiGjkjB5wSXE0iXo3DqgsXP\n7hCgr7HqoSMtHkKHPa4X78btBNcLROY+Ma0Nb7oqdEi7RehwbGqfc4IEUIiA\nvQ/AMfBYlr9e9QgnldHjVlMV+oPSrs8EmoN46vHguJ4T/X49POwxBIjWe3tU\nbJurqJtujPBwpWPZ/1yZc4XsWXxpiahob2a4HjToUydzoQpJ7TG/3fUtTboK\nR2Og9TLvoikAY/8XoCRqTkFHBMLLwxn2H3sUjZsLPNNdBZzM7hRQr2oWI9Vg\nQUyVpMhhPqy2qNVt402hexkr9XLkPZ4S3akTppdyMBjPLI+e/p8YzVssNgsA\nkWmp43YekSIGR+ZpA3alGHaI56fUNvpgaJLLsN/f3b5JToQEZD+sigrb7kBf\n0Lc2sjjthXbHdVnc+6yvIfPEQcp1O4/TqEMk+j5kfFMj4zdl91TPNnI5OSJk\njIRb4zZEYw72yQp4W1fEYDF3sefKUKlJOskzbqVlUClMXzA3W9S9ab+8AGMI\nEbDnfKvrQbOPOyspEERU0Cglk3x1LbB/Fkvr6xuTD4ZNo+AJ3sJ+/bGzjZEI\n/Swl4pL91AkFP4JWq4aUOKIAi7HmNGh71Xls3j9E/13wn4INxs4yPd8Dp78r\nXeKd\r\n=gDvC\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"377f0025088676d544c1393884e5f27e96143f16","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.96e83fca7.0_1619578008061_0.14404397862097107","host":"s3://npm-registry-packages"}},"12.0.0-canary.4c497bd19.0":{"name":"@material/density","version":"12.0.0-canary.4c497bd19.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.4c497bd19.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"079ef3fc50b22f653fca965329097bf2248b0f91","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.4c497bd19.0.tgz","fileCount":10,"integrity":"sha512-gXQiENrWHR9EQyhWmX0NbMz+KuDuK4KWChSZhKQuwh7HZFqSD+tXTZfF1LKq6R7sBXS20q0yAxV6m6bLpCyDQw==","signatures":[{"sig":"MEYCIQDeY9RhOkI1uaNLe1sE2tLlL/62zTpzq9/IdEqAjOgGrgIhAIgtvZOYgw3CnhT+vrnnYsfgooCktzjQpVm93Y62Us1d","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiaDZCRA9TVsSAnZWagAAyY4P/1Qxw3oP764LYCgnA945\nk2+lrDikJIdF3xbVvyPDB8Fkdel0xylc5RDnHUtmT++kNfmsiWHZ0fgdJP+v\n24La+CuMxgy2hTK9XGUJ9RMBV9Af4oTRIlYX5rnrlhFydNcOrlNP+0i6XAru\nFjJ71EdVXdj5yIjkUwYK/wDKnWp1vHt/qGC+FAdjngLtJBq/QJpytzLNL8y0\ntfcsyyeJvY6hCvM/C7WDi2WYFI3G0A6AjzKz6CIK7v4vM2M2lXwYxhZ35P0g\nV8kehbx3XpXbkn/57dD6nFJDvM3mN2hoeK38kFK966OE/BvM3QcIGAgQLFFG\nBF32SqXuTcohKTJEP5upDDlu67P5s+mG7E7NbaWn6tLX6Y5F5mihM4QwTJay\nlocYNwkmvDQk0/uJWOfpauKbFVlXpUR5n7F0bQtuA3cAB7TlB18Mx/kc1g9M\nLESr/GVq2+oMRGbuFz5IE8OXx99krRDAIYxwZfyhqLR0QEjA1h44tZSyOidi\nC0YSYSpY59NG3U6N8FoGVOszlpbwbUCG8qu7UsnVpw+ZM/MR6URW8C35dSMe\nDpE/eUhHoYoxeXvXBbtjRNwaAYGBMKDml8MFQzlzlW7QjovN7W0PWUmMDd9r\nluCW5QtCAZzb2ELt7V8TEKYrKOvzbYjRHWiPZLgUQ7YVHZdoXHENs2tQNlsd\n6iYd\r\n=5QeC\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"beb4a14c8f43815a21024c26a96e3c53851a9b41","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.4c497bd19.0_1619632345000_0.35616330467799906","host":"s3://npm-registry-packages"}},"12.0.0-canary.105b15b96.0":{"name":"@material/density","version":"12.0.0-canary.105b15b96.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.105b15b96.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3010e625375ef22d319c4cb67821d4fadb92eb5d","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.105b15b96.0.tgz","fileCount":10,"integrity":"sha512-hxE8c+jzflkOqlsbNvRr0KRgHaNW0dmvMsVsNfNMkrKLCJAc2SrvnjdowTNVt7XDO21u2i05G+gTOHjjaMk/Vw==","signatures":[{"sig":"MEQCIC9NyHcwzsbmcyvoflEE/NhYI594t0LVr1k4bandllrxAiB98stCNPdiFLdEOihBPvGppPgxHbybVTtnZsjtNx/z/Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgidcFCRA9TVsSAnZWagAAATcP/0BE3o1Q+mH93lcYBx9U\n2qTHGlG2vrPW3dUc9eH2w9yZNmaeWGYtfQdZy4gJnnZ8jBKBMFvmgyApMQ8d\nHvcGyu9HymoEELVdBc1Ubk18CJEG3V/irNgb4dvqSitZBX+moQtcMxeq/g5u\ns47BW4Cx/WNiwpQ7Kk6IIVpSfRwZ9BxrmLNvB+i/w1WdR+GsMvNntv1TgAG3\nROnOHj8fl3Jg3Rkr+uXngc3aBVXv09mEKxq4oS/WDvZKnvlU0e8NaAoOuBrG\nHyXJ8O1lDUq0fyVKJUI6BIRoILkOa4zGTEGWLnpLIVcD5hMQV9+5m6C2RL/I\npfqI95s3IALul3CfxyOBaiA+f0FZzXb+9SDl1luygF/fgE3LEgXtLd3fQte2\nl2W2a/d1P9jjoxKgBOjN1j3iNKUMEJLGdLs5IV2lDNLAsFOVjIt9K8dSnsRB\naFPBYOo6mXYFfkMMsd2DrTeqE7/GcysIHFmIUfJRcqkIQ8Ja+pH+0gbhR55P\nvA7ADmPawt8rW5QB9JGYjgT3/Me6sYxRRb5dGPKCsV4T7ki/C53ca5Lu89jn\n3aa/0RBY6baR+AfRjm/hU5zALgETo8ap5ji4YjmpozbjrJX1nQaLmyPfNrQv\nzYTGpd7DdUivMLgUJWhEvN0OL3MtEQcHb3po5B1MQQ+VxjL3Hpld9/rPPAw/\n24FX\r\n=N68P\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"762e9351a26c1968c772104d6d64f7874c81528b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.105b15b96.0_1619646213456_0.8100303806446918","host":"s3://npm-registry-packages"}},"12.0.0-canary.6e20259e3.0":{"name":"@material/density","version":"12.0.0-canary.6e20259e3.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.6e20259e3.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6ce5670683a7d1fcac1bbc5fa5a655e8dba87eae","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.6e20259e3.0.tgz","fileCount":10,"integrity":"sha512-qyYl6Iyi9/2YZhe7Fp9r3x0fXIDNa43nFm5pGJvnk3fynwVnBlv+KlaMruIfdazc+06llJiYWp2ZNZ8T6JV3Qg==","signatures":[{"sig":"MEQCIDLEVREoMi6phNvl6xiDRA7r+Qngc44xdMxbU9mVi9AOAiB0Y41U9RQbOGnOzw1D4kKSAqtPPCq0W45qYdqcYpybvw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgidgZCRA9TVsSAnZWagAAuYIQAJ+bt36/8e8jAUKF/21H\nSRGYmS7ig/OREWbd99a7ZxgHPcSIOf1A5ya4bMIPdyfSw45ZG6Aw462e4KQP\nsGT35gknjHy/TrUjo3F7cedEdWEjYvS9mlSs57STFuaZE/KhQNUzZDT4yvHs\nIdf6aiTjAmKNTYy2mftxTwiZHQMDXGAnNHdBTn2f5LrkD/VOfsrms5+wkJMk\nPE7mzCN0F1/kR7RQON0iWKqNjv2FH6gvAMzW/7r3vGcwY64I3FiuN13XaocN\n9oo1MnzQ1Rtt4n1zYGoJPbJdc42xVd9Et3WS82a8i0DoR2FOMTbTYs52iUML\naeOb7e9KPhhuNBPGLeBLO7rNtUy/OA505qwUycu2T4bxNY+jkZEz2hgToc3a\no5PQJqL+UIdZTSTELL9X1hwvEFWL9pi18sempDC4ptMCjOU+odW3+bQuNp3W\n0PbgJS3HG/MeFJReqL29w7mBqRcHN0gzWdNzI8UnTjMFl+PrckiJ4j5cvs3s\nnDtxdIDMpXm3XJDWu+zSS6eUYPprDzfqa8HSxAV1T5bNyn3ywAIx8iqTgs75\nwfDaLiAnnKZudQv+hsUuahTUendXmerzrXvKxldr0OS40BHIccMjYMslbYpe\nFsLzLVa/Z1Lg0lTS1hfEnFJ/u213L5dFGqFlwCkFQS6LJqVDCyI8abYjEUid\nxPJn\r\n=j/D+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"8e07864b42f463f977fbd0f9264b8930da72711f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.6e20259e3.0_1619646488801_0.7765499940870648","host":"s3://npm-registry-packages"}},"12.0.0-canary.0f79a5d74.0":{"name":"@material/density","version":"12.0.0-canary.0f79a5d74.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.0f79a5d74.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5d2981a26701426f038d2caa2a1303c3c4eba316","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.0f79a5d74.0.tgz","fileCount":10,"integrity":"sha512-wRkGptC6AUb5rMU5xPd/6BZLDTRQWbDSI+Ijg38fu8esJ51DnvsETyV30y74LB7n7Q25aIXBY/3TdRsUj8WjQg==","signatures":[{"sig":"MEUCIASZVzOsdmO87rzYRSKat3BWahwPjGd/du1oGcCRl5jjAiEAsBARJbsAmMvKATPPDhJjL5eJWRN5geE8QNQ5V3JX8ig=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgieSvCRA9TVsSAnZWagAAMUUP/AjW/rtsw9vrb7kvU7qO\niDxxdy0yTkbUQrsBgXlswn1pyfLTR8EEs80LQHwvs7DF8dDA5NFb+s5sW47Z\nUXTOI/jVqvJYo6NElD6sxrY0r6ACgNR85Bt/6IjF0RoWulqQeYQIU/L5ozC1\nj+0D/jxtAPOxwtQPxRMOa4BgQMVx4neHeud+VSG7aDtKqustQbb9wuS4gqPD\n0YYOfkj7IjS7UYKWhhXDJ99zSemvfChh6YhcPi9GO9LzqFzIOSq1IthNU9FV\nn1A8UdG6Oi/IcayYWssQn+5CZyUuaytyKoXXWOZctvwh/HigWnO4cSnZLzfS\nL3lWHxff6hizIqa5NvgBkYOUse7o5xDjtzXbJUARkCiQq6SCmfJ2f+Y0wSQM\nrJz4SExvV/BNP6/jply1nNGCcTZH3JMLmDfgnKmPlrNNEKcuf80jIL1jdutf\nb8CbukzQ3B6q2WF0WzxBuSzJCLBnQL6N9mNpVPLS8wH9rSrR20IqYEDSxMJd\nX5INq6zuRsx18FlgUW+NlaVoqnbq2giNNFr9z/pc9hOH0AjtfcsQyh7S8ux1\nYzJ3dD4eYjmecZRQwatSoacNeHeJdDqU1jOWiDJItGEv9ZO2fnkjR4n0HUiH\nVUS4Vn5Jdgudx0KaDUT1zaU92A9FHkVQllyuSH1dcw5Wf4Q/8v2vnNZjI7OG\n9rEz\r\n=S6tB\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"2fcb990c07fcc62dc025eb258f87a8f04f08fee5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.0f79a5d74.0_1619649710587_0.10959048565330676","host":"s3://npm-registry-packages"}},"12.0.0-canary.84f3db9ed.0":{"name":"@material/density","version":"12.0.0-canary.84f3db9ed.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.84f3db9ed.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0549dc5241f02c33f1abcf907b5e6e3a3a16bf50","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.84f3db9ed.0.tgz","fileCount":10,"integrity":"sha512-p+WdPwmLvMWlfGVT23pe5xJ39narbBD4qZc8IumGRxblNJML2LCbBLN8oNJoj48sVGzh829i4lj4gCa7VxPihw==","signatures":[{"sig":"MEQCIBWBu9jsGI007KljpFOomr+hc3H4tP4VflseBK8Iwn/3AiACc1xpjTR+0GUcvBjXesAjEJ1cPhhAjfygC1KVXPmzPA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgir/BCRA9TVsSAnZWagAAIIwQAJ6CnqLeKctOaXaJml0n\nFNafcaJzg0aGbr30dyNOpG8mIAO37TShrBVQB3wcQJ0Oznawm2S0J7/stx9A\n34B2L0e2G+wCj6ZWw43EcoYZbhIJwMzcclw1jaf7LgGTF2+06VQX7QP2RZuc\nDwFs+nYN+30SDEmHli+fYQBnbsmpUUQRIf4QRlk8ByaKn59UIP20b5HfM+G8\nAIugE9PR6WKENFsZR8WsLubiS4xx6MbpmRBcjB5QE7L6tY3zLbVxBqqsMi4G\n9BsIL/mTgu7fvVcV8xzWfgTFImfVKf+aO0aIVu29ahGn5GstBdgiJsKrRUSC\nWqoPrv9kClcAr1eTOJ44AfERB3PQy1JxrFu+EpN0mSg7k9blZX0ZZEb3Iqzz\nRsP5w0gkdhjh+8ozLyX7WAM5GHD4EkprT18GkJbJX1b9fAmMhrHinmoK+cTV\nnygAaKdxd7DNk2Fw49mZ787XjgqEH7DoRMbJXyEmZkfKpRo0TV4u0btCbzio\nXNm5iQ7ET+bIILYFY77Za4C+Yibe+eixLeYdLzGvLVH4o/sjal97N1xN4SYn\nJgu1Yf/3qQjzUlVVnl40v6cdyqu9CMyMA8cWMdq0V6FeAvIQJQI54TAAeCqo\nlY2n+60GDxY/955owW589J2h8gf1xWa/QZZthU6kn6zXkX354mduXaxXJEdE\nTUpt\r\n=oDv/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"7c4b7e41edc7737412479194451432cfd33839b4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.84f3db9ed.0_1619705792960_0.5701372891788123","host":"s3://npm-registry-packages"}},"12.0.0-canary.8fc29273c.0":{"name":"@material/density","version":"12.0.0-canary.8fc29273c.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.8fc29273c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8f97e13bd52f3b62950a29df39f833f7f7cac8d5","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.8fc29273c.0.tgz","fileCount":10,"integrity":"sha512-SFusMSVD03PoZi5g/Tte2f8zW5Xc4+cV1yu6SOlK8GRIYuSVV6okmCMZSdnvBOiXE20gX9KK6a9jWGAYmq5knQ==","signatures":[{"sig":"MEQCIFOje4ZfDFxV4EAi1m+nqiu71lQQ5Hsrr4sVJiKR/aGBAiBFrFJV2WyRsA6euVLuzfIBvTsf8gzsIXrfNVdg7ZETUg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiyOECRA9TVsSAnZWagAAtGMP/1akK3ByEFaat+uy8xOZ\nBCclKXiGIliJ1EMDx9ha0QYqnIy6HSvQMqh6n2BmnwHLDlA9y/G7dY+7+ofi\naS7TTnLQDTQ/R3TjYz0adw/1lA4tEhOQ0COWKKHPksBOZbAjOBtIKqmGSZoL\nFk9pHn5JPaBpe510WRN2AoZcvfEeVOhmZK3EfUKUaOYqUb+ybYSPoAgzg+HG\nyCZDUrVCdUjp0QIgY8ihVEz6g5NPBI9KRRLJ7Yr9EIQM2MXT8EIspQO8imbo\nk3zZjpiVMX/pIRtXA/6v7Y9R7JnIq1vIhyOr8gNciO0qmJWI4awmwgBYVZj8\n0jTzCGJbk2+TUjKEd2GuftfDiAOj5z6yI+V+LlnZACBogl9ogruxMhhRSDfO\nwQaNOo606oGpPhwbuhVe3JsjoMkmG2m1TcXWNNUFOer1ortmf5xqdJJYEaMq\nFSDcXwvcusGjWxHSr/wqPxWpRDgi1znWCBI5iX/Afd5IZ9D/v2M/A+z42QQQ\ndCmRN+9FHZLYEd/o5J5nta1blH55rVhgliogj3OrZ4NGbkDHM1/7G1XjcP3i\nLESQFhSTBNSCv5XuG/UkRWOwYOfBnN4TKjTROMiel95zdu+YHmM0EX7HO1dm\nP7469E6TSs1pq96/27L5NN91PaBeEpK1EUz/n2DBh8cyCVSpS4w/vOywmE9k\nMt6Y\r\n=pKWG\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"fd877c3e50788fb95663fb8213bcd66f347cdd0e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.8fc29273c.0_1619731331891_0.23317926264472422","host":"s3://npm-registry-packages"}},"12.0.0-canary.c50d20bab.0":{"name":"@material/density","version":"12.0.0-canary.c50d20bab.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.c50d20bab.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9d087486b4dfef0e2e81cab42645dd5608bb1a4f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.c50d20bab.0.tgz","fileCount":10,"integrity":"sha512-pjyZRphmPpyYeOxkDw6sQGnynmjY7K0x1dgpP23aDmnfHGJDBx+9PmJaQ1rS9BoeYYttsZ9z+9M++08kSIFPRg==","signatures":[{"sig":"MEUCICQ/2bCDgAYo44QQEfdXEo+bye/Ejtgxlj3NJA5J7d3dAiEA5OZJtxQcRtEH9CcORaW8u1TTkBQtCv27lKTcbNCaV5w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgizqbCRA9TVsSAnZWagAA/zkP/i3vi4k3NrYgnVqBxZzS\nMX4fk0v1udKbPLLG3+I4fSGe2g7oE4s/tM72CWEZYe9+6B2tx8gQ64Z0kscI\nBdi4Zwd3xXgIGXp3J068rtKL8zFX0GjVAj9IcWL+y+WPDYhqVi5XHbDdCHkv\niT6c9Pj6WR+o2CLZLkYVPdR9v6mplLBtKKFl2awM4+z9d1Al9MyZbQKx93Rb\ny490/JMFbh5jizQlDsWx41+3T7bq7ivrH/bZXR5njC83ngup1bNlIadLFfJJ\nDL0QicKFKKHY/1pSGnfYe38xHVXWEQUH4a5m+/o/hXDsVSFRfwPBc1/nWvjb\ntmtt8Z77N0nhdnWmF6K7aX97wlucgi+7qSBiOf/r9klH1CsLpjM+H3AKLDZq\nMnQFfC3EZY1NmdS/BesEgl8PbLaEgq/rPd/E12/vB1NBm/XDtF/BEL7gdqrf\nabpcFrs2g4v8VAZvzrqpS+vtC2NHXDnwsDdC1ZhJHbjgWBXLQYxXHCoDzhlC\nBuQkdc3yEIlcks8Eecjz5YykRdJuhOZZBK3xEjiPP5EjhZ/f4TiYAU030sAg\nyWXZ28XXqnc8uYnj0yrdpe/wwsdM5GcLfVliJ9aOBVA/7T4FYcup1TyrLpS+\nyl/50LYOPaMqPtgIeAFGnxV4RLLTLw4CDMoVCHkzUKjMEivG8uWcGGT6tDWm\ndYYI\r\n=tJk5\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"2aee1fe5eaed5267b0e67f1610c29dd399d323c1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.c50d20bab.0_1619737242627_0.6266748138285734","host":"s3://npm-registry-packages"}},"12.0.0-canary.474836ad0.0":{"name":"@material/density","version":"12.0.0-canary.474836ad0.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.474836ad0.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6988e84247ecefba9d63af7d043530d88713e414","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.474836ad0.0.tgz","fileCount":10,"integrity":"sha512-o3JaZfKZB16EQtWn0ltnJQ4gTuNbn+pxQzkfltl4fAGxd5JYCRQ9FAyNcM0l8+vXhZP3xF7TCX2YxtFsSZxUEA==","signatures":[{"sig":"MEQCIAeduEZp2CAj3anYo8pdzKGquFsBGAJUbaguufBGBrUUAiAmK432OVR75hWBMRwflV7/0OyzJqRWUY0pWrX5eph19w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgjMzDCRA9TVsSAnZWagAAmlAP/jSnXKDBSUu3qYrvXFJj\n0a3nMqjvpZeQcYrEBwY/twn+mYFSIkx7dX9lMWrs6LJ3aKUlChnezN4Hjhan\nASEjCmMexpeY87484FauYBqAAbdD/I7+K8r3eqTMvUJCCJ2pWgUDN3PjBrKY\nZ9wEGhbAFxkOAcugohlZa7OJ5MXHiUaGfDGj4umz+WtPJWidoSsXE8iuVNlp\nSx1fkDGASrhvJ1adBnG6mtA/KNd4CrpkX9HFSHmRw4KBza1vyRXKHOdB2YLE\nOyN9Q2dpiiwzeHW4fOzbVj68N+ELP1l0oIQ49mBd6tCW3P29QdhuucKyvPom\niOlUSzYzh6pgGIwVD6P//Z8xK3LAjI7Oi7G1ioglOJVyK4Og13Kw3Ztezz+H\nKw0GohbNMnv60t8Cvr2yTtUwVTq0k8KO+s2WUr+dELU2GhOTnB0D15LsbZIa\nGE5YOjb7NIqBL97x408sX48RY1AzfLlbyOdAgjoLGaKHHdNwIZirc6AWIPLg\njbozgw0VlZdg5deli4R29o/djFr7a0Fj30EJ8PG7AUIduLaptqdg5NiOgYYf\nKSx7stRswkVlOr3RkpnGvw6+7sO03cPF9+c9edBUXclpkMhRd1xy+YKRw1Pd\n5cabe03VETxOrZJcM5H8boqyJsNTPou35GFPXL77Q+QBjCNnAenor7PTYn4T\nIoxn\r\n=5cIJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"c9a6db3013566afb165bda88b05607f2ee398718","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.474836ad0.0_1619840194787_0.6497891779840916","host":"s3://npm-registry-packages"}},"12.0.0-canary.f5ad92287.0":{"name":"@material/density","version":"12.0.0-canary.f5ad92287.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.f5ad92287.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d1d7016de431e0745914740e9b3100c32690acff","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.f5ad92287.0.tgz","fileCount":10,"integrity":"sha512-oe7NFm72XxaJ5xATaCHGAYHMY4Y5xPWb8ytG8klCMB3Noxcjaewgl60NroOeVBfa32o0uIiVvG+d2qEBp2pLNQ==","signatures":[{"sig":"MEQCIGz28YzwF0IDEQynCNg1U8QyIUBviRwU5FWTp2CsD8xuAiBnLZK7mBF2Zf6yI6JJymbjPwt6UtO+ip+znZbEKUMnog==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkD8aCRA9TVsSAnZWagAAJ8IP/0I1KSNknUO6OCNudjEl\nDAAupuP2ZkS2cNXW6yzFwkjkoKbVNfCs7cJgATGxq1MCMA3dqKE80IZRda2D\nVVOMr85uMF6d0qYmbspVsFHY5JFNwzBpVBBrLKietNlPuuFo1nsJkhFcpwna\nGitIBfIq9VwaHGyaI5iS9Fx+XiNhncGLSWj/sETu8exSMvnXGm7GHmfbpXi+\nE/C70J4zARho9hG7JL9SNpXtww425Q24g5+4v5AsiMBluaJs6iT1S1pz/mbY\nmQBbPnjfQ89F3+BwxYWa88jDjGQrpU7uqgOtzYjiO+oZhrQDSsQipEZXKD+i\nw8N+0L41AtF8uF9AFhVD6A14TQneREnk1c28NPyQlrXk1acbTi9eQJ5NRF68\ns8YDnwOqKcwGdasmEz+zwe3bUeU0zQZU1BPk/oDMazOscJzUD/+MfuLroI1y\n4y3DI6Y0YRfMobiGujLwtMoqjVem1ReWyiMaYWTZd3b9XDM3J8dPw1JDtZgb\n3MBM7bUGj8oIccnV5azrrMZk92eUDxcAscM+scoajxA6aknQ1nUTcPGbyABn\nHf+ZLiQWzLA1sUYKacsVs0J95LbNDCnHSN9d1apWikZWetxPYYZ01hS6Cbpc\naSvxLqLNYCc8Uh72fAELQM42ISNp72dfom5WliQVjWDpV+Fn0hMRLH6wUIrA\nJ4Kh\r\n=2vic\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"493c206bef4cedd10981093c61731e1c1547227e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.f5ad92287.0_1620066073577_0.8552667974121819","host":"s3://npm-registry-packages"}},"12.0.0-canary.af453daf8.0":{"name":"@material/density","version":"12.0.0-canary.af453daf8.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.af453daf8.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b4ce0eeb3a0d396a185a21f9c39ef6b7a6326cba","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.af453daf8.0.tgz","fileCount":10,"integrity":"sha512-0XypRbp+jyg3Q1kb9sqhvEJiAgSoFQrrQw54BrbZ8yBUtPqHZ0FBBqLclC2IBkWzrfqLDNR8Nf+GyvFBb+9ogg==","signatures":[{"sig":"MEQCIG7Yua4bUgA14f6FtBs1cQF2XtbEbVCvHwKJyXuzLNvvAiB/q7+vciBgkTNBGG4RB7HjbjVMYpjKH57qjsndarl4oQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkEZiCRA9TVsSAnZWagAAMSMP/RnVQkCVw42ziq3bO8Gq\nu87bP698DQFls7TqA6jx5ClGvXNE7/vDWHEVy6t9Lcz0E4ebZLi3x0cLT3wX\nB3UJRvxMxDGGzDtfHubgcOK2QDvPguuNY2IFpB/u8ArQ45xW/kww8lAnD+xT\n8p2ItTGIM6wqo4se9OescLUGUTyqKOVAds+IeTzXRWA9cTKOw4Isw31Usp9n\nWX1XPTyPBZnU6/zN350B8SJaFySBwwrCbHbYqBbMTyrRsf0oAwIFTjalJ8DQ\nk5eJLuQOfYOx8B8CO+tfwPTHvHyJ2pHliRQ/L1PaU5U8YN6n0Z8GDaMCmKdj\nBj3aiukvCT6eYVZuRxTsSZVvMZmoYkNrcGLdbftYBqM4AgozTej1YvGRTqco\n3W99GxuEzRcDVWdU07TQvubJkZpwuTVlL4eaV9A3GtIQnohlGL5rQZfkqvd5\n+1D83Yfg3PqeyrvyIk/MvzQQjv2wIVTyazleJ3ilOIppOpNFZwvZ6s9Q8EbP\n7e6zpM4X9XcZMZO+92K5AfSAl8tkI/i+BjR+mV1nSWRoGvD/A/OxSOynTp+9\nq+6ZKgbOTRlHtCItnOlkKx4H1pIkeNPnqjzsnQZEWrWi8bHOYUlbEVTVwrBA\nfufdkFwwWjrOxBHyaSu9kxYssmFbw0hQMCixvQvPzSpPq51yow8flT6SdYYk\ni0hQ\r\n=LIAG\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"d55347cda19a4d9469eff68955185d9d5e235a16","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.af453daf8.0_1620067937850_0.49070722685172896","host":"s3://npm-registry-packages"}},"12.0.0-canary.1f1918c24.0":{"name":"@material/density","version":"12.0.0-canary.1f1918c24.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.1f1918c24.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"44a2531fa2c227ab7a33105fe7e252693edee9a4","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.1f1918c24.0.tgz","fileCount":10,"integrity":"sha512-4ghZCinAxp7OhyCXsh7jTmaJzJfRFmWdqRZRP1WQfQI9NgBeLAqGZQJR020eaMTXPYseGyxLdxA6e5/kdGqkQg==","signatures":[{"sig":"MEQCIEc67AgdIsP7ynhZK/uvLwwMiNxzVFOFJpePxmwGtlZiAiAPt8nmqj//durNKzsMKKyTj5Ak4kTJ61gTwlfcdC/1Rw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkE00CRA9TVsSAnZWagAAwCsP/18+nN/nrwJOZzvzQczI\nhx7kbS5p3XrohdA1VfYyv+WhLLvH+txGE+d8BQIXe0kdccqenxbp+PvFAzSN\nnlEANuqBpt2EryB3a+bZ0eIBb29WAWA6C5WRM7ypF77Wg/TdNVy+s2DPBvI0\nc2oMnjproMjHntKUU1k0zzPV6MsFtHxqv4qhJwk4d3QrGbTu2lBA+XAsAgJD\nHrORfyi54cmnmewf32Qo04LFHDNvIVtUqevjKX2J2852tmlPGzXakzAVdKNU\nZxD/zLk0Xdp4aq7LMY/WID+IsGlfpJm/Yne3VW3Kr26ZEToMoO2WY0Ht4hAI\ngFS+xnYIhYBVJXdUKKG55hmsFohgathpwvBMHoitDTzti9qaMpZ+sUXPkSGm\nOftGtrTTK4bE1ozRANlGIbjySeZbVJzHB6uXadS9S1wzKkkDQ2oJseFZUOur\n/B2280KNFqpmPSUzWI1/tG+rs0tQckoNdcanb2uXUGEiUK7b2GCcJOzOX2XQ\ncVU3NVYATKiA/H7yrERnXEGZikeSu96ZZ1G6PA/sOuRTznR8+03sYuehL9Gf\ndYFd+gktO+8BJrh8tx7IRH83m8ER42/g0o0ePS43F7LKIbpaoqBuBC76P0uq\nznOLrV7L8uQ9FHnj7HkbEc2G+aUjUlz78gH49+Ecr9V6szm2kJAZC3IiYxjB\n+GKH\r\n=I/4K\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"cda2e786bcb73ac46385a1c6459a8ab7bd9ef6a9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.1f1918c24.0_1620069684231_0.8517073534306419","host":"s3://npm-registry-packages"}},"12.0.0-canary.33148231f.0":{"name":"@material/density","version":"12.0.0-canary.33148231f.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.33148231f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9da6b8cdd54133626f1f58e1ad7f5653b06b8eeb","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.33148231f.0.tgz","fileCount":10,"integrity":"sha512-z1DhE6kw2QbReC3oJEJTkx0Wj/OPGJx5B3LJ+mEhIouh2yCBc1c/l/DG63p4EM5gXH1FBoefkc5EzE7cKZE0uw==","signatures":[{"sig":"MEYCIQCYyuvPIqPbjxClD0ebOdKwy9tYia2V+1Va5hBD7vpZFAIhALy1peMsC4ylM5yXApZu33AEnrzFveKC5P7h0oLjC0Py","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkFEKCRA9TVsSAnZWagAAtEUP/ib2f4R92Q4hK29ZytVr\nFsT/u9rWj/M5lIBPzXwRcMzZwnb6dLCkeIB5tTLb7ZlyuXd/MwoqsVducez8\nGMVCk0QUUpwVy8kIFVJD1gK4Eoxj5i0tGIbT3NZAhnrxTNPeYzxQ520ykdpg\n8GFdw/sekXY/q0ZIaDaAtYQIs5T6GMa1yXVfpzV8UuOJJcPvGIwuI/UyT3u9\ncteLYGN0rAAmclXsKy7BpOHKoyzbNfl4GmY+6APiFo2tur7p/27PYlgOFJUb\nm+IgWm0F934vWUi4kn+Bk6pAsX/H4lZJH6Z9WssgAfvm6umYdfRb3s3H+Rvw\nmPUpKf95tA+6J15tV7QeO7eNE7Emm4CU5tdhbb9JderH/XUUjlrd2vo/dUky\n4TlmX2fqQmqKi7YFbpwaZ+6v2zTBG9Opk1QzzFWsy0SuwMo3ONbVFrups7QI\nF1zk78MYgRWxjsOgNCFMl+VVql+xxjTR3L2TDNpsprAPf/FowQ1dHuoLaFY0\nKWoeNVJMA4J9Im83EscHFNlOuKo1+61foOsOdh027dzkZnfhduokCZq4l/bc\n8j7igo/RPV16OG35WvYT/15UnxQ2kZILOSaTdqB3EOiEXda22XAms7h1t+jn\nLrwqhIm3cKjhDdkydqmvGb6uqbmP/2OPqEmSlX6A8xfb66p7E69IzaWq+hvM\n7siH\r\n=fxQd\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"bb5a14b15a74fcef265050ad96f737d0acf36987","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.33148231f.0_1620070665731_0.7299878808422382","host":"s3://npm-registry-packages"}},"12.0.0-canary.06b76fa74.0":{"name":"@material/density","version":"12.0.0-canary.06b76fa74.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.06b76fa74.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b60d562e5cd2253586280c45d8448d4931578a12","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.06b76fa74.0.tgz","fileCount":10,"integrity":"sha512-5tjVwrB7ltpLNzxhW5vysdzwjvY2uMXKxIEuevWc1Wxm5JH/f/FZaERqziT3RsNQP4wAYiumgXb4MNosEInhRQ==","signatures":[{"sig":"MEYCIQD2nXp8qpJA5gTCLOmt0mrUdVo6eVyJAjCWsobi/+lYlAIhAOCXPEDa6DmrhOiLB86whd9ztiec/px/wLRi2tPwUbJU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkFKsCRA9TVsSAnZWagAArBkP/jFlCr1jqztd4xSRmSVa\nXqov25O/wt+8zbWFZLl8r3bWZ0d4Y3ifjFb1QZqLGC0KxsRN/dAEy8Rh37u2\nSOM7jv9U1jAnLGQ9zOlA7SmnLrDbd125eU9J41QaYOXI1ld6aFPh2sFWQEOp\nlIWvuvMck0pcwTBIad11+x7LcF806jaw1oclEa9jrspzv5Z8cma4cHZJpMAe\nmDI8nMP05ODd2iZCZt11fGUTWZ+OO9DiWj6DkqzVu0VI/b2/FqfsTYkCaclO\nthjDXwIj6vQ0BWrct2Lkmpj8SkbBN5OUXQv2SWvVvxa4YBQHYWRi7/vtg4As\nAskMbgpowLnO3F3J/sAZjASyuLMQT9j8eWkfu7z6x8aZFjBsQ7dt2Mmpbjow\ngRuR/ohdRY+WXCwsOjp0GEj/zE3n39q21UfdHOkq9Nb8jzpOATo6KXbMdBM5\nBmfkLXC/bvcLlHgJLxBvRDpMJQCOgMODNkLpEZsrOfIi/qSYFnfkau9Fq1Y7\nYhk+6jraasE6J6H2WlmlcikVMVXBch14YEm0pm97T58/F05IujW/ldbRbotp\nWUFzRLOaBsre64WGbNgjbCUY8c0v6zUuvuBIblPV/yc/m4lI2gCCeqjltxiN\n4r9UGndr2N0IC/juiOZSPsagNRMKwr8ilaK1/IoyjyGcskTV6VtrXb695rZb\nA0m2\r\n=lm8G\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"6a6a73c9687e196677329640dc1ed025d13b44a4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.06b76fa74.0_1620071084396_0.9235577216585804","host":"s3://npm-registry-packages"}},"12.0.0-canary.7c5000473.0":{"name":"@material/density","version":"12.0.0-canary.7c5000473.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.7c5000473.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"faee72a558969fcfa94e28f71a396455db1b84ca","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.7c5000473.0.tgz","fileCount":10,"integrity":"sha512-RzPNJIuPX08yvFJ9ZdMHBDO7O8S6TXeiJBBF/HE0WLKqAp8ByqIzeCZtFhHhXb+v1WI91HpnEIzNn423pXy3NA==","signatures":[{"sig":"MEUCIB3++wxxMJKopIJn7LXHkduQo9EB2CxqQrMPQG9zbKLaAiEA5ND841ZViK7iBurX4dVqyCHvABEw4umcDb67lepRo0Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkHveCRA9TVsSAnZWagAAIvwP+QGdwS9cSwLukVXGfcha\nN4eyf9A6cqAgjVH3f7FvpBhnresOOjt2ND0UXPCddqZ1lj0GW5VdEaKPQE+O\niUoicLau8ngucmkQ5AkyxFWHXK38VstCcn6X0t1m1gU4kjcHmOvuNdrJWCAE\ngwFELT2WWL2AI3pG7dSftUU7ibgeSnaNefa8XYc0mNxpM3pDecwhgt//0PBq\nIYWHJctn31ThK+C6t1fzxKiT0sAMZ0VLwikx6829jpFZMyMJSNJAzJVX7vOh\nAojwv3mD3zzMtOfxOfUOjK0ES3VAtJmHGqtAbP2bQAStw9D0duAPlnMuuIQa\nWwbhlXApNevz3jH1BpPE9bs6P0m8VbT9+6Uoc4iE9oerdVhhyfUGDtpnrtyx\nI8XW1vkiBZO29JkkEbIboJKSkRCy4gtKej50qfejz69PBcnWEH/iMRYquD0G\nv3kzogamlGPKsp2fIxvvk51iSW+cZgqNVH9PYG7jKq4FudThaZzlWpEzX+RE\nO6QhboF43Yen4zMpZFAZYcM8Xh3Y+R8kK7lPaxYtoOKqC/OFS/tJ8cKxNSl2\nNeTNrlAmHfKgPouMzAcmjGxc7hZ9yxC0iDTPCxdjeZ1K+dj11zJDMkFG7cM6\nUiOD3t8KPTypM9+TGtkZLELcRAMnQL6brlWNdHns5rXFIDdHs4AK65Ahw8RT\nbbQG\r\n=s44A\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"d53e0032497f2efb6a42d541ce5cd2072711f86c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.7c5000473.0_1620081629569_0.45834298922494576","host":"s3://npm-registry-packages"}},"12.0.0-canary.de997644b.0":{"name":"@material/density","version":"12.0.0-canary.de997644b.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.de997644b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"257c9d5bc09b4e7967b0f71bbf539c10dc6001ef","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.de997644b.0.tgz","fileCount":10,"integrity":"sha512-Cp1kBJXwWpscmAebMRm03Ojr7zrOKcLUJcgawTaq26di21fEkS9d/V8L0J3ZOhYKt5hX/3OyvFpHzpOSW6poSw==","signatures":[{"sig":"MEYCIQCp/0qI6pUDSWH9CQmss9awHV9Fkd+CzTsANrYd0HKWuwIhAPfT+94Fp73bhp5ErB8OLtJQbRXSdHiAWQbYFdtWxdb0","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkYPuCRA9TVsSAnZWagAA+LMP/37oXsyznZowqA3jcx13\nt5nsBLEprNtP7KWGuQxIZ7EaJ/QDIblx+mEzD8iULcch4nDLJqKLwugmIPWE\nQ2T/8c/ew/tdBUf1Hu+ojNLs0QHJKqsbD4yaVJ/IiASS3/9Oz1QnQi3eTRzM\nkDXTcP9ZNoh5Bj72V+PNQ1I43ZITq9aFsouMoXixl47UGYjm0xqZhi62swbc\nakCryIuEBiG7zqOQ/M51aRaMsNLH0vZZfFREYlkOzIci8u5hDcy2VMuVhiAv\naybYufypHJ0eHmxxr/4ET8DTqB2xB92QmPp4xH3rPbIyI2yWPDh1XQTheaRB\n++2vJcScwhrjA62NW35pgjANl9y60OGMH67kbHBwQGhEc5GMunn/xEBMw++M\n0CeuaJUBDklcgsZ5r2igyKKCmZHD13ZjWWUzMziRxr/4oeG/UpI6IcRB7O/9\n/5kj89Gly6HI7AcxirciPj20Z8BfbKUysdPG2FmgOBW6dtlzWZCR9BAKbgKy\nWatr+kGQQnmL2P7piNbNauEebTTj2bHVL5PcuNc6WIZn8WwKe2pNGQAfOlCR\niB8uThmiKyqnZ8pDXcN+Ywng9Z0qIfE1goMK2gIE2/eMe/Fhr03roV69dpWI\nnYvBlIRigILU0ClkZN9hHhtVVpHtZu63+zWwLmd72zUUuA731vdJEgjqZVuj\nnc3S\r\n=jsIg\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"efb97e2ef70bfc07ed9b429041e4f201bb0d3a53","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.de997644b.0_1620149229657_0.8824448257720316","host":"s3://npm-registry-packages"}},"12.0.0-canary.d4d7f1cc2.0":{"name":"@material/density","version":"12.0.0-canary.d4d7f1cc2.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.d4d7f1cc2.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f80dda96ccfc192910b120e144c0a95938a5a178","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.d4d7f1cc2.0.tgz","fileCount":10,"integrity":"sha512-PJ/loBOvu16dQV8fgCxB2eKGmpE1Ec88AcM2WqoAKGWJFirlvUTcDMz7SKXyOSDTQGc7UQ1Wh4Oo3scG8ffPQA==","signatures":[{"sig":"MEUCIQDQHWmArieYdwGU8Mui0e7tPryzmY9lWwON/RPOJ22K4AIgKo4MesfMbCovlFrVt0XVM2+zs/SuJzy3sN/WOzczaSs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkYovCRA9TVsSAnZWagAAWRUP/3tFKZj2reVc9/QIqYp1\nhVkZ1K9mhVX2g9uExvJbOckUGYWz+O1KdC/vAL8NNDl9SLQFnRY/H1hSrK8H\nwuE36m9DnjsbYaQfuVAEgJOp4lq7Zr0mUxRwjIaZ9hcyhxNohtqiAUUtVoEI\nTzEW4uvLSd7C5TbCcS+o3AlPBo9FpOb+3j55yd8+pNyouljcHhQ3zdTrGRDZ\nUP2yjKtnzal2BLOlKgSk4Fpy2vI4ewx1HdoL7xl+Ox5vQr4IUyH69WCX3G5x\nUM/iknRmywa7J3JiS4Qenx1koVKdEvgsNZvCgds7yaTckfUv1/RTr1qvGLwa\nFNc/mjRpwmRcCAky4x6HmEnt7JktgsEEVmta+BPgN2RjWWI9rCjvP8cUVEKL\n2qxHQEOZebsV2PSRaG8uRA3xaQjT6htqNairp9m5yDTa/b0dK81ws2V5+Jt5\neWIYcXbvZxnpctpEoysDZ1vTCLgqRp1HY0IsUGqMjS9L61jIa5FQpUpsB9CY\ngLpQEPm1w+RIo01Aqjlx0Wa+32+hyWlOoA3W1HGU5VE1k0yJYaegSG8cbnZ8\nckRX32m5T1ZOANK8p8ovbgvOYBFO6YsmtWPIUIVsQDH2qJ+Y+3pyPYP9tENb\n0TpG7NErO8y/pjTz7/Q1B7Rd+fVkBasiu0eYXj1VU9EIK2SFUuj1a4s32HfC\n0yxJ\r\n=vB1C\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"473ac5e3a11b87616a0dcb004bd5a9411a271f6e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.d4d7f1cc2.0_1620150831532_0.23272035771678246","host":"s3://npm-registry-packages"}},"12.0.0-canary.be999eb08.0":{"name":"@material/density","version":"12.0.0-canary.be999eb08.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.be999eb08.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0c175998db228b72d462f295bfddbac95bd8b0db","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.be999eb08.0.tgz","fileCount":10,"integrity":"sha512-h58Ou9Pd28dnNhrptMCoS8NeHrpqE3v3PRoSIBW3qB9btXeq8aXJW/HRl2Z6tyKP16sYxK6ICTNRCaZM7ey8tg==","signatures":[{"sig":"MEUCICqq1h2/oHwn4Xr9MEd1m/e4H+IKFncwLHH+1NSuMGowAiEA7Vpob+pVYciUgC9vUcTOg/JNt3+m17Z849RHQqDkWlE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkYtnCRA9TVsSAnZWagAASnwQAIvyYZIpfshk3FeWli/q\n1qNtKSUxeXtQ1KcjY4R+lXBfIogUMtur8xzVAEyIyJRKMu4o9BA2PzfAWObv\nEUXq/x4y+sBzq5J+FNsAP/xy81iR+DwSwolPsJ3A6PMW+4NNHyC8d2WDAXAF\neDRZxZslRY5CbZhpu9Ggz5vGQZcLYaLKJfublTYSZ2SQ3JjmwiNzVmUqdOGl\n49VZUtnufOcppFWs+hFrB/9xe88U3vIsXmZHNAJ2Ow5d6EZ+IMtlHacejffu\nYj7NGKVcq/NWJWBDO9JL/IJyKnWZP3wvTS3Z2HD6jIeKOIviFw6uQur6MNSi\nnyQxqC7tquipeUGQl3zbCXDTu9xrYoZGvdO+84n3u895BWtpXGaqZPH711rk\nkyeptfuJb9iXXXz/r8oMXFs+H2nSKeppwM+Wtv4vkJwrpKD3P/8y5KfwKwFI\n4NWWPdlSD7fNfN9JhZu8XlzxSgOzDBqHP+4K1qZTBV0LswdwJ88C/4VayZEt\nM0G1f7B4NGPcejtGxPwkkogmSk1OaM3Z/4wJ6NH0UQ2kQFjZVDaGh6CSuyjA\nlJfpV7UFQrBbcz0ZVAZ/Y3ItsUX5S10i3rFVQ9/DT4R5EMzCmoJKl9h637P9\nhhslYemvKlR30Amr/6Hxkx2rkeAlSYNmRVsfyaizrRRI+zND9NmMNPsyGg6M\nicpe\r\n=6zmt\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"78911f7ba4a7d68ed38f554357f8f224ec7a15fd","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.be999eb08.0_1620151143031_0.8951114019726865","host":"s3://npm-registry-packages"}},"12.0.0-canary.eda1705fc.0":{"name":"@material/density","version":"12.0.0-canary.eda1705fc.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.eda1705fc.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f11823fa2746374f109e39e851463f4a9e026f60","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.eda1705fc.0.tgz","fileCount":10,"integrity":"sha512-+qpNMXsnaWphuL0+nOPDsP5Bu/NBNxGDzDfAuV2S3SzpkmttpnF7vP0flYsI+SjHuMM+pM1wnFvRVc6JmrMU1w==","signatures":[{"sig":"MEUCIQDMmBUIVN+bJ388AYjKo0TTjGYkx1CQL4ZV0RDufDD+kgIgK8HuOiPle7HR0qrfA7p1+tVTHFnHmFntHxihSRZUOBE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkZvZCRA9TVsSAnZWagAAYXsP/0K1IphgYC1KE7o/Mq61\nB58lY+sqm4IY7+et2jTWl3xeiWB+okVlDXWuYcYVSWS3nRLeFUqmDSx7BopG\n8gsmr06Ubp9xVsFLU89DtyWbvfidUWwCg9Vh6zjRe9r3m6H9U9/BWucsBPMZ\nYikjpwOijs7toT9CZlW3LYk1B//eC4v0ipFRLO4lJQkPiEK2EbGhVzZwmkVK\nqIGnMH71KdWQ6QXUOYz+qDsbK9v0m00nDGAXAT76FMRtZYJHo+HyUU45tc9Q\nt82hl4BhNnhesPRITdMDdZqiSKGIpjkDYek+Gol6LUsWnuf+NOcNmzHEIKak\nWOZlftPURzAFeW3mDQ/79H5ew7WjRFF+vb/0VE9dXPuhHy9zwOOi3bLTF6cC\nDqwiddqPEowwD9XqJRPW0nHbeZQXUpua3MXUBUKPJBYeNc9Oaooh8nN2CU4z\nBvLgSGjqgBp5Rk/rWdMHDkpd0s8mwg1DrQfo+Mvtp/koEXkq0yRTI6G+mIpf\nllasskHW6dFO30inzAuglKsAkOJEaUTarY0zB//sCgXIe+60ficrLu/PAGVD\nb7FGw3CCFdD8xL/0VzUieTa51do5z1H+VCaDg5LTYKceUThVn7pezz7xhT7e\nuvImD0T104BWH0JDR4JM/5ygWBFPMmijjo/SUZynmcyC5uniqs+huIu2+xNU\n1ypY\r\n=bvzS\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"a4c7f355f27d26cb39ac4876510254d165a5645d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.eda1705fc.0_1620155352366_0.2096720811172219","host":"s3://npm-registry-packages"}},"12.0.0-canary.718c90178.0":{"name":"@material/density","version":"12.0.0-canary.718c90178.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.718c90178.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e80bda2bbf1ff2e5cd69518043b357fb3ed4296b","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.718c90178.0.tgz","fileCount":10,"integrity":"sha512-iz5TKXtRPXDaHgpvwF+hD4OtDQ125wQ1vOJXSXq5ERvGUi/kRqUhm97rIbbX2i3PsTaiePjRWlmbXsvO3sqivA==","signatures":[{"sig":"MEUCIB0eb5OTQJ1rnShqO5gtacI5meFq6Vc679bwTI76Tr3pAiEAv+uY/PS9j6O4QSjzoaVNL9oCaCAvmDQ+Fy1QLZTEaNY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkZ/lCRA9TVsSAnZWagAAcNwP/36nUYe1yuTKMlVnNyCQ\nvY2X4/9+JCZmgFDvr9L4UqT+IJatKYRgeube+yJZGlS0fBTZXnTyln7ruMPC\nfaYUgZiSP/ITfR3t2ugcfajthct3sCwCmtHHmb4PhR021DW2ICqZehmrlRa3\nySNGFS7EvxXdaS0+BqIZ9YZu5TpX9IVOxECrgDNNm9I5/DQ8naEq0Ze8R0kX\nmjL9L+8ozXQgYhR5XfuyBX4/jwnHsSYb6frixzAZdPa+A9+BI4YDNDw6U9NL\nR0gnK7TtVHq2M9gT6suBB6nn18NErggrinMiJIVbjjvy2+6bKPkXjXALMJn0\n2z8Y3cjiwp/O3zr4rZCoN3t450jKK2X4tz5MA0GquCpUWQJUXwJUfRjmY4uu\nO1V/H8AKum2QRSC0Cg/AAmSrrs2/buRB9W2X1vgo9I7RkLygreo5BqiOv4OG\ndnl0a/qidcU+z4yZ1eLa/pZxZHceqDxsurM/uw0y1i/khYG2Ewxy9xo5yYKQ\nqqKcENjwRgRKemf27jSvXL2SdLF39YXuQBiPivYQ+CYkRjVIIN244ytMlDs2\nSlVwLB79VxJXcOMIpFATMWgyhdMkIVDROei5Qfpk5zwpDrEj6Y/U0li/oJcT\nG/4GoI5wxCtzbagiyCd5Q7d3+qxeQ2H+jLnnIC/ce/oUr5zQuBmfna0Ct1vT\n8XXj\r\n=+qAW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"38bd77e93e567329d390e9784d4f591d6dd41191","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.718c90178.0_1620156389402_0.30419390855454176","host":"s3://npm-registry-packages"}},"12.0.0-canary.0e3917299.0":{"name":"@material/density","version":"12.0.0-canary.0e3917299.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.0e3917299.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ebc35e5a275d3a32bd3dfb3951e1cc6b344ab625","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.0e3917299.0.tgz","fileCount":10,"integrity":"sha512-Ja6Iz5lPj6BkSJY1gjim829BJv3xv9cqfWmnkteOWZs4yIiJ8VqBI5nGIu87C6vKtjirF5gzLR5vXMGu6dRjSg==","signatures":[{"sig":"MEUCIQCzDM+pMlCpZdjrV17a0c8XabOEU6+m22VIJcNg8cxHNgIgD5dr9lhg7/JLxVdeXM9vkOLyP2phCfs67kHNDRA2Xbw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkaCLCRA9TVsSAnZWagAALEMQAISVtQBfs3mJwNRSH3oR\ncee3doPLCblHx2OIyzS56stmnsqAcrEIENmi3jEIMq3MKaXFnvdtnoYvDBof\niVlqLGUxCa+yQWsyJbd/FgpAky25irUgR9Khxg9tU3o9o5zbFgaf6FrASVWU\nwMh+6CcYM0TNIyHHlro4JovE3s8FJgIEoN+qdZUgJ97L0+lbg1ZRUAhJoG/h\n8JQLs93QiZsPAQlVjIjSRVTtMmNxSAQJNa9To1kh0JRZgjAs9QqvfwMbRRS0\nWAyR5+dKLQqP0+OmxMpudopTuTPPObqw307DDJO75aKtacr61sIafMnbb40n\n9pL2+jbVV0GGGa304xTGa77BOVfLtgZBIwU4oBfZebuZK9QT+j4wo9iEeY0z\nKwxNIY3eVvHTiuGJK3pYUetebRc+2rLlbfGac5TBwR86ocLpYWR8V+peeUOd\nBNHKo+3gEc7LxktUmx2HjqSsZhPSsX1mOWgdvK/+nLRR2sJ1oQjqAJsSIqy0\nVtvmkqKZLyvx11t0JUat/Vl2nvFexwgLZn/He6dWWKF6t+X69uNf2RMk87Kf\nwqgrBtAIFlFWyjYC18KBie7qTf/6dGWSEtgroJAzE2cpFryw+oqjf7UiJDdw\nw6WSNth6hbOe9RsTgYQrOaAm+Z5pG042v/6jxj4lZcNFvdZ7of9MjgcGcxZD\n1+74\r\n=Mq4Q\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"b53d9d2ca98f518aa071c4933f2c0046916932d2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.0e3917299.0_1620156554933_0.5080030704281553","host":"s3://npm-registry-packages"}},"12.0.0-canary.836b3c7db.0":{"name":"@material/density","version":"12.0.0-canary.836b3c7db.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.836b3c7db.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4bd2db8cd553bf2fccc6cf3d9788f8a2238d9732","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.836b3c7db.0.tgz","fileCount":10,"integrity":"sha512-jQKtcbsXaFbcdbXYWc6+uYMhCn7CmxFfXGOp7AZFjZP7784Z2Z0Ia10ogg8Efc5fLe6ave3F6OgfOlgv1vFR2A==","signatures":[{"sig":"MEUCIFzslX9ek7Yveb6UEHnFfcZIKKLHsIkPxcAKRycFhpmxAiEA1j/K5rsLqs2Zg8GN0HaniWmbMXRXgQ4iPdHWQb4sIgU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgka9rCRA9TVsSAnZWagAAgHcP/imlkLItFbohZ7Eu6Udf\n0mnKGI0d7SN8zdTSjU77OdavWujEBbpL0Xt7wAABk1BVJRC9+GZFCCzMRhhp\nfjDD+6jXm7n/wHoggYEENUNSvOWvwHmNlFuSEW4nWWZlNb6Y+8MzK9EF9KCE\nMQ/1Sm8SBEqn+JcuJ5blYVf8G9mhl+hmiiplJWOiqmHQfTUMSJ5VLHomISEr\nC7oZnvKsO4gGtOalywp2zAYq9eFsVPLzpr/0X41yTkxDdubDoDKkP01J+LJk\nNspO6FcwuQWjdDhsAkBHIDSi0q9X56FqkbKAeqMY7omMZRSa/FMpHZwB93q1\nCcnrPHJtKMH4TWPg7hd3J7D11xbkFEBeR/O3fQln7Vrkkv4nG/3d/4+W6wug\nfujokYo8p/mduQCv4Lrq31M1LRXk2+k7qLWdBA9LhpsawcDAI2eWUUuN0L63\nAXuu0b6wL/nta45faotWvhE3HRPcMWPxO7xH3tutZVEo7qSLf7GZOq6lH31i\netkire4AuMBLqDBabsKi+tw5443Oq+QGoe1TTkrhbCkm8AgFcR5KghW27RrE\nvtEfY4IgrbZsCRDvk8oGAAbgxrhpd8KIDvF6LIXO9qVcwjGCvZhsHIU5Tsr8\ncXYo/O3/ku08CAAqryWkPFy891baWltIMS8aFKeu2NdMhS65lHEt1JLE93B2\n61jg\r\n=9N45\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"b39ef8f7b55792965f33ce0e4907f1811ba2b17e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.836b3c7db.0_1620160362941_0.2687331732086513","host":"s3://npm-registry-packages"}},"12.0.0-canary.53d4e6d59.0":{"name":"@material/density","version":"12.0.0-canary.53d4e6d59.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.53d4e6d59.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"725c2dcc1c08940bf2623c8c02d494d150db26b1","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.53d4e6d59.0.tgz","fileCount":10,"integrity":"sha512-kFQaCYx2nEcVp71jlayTCwuNws9JqPcSPCbkXPSvvJ7yYfXqOVo06awS5OcrWE/fLH2Zk03O5PCHAlK+IvybkA==","signatures":[{"sig":"MEYCIQD+gcSDl2dztb53jcAA2tEe2ulL+Mpn6lACQvWR5guh/gIhANA33bFEkKp3OVJ27PU8kVXgX5V/Xv2h0mSapeMF83K0","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkbMZCRA9TVsSAnZWagAAVLQP/0ORoOH8lvtQfL3i32uJ\n4OuAuariYGX/tJf7jPaids5Fm8s9RBqZiYUblk4oFIGrWmblpQI7fpCl7CaU\nxyCPeGUzSQS0fxEWbaSFAFOUKvT0MVP4QvERq4s6Yos7FG/R9Pk6O7D7vXvs\nqNnl6knZUiXFhbG/Hsl5YeIAYt+jAg3nEKxSq/1beKNV7RHtU263AKU3F2L/\nNLu6wItLG/458p4Tl0pBDH1B7AqGOkXER4XxP01UIKMchPh7WJgJt/LBdIbD\nKFo0k44RVkQ8Azd3o0wKXMnHrkINthXvh77Qvl3SkXOiceYGrVDA+VFxtrw0\nHNPVAdfqERe1N245r0poNir2z0VjmnnkHkk0yR1K+89seGvOqOkd3HW10ZwF\nboaFb1l5q9nonxbviijnLmnk+U3AjLDNV4Bx3yCg7skUMnjsako0uV3ZY7eH\nah10jcNTqWHwe/d/EDOJP5bh2RCgPu8IZNm219uuWaylChbtLDWybKM6kE4S\nNaf6UCNgIE5kvzXF7M6w2V8NM05uEQtmfiOHSVywejHNBUkvQ46Ma3jr9gYs\nTb7QV937k69+5vhbKz+7fy8EoHjRarQwWt4hXyAEW6yQmfJi7bLmCx4brbPF\nxuDmjkbZHjhUwHw+O3eZENSpJSZRNQzgmS+dH4TDYOcwcbCCQzT4DCInHJTb\nwOxJ\r\n=Bd4x\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"a89a7c81034e7bfbeb469ddc1e1e463b018f7179","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.53d4e6d59.0_1620161304975_0.5318807052833252","host":"s3://npm-registry-packages"}},"12.0.0-canary.18d147e27.0":{"name":"@material/density","version":"12.0.0-canary.18d147e27.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.18d147e27.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5127def5f6cad92d810b2a7fd29d79e9bccea116","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.18d147e27.0.tgz","fileCount":10,"integrity":"sha512-7k7Yh04lVxvlLSWSH/VjZPvzLgSQKPQW1RmO0UQkxxWvitwaoJdnGarwaxIcaJUt6US3REvUqiedZsRMkGaLTw==","signatures":[{"sig":"MEYCIQDVQfiZGpswfbuAy/Mng1wXxP/nvp4gyYCe2v+Qm73mzAIhAMUNaXqikikbDZvFddyUe5mPuD1X9eiAXAM8X3p9bDTH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkbUbCRA9TVsSAnZWagAA13QP/3Gv1EjNZMBOn1NYaf7U\nMOqYaRtFEVmjXlLAIyR458ascMfrOT58PWy5eROw6GsFDmBgiNfzgc/h2gyz\ncunMHm6moC2zm8YR7HQ4Q2nGufx9bOeRTFVlbWZhYrfXCyM/5comCLAKTSkT\nuPlVm+j1Kcy+FUMCyv6vuJtMKNRqICgTQ7EJjzCN+RSryq7yKTaSAwkC8wbS\n9QdD5zWozWc37/UgehLxAMHI2pPcOkYHd1C/20R8WaDU1WodOOrklksLXpSY\nl3ESyRqO4Q0oHxOrzcFjFz5jV8dBzrD4N2n/mlA0Ixtla3VI4AjfPBIBiRJe\nNvQcSOuYb81Cx3QJ5a7Vs98+0u9hQmz8v1hWamonUT1R7YGYvDg//MrU/ygX\nt0/SpUp3T55UpnE9XL+BhbN5hDs9Vreax5MwCRJoBgnFXOy7oz3cXF5SWaHq\nLmhugb7VmtjSX25vk+likKmGyGeWp+K6MgSiDP7DZTJEzJvSj5D/VUt7vWOT\nbGdDAKY3/F2JbV5x6cipvJicvqUJL2Zn6+12OTJNiOxj/ussZuquowrLFP1i\n/wNIrrbvtBTDnyfeUqQWKNpQpOimLs+rTrc0fEG0Yl5kOdP0figzcAJBt6Q9\nJ3kezq/G7EsvtScPANKLWSVZe9VrmPJc8VmmPnSPUXIphvSYHPqhegxkd6P5\ni2pt\r\n=GdGQ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"02e686390dabbb1590eba968246da65476db162a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.18d147e27.0_1620161818946_0.1815864864083485","host":"s3://npm-registry-packages"}},"12.0.0-canary.b9984794e.0":{"name":"@material/density","version":"12.0.0-canary.b9984794e.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.b9984794e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9920c92db6a4a8192f3c455a0e8be8965d8389c6","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.b9984794e.0.tgz","fileCount":10,"integrity":"sha512-D7t36KysMQnhU3Kkog5Sm6ApOtgRKbyTLm0SD7tUe/51eVyiaHxIFCjBmesK+s2LGq3SEe8B2bG5QInXMyMSaQ==","signatures":[{"sig":"MEUCIQC1RcIKbK2Hv2nbFJGCXaK7U6SlQB5xZPkMu1vheMK5WQIgbg05qGxyKEvxOiMu+aWtrqp9mf5C1amhhaJsoWOmTkE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkdJjCRA9TVsSAnZWagAAFVQP/28KA7rd0Atv8cRGqLum\neXTbbC4Sh6/TxVPYbkZSbck8jnCX2XjgYs/aqxj6uMLRrVyVkmvLlGn6BaT0\n/UiT9fkCBK5iylRnDcJ2o+MrOmOiTBgTC+tvsf7rNreXrorYl/725cFPtjSF\niVk45KDAfx6C+RN3SoTGk4heWtZmhWaBDs5STmfwRlQ8OzwsbeOStK2z4qT6\nKgqASKXyTX5eIRH4uRGaTdkPSFdbDcXl155W+rJ9Cq0OOKnNihfuOZkF7c11\nZYqbDSip0iyP+Gj93ArJGuwmnYOjksBJVl/0YUOrQPzZku26x7UOl6yCmdnh\nA2CEofrTk/QGG34aMTG84ttOqE6XcNGS5X6sL0I3cIWVB9e6NrRAep84waTn\nrnWoZlZ6gN0QQDd4PAy+awGcCrJ6ZLBcQGArQKfZP3iAQyEIJ+fZRtiLj9bS\nfTYyaT45t5K06JoKeaE236Q1U/CPrtIi3w7bzuqCYJk4Pow2InA6sGz/WLrH\nQ7N3Xr2ZRBb+oXkmHhT3702GjjOjSPHgBOvM2iQTgY5NKV+jlOSYDoVvKU2x\nuvCYaks4aU21Ld8WlOqbQzf8yV0k6BuIHHp9BlFOVEaQiX0FE4rnxiSmmuDR\nH+D4F/j8omIpD1I7LwMC/C7/4ydS/y2kAdjlnicTS1qhqxLbUo/mnfty7QBR\nc05A\r\n=6d+l\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"b9cb2c88737add4e6d3e04893ef4ca57b7848549","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.b9984794e.0_1620169315266_0.17684169185902054","host":"s3://npm-registry-packages"}},"12.0.0-canary.b76f5fc9d.0":{"name":"@material/density","version":"12.0.0-canary.b76f5fc9d.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.b76f5fc9d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3863090dc531c6e3d1764cfa2894a5e44731c768","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.b76f5fc9d.0.tgz","fileCount":10,"integrity":"sha512-vj4jH5Fp+KEOc6skjcTDeWW7jLzEjX6a0Mc3jap9ciN+yIdRGn4SQ9uys2JNhlndxLFssPLQBHcIuBMsD+3fGw==","signatures":[{"sig":"MEUCIQDAzUMsuLU1q5RI8stElZc4X4Z+xfUIYFLBQRX19fpINgIgJF/ibV1l/NZSSgBL/yTL/mnPL1f/HlGUOMdp+g7E2dc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkdM3CRA9TVsSAnZWagAAnC4QAIWASyVWtSnxVcPxAE8D\n5I7NXV5oiinXOuhpvyn8j7aAJvCcki9QODUhyglCYxii9X+Fzc6C4gQzyE2k\nNTswHDLZvOzmSmSntrFnDW6uparnv+B4eSPzulS+sUSpIbQUcuMQOJzkJ9F2\ngsaCWYJUFu2vxQbwb9X9gbPUmHEt2txmhbcaI3YLDWviaByF+Kl/9zkGcpVX\nU/Dg8FPHT6CXumCPUoRHtvN7dPPlzh8R5cxXxDULLBgKy/+eO0/9MVjR4PDh\n9kx63LUiueoUwr5edyDrFh4SUKaDjUI+kRUJm73zzEOXwElIky6BtaNQKraW\nogwVj7Ulqh49FCMdwSrVndlxxUdgkbo+A0lZW9rZLdqLZWvpB59vMcwwCc3s\nILjuaC26ND7RpoGSaA2xYn9k4+WPgxiJfUt9rUT0ecZl1LDC5dmRHywkoD0V\njBamKp52wRX5QJO8oPHVLA6lpevYOWSkws6sw3BsdfsFjPkc63AiAY3n4snS\nEN9zy+ZenZL3WZA/PLpik3BAqcGZwCQo1sikd/dtbsf3IaxgBAqI5OXSFyVd\nC2/fk8aIgj4jFfdayke12BMrmA9l8YIQ+dXSOGs/L+JXOlvLz0XrKh93PyDu\nIeQmoERoHxqxsw5VP1naTvtUE49ZIrjEYHO04Hizo6LBKyF/yeviHjsiCOye\nX0XM\r\n=DQdi\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"219c30995da49f5c5f458aa1b983f09054c2d4d4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.b76f5fc9d.0_1620169527103_0.0846236130970468","host":"s3://npm-registry-packages"}},"12.0.0-canary.055d4f10a.0":{"name":"@material/density","version":"12.0.0-canary.055d4f10a.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.055d4f10a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"df9b10a18597d76d9970e0ad95ef22513cdf21d2","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.055d4f10a.0.tgz","fileCount":10,"integrity":"sha512-vP6WPZHgqCry12CqDE/dybvDqwUWLM/GIVjw9nI8DxTZsTOPNf1u01XIxmGVujRbTWnTXV1g+5HySEdhn1h9uA==","signatures":[{"sig":"MEQCIFf37q78RhoMoGbfneVcBeFssxTCA9HMZLutfhp2A88yAiAY+OOM6BJFPEY05FjqwGxXiuY0zhoFeY+tebKkaUY9rw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkdbCCRA9TVsSAnZWagAAeOkQAI6SaR+B0oHL/Dy++tF+\nqUKXqkDMy5jSlUBprk8Q0JO/NPbfAjcPjOq0yQ05uoGW8eS70IsrUGPEpfLc\n643BlSQzf/5Uw7tGldnQh4jCecastyLk/GxgYwLAy8Hva9F7sgqUpMUh9nEn\nk5t2Q6ZfWl39s+gA0e7vcjFSKtHk3l14QWG/M2WvS1kXz8ThYA0DIWTlX7hb\n01vjw0OhF6BJiTTFQFhui4JoWilPBAkvMqEHvX0QOF96qqmRnuiJ7xoFJ9bD\nz2Qhvm/ahfU4RFvkF7g3EnNG+gU5hqs006Tsc0RgRMOmMei9cTA/wNy9oGgP\nWlYOpjcpA4E1pmga3Y3NKggkCSs8b6IKpxxLyi+9vnMRcA4cZtHzESDzI2zN\nSA/epgeFKssxjO9h/m5xd9l7LTzJGJZ0K4oWtrbvXYdL0Xhrf4hfKDXkh/je\nru2XowZ8XNn6Mtc9eyFUNjxqjEakzuXXY7MufCW09fiLKLZ4IHxEkML6rUEv\nqPfoz6Oia6ZAKtOjdCK4yo0CNQqr/VVk4aOHHH050E9fT83AYj5Og8Q9xluj\nGOrcxa8cSCl4OT5A8graRtxEiKcU8YJFqtiG5qG6ql/Ensu0r8G8QaFcaLvs\nLon7bQ7Rl3W47AxY3/68mmagcSsd24M/xP0mEodoVO6DfrMpmVX+THTReWGe\nC4RR\r\n=dTVs\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"df8d3cdf52cca2c339c1fa1cd18129db35422c55","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.055d4f10a.0_1620170434135_0.3272262766185636","host":"s3://npm-registry-packages"}},"12.0.0-canary.5b6a46016.0":{"name":"@material/density","version":"12.0.0-canary.5b6a46016.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.5b6a46016.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"393f945589600092bd54e3ef24408776d791337c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.5b6a46016.0.tgz","fileCount":10,"integrity":"sha512-yggBVlqZnE1tcXP0Y6FBdhw2WaypEk6650fYlbc4i/VxaC7pmOzRmryu63M4G1Maicf5mZcG++ZbqWijEWG+3g==","signatures":[{"sig":"MEYCIQCoMz12/Ke498lUSeBpx0++61aJFiql7oW/l4xIAGZ/JwIhAJLUufN2i3F9LMv2orfdaO2mXA2g8HuWnsz2mHw6JkDT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgksSLCRA9TVsSAnZWagAA7yMP/R9GS7G2kWInzXuaRm8J\njcGaZ3rNhO9/+rhAJpnKXL4J6aliNILiNYfNn4eRhe19A+5QpAxb8ouGdzwi\nqXtEEwks8h2M/36XrFFFghBrMQ5ZotV8rO5S13oNGjmwsYeZPfLuLU27zl3m\n8zxYBsolPrimc8166j0zkOUCwEyQtngBv4da83E3q0VJKvVLAsrl1Id13MrR\nvp0UfnAQyiFBknEq4l3C2VmZqgPa5wkNejWa2i5Etjo67V22u7lz4N0DrSYX\nkgV96WAUAt6JpCs2U+S32wxD9S74aDj0LMkwMXqoa+DbZgTTuVR4pPiiT55Q\n3/b6xJNnLsjBNwkZh6o5t1XRh8uvD/jXaRAZjPQtINY+kRoaSZOglfleSEm1\nJmbdVsBaT70Xn7LSjuzGcZxtJLLhdXFI4wnIgGYcRmrr6qpwUyh42+fhE8hs\noXHu9kLoeDjVyq5iwDtGyG1x+9EMcmMg4MBdeWXNhfVtPpJD0tkG/gJg7lX1\nf2mAXMljMmb3b2gaLCMEMxiFxkCg5iikRR5bKqgScpMeK1yR3XeiNECRId3Q\nJQNupGSKdABynNAJsXQ44oLkmUf/ySf5W/wRAGInAXtGMSLSUn+gUgGEBEIC\nREVC8nxI+WIu3DPQVLXBXuAfzk69uqmiT88U5oxoqpHtPQLjhsE5jnzz4E8d\n2bir\r\n=UwOO\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"3d9c7e3c179062db8b5bc243e8bbfbd9d9132e50","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.5b6a46016.0_1620231307380_0.6324165405267841","host":"s3://npm-registry-packages"}},"12.0.0-canary.33c9a737a.0":{"name":"@material/density","version":"12.0.0-canary.33c9a737a.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.33c9a737a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"db3f0d6e0c75ca561e526b9760904e301ecad59a","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.33c9a737a.0.tgz","fileCount":10,"integrity":"sha512-TG2NZlElHBayhbxMGJluyIt0ZiEIEOIn9LqDaN5wAAXQsIpro/sXLzK94ajinx8gLSFz90h14GD0K7j3eZaHEg==","signatures":[{"sig":"MEUCIBRIQbGcNNtTbxmW4scj/fistBrcOyy/pSaisHK7XMRiAiEA5peq8LTYHv+WIFO7fB+u6AMMDgKxXKmyO4z4YLvlH+w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgktUsCRA9TVsSAnZWagAA0b0P/0VlyMElZd8zMlTCeIwC\nkhLlEFPqJtSnhheBTZBlgk0p7+bC2MVchY23cKZvH9YvB2VxkuxBRbM9PmB9\n8hTIF58mGnwTPAUG55iqZ7g0jq/MD64AyBGyc0F2PVYcSicT+0WxgR7Fjbbp\nQW8nVZ8ZllesmDsbh6f525ane6EiAOoyI7kOMdrW15ulYomXCZBNf8LQXDXt\n9k3ObuU6Nyg3S6UDw+BKi8d0W+mHRI6l8Nxn8S6hF4eHXIJ73jP6Js2pclfe\n/uDLreRoSNPLtUS6zs33F+5vVg8oue/yxGhkWoXgB41z2MsMcryc/XBTTXK/\nCU66hK7KavXntxJ1IldFJTNne2/lXhS/RGMemSUFK0BlvQRpguA2efU8jOYp\nuFMtYJQk8wRuGSXi6LyFIuZnSKYQdMFFbeAgRdNAWfZqxflgNlRtOMOH9bC1\n2kuAmTUwZHFV1bKPlt/N6TxgxOL8AdJeZq1AGTe1tvGHVMWo0QR3jICX9BRQ\n8dqVnzZ7L/lcWudOKll9w55g10EXVxo2BjWe3eGDIDh2W1GR1OhsAasR08ZI\n6SFIvBwo0BkD0JzdMS7Y+Bnw7GVr5KWAVbnoInnI8IcxoApDv2oq2+uOh8YC\nm32y4CeXxhTfPIt3q0wpUx9HlZHXqh0OnZzSqRH8unQPdQXh4WXmDyk1Q/X/\nHpdJ\r\n=o/KR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"fa5c97d28049bf03f5b138c0d97bdc267f43c363","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.33c9a737a.0_1620235564042_0.012311192048276576","host":"s3://npm-registry-packages"}},"12.0.0-canary.9bc0effaf.0":{"name":"@material/density","version":"12.0.0-canary.9bc0effaf.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.9bc0effaf.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"02b85aa75250e0442212f65dd8e39293497c31f6","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.9bc0effaf.0.tgz","fileCount":10,"integrity":"sha512-D9Gm3NnI9pQJKQfGOREHymo9RZuvlHgDa3FPzgMI3htQ7rbaYe/U+rHUWCh7MMI2wxJo4mRG71Qz/sqaxK26jw==","signatures":[{"sig":"MEYCIQCOqHo4wt1WdYQZzfta+527IjiOe8RfLWNsb79DjWe0lAIhAIehM4Ai8X2ZUqaZEhQzK+OziyQh56dbFmleRY9npUoo","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkwcMCRA9TVsSAnZWagAAnNoP/AvXkGS42sJSCGu799ik\nIAbEdkJbhx3K7vByPKz0WI9CmqCxL8nFgYLINozHYXquCjDH+VmHlaztcM1r\nHlIPzzL8ag6LCJM+ZWwrndqenRIQwlr74tEdH6iyJA/gQHTCztqFygr+8Bz8\nEwxEunLqsVX6BDI8/aDD0pp0+GN3SdkWD1tfWRz3V3A5LOsfvYVNRSZEsZas\nw1kjJxXHlb72Nrd8RK4jVoQ7PUT69j8QwMfrnf4RsWAwWa7XHt+dtubZuSQa\nBFSM2jh3Md+CQbKBxXxvZPLYFFqDIYrfDJjkHafyNfB+Ve3F1LBZmIo/ypnm\n2ElHdq4KFys/FVUy229r6XvypRoC14wOQ/pTC5yYAMOxss58jIfiegetNJ37\n0GqNei/DrPQRljjHXoYUGD6G7UmeDQ7VH3dU6A8pficHcd6+4XcBnAbu2/UB\npCtSonT9rfUE53fke7HK/cyEprTMYJ1Pz3P5WpYITBZnyK8HcrihA4Z6ot6H\nyyVuSMTKUmrLykzENcEHkrE8Z+p/lM8RH2aB8zlFt9PZcuV3HiQUvjDRGGbs\n3SlxHLexndqWJ4cJj1RJSHMQkFGE5ABSjzsrQ7LyaqVgdLt+fZnM6hn5upFU\n6xE7rj6smqnW3cN881386xwRgSRkmPWxOWJBKQTsoQRBjSmqswHaVGyC66BU\nInuy\r\n=e9ud\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"e671ae06efdf42f7ea0cb40bb6700fc57f6a35f4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.9bc0effaf.0_1620248331752_0.33235822703508244","host":"s3://npm-registry-packages"}},"12.0.0-canary.a1e0f2af5.0":{"name":"@material/density","version":"12.0.0-canary.a1e0f2af5.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.a1e0f2af5.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"402f29c6e2e64132e423ce7d1c421d8b00c9af7b","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.a1e0f2af5.0.tgz","fileCount":10,"integrity":"sha512-1TwuAfBHIOcGv6mblcb4yJsZbCusutz7KBafPTlKWMfwEyPoH6qe5Ocu5CWB+3ITAlEE8Zezd25cvxDmKgIpcg==","signatures":[{"sig":"MEYCIQCr7KiaUMOJ2N/SZpyCi7fdIzKqrqgBEHITp6R9COI0OQIhAJfVqTl/7Ipiobbx64d+Kn+ITViixynJFgOaJHEqPi8N","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkxClCRA9TVsSAnZWagAAU3QP/2LgKhkR3Gd/+TRDXii8\nuOu40vNspRELz4twb9KWp/WONiz+XgHqUv+QOvgWeOgk/SBw+eL8u7yVI3dk\neEqC4GR1uIZlHWtkIGpRdHFEzfxWbBtZvW2Z3iia6ZJ//8pbrivjfak68Fgd\noousU3rDpbxw1fzmie6OWRxFouyyUEOevYudalLIsmst9eU+n14O7fEnyke5\nMz1MoTFG98oTtm9aA78cVtFu9GxaxN48J0mgTIti+Nx8YeLTVk7JK8Vp7h6N\nNdzX2BgUKvDyEKz8PklCMBHlF2QggdHAJ9HUdFmiXwqYWfOLf5KcINByCv/Q\nQLled+BZa9y59ieNu9GzkmDjGOiS4SSzYA9wcDaY8ro9lpuXOUZi6r5A/y5c\nGTZK8bpcZYPAg1J1xtiF7TVZuZuJL5PZUGop3ozwuuDfqVqcNPBwcSLW+VDB\npZRwROI7rcTARJOTZr+i5SjW+jHRI8VDJKBN0MhwCi94EGOS+FJNoNHGQVlG\nmrdI8IIJ0StQS4yrmLc5KJufQPuQ+y5xwW9P7BoiDMkRPCq+wPivv+wjJlPN\nP5gYDcTAKl/DjyuzIPiZ3dgZTXGQV1LahSQjFAdGisw/BWa3WxajGLi4ohqc\nga228G2vR9W95lCMJTMw2CRGAknpVsDM5xDF5qFlETIm9XfmhJyLAEVjg9yR\nJdjX\r\n=ApOp\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"7e20a4b86d7cb59be9ebe12cead11b1e8c7bb63c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.a1e0f2af5.0_1620250788783_0.3882673452873078","host":"s3://npm-registry-packages"}},"12.0.0-canary.06930c96b.0":{"name":"@material/density","version":"12.0.0-canary.06930c96b.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.06930c96b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2c3c84a569b8d30e1eca2eb0cc69821b3b31bb9c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.06930c96b.0.tgz","fileCount":10,"integrity":"sha512-8SXUWAGfxsdlD+idVvJfOh32QLHf++w6kaWjCUOeJ9Zq2RJ/OOPzBe1DKXMufIZOXYoOn7FkZfZUViw82k12mg==","signatures":[{"sig":"MEYCIQDZiWvSPjUHSqMZA3LjTIoSRZimdkInSfi/1SenyC9N0wIhAJNnuFgjxZtRUxyrxwgYFOPtIiEE5HVwDGikavj78exJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkyxfCRA9TVsSAnZWagAARy4P/1Y3pd4N9OFvvmfhzizy\nJCOvVcxyjYzjKl+iCiMKVDew8GMsSLHof7J19qIjBSlPZ+dTfMjKWDlQO8yU\n92wmqDfQMwX9ca2y2P3bLlDxbTBA4TUCwCQX4rr5xf0y1Ua31XIQKOC/kKHh\nzpvSNeMzqaW/xmdFW5W2g1TKg4oHRFxxVQzrhFDJMzVwR7Tri53JaNiuS4pZ\ngyKVn1Yyt7aNfTTYTcf8zmTD92nABCoRay9ZAC7eLcV6CDmmfK/JfJWy9R7Q\nqjoVUPbrf7wthSi/jyOguH1aEQ32ZtX9elyPgNd+PNEJn0KdgyTP7Lv+YbNN\noJR7/BpooOhNDOxz81816zgokt1KmH2PrXyLJ+7MTKcubMP+seJtGqaE5s3U\nz1iUTB8BTCNxLHpFl3xDh0QlKzTTIPFoDhwjfo9AUb+mp1k/MsyYTYc8gi8C\n1JsotGhshfteUhu7MJltVC2sbhxwRq+ECIHEtmbdaZuEInJ6sV8R22/6tYc7\n7C+Z8v8mr+3EfyZrgJT1/COg6t662vNCZEnDoJZX2KkEecOBDKs2S1K2fAnV\nXyCuMqffwDmIaT7S+7Sa0OYkYJ3ukom+h23YwrG2IL59fKAv0UR+kqXEErT2\nZxld+Yo7VZ/eoz+IjLESQzgh+zPsl2SP9yequT0uoRMR4A9iQKOUiDcfwHZC\nnVSr\r\n=QYbg\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"aef50df6c5f49244a2b0e5a941794f4e3e4fd21c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.06930c96b.0_1620257887045_0.5152816175748938","host":"s3://npm-registry-packages"}},"12.0.0-canary.03f525f9f.0":{"name":"@material/density","version":"12.0.0-canary.03f525f9f.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.03f525f9f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c3d7e6362265ec321bb0e6ce846465d7885f09b8","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.03f525f9f.0.tgz","fileCount":10,"integrity":"sha512-XflFh1QozDp+qd6xtWCUneME6AsMkhjVW329fA3hAXT3Set7iGitf59DStTO+i3WmAwr9Lv+mwzi0bOlN29YLQ==","signatures":[{"sig":"MEUCIBbZF7xZurMyymn02IYZgUYmL+zIpkxJTXdwiZORxxnZAiEA32P3arR8BuH753bCoyf5h1UGP+E0gXbQtcl4WiHJwMU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkzhDCRA9TVsSAnZWagAA2z8P/0l3uucZ7/O/rYfJ/LbH\n34Rb+qBVjdm1hTvF8007mqzCcFqV5yGqC+XW+keFRZ3ejvi/Ekljeq13EaOG\nNBMJBsl/1VeGLESOwAGTF7YHeEUhYEw9+7q5XHTGHk6M2sTy0c65vc2EH+cU\nYuWYVWXZ5HH/ULVwouppJENhAZuVKpSHf1kQZXcQMs/Ko2cVpjW9E0m9SdH3\nFbNLDXD7LrBpOXrwDxfZxQBp38TdcwUXfbvQime7nGiPxFfLGtjQoua088Il\nzlgE/jifKyYXb41CC/0LAh+6YYGY9NgzmAvC4S4BPUhLhyuVRlif/wLWCDMa\nQ7ZUtl4UPylKpIkxY8LjRa3dr53q9oYAs4Ev+0UEVoFXqvkUzZNHSDn3c3+L\nLChxVABQfka3S1WunY2urUORhBjQTWQjC7ZDmw5mFl22ppHKa/IHdyMGW1/5\nvB9lQRI+d4k2QOZhQDBqlXyIG2bLhoFg787/jBFZYzsPAmnZcz0BBUJ3+XRU\n942Pay4jXe7pVmQBB8GneHs+RiTmkPz/2udZ8MTdSz6U9A0W4z1d98YIORtx\nX55fpp68lAcUUKg0qPgrhM80hNIbi1srm9o8U2K6DAv8scqcISryS9mDL3XN\nZR6Uu2rjv/xbugaTAwaGtWMHavGHaiWOWCs7aFA2ZPQfV9UXVRMof48VwdtQ\na+9T\r\n=MiCk\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"f9df1400e21c75e46fe6641abb76d5840dede67e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.03f525f9f.0_1620260930630_0.8395964293018787","host":"s3://npm-registry-packages"}},"12.0.0-canary.e82ba2a26.0":{"name":"@material/density","version":"12.0.0-canary.e82ba2a26.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.e82ba2a26.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e112186ddcb1ce56486979f00a4430311c75d906","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.e82ba2a26.0.tgz","fileCount":10,"integrity":"sha512-qsveA3uZFJnEIpZCS8Qcc45Qw3dXvubMl4nIkqBwdyqAizWuXT7fVQHLH2XrC/vI/KJhYoDAhVQZ3cxhyJ8TgQ==","signatures":[{"sig":"MEUCIQCYdbsyryRP3JGTA2gaTrI/u4Ae6QQqktMkTJ72uyiZyQIgJ3FOUCjvei2x1dw8qRYBicNtom6/Aj2Fbha+NhONdxA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglBFUCRA9TVsSAnZWagAA3U8QAJK0so2N/bvTOMdkjlZH\n2ydFufjtXQNRdenwDCBqRJ9D/0cQPUH6V9zDna125/m/b0DvWfNPgNk4Dy85\nMK9irGnoHLpgzHlhNfn6repiezt8SIsGf0gN+7VmJjwe/ib0uocq57xQKrMI\nR4pe5YKV35FYLpckY0YXxn8GysA6IgJGhVREO1aHfAUmhcsbIoFXd+CbbCIu\nw7/vqBFesRg2SywRs2NjBQi6URrdkW1Ly2oTyHjCra7SUJW464LwEsxpO/cG\nh/F/zyESb7Sz+F5OnlL8kcuS9R8R1qv+B0QaO7teTKErvLvHZNoTLFRNbh3J\nm4+31raWkT9fP+wRntnNzLngAwuxWKLrx/VRNG4KFgKB9ymwDCXn+zON0yPb\nW2vkQGxnq3Ua72l0j05trn/2Ag3T2vJExCdQFp0oy14hKiqo1IFoPkmhhR8G\n7f/SJuFdsnXJ2S0JKI6OecdQPLPIudFiV/ZtbZ+HZ0Ncq5AdALdSIZdpI4Ka\nQ4hKZN9YdmtANbQDC67ToyT+2zG+bF+/MoRtw1FTvXUaGtOTJXLTxGj5f+fV\nbIZybrfOgYakDdhhTRr7XHFPwaFk5quBeYlQJCACndTT5Eu46Vq+fWFPoCHv\nciDAVL0CUe4Hlzkc4+3pCeR/qyBFLVK3xq4Wlvo4+4P9IBLv0rwNGROFRK1+\nVWIQ\r\n=vOa/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"c3349c46dc5415cbb89b8260a8db012f44f09eec","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.e82ba2a26.0_1620316499767_0.33856186897862495","host":"s3://npm-registry-packages"}},"12.0.0-canary.fc7c4e5ce.0":{"name":"@material/density","version":"12.0.0-canary.fc7c4e5ce.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.fc7c4e5ce.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dad0fdaec1b1dbde550be5a78685130b16eda3b6","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.fc7c4e5ce.0.tgz","fileCount":10,"integrity":"sha512-jQP/3jzfck7pTxf3EXxJi3e6n8CLn2pB6jbe+N3RHAYp6kt1ClhewY68Umsi9gbVqE6Jh6jUCB1y2f8v1XeTPA==","signatures":[{"sig":"MEUCIQCqXlmdTEHbQoXu8K7vIyAQ43siyoPznGTayAbdcQsqJgIgCKp/ssccUlcg1cEsyDpIwBi/kOt3cn9fHbX+Fs9kz2w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglCcrCRA9TVsSAnZWagAArtYP+gNH/GjjqPlolvmDcSOz\nbW0WZlf+MUu2pkrX1HmYP1bnahxMEiFXHl+o71sVPZ9Y7Br0+eXQwZPURxHD\nX3ijNHeT2z5qqA7yVrL2daDxQHypeCGu5+qaQ5du9QVDxzPtJRFSPhZhWB4p\nNrDWqfYC7lEN6JXCPiMUicuPtVO1rJKmW0EojJLBntyrHN3Ju/1r9DOvJQwt\nJlFHvGqvenLMvFQ9WIbz3SCcpDGwYekIkfltA4udkOjfllGlligGyNTv6OUi\nTrF9LsQt/zTB6Zzmw2vtYcYt4J6IGudXFMrYrCkBgnkUsqRe/Jb+P/VQCdTh\n/twDCoejwGhHd2RKXtgoTlXYJ/gIrt4sYbnfV8YezysQVq0ZBsp6sUrHvbo0\ney5TosEFH1A8txbiRoU6w9dU5dpiKUjazgHA0WN758uJRYTB8BiNhN2Y5UHQ\nojGOOv4ibcXNfYneLd3X0wcLG61DEGbYVWkYOCz6fY/HE0fn+3T1dQJ418JG\nTSwsfae7uH1OCP60ZKDCxCnUhIsSCkrBTjCRDKA0SRDTNLKBrava9b7ZxNKB\nyXm3I0Woc4q3yWETdVey7i2uGjzdELFgJqmumsi5CPnA4MKXbq1/IMVJ2cgC\nRRowOj/gkN5iR3XZUEIj5WrwM3U4FcsYt/j8p+AC0yOCjY8ateQxrSWVcp1A\nnO10\r\n=o6+0\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"b549929c65e0a33cd9d427a600513c663c2dae28","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.fc7c4e5ce.0_1620322091474_0.37670465674692233","host":"s3://npm-registry-packages"}},"12.0.0-canary.65c04514d.0":{"name":"@material/density","version":"12.0.0-canary.65c04514d.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.65c04514d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ed0d1c518c33b4a86a4ea19b4fde0e948d9b8de0","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.65c04514d.0.tgz","fileCount":10,"integrity":"sha512-zc/IRAmoKHYBvWzpMfrN4ZDSot5sniDUDv7O18rau8Rct5FVsH+qzaN7gAes0jtTFUFN8zYwiVAq0vlFu1knVA==","signatures":[{"sig":"MEQCIFFpoSrUJhu2YBP5rDFEmzyxpzL5ZiN1dS50A1uhAHVvAiB4ngpsucIU5rvR8lVsEak7lHgryF4bh/yTnmbwePC4IQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglDh8CRA9TVsSAnZWagAAk+IQAKSrKNCGgCNCLfrTtLvO\nMkVqpeXpLKhQ/NzxC+G0vBeQ977d8F/cTRlFKrSqydv0ABeaEGEIlURygo+H\n8QMzyivleU199SYBjnZfQOtE1JHE8TNrRdl3MJWJEJvU2rSrUHkv6sytzR57\nK/e89M/3ttg+EWDH4VluvaEtdl5J2W/MHRPE972/BUJ77USc91rGDKkUqqAt\nVZAIdsiX0vYsrTaOcQVUrJoLURcnLYYZ5HoqkcWXftZYyQ7oppNT4/JPB79J\niU2Q7xbxdbuwDK1S9bmJhqMyOfB4u+W6E0KL8fY/A6gxWwTssWl7N3AokOsA\ncMk5EeVLpZxbcgOFF3gwlKIxlzZF96aWerOfeH45rRF/yvDSTRQrJewSOe9m\nVu0nsilb37zkvP+V14L3SrG66vwqkXsAqBYInyHU3xAlDa30i7BSqiYqMqww\nER/E7CIjHySEktnq+xO/5GiLxuaTfjUACWCLqjIdhjE37UtmK9ot6OPcDwid\nXLrrI+NTa53LZu5Qv0uZjDTMPaXZcWkdK1VWgR30ClSHcRvbR3p1YGBkdPop\n6jOdP40hhWk+DWhYRJkYL0JbruurO86F2baYuGmiioPEUDcF6oWH0VK9bq4J\n0Pgu/vPx1itpw5dZzNaTfbbOPy/Pt5ixmGAa3a8BKmTT6XZ40Uw9M3RIliea\nQYlv\r\n=jSK8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"01ca5daeb81d99750f9020fc62e04bc76085858c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.65c04514d.0_1620326524167_0.546945144394656","host":"s3://npm-registry-packages"}},"12.0.0-canary.c97779ca6.0":{"name":"@material/density","version":"12.0.0-canary.c97779ca6.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.c97779ca6.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f9b9407646a8b2ede510457c44bac678ad14dcfa","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.c97779ca6.0.tgz","fileCount":10,"integrity":"sha512-aMJEipnRyAIdmwj/71+hIftUpbxS34Oiq2jn/q8+GlayyVVDturKp6trDgPll2zHnKAUj8f3PCndrrGUABHFrw==","signatures":[{"sig":"MEYCIQCdlxi6SGYAEVgGKKNsvjkswBOLMj2dne0dRML+MqVEGwIhAKQYk2JNWS3WZlToEEJvFyZQI2WwQXNKg8sc58hKUgXU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglGKZCRA9TVsSAnZWagAAHqkP/jTcNKrCYVNOQJAiOo5Z\n/C6zojxBgNAZXBQ71xmHukhIm8D19iDtCZvppfwxRyI6SKtkBnXSu1cSAQGF\n/0aDRqXdzfxvxfGS281l6jZqO7zBwjztYLfJFrss9dU3IvLoZgh8gzzxZjeu\nHeC1IEGF1PrxC29/bdPtRac56Y9aRCaydKwxjjnBqKlRImngkJ8Np/zDFznL\n9DmMCi3+Y6ovmg3in8wU+Tp2jkJQCYpv+ef6c5vwOXn0H5xXAzG955HQrfwO\nXiVk2WljerCJA86lB+/WJR+i57UVatmXQk/rXUb20KHMdh/KpmL8PBY0o6bk\nim40vpJadZO4fqrcJEhMIPoAkeyruUytIS4wW6gPO4p6iy5tABSJQ0SaFsxJ\n3z5vEDGrf0vvbQmrs/JR1AUt42C0joRHm2xaqYnlr8v7+bw1sFnv9XVDTnJh\na62TzIoMEalOclnmfmoK8SIy99ZK0c4hrsdFpSTcqEsN1m24ifSFY+BcZOXS\nKJmdJiNv3M4EfDQ6k6cg/2+d0bthn+CqenH75h9wSnTeYInd0jn8BPoGASac\nPIpVpwA1ax3YV6DKbhnO5RJEN6delu8JOKPi3Ij7Hi8zJ9IWnMeHIPiReDor\n/8MC5Him9W6FqmMHYW8sxFr36FtqaTiwd4axvjOun4EsWeU8a3zJuBHlhIiD\nt8u8\r\n=GUM8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"046f80118629481ec1af7c937a84ce6e0fd1f635","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.c97779ca6.0_1620337304928_0.46573598203517097","host":"s3://npm-registry-packages"}},"12.0.0-canary.869d890d4.0":{"name":"@material/density","version":"12.0.0-canary.869d890d4.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.869d890d4.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"37a594addb7989fb288218040b824acf4fff9725","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.869d890d4.0.tgz","fileCount":10,"integrity":"sha512-4WdRBuhRvx/NZ8wQmLGKWOpj5x/b2v50B9RS1OeX4FNoHLRpzs0akrUrKGsMj/UzE4eUVncTdqpgV0o/XkJkIw==","signatures":[{"sig":"MEUCIEI1Z+xtKDB/vWess1+RRuMKgD4TAAkwOcjDehzRfS7nAiEA3kU/hFRky71noeDJzX58gd+nxy+In5xAvpK+CtxJS7s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglVoKCRA9TVsSAnZWagAAJzsP/3y/a8un2eCikiPMbtVq\nkkRtiVM0ojaNttoP0Y9/G781v8/nQ/V5THtBm4Q9HgHOqjrCV0Kue5tShN18\nNy1jmVMQRDrVHta6qoUAvKoLDbigyhv1Z2Xe7/XEHVMajIBlG997CbK438Jj\nAuwjjNv0OmPmdZdByc8GKjixWsRjcSCKtIoAci/wk5yOO2LUSFawkGKXWiSL\n2RFtSVhjcZftfylUiKk6irpNQVBTOnAnwZTc4aXrFjA18yqNWnXi/oX+H54x\nDMal2oFwNE7jaJtEKaaI2uZlBM5cxLcFmYvqqDofVAPAPxPSbqPv2PDgDr34\noCfEOxUTBAv2IfZaXAgDNj2JNgTucoz72LdBHjqEkjvAH8yq6sPAP4z9XxFM\nkDA3Z9H3v1AuYU4CZzLLgdBiot5UA38X1v7cDJFNuLuoDB61cAEX0JLKRqhS\n8ciTPscTwGSjMLBIN+cFcivNmiqEaAPoyONgopDUWLGsa/2wER13PmOz8wkY\nu7U2HlwSqjwZeMA3meb/PFANrzAjBmBOuAVxozlpZYrSQBx8L61KYd2/9hTE\nlxkkoJuJCa64S5WMOwSuN5Jq3zQBDkqVhAf9pKNtTj1riq4dDiMssTygrfcy\nZXUUZ/y55+ztIvHV6feK0zkO1sOz6pTBve8KdSOpEwC//jWSD+1+USqDFhJQ\nPcSJ\r\n=F951\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"cd73688a61b81573744ba9a03cd2952798eb68f4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.869d890d4.0_1620400650188_0.04805635013269205","host":"s3://npm-registry-packages"}},"12.0.0-canary.ec22e1da9.0":{"name":"@material/density","version":"12.0.0-canary.ec22e1da9.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.ec22e1da9.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c7d0bddc4a8b24005c88455c454fac1ad3349920","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.ec22e1da9.0.tgz","fileCount":10,"integrity":"sha512-SIqJKUtZIPnf/x7u9mrdMix4LurC8iu/eRF0127pPKwE4YMkKqSio6d0Re8uFzTX4cH3hGP3eXP2CI/04JXa2A==","signatures":[{"sig":"MEQCICp3aV5wvQMejEqgPvCpg45LEZ++rGZf2+hLFRNIcmBXAiBR2VZf8dQZfef1FTH5r39Wh6/vfqJ0ysnGEZDZWIFy/g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmXnkCRA9TVsSAnZWagAAL5EQAIpaht0YtISHqPOg8XeM\nWbYksQpRAXoBpYEfIY1fqQFljcGTA0NUJB9kqnU1x9smhGuBcB9Zrs13I3t/\nZ83hY/xwsqQRMFI95JwF98+vraZVRJo6eXTREu0sMFV6DxS4p19vRVDCdo//\nwIqjbuUjvZ3uy54tmoJmTzWrtWDtX1BSHsg+p9Recaour4l5+VSK4Qwfldhq\n/oiCS9FYXniSY9a+OiUl/QqXVAkzS6619yv297qwuysHafbp5KKBLVDmjUNW\n2MnZLvaiDPVOLr1b8dT5L1JBjNq9lOS5QczStBP78DxTRxGp/Ah7yTAYUTwF\nFPj3d0g5s18wKoIsqTG6nLlimmEvHLJYW4LD/VTJxcBZ5nuVDvtvFvycP5D0\nL0vns9loNI6977HvHwVbSy5nBe0dt9eqYECpzf5N+ISw2Wcis5s5Rp/c7Dvv\nkxBOSabtHM4fnTeeyKVn9G53vnLNSwzL9/I7SKqG/ah7+pL1iL/GewBo7ewY\njx9sSEHgiTqUlhKXWWl//AbRqW8GFVbgybL/Lgt5tNfvlTf4jKjxWZUvkQrI\nmt/OjgAZJF96Jh0w1n0wGbPjLjAT615nNFHIPIorlJOYm52ZB6raZD9DWxD+\nsCbCzr7sDBC+EbxdC1ikKVXnDfG7bE34jI6Ti3kuNkQ4kGqi6LCApcKbU7Kl\npsnk\r\n=eU9W\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"273a15f546b8d5df597771686f431c3726397778","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.ec22e1da9.0_1620670948346_0.8446366101802745","host":"s3://npm-registry-packages"}},"12.0.0-nightly.7427449f0.0":{"name":"@material/density","version":"12.0.0-nightly.7427449f0.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-nightly.7427449f0.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c7ff2d750dd0dde51b2a692726c4da19ba1aab07","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-nightly.7427449f0.0.tgz","fileCount":10,"integrity":"sha512-1e36v1/L2Orj80kNK2Kx7l3RMEq3DvHF8N0d2S8qiaKULxxBr7uOkxLSRUL3Sd/56FJfYEp2Y76O0GLLGOfTzg==","signatures":[{"sig":"MEYCIQCAyS+mwCvv9mVdYcxced4hWAWQIe8d+LR6hAX/An2IXQIhAJz07xg8wtl6MSpfqCiCvfTT0fWC1tkFQOW61ACmxN3x","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13776,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmX8ZCRA9TVsSAnZWagAAZLYP/RVwTK2rdowVPsBh7DI0\noqQ1NEeHmBbMWMOQgUJxZSEf8ISzObkmI0tiZWjzFr0CUqqEmaO3roBHkl8J\n421wrbcrVPpfvGuLmcgj/ipSb1nro0lh5qsJROVdUws17FJwXU1/q1k0qvda\nghcCewth3R+YR8VOvBT+uXIcWooAKGlV9eWnATjxg0z14QOwLjdk8fj/SUz/\nzIXJwpGKFpFeaC1FnPW6fF1Ylxuy5FSLLxQStDAoEh5XGmE3dYGu9w2GHeFU\nIfPIAzM7iqpviiCUmriwXhgA65BvWz8Lf0FSPWl/S0Pcs2rhZlNGRS9OrGRT\n56Cwq/d2IR7KTv6Fxg4T9CTY8JODaAhPco+Xm6Gxy6vdmYz/HHLtb7Vxj9B6\n1h2L7Fy3vlzooaKUo0lZjvrDTZhSdmsONnjTMxOXjjxgmGq2dO9fl62VWtto\nD1humE+bmljG847k5INXG5V/QI7H2h74aQrYQJpsOKenVefkz0MyJQJRu8Uk\n9CJHzl2F4gjmHFn+G12x/aadvvoTiDVur+lVmhRcQTfiygndMGbiyQVWJ5Yg\nsFzLDd5lAppSAaPgz4n6zUrFKE5g4oUT0zZdMMx1XM+K4L4agSCSHCwu5nGa\nbhzUJNrXDGCusastvh7M4ujebngSArRHNHH8JGPI/XnsQt1TMCXTVKEa9Hmr\nsNyl\r\n=5CFs\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"7427449f09e9521a6deba6ba7da71038c2fc1f05","_npmUser":{"name":"anonymous","email":"asyncliz@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.17.0+x64 (darwin)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-nightly.7427449f0.0_1620672280914_0.41363472005284163","host":"s3://npm-registry-packages"}},"12.0.0-canary.957cc3bf5.0":{"name":"@material/density","version":"12.0.0-canary.957cc3bf5.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.957cc3bf5.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"28fb68b5257d073d1e22e3ead4300408a04fa8f4","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.957cc3bf5.0.tgz","fileCount":10,"integrity":"sha512-/jdYw4YBEq/YxcUMc/wF7ZcSRal7cCjp0aFWSmXugB0YUYJhbPxchsfMVPYTElz76fTEFA+MeqqL9QKs7yP3sA==","signatures":[{"sig":"MEYCIQD1FGCzGfj8F0zKbk9VDwqYMOPjXNblx/DN4O4qo/clUgIhANgJFHLvMaeGIXyRfh0Y9+EWkRO/vRFGIATZM7QOH8wH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmavdCRA9TVsSAnZWagAAU+gQAIRe5rGNffelNyUTxWpn\n0SCaclz1DAtt9bqFiXVSciVYpBAkoGNqIsXbg5CSDOMehkrhJKLdZC9B5W18\n6KWebgUZgX3v9UFmjSQhwlyaQjW46BPa3OuwoohndRkZNg+rt2M229AldOaZ\nZe1G/GiYpxv4nfbSeJvXZQkRESUZSOoman0J8hjo7f3aRyQCYMxOpjRdx/KH\nEAU+TmKqsy1UUKkSCsUdiOCBTqZs0ixPVtNtB+er/xomBQIMcuQBdOMxjp54\nKZF2B7RyciWL4cXHANVMvvab3HVa3vXyDAG7yOp0+3rMgUn5oirnpqy1XwIS\nUTknJ60HUiHpqyhhebngY1KpXv9lxkGkThXLOePylfW2dE0/0uCTDAHjLhP4\nFdpT0n/NYKgl8xXYmVU7n3QOFtAS9b9KtSnIV5bY9HVGl77+3RMbGkt9wO5z\nvIfUi/UwPABEgJkOn+6rVBdExfG6mWJi9WlfL0JUeHDgt41/J49FAUjQBahj\npq5pZxOoFmXBHvTTDRmrAl8gsR9YMSlFi6hffiQe5Uq3K7SOASCwfnCBVHip\nsudhFJX08FTK2JcwMgWCOmK0pRWkm3/X4C3ZHdalpwqpppIeIavrlxggzaif\nC8n+wrGG7YfEwm7Z5DAIdqnbBzb+f2ClzgrIscLcvhovpr5uGUz1ePYuuo9N\njzZL\r\n=WZBD\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"3c29cfc65a597598e2a8e1841ef1af72450500dc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.957cc3bf5.0_1620683740965_0.4719808303758608","host":"s3://npm-registry-packages"}},"12.0.0-canary.88a33cd70.0":{"name":"@material/density","version":"12.0.0-canary.88a33cd70.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.88a33cd70.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cad8f524e201fe48d863f2a16d8456ed87734908","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.88a33cd70.0.tgz","fileCount":10,"integrity":"sha512-QQb8hZORv+CTNxcWEG+FVBlNhupd8uKX7/QqkLTa8IA6cMZ3CKRYyGXbYJlX4aiIF0Iw76onwmlOx2wVJncS5g==","signatures":[{"sig":"MEUCIEwcaw2zbSqjTsItw+nUVmw8xa3iyk1zkbX0+5Irmnp4AiEAht6FvS1zqmkB3IVKK3mU1be40Wbvna3Sy73L7q1LE/8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmcrZCRA9TVsSAnZWagAAe7wP/0rW5ydUuuzosn5YwB9I\ntu0phPxQ4eScaYpQn7JIy9m7LerE72VYLo0A0K2YMyUvwk4D4nJxUIX8+9lg\nuinVNt5mXC4hppePIowjihK7qwT+ySqPLrMRgma1ERLbQIVKiLhQjIkRb92X\nsQ5OBZkniIolOOxY0kjNg0/Ix8MGAAPR7/I0ddVZhNet0Wa/pe9ykot6hLEd\n1MdNNdddIxunSMnWcsV5bygtQ7iW9kfN83QczWufzFozRugdyPWeA9W4k8uN\nZow0u0gpIuYRhKPqmMA8YLk7v7kf6Hy3HlVjSEbIn730kh2mPI5TO8IdxNRY\n7F4+XR5bMwbSERp9L2BHZv+E3gUi1GUfR3OBIyOzT3vAUb6TIPQZmYQtKN+6\nZENIcJ1GwRvFRnw5oNNfgQIKTx7ndz5RrRbweNVFajd8SrJ1pZY4JUjfTSoM\nuYCbtApJof1s1bYQVa5PvUcwbL2fFVgMT035Rtd40u/eaROPLpuCo5++R81k\nN0tWKARb8VKXBB4gA8vbqwmyXkd2A/35Vz5HK56MIUa6y+Fpfp0RsIQalJjL\nejSTcUG77NMN/exkK9w02UlTF8UDcNTpMTFnorxM04DmwuWBWPQznO+tgQ5q\nvYF7zlyRemLfen5cYCwrmYjVUH9l1PN4y25rvshbG4GhNBPj4JitdZV3Nz1f\nm8XS\r\n=0tle\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"f1d341efc173e89bd2770326eaeb1fbc581c9648","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.88a33cd70.0_1620691672762_0.12481189716044017","host":"s3://npm-registry-packages"}},"12.0.0-canary.d20dc6dba.0":{"name":"@material/density","version":"12.0.0-canary.d20dc6dba.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.d20dc6dba.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8bf5be0082b04da2953ccc1be262589af89830c8","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.d20dc6dba.0.tgz","fileCount":10,"integrity":"sha512-+OQTDWR14DF9e0O0tncTHR8dTfvSC1adpu0Lko6C6MjPpuvTG4fZ3NU+GTPruyOOadli164xDMXI/Me03FoRwQ==","signatures":[{"sig":"MEQCIBlZRcck8sxxauWyhK02c+gfDbD6QdfZvOY1kawSLNe+AiARixzzki12tAsufVgeUnUxXJ+/2iXZosGUm4+48D0/ZA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmc6GCRA9TVsSAnZWagAA6bUQAI9VPsH9eGfXGexslSEc\nWU6PbU4nIH+AYJ3l8gUzQENdokXO40qcUQVNHE8pSzXZe5byw0WaBvieumQv\nKhruy9h+tRksAJrusBnjgY98E4iltNiTZZdR3eefEXWbb14LIdVJbPfm2gDJ\nxQqpBxG768zYe/c1MWLZn4NJ3qAtUoYWdLYCZQsd/0C/vy6S2biXtpW2g8F0\nN/ycujGnPRPg+2pWWJ+wpWkLt9D3VMuyD+tYg7Gdr4KZO3l62w3DMY+URmgB\n7E0ToX97fttOsehNBAj1Tq7IEUgw34Cbr0Vth9kDGElOvycG7vDUfkU6uoTq\nW2Ba2JMadnPUaYE7yfoxs7uAmu2LzFlFxb8ntnfEoZDVuxbTiEIbptDv8VHh\nYicFwUphZ1UW10O86nR0b0yz7mVmRA3mQ6VT8ou2eZ/OgxGJHs40SFjBjTDj\nVbMzwfx6DlLff9r0tR+39W3UKpciEZvqnog1rYfyTCcc+GapeIv99lTlXwrE\nFPWG1SgRJuMdIvbeoRT/VICc0t/yeT4vz/QyoH3Mx+OORDT1nRHwVqnRhBQI\nFDeB0CyTHo8Hl/o8NMlalR2AfXZO5Q65f9hb6rgxS4IaEDf6sh9WbidhCM13\nzW9d36guG2hpMGcaSdBrFPYPdQMvRkmD6e5VAiiqHPBMxM362Eorb7UFft57\nBa4h\r\n=bJ1v\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"f2980d3f7fbbd8d2e3b824a765f7fb03096bf11a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.d20dc6dba.0_1620692613869_0.832225700443233","host":"s3://npm-registry-packages"}},"12.0.0-canary.0ce2fdb02.0":{"name":"@material/density","version":"12.0.0-canary.0ce2fdb02.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.0ce2fdb02.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b2f0351afdef048c5e06ec8a2c2b846f3b46146e","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.0ce2fdb02.0.tgz","fileCount":10,"integrity":"sha512-k70pYuZHkESYrAVvW4Jtt8PCKU3myls+Z2wvqaE3ZwHl5gDfCE/akY8ba5Sgj5oVNEvdlqN0/mthTjtUQSVlnA==","signatures":[{"sig":"MEYCIQC5mmU7FWCFRc1Q6jt1b9mW702pyAxLvS3kE49v3lMW6wIhAK6NFGWUInB5+TeIisO6htJ5ek1bNX0i/l821jbjD0eK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmdZ6CRA9TVsSAnZWagAAZt4QAKB1hA2Ji+bKxtkb8HKu\nfIoaASKMJVAoSsdbpJX6LE6947X1d1BXeR1bXyNUcduW7y1xSqc8fxTacHDJ\n6f9Otwzz/SykpedEHhs57JzhZxEr5QGZYA0QzCQzS8vrx1X1MN88tEkLmrRM\noRgmqQsmPJmbvLg2YwH0x63/O/eBTWc8djyYGalJKm581EjK++Ksv9rfdzSa\n1LdRLYE69WGm6ueKJnOOm0FNkl0KQdvdrS59j0EcCoMwkwP+F6U1qktyjzPm\nqQA6AXti4VAHrZYLhC/wscegaVkeOr5l4y+7o01N5tl2gjdNvOdQDbqVRECi\nAohOakQ8IL8MD2LxcpwupRygWvWaIUmQ+gwvncRqoLMSfEu8BiCUTpp9yC/l\ngbthmZJ8aSQI1GJFwwL8QrbhEl6arLEB8zMpZFKwq1nVqmUPCZizx/bId9Sc\nIZ0bKQuUM1hHihIKca8bAYXAYNZKPw8yYrMv0J9S2yXiJ+f4jKVNoEjNxfOX\nT57kg4hcwM+ksje5GErAJS99spBg6jMd5P7THdOSUUMc57Y0Pr+zfeatXKkv\nd8CkqUMIP7DmdDts+Q+Hzbe8q04g/R4nWIdio/ya22m2f1wNk+yYfz8Rm5Kf\naWQzCJ8WQ7jLHbjR7jTA3RSLe8DIh9r/VxfJK1ZB0FNJ/OKODOUz98v8elO/\nvKvZ\r\n=kANE\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"ee2139d87a1d755a50dc6bf0a6dd53a2f39548f4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.0ce2fdb02.0_1620694650371_0.3054925960319428","host":"s3://npm-registry-packages"}},"12.0.0-canary.cb162da37.0":{"name":"@material/density","version":"12.0.0-canary.cb162da37.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.cb162da37.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"be1c0bc6289f54b5a2ba080d851c1530df76c7be","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.cb162da37.0.tgz","fileCount":10,"integrity":"sha512-V8kwWj1FxiksfsY9WkdWgv8Gm3eGLeiNLO4R9dFAi5++sjgg2e4C3bN0p2sJ5GvE8L4YpWzqUHXnRuL6DCVkKA==","signatures":[{"sig":"MEQCIDDkCYGBfECCd12MoFahaJYziWDv7KOiROAUwwsdpFP1AiATG6WuaRhiC+IVHvpwqaxNEEpcNKC+pQZRNWVtZqayig==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmeR3CRA9TVsSAnZWagAA2CsP/iT82PxZwgmvGboyZhUf\n+ZbF0g5bfwBij/o2MWXcgaLMOtZYKknsiTwhW+OHMjCy0ZWRyGpvm1OGMD5A\nv2dM8icO19Mt+M5FsbMpu6AKxxjV8TBTOy7P03/5leImVHd94AXgkrgEBFXq\nRabgrJmKZ8kFppAddlLW2xjqRLei8wt4dMGf+yhZE4rca0tpFt77cnv/0pDl\n6SpXZSEqGkdVkSlwwMPQGe2gFRN1/JtQGYeIBzXlaxFMoDlGAj+73a3mv+7P\nu7UwGhK60kSbzwebOTDxo3Bz/IASnx6cDYcReoV+MkVHlNpsePtNeqkNCqdn\n+yMTSavnAUHW/UQ8pzgDDAc/5+9LW0rY0ry3Yd0/PbEuab99TOgNpuhDcQ71\nKiqLaU//ay02bUwe36I9o0+QbrDZEy53AiPMxerlSQG81UeaTKkZ+2GHhsd6\nRQfsuCyJ1CRgTqpoog5pchxNH/ufxIZM04U6vIlXHpVczes5LrDO8G3Z7Zmw\naKIOxgpITWEd1SpDEKgW9DkqViri+3In0vqmGKyLXEYox6tqgBNfZTfmJK1L\nXITqmfiHE4D+FT+GwgYP9BbPMSStKgsRpjMyksRHtugbkIt51JVWfAS2+N/Q\ntvLSToP7wYfKcSh7m4i6ojL63JZ0ilLT3E3F99mQeIpCCGDLhvJVFmahevJJ\nn1LP\r\n=AE2A\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"9858adcc9ed7b1111dde19951ba96847bad0beac","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.cb162da37.0_1620698230824_0.5359470918443152","host":"s3://npm-registry-packages"}},"12.0.0-canary.573dc7ffd.0":{"name":"@material/density","version":"12.0.0-canary.573dc7ffd.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.573dc7ffd.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4a8276c439ccfa6dda39bb1dab49d3be5c09cbb2","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.573dc7ffd.0.tgz","fileCount":10,"integrity":"sha512-O1WJNTvCIavw05vcVEZJDQfFHh4rnJ7RV0HhBAEzzK2rGJCb0M1UxPg9SLV6T9Djod5x0fNedQVbT66cKpvkQg==","signatures":[{"sig":"MEUCIHiZcufBRe2rJdk0yXOQdNERH9AlUT2SxbDEay3jyYOLAiEAs0xTWxTjFxrnxWhycap6/fNwFOcojREnKwheftmlF90=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmejuCRA9TVsSAnZWagAAJrwP/1VilxbYd7GVRN+rsyaY\nrT8yOsqrYVuVdLFeQcmvwdTDkgTIfhfrjSJRWW+yl9GdDou5+Tc4K443eRR+\nQVwBWNtuqbtS9Zh9UDBk7iluINcMEpCdHLJHhU1+r21wrMUG/+JuEsFFyLTW\ntD/pLztHuMjScsd3PO7tZQyy7c+yQu5THskx+yIiNL7FRnKkI2ZOltnkdDPh\nfRQLlhbhMsLiG3v/6xsTFuabSBEkRVG7SuCsAlqdTsVZ/rIsjTIJI8Qe2jtW\nRLg16rYrJIhKpSLxBD7aA1vvreqcz2AqoZrPAHPK60IvEDwO8d40b+2eEqJv\njCyO2zhz0IGPeNnsaGriN4eKWyj7nUyCZpv/EmAOgFhCBeL2yGkLfgKVGEWe\n/9cs/6rHrMxn7mHwO6dWXQb+81NWqjDXiZWgMFF/V5MyCDaohBmz5pXRzfDM\nc7oaWpINtIcrsXY4FhtKZydialUAPKAhwxSWe1IEQsKlwY1a+o3EgF+WWgjN\nOH6UHY0dk96JEZCIeHZddmbuvZWJp/iGEc3OGsxY5ybfKrQGSqjJ3Ni/peCz\nLyG3mR43Ay2hD3fg9orPD7eBWNcnJ4cRKgfDbQBqUqvK2S7RmLvR0fPWQg1O\nBc3sXjTrtC+qj+E8B8YA3aSY1OFnl7CKAXqnpIKWZFwfug1chSA0Oi1Z+D6m\nijNL\r\n=cx8A\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"67aa299a5066425730ea2e8558f89c111a5ab156","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.573dc7ffd.0_1620699373788_0.25934873098613376","host":"s3://npm-registry-packages"}},"12.0.0-canary.d5f6ad3fe.0":{"name":"@material/density","version":"12.0.0-canary.d5f6ad3fe.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.d5f6ad3fe.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9a67f01a6b3a827ca8938468bb1e942f3988ce86","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.d5f6ad3fe.0.tgz","fileCount":10,"integrity":"sha512-X8irtANFlw8hAFgFf8jSih9sed84A5GJ6x/RyIXdi5ZRBNC8CWNPQRgWRt4wgFJpsV1VF5he+5d0j1UC1DjzGw==","signatures":[{"sig":"MEQCIBSKXtci7Prew7HfQNs5ZJmDXX/RbkjKilm5RcCet4rtAiArDTE1Q1sIfv0y+XlHkQCm328Dl9iSZmpaQsuP0QT6Qw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmxF7CRA9TVsSAnZWagAAHV4P/jC1iKlfrIOs/pSIsIN0\nccsKsLCIn4IY6lvbwrhB1gs4XjgXF/QLGbg1oIeHgITB0GPsjG4ajhUpwRCd\nlBH4z5i4f/8Uvx7LigNNling+U06QDdOI0BqHDNDeKAIFZml4QDLTJTJiNsI\ntFrM7tJKYN+ifJV9/qyRYKALfXAmPxkBSMvJw8AsnITdDIze/9s17MtlW2hS\nP//kHjhBfwF2+jzsj7Q8gCh5xsmH0xuSbPZUljdOjJQH3t8j7fPVOkUVmMtb\nrQlj4tt+rsoBYhRdPdSg3BhepglPPVjyaJsM9ZE0kxn4O+Hap0And7rAl3Rj\nMR6y4xESPMwLpyAGht5wbtl1L0iZepldpPNd+lGI/SZf3D+nS8h+Ruak/xud\neEKP9r0PehYrY95nEQBQbxkbr0JNI8XQGKVFN/9Gw3uBHllPEyk+XtarojhX\nVCCNujpsHpVz4PVov6uoxJayVuac8Rr4WEbCfPuj7yOh1HkMD/AzlwgH5M8m\nF7lWIdmTzPm57LP6N4zIRG7z/XIXtwrepmLhWyLYTI0+HeoOaa3Nh5cKhN+y\ntSg3P46kmRH/IasHbJMA2r6uSqXmbi1D5axWXAWD5/VxKrtIrkqZaCkcJehF\niFQGwtZBGmUvVTOrcUHiMFTeUG1KQZjsP0VlYt+2uT7k3HoP/QIEVyATavZj\n6JO2\r\n=mdFj\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"c0bf85201107dc8a95576c2392f5b1771bb2c969","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.d5f6ad3fe.0_1620775291179_0.736989445805011","host":"s3://npm-registry-packages"}},"12.0.0-canary.25751d2ed.0":{"name":"@material/density","version":"12.0.0-canary.25751d2ed.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.25751d2ed.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"428ef73409ddd4b69f79a847c0d99b54edc02c61","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.25751d2ed.0.tgz","fileCount":10,"integrity":"sha512-BnxYGuQ9bdeQ+3ceghVyvgiDmFsSmyiB8iaRio6ArS9PzrS7nnIMxWpGeAO5Rb9GEqeYdHS/xIT4g3DctIm8rQ==","signatures":[{"sig":"MEYCIQC1Y6O1f0c241Ik9/P67gMkwdRrSRita50sl10P9lSv4gIhAMso2FF+8lFNM+ahvFML7QvzNn3p/kvqODp8ptVg/ymg","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgm//cCRA9TVsSAnZWagAAl4kP/3CuxDe4RJogBL8hXKTS\n8Osivjwf1xJZ5nXvY4Hun5omAF1WCF89PeWKINexutueiP8kc2rEwQeefDm2\nh7slX7GjxPRlpXTmahWx/hc9GsmN8ssq2dnKleVcOlaSOzGRURss9qh6wedl\na0p2u4c8HQPpD7wgdsgOLG37MYXqNKMqIp11gVrCLZGnGsW4xmMRCqaQttht\nkA12n8QECSYNDfhnNKoYQZx8KkWlNu9/f0TyRb8sy24wbfGnBumr3axc7irY\nVY7Fl6q3LDESSAo85F20xcfgdWBpaM/oUfrxxfksXOTHMjV7Y13RtRaSC5EC\n39JO8EAfAawdX9o6sZi4AhBUzoo+YLQHPa8uzkrLk6dg6eBk+lS1D3z+dmCT\nmp096PM7HZr1XolMvHgHx3Yehos4fil09U7xGOFbuWXbxF+7uK6EfHAuWPEN\n+f+7P5oDoxb9Uy4C6EkvjzAK7hPljv87jUXWxGgbkWF63Pkjg3EnWhHBVjyD\nVbeR2Kck8KqX6sgT3yhA+FwBYBvVPQAWKuaQsNB9+E3iYO7O7C20R09zXsyd\nH5dYqX9ZsFJCoIzR+gSApPe84QIKA4D2td9x45dZXkwJFeEQqY2GUVBAu2bB\nc3H+Aty5ukDJ131E7WcQ8djvCKljgh8h3a8icjOeQucJD4VNlxU5lfpYubs+\naYqR\r\n=Gm4o\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"c38dadd226475a1dd91a992667019eefec273bbb","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.25751d2ed.0_1620836315800_0.17331311675308103","host":"s3://npm-registry-packages"}},"12.0.0-canary.a23ecb682.0":{"name":"@material/density","version":"12.0.0-canary.a23ecb682.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.a23ecb682.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2b3663415e02864278b097e128342698b6b3ad35","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.a23ecb682.0.tgz","fileCount":10,"integrity":"sha512-CjUSp6aPoH07jAFc46xeENu4Fdpi2K5E7+9ydD1W9ClWCz+gzlJn3hQMMlMT1ZMdXXSx57ZtDsUhB0GOLpOOIg==","signatures":[{"sig":"MEUCIHmzt7ImHBYvEk5tb1vCeHjcAyAet04RPUKIEv7iIfhWAiEAysGe+Z93lSXO8h91aWS6rn/jeeRCjsVEWUy8SlOKwi0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnBzOCRA9TVsSAnZWagAA47kP/jdeF2DtXgmWL2iAb/qy\nIutxAtFEh7NnYxC3aqvpUp19N+FprivjaGWdf5XOY843kvb+nYGwyv1rNBAO\ngEPL2lvmbHjxvQ/H9EM4Ozi12CBFRlJ7D3zI3G/m6sk48gU9IrkjZuPGIste\na+yudeCyxEcBEF/W2AMer7EY3lnvgQHyX6LHTpw4is85KL98fOWLkAfS3mxC\nveU4lLuXtP7FdtK+OCCpfgL/b1bWhW26gnx7JDXyAqten+Dbo5/IrUnVojVM\nQb2HpK+gnNcJx9tK4jcAaFUo/Wy7p1N2gWeCtmPXOYix9z0dMkrRE7RYlRyS\nQgKqM2t8YI0IhL3hwfXdrZ/QKPs011H/DyTWFnYMyqbMohj6aQGP/huYHBbb\nynVUsF5rq9VFdwxpv5yWv7ne3nUvSIhceTwAt80w96TZfqxds05Ua0KKNkx1\nRoetEzj2WnkMXmqCE7jbfzMv+TjYKFwBnsRkJ6s8YcuHMg+LICyD2nQIJXD7\nsfB/cbiiO50ogAIbvE2BQ7g6XI0Ja8WphBwFQMd6A6Dq8//GlYyqUVWdBGSM\nW9pJtFymh3mJ3+6QmuxD7N6xY5xLTobul/G363LrAkRccyed+AMSCgzJ3QBL\nP8ncc9hHcIBWkdUmtPJSo+DP3GAj8bVU+wB7eerDuEwpIqTsOAe/gQ81PjSM\nI5I2\r\n=0ofU\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"da78c3f024a21d0e0df18a30c887082b202d7269","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.a23ecb682.0_1620843725661_0.8583784737360027","host":"s3://npm-registry-packages"}},"12.0.0-canary.33a954852.0":{"name":"@material/density","version":"12.0.0-canary.33a954852.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.33a954852.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c659b8bf5314d7d837f7cc6f8a56af6da7cc7cf6","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.33a954852.0.tgz","fileCount":10,"integrity":"sha512-SfJK9z92x5okrZUHgPFrbvWgwIFgDFPPYlMSTtEYGeOinGHJVICC40ajolsp9wvaDkpvlXbobjMLkyhmbI2hrg==","signatures":[{"sig":"MEQCICj+oS1LUcmbcsu0s5VWtNL0Smzufo+zNAKqiiEr27/JAiAiQPqfiu1PVMYYuXIfQmQc4i6aZYtsVod1jI/WND3M9Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnUBzCRA9TVsSAnZWagAAX2YP/jLORJ119BdwfF2X+Kd0\nWe82z5iAOLfMNkGjfJHEpN8dAzUuh6sYD2xLUmFuWpJoFGny8bd/UGycOr9Y\nnPcPh2bl1zL/jYxNPKdDLZ2cQicXENjbHa6csmwPHGb2EwjjsmQTdGCnOqGh\n96EjzLcBosP+6E+FnCLwnsWI46Akm15AFfXm/GqdVbVPWLiGSmoy+uwtCj3o\nu2t+B2WF6YWzn/QhlqF2Hz7TdQzln+xUy6QhGUpPZ4PdTHvTtuN1ApsYApAk\nEqClxRN3/4rHUuZ2ZE+I2PnjwZKDM49bWTL8l8tA7wnUCPtGOMwkw1FHQhWw\nXe3WjT0mlUsNfa7wHMVwtwGLd1Ze9etGIy0LcuJOLRbEFqGJ0VbDc9FfDxWu\n82fsU0FmlIepX16FRo6E7J5n0dM6mzASUc8JjAt2pQlPIoEYKl3h6ct7Xd3c\nZ5SRNuj4tn9NSS2kKBkJZMHJF17qZzeKJiHuFLCX64hgRclbwX6PQEzR8MBE\nJWPZMP+t1g+SgEkM8AV+Qy/N294TuRcT9K9yiZ44Errag0qsBTOPmqOlMcIE\nigDxowkn+2L4BKBBFxk/85+nVj9acm3ujy1JGEuKL9LinJDRpGjHr27zQ9Lf\nsP3hxorD1+FVFtKtLRAdaTi0NQJ7Zvxswx5xkXbyLTNJrBBNzEkmxJazxcar\n7Ze9\r\n=eSGM\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"703dd5ba6a1225efec74655d3393690dca1922eb","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.33a954852.0_1620918387165_0.37072865704405666","host":"s3://npm-registry-packages"}},"12.0.0-canary.a4484849b.0":{"name":"@material/density","version":"12.0.0-canary.a4484849b.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.a4484849b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d06d98e44bd4f3ae94600b1937802d682bc71b9c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.a4484849b.0.tgz","fileCount":10,"integrity":"sha512-WlJQ5GrSg7wiunkiiomfv0N75I+IpNMHAcc2G7YBBngh8d1DW11Z4wo1PMBb29805QBzv0q8bHlk3OMevIJ6bA==","signatures":[{"sig":"MEUCIHBuIe8s+E5prqdSN0RH/ibBjgQvGWb2mzPE5AUqGOl5AiEAwmGPAqeUdq6LmJ1HI5fgzYWGuvFqqVGikKx2KrRnJVk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnUXuCRA9TVsSAnZWagAAt3QP/3V9bsgKw+Dc0sLt6FEU\nJd0Au4kRzN4jh7IkML4G7cFqj57pbT0A5S0ylHkv9EDkkPNAz/BMUuoUQugZ\n7I7tIH8nePuIjDdNKK6Lxv2LLnnVUPV7XNGV3bFAkMt0hdHRlnZeD/hG7r4w\ns6ElvdkTJyzAlxWDOfDuX+h3G7JT32nP5J2JALQNcXq2aTE7TZnUkqESSKNV\n+c+xAfkG0Q6QVcUCXOHhLhSJL8184vCx38KNw7lIapGV1J8uxMi7ldhr7yN+\nKqIcAQyHEIpBIrx1Vm84HTUksH8Nwr1JbfUc6CP+ooVqtDbCc+EfqSPZllwd\ncvuZThe07+mAX8kG6+4h2A8gxW5aXta7TDR2s4pis7WOy9Au/kFs3m/7WxPA\nhI4hQShG6Uz2e5ecBclUTwpbSeE4hn7Cj+uevshEIqiT8EaFp4x5ooYjsVx5\nM12Q6Slo3Z60YGs6IHy1B/X9fCJ80cmvun7AX24W5X2Kmgy7sNzOe/QrTuKp\nb7kLr/sSlly0fv9KoTf66M5ChNkSRMuFrdRHBUMkK/RUjJsuxr2/mYEbAjet\nxP+jQQhBib6TKuJuZR+QKjuNIt/AvSyjuNu5VqrH9AVibyMr0JXbblupIU3/\ni8GOZlHEsHFrqLnpRNHMnlX845DBSTftxW+V3yj/mT0x21qaiy14IWIYPW3r\nDn4t\r\n=oqiC\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"7908229b1205198ad87858e49ed29ee3836cebfc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.a4484849b.0_1620919790119_0.46868357350918277","host":"s3://npm-registry-packages"}},"12.0.0-canary.b4c3f513e.0":{"name":"@material/density","version":"12.0.0-canary.b4c3f513e.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.b4c3f513e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1a32acfa8f44a50ab1f58fd2a7a762c11fd5d6f3","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.b4c3f513e.0.tgz","fileCount":10,"integrity":"sha512-43eW/VX5xRngqonqGmvBTOwAI4BAZJVrPH2UdJiPvWZ+mDDsd55AGtSPjsYzz/H8KC4+FYROW7LiWOPevYv6XA==","signatures":[{"sig":"MEUCID92W2hFy0koJfnCZIRDH2M4gNIwrzeDvqhqN9zwEGOnAiEA17yglTZTxO07qbvsXVw1j4GLl8jF3m+xIp8Rb02WFlc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnU6UCRA9TVsSAnZWagAAsaYP+wUBRDlVlwzxcXY/2gCJ\n98WgURzU7Hz8WT21vCqCBHhPO7CwhojHearFrQGLa19XPc7N81NTAzYZ8tbF\nORspzrddQ3pW9tBitWeb6BFQ88VwSX20x9P6h6SchwMTE3Ad6PG37X7As8qP\n9CLBUPJYf2W3JTeGiu4edzvtbbsCJq8UIyVZfKs0sXK6/C7TB3o+w2pyz+QO\no6k3uM7x0rOp3ZOUlckiP2BVAKOq5lh3+YFek1c8SyhtEN78sWiGhesABlO/\nXDuqpMKW3T3xF1OZa0VTsOipREbYgJ0UAmstfRd5PO3TTqMjXR3EfbLN9lf0\nNw5eAA0WOZNlDliPqBwbXNJ+llJWdm0vEp7v4mr2zydmcLmxU7JR918gK9sL\nfgG7VrNioYwZTAQAy3G8Y48ypEOkgbF3ZIJL7/2g+74U6rUsYlKYUUH5FtOx\nhnlVKxZFi3Dar3RM7RH5pU7Nahvjy6AbEw71wkw/kcAQPlxgjtiYZHKXvVyV\nIL+lI5VLKawWBRag+5VxyAeDBB+Y3PJr4BG+ERb5inAQ9wUaGIHoMRyMx0YE\nTdNv51Qtz6HQFbOuVjR1xcpXXvGSA/eZ/XTfWUUosbrani9w3Xb7+KuYXlo8\nnyT+z2Dm8nB1ZKWJwjXDd83eNthu2n/dVrhl0zF+2ITgr5+eo8edshhqIncG\nRhk7\r\n=mQHI\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"c2183e7caf6f0437e64e41b632f75d33156547ab","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.b4c3f513e.0_1620922003744_0.1389288432597433","host":"s3://npm-registry-packages"}},"12.0.0-canary.1a8d06483.0":{"name":"@material/density","version":"12.0.0-canary.1a8d06483.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.1a8d06483.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0f6ccaa15b8efcab1c5eef51ab9cc2c304ff2f9c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.1a8d06483.0.tgz","fileCount":10,"integrity":"sha512-Tq5MX//GECdL2EnqRFJkIVPJjHD7u6XUCPhH5n50GKo3fZAwU+dksZoncqZPdG/4vxZ4aqTTQT9VXmk0QDEo5Q==","signatures":[{"sig":"MEUCIQDPHDTsdVvFG7Me1D5yjM+5fGgFRRzehmwhgvXjkjqaKwIgCSa/Wy99BB/ZL/lqgtZLifu/1cIzQAxF/80SCQCQs6s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnU/2CRA9TVsSAnZWagAAX54P/1ziN7JYYK0pVOM4hO32\n21w8jxu2AHyFKTvtIgnRpGwdX5lpYhqdR5FWPIT1/7FV965zsE/bYRK2CxLQ\nkiwKxtKHStBpDxHqanMRkIyioD1kJ0XQn2MMmQnVQSv4E4uqxYa8r7CxpPoc\nPB3o/lbRPP75dyVp5gyN66z8H/e7Io1XtjamYElyH+UWrid6Fm8bIp62LYGm\nLlPXwoJpHsVfMZir6CI/FMOIFXFxNC9ZSSnSGIa/MbegLsqg4rFcGMBkllPK\nCQ/+4DyVu0Y8vOshQf94wd887kRfj4k/zHQHZ5cwFxbD4MNgG0hH10N6VzpO\nO8HOfLkMjkU6XqXuWV0kULt/vlgwhbFQ6ZJ/U/n5dFvT25xIpGgu0x7pSPMM\nAYqSL2StIxDXYGdnenVBTTpsIBmqfUxLcIW4ewFG7ImXJj2rapHVcbLtsTO9\nbazIYr9GwX2dij5PEOwpzhuOvJPevj4rLA+2TCGHivIOzCj5O1IwbSGJ+5Es\nFOHZgWaX3XNpp9mLL3XFxdEib9cwW82o6o9T7+Se6r3NCVTN9lRFtGjZ3eNG\nv2aUQaB5EHU66QQipTeUJ/P/Eur1c0cyUFEfgOqzTJtZQOBoES4sWyCPoOL5\nh2vzENj9Wom0YgRmNRMoK7rTWnffzbjGyus6xBMDzROFdHx1F4hoYSfnEC70\nbJSS\r\n=0HkB\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"4fd7ff5259e7910dd76488a7faab45af839a13b2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.1a8d06483.0_1620922357870_0.39834287125338497","host":"s3://npm-registry-packages"}},"12.0.0-canary.8e6081836.0":{"name":"@material/density","version":"12.0.0-canary.8e6081836.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.8e6081836.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2f31eecede897e57d1bb6deb74855d991f76822e","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.8e6081836.0.tgz","fileCount":10,"integrity":"sha512-8V+kNDwJ6hhZse+9swj2piMN0nSb8SK7GNjbfwRdb9rGqRkBuWfXexoD/VE48X4jzvOy080rQWnIlxbZDTrXxQ==","signatures":[{"sig":"MEQCICCBSwFiMAQILyls65Xi+Sz6AKxidxcGcdTCj/jeVT7yAiBlqLR69jXy93FiPXEhdRWMrGQcOUnUl2P8flBUyW3Sgg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnu4YCRA9TVsSAnZWagAAVxIP/3MeerAbaE4yqXgxwUCv\nCoI6Rn1FMU/R948W6IZWv+222DYDRnrdWrw8qSVxfA7Q7lpVVoBcbKmm1iDE\n7uRwWeN2LieVhdr//KH556+3FoOzDLGSsWE9ZD2JkYMbukr5wtCgH5+0Yeye\nsCcC7Nj0U0kXPIXHeeo7x1gJPsJwI1UNUKSNB6SKJ6+1+3Ul1NfOjiPvOMk/\nQF8QtoYYxJFuvCKhMlBSzrCco3nZQs5nYTU1mgbnzNbSVKiLFkwEeYaNJFSk\n90koOyi8pRoxB+7W9d1VjP/4/hwYicpnjmlgOGYbTYgFIt2AUx4AYOrj9wnW\nJ+KgvPiw/L5zMTQb5ArR2vntHl/7xYfjbbIG5+RRMcI6fpKdlgeFx1PE1gxW\nEhxvyFlV5+Eu2woWUpU51UmPdtwSH3st546OZwKkVgokU4nyETDVGuzA+XHn\nfScbjSkMOHLfLs++U0e0WKujjagJP3zPv3SAYAtoBWBrttRILQLNc3idrYVA\nfDhbz82zHXo6+llr8vcQZVFoLaGPkU7+BKu7AbNOVuUdqI/aB33pxqVi9IPc\ngPYrgkWuQglchmTD+wi4jcwnowl8HWBCetJixW/xgfatwv5xF0/32Zxq8y9g\nK7/HjPcEr3a5lMYP1+2bkLpeH7P6TdbMma8OyuuCUOaKiGzQ1Gn07AXNiQRn\nrSJZ\r\n=cc6C\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"e648805eb34c990054d503fd3f70ed25e40d6d9d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.8e6081836.0_1621028376519_0.5328638616413548","host":"s3://npm-registry-packages"}},"12.0.0-canary.a2b0f4cee.0":{"name":"@material/density","version":"12.0.0-canary.a2b0f4cee.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.a2b0f4cee.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d2490c0dc5f4f32aafd38891206b970ab53cef90","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.a2b0f4cee.0.tgz","fileCount":10,"integrity":"sha512-udUoqVIV1gHJMawucpP8xl8ZYVlEgXr6KfO56Bgj0xQ2Kbh4hAKcqqMcXULPWDOOQkZ+gVixMomDVlrykNMF9g==","signatures":[{"sig":"MEQCIBs4nhz8ISCG9w9Hrjr+gX1/kyY3tcF/fWyVC1PcmH9kAiBANQjksZKwUhwEwwvs2ErNx8S0nvwNnoFQvTHoOKvqzw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnvEwCRA9TVsSAnZWagAA8wwP/1zDV4+Mq/6TMr9u3lZF\nAD20HVmvzoPJYwIbWyIZtI0oohipojYxp6gQuzTDGIRROAS+Jn5tOhHtn+4j\nnlogwNH0ZnmHQq+PwnaITkmKneWPXVtvctmE4SI5XTA2zKkMU5gscm8EhdhO\nAVwzsMK5HyI0HAn6DMS8t/PIm5QfBPn1+HPGztoqicNmrlFRjQm76na4wZJ8\nsZ1Ho1evBVPYrH2AiBQwGi1/FBLViVdSVJk/07+TS6kgcZOQrWeEeRlnCXc0\new3ZzTZHO9eKrpX26dPuW6f4Nud7IE7YVRpKR0KJj8k5uE5Rmi+Id9qZ+E+h\nMzZseH3/4K+iLKSaU2cjXqet3iLlveBnxjCR3XeCNkMxkq0rw9cNmUsz5ITT\nfXUC/g1D4JCxS2S1p+3Ky+l02zBKElL7TqA09+doISKktsdo+3NGZlIB0cNK\ner2v0vVvqf7qwzwEQWv4sOtwkSa4RTrG3t4wGEdkqdVSP3OnNj5hYaq95jRu\nj2l554FH0aIQxmU8FSlot9VGIeNSksbUcWY/ydmuxdqJkYp/mjYgGPm7ukqO\nUi6WXQojzRFUzZLjb2/3DcX/Ik4Lh/JlpYRznmQAjdZHgLeMAOU7sc6QrPTp\n4b18j92nYCOsD0oXeOHMq3NjotoxMNDOfghTZ4sqJSEhwm4yB3CJbXWujCvD\nWE5F\r\n=UPxD\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"67c2d3cef073a380a13ddb6bbbfc90886c7af364","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.a2b0f4cee.0_1621029168178_0.5432597159818351","host":"s3://npm-registry-packages"}},"12.0.0-canary.e8e39ad19.0":{"name":"@material/density","version":"12.0.0-canary.e8e39ad19.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.e8e39ad19.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"60aa480788f67719f2f241bfafeb4abf157cce11","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.e8e39ad19.0.tgz","fileCount":10,"integrity":"sha512-z4oalKPZ+WKnSJs1SH2DObx3wXqiok29y3ttlLorwqPlZbKXLaED9t2trZsjWVi2nLeYW1/VrPYMGXkB0TpZOQ==","signatures":[{"sig":"MEUCIQCBH/ufgbyB9/DzIsin20QXZmuo5fH2vvmpRGZ4bUU2AwIgUw/jl0bG/9LK8bVvKtopFQCsNXVNeZUCe2ow1+Orph0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpB+XCRA9TVsSAnZWagAAhy4P/iTB6cFWSeKLO32Yo0uk\nR3V3pYNa5VTUxzEiGF7OWX1gR/HdfcC3GG5Hj+UtHTh/9cb65PCfqW4TX6yB\n7XlIc6c2A9LGuz4n4vXC5qqfkEGv4JVGYwES3KvmZ+T3ifUiHR2KOU8tBx9p\nxmezggMwSoNp5tI41E/U7ymOp1qFWCPtU+d8YvLr2nYfSFAfi9J6oxoz2vy3\nK0pTQcOdDpKfCoiTUxa3memDngkKvHRD1+OMFjjFJqEfOoFowth/GUgkcwpv\nC+9jwfKUi4N5GObq1XCoyTXPyB62u5hRSDn67TrPLLk3K3yuH7hRlZeXZLKu\nKUmn6OWGnvb59oJDy7MynYmsbgn/Gp3onGezUHep/E9iJLuSOAWWD2DRNpbS\n0yVTYC4A5lqwhxBx2cP8MTNv3lyDIPGV/UeEOZGCL/JoGlz5gMAkUyWYlolZ\nm8URovy6/r1UBYrLpaFc9zlO/xw32hUxKfyecmoqY20E7qPOIIku7LugN4Ro\n7sqJBm/uq/86lkvtOzVIJY4nII+YQ+HFV73xpuTd7quihe+DtkxkjDXxOdYM\nSPW4M74N/Fg2lhH5erb+IaDRe2Pkt8tZy5jom4EJdlgQSSHiNGn2KwVT9Xwt\ncrxzoYuVk2cBN80aMSfUiZvTo6+FQSiSI3OIRG5OlvOEB88Iguj367Hutyym\nsrwX\r\n=4lsP\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"2bde63cf3be6363eb1508c4d7e1747acfc51a761","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.e8e39ad19.0_1621368726883_0.6397019563419719","host":"s3://npm-registry-packages"}},"12.0.0-canary.4bb5eea2b.0":{"name":"@material/density","version":"12.0.0-canary.4bb5eea2b.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.4bb5eea2b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a0833c5e20e3f74596b193f300d95736ebf49e53","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.4bb5eea2b.0.tgz","fileCount":10,"integrity":"sha512-DQSywvZKpo2IPZ8fbDv1BzcZ9LVxxr4QiXnH5nITHQCo6ulY1icRserKv03CA0C1W8KbyJyrt70js8nDGqiHWw==","signatures":[{"sig":"MEYCIQCO4dC0vmVNcUb4zRKnxmE0LKyCy3XPY10vzyhct6OXzgIhAK65lJYWBtNkhbkGQ+nADskbg/2ojr1Zuk2l9Ti9SvW3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpS5TCRA9TVsSAnZWagAA+McP/iI/ER9rIww+nN1HGVdf\nFBVaoOLfQ8iNAQIFcJnihAsGnIgvRZO9RKbG3MS1P7POEJuyKZouPP/y64mT\n1oPU2HLunwgcxaDod9jPc+tQSAdHpBGJ4YoUwS/rPSACAxvbkYXMX+uZ6qxu\niJmtZahNReWUuy7e4g8qMmAxwSUoB1uY1Y+PD/RPbZZUbVkrvfx9RGU7m4xf\ns/eBodzF7CG6dtJiDDy2QY1mnImwTwiqi66iVEDkVu/jp3UvlKFGEaiCyMxm\nIT0XyVXxGWUUhXCdpXUHFoVobnRHl7zkihDRDacv72Gm4WtzECy8aLXnrGtQ\nnoAOLw5J8qP+hM4GmrdGzINuaeKFjhO8tOEVDJC22QGMWjJn9+bwYjRVZp9t\nGvJRNTVGXSpKXyzhfUGaTtVJ40v3yurOmgeY4jZPrEaVamqSRMEw8s4GYV57\nKHO5OV3x02v3gZMde3KMSRs1iYjaax2bunPPEGD0j4SfeuvgBhNnmiVWu7Ua\nbViy0D11RMbDvalQTeFUAg6mOT1LNcNQQIH0i2CzxRu9wNQwcbfD66Qj5axm\no7BE3w4FYdbXX7XrfbyynMO7HdpdDuC87kz7AWKHpooPSchYN4dgL4liNfrk\nXQ75vDjVdoL87MLBiPFRHaGAacXomL8sYh1cZ9cVPFISrCMqbm/Myu2yTeP9\nq8Vp\r\n=e1t4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"9abe3ad555ba3e9ca70f37ff3419acc2edb56676","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.4bb5eea2b.0_1621438035157_0.568401686057288","host":"s3://npm-registry-packages"}},"12.0.0-canary.ccce99cd6.0":{"name":"@material/density","version":"12.0.0-canary.ccce99cd6.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.ccce99cd6.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9c01bfed429b38b052055b1d3e799f6de50a9681","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.ccce99cd6.0.tgz","fileCount":10,"integrity":"sha512-Ox8LAPjJrX3Rzryeaam1hltwxLp0QVWY5Un8kRdKc9yHwTPRjCijXwXuYFeuB0JUUdORdUNb/uPUl0+EWPkYgQ==","signatures":[{"sig":"MEUCIATfdUw1GHhH6vzEwXAWtVzRAQ8i/s6VFxlpdWp9wbHWAiEA/fR3/t8HLQdL3xGcQNe6wYsvo8mmp1ruM85mrhYV0LQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpbOQCRA9TVsSAnZWagAAowgP/A+Y0Ufr94brsYQJd7k/\nMT8ruoCLb5N6T0QD5MSoOTK7KCJiMc1JSrR4zGtgyzwxFnMWcObmS0JLR9Vx\nEZDOa79Oi21w3/CuqaVm+DqrfAqW/HqkWAX1oWfzZlykPr0tmL4xoaQFf+o+\nkj+QwdWvUZtsdeIvzskd6+kB8lXJpMis5LQkQdUMSCsPh8zKNiYkeMexYCnT\npswHIaSWTYxq5dfonRPz70vLJYuxawGlv36/Lfbbc4wGJZSXgMk7dS51hetA\nmSIRkhEtGydPVzxjUh71gqwT3dIkIcz6qav+Wi4dcaFr7ErjiCIZJXvF3e1V\nqStsHmDeUBHHNj1slUBCXPKRqXhc0asBkcAzQBTwXpGs8bKcchQpNglRkpXb\nUYH3LpSIT0XiYSuvJl+bb3TmY0VjTwja6nZ4F4I6claki0bWCntZ9wxJeqsz\nHvmZGYX2eAy5DYtV1YIHTAKG70Z1IAnnDjHBnHu1Ev/MfpzFT6E98iLHHRK5\nKTm5Da8c5K1v/cmpjZsCr1u4Ypx7dRVumrHp2Oz7+0B0FPD2ZuU7Ezk1gyD5\nwgDqtS16RpdIA431mziG6i8aAOMFAFX232+ouL7AREx7yuip4ackCUwMdy7+\nb1a4sgIrpODebgin4aoMkOrZFSsWhLp0GmSgzE7iCRVXMx98ldSI9emQL9s4\n88Ar\r\n=phEM\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"5d475a1522350d9dadb5fe3597683fa7f4851b83","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.ccce99cd6.0_1621472143740_0.20959514029693116","host":"s3://npm-registry-packages"}},"12.0.0-canary.14767a8db.0":{"name":"@material/density","version":"12.0.0-canary.14767a8db.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.14767a8db.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a9fed54d64bedc6fb139a5a841a927cb55b5df44","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.14767a8db.0.tgz","fileCount":10,"integrity":"sha512-mtGdme9ZsT6A4rFgKv6pSzZcxDF5CFxj9pS3vYkb7JShvt4CDcPeHo+6OBkugMaxgvSp3neUQSeD0Il/C43Krw==","signatures":[{"sig":"MEYCIQD3jSmCXpdT1rbBVSADmIaBJ0L8Z9zdh1XnsCHJU+P87AIhAOgzt3Po7FhjgPSuukVee2mcASCbAsZ/q8DhKCZ65tlE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpstvCRA9TVsSAnZWagAAYTwP/if9vROZaRzDjw21OUkT\narmAsDcjPeiKF+e7ZXiOJF9P65mJbryxiRlJk5xHUvmMhvE9C1ow9XYuP1GE\nTApg4ZKm/AJHk2K13xZr7EoqVZ8nst+pB8M1Q1FNF3Sui5WDyniPNy+v99zJ\n2a8UL3N/UWpYSxaGrdi2N9PEDVHu9YgDGTcdnnY7T/gaNFDXznQ70bUvsmAK\nYnBFOpKQ7fgaX9+liVKg+2Y+KqWZuLcX0bklyB3wmTiuL6qQWTiQjDP+Qt0B\nnycAs2nEx+utbUMA3DpjRyJsJoMxtnpt/iPU7pApecnY665QcwEk730qkGJ+\ngInPIoSp1HDQ9oTdrnJVqJqpM6CBR3v0HgJZSUQJKrCBmpGtivcRG2XYZpcl\nYlQVxgUwa3WrRAOQ0lfJAgWsP5Bs0Im1YedTvk4jpBDsBEBM7AFtIB6VYgks\nzmIKvVqpjgXXsvvCtv3avde9hv3M4agZDJfo/Ae6WMgSlv7jNgRTwqgtEe0o\nGmuxnqkx0lTjjr8xgY7CIf1syc1LFk4gi8RHUKBpvEdsj2PCAG4jBMePA3jH\n8FrdlGZu0QeQV6tunvfHHTRgVB1R5G80S55Hj9PtJNYE8796vsdU3UKmLBxe\njipyGWga9U6/I/7fcFkD4LNYf08L/3UUGUZ3MMnVgkdR/2+2YqPH9Hr6oy+r\nW5LH\r\n=nNp2\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"a324b91ce28769039998a00879c6f441cb1159b6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.14767a8db.0_1621543791464_0.8056940632565044","host":"s3://npm-registry-packages"}},"12.0.0-canary.22c6dcff9.0":{"name":"@material/density","version":"12.0.0-canary.22c6dcff9.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.22c6dcff9.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cea5ea21caf4383ed1c3dd646c8f586fc2e47d51","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.22c6dcff9.0.tgz","fileCount":10,"integrity":"sha512-0QWGJRHR68PoY5yVIDjzOoXT6hdbBg5YE1UmHvfH/Yn304G2NPVoIVJzu1Hb0sV4OTJgXNEHvbTCgQU/1BSTpw==","signatures":[{"sig":"MEUCIQDp9+5+Scv+Zeqw8c1EovSzHowDxH7OmGyTPrRMGNKa8AIgc7qfxqdd4vJ3Het8Cd24VTTMFYvzOwA67rdij/smAsg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgq8OLCRA9TVsSAnZWagAAG5cP/0b29R5ujjhfXMm6eIEF\ntwDK6G5ArhsvWogQ1AKDx2zHUQh8Iy2aRQj80ixnztP1xqWOCXufopwUf5JJ\nZu91L2dzNZzrEvUNd2GnzB6Dbvxp+bssxNszH0C1FSDnvCKan8M21DxtuzC7\nA4Ep7E0WST3cbKIUeW6BysfIW8AWdOaz4xKcrxVCIBuTujYtRtDnVAza6tE6\npGnK4tuUuEpcPVP+whj55udpYrhDHrAW4d5LZSdWtI9T8NkJRneVRUtOGEkV\n5H4X7v6R8sZ1tvvbocqKel+rpZ6Jw8AcUb4sKeAyGP7zId2OYktGmlh3KjrX\novZiFypzAgWLzfkc8vdqMNfaZP54tXKAL3l+q4qjXzMVxeGmX+xQqLYHTSr4\nAbDuUQQnQpCxs5+6pRKtYrzee0iuY3Xak6s4y06/VffzKMj9UgXh6M9tf6/3\nL0GwOHpzMBsgjTv8iyWp9W3e+UNlT9OWbQFscNUgpMAlos6qNJ7bnPuBCuLh\nL80F/Cd3xCCvU5vBADYh5x7YvBGRe6+CPyybyApSzz2aJvNkPA2TNvLdSClE\nnr8pQlC6s/xjRAbHQoVCNH6A0dv2QhNztQoYtfN7ckpn8f81LcM1nG83KJdZ\nkyfdvr1MoR1W/ub7GL9/+bM1vW3+JsiZ0iS3FpBw2K8YnMd08SVDSPCFUIhF\nnVd4\r\n=fAu/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"74541e300384d800b9cdf492ff70ba20ffc583dc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.22c6dcff9.0_1621869450962_0.8918472946592011","host":"s3://npm-registry-packages"}},"12.0.0-canary.fadab3372.0":{"name":"@material/density","version":"12.0.0-canary.fadab3372.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.fadab3372.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4891e867c607b43c950d5c95d9ed509c970b68d6","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.fadab3372.0.tgz","fileCount":10,"integrity":"sha512-p6I9noIrmhuP45bniDnjTtq+lTIT4qAqfz9lAqnn8pbqTYvwlpLjjJwzm4Tmq0hZUpXVkOCXjgauLBYHy2Ll1w==","signatures":[{"sig":"MEQCIF3GS+qWpoB0LSIqqJEoealpY1rQBLacdicjOsF2zPQIAiB4DmtqvL/IouXNZNx+m1Ec2w2yTCJLVs4NXMcgVSV17g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgq86VCRA9TVsSAnZWagAAV4EP/jxLwdHZMcV1abGaH4bk\nU+U0B+89E8b6zlggGMtOvucC16Kb95FX8FwpGE+diAPDn00wOUNYvdI+jelo\n59A5IPjT1mpkzlW2NWwl0MqRLumgKKF3Wr9J3oXH/coZTuFQ72oaDn4BdQ54\nZNIUk9UgLo1mSPLL6nSyQPGJEFwTVeiHt9f9oJ6F82itJ1NUcmzO/Uwc/Ihh\nawsExxzRSvginJbdYNWKdZIiHYAHLM+R122kY5QDD0JaQlpZG+ipLWzLhn9b\n2/4La8uauspPcYDpzuPf6JRhq0PonJ3T7aMDaeZeFezTzhpmfaFWM/JYTMsa\nXnLAXlGKYBP+nmbQXaBm5x+ts1HHiZYV0z0naQ/H2jVwazwSV9+LkCDKveJf\n7P5kdcFAP2vIJ17mbshBzX9R0ec4S0iO6QgvHS1YX0gfy/P0grxlCZoJ1CjW\nZ23Oxf7HWuxOlgvFBEFul9SjEbAv/7pJokbL2GROHVUp4gwRV8LDpUZ6rSkq\nt3Piay9OAA/Y5SVPHtw2+5iL8Wvnr5fcOVgjH4fVvVVVFNShxC9auFKKQ1V+\nKwgyoMVtpsgvjqiWgRaM8+iGXA1gt5y3zDmKnC7lUjfocHlI8VjLUjQ4tXJC\nbo7TNaL9Skj7JJkWDDmk2kLW6pwmDyMC58DwC0CwkwKpqvWHJDit0Qk5xaIA\nUp+0\r\n=2lQM\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"d76e611194693a7270b5e10fd87906ada48c7af7","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.fadab3372.0_1621872276502_0.38799554069823294","host":"s3://npm-registry-packages"}},"12.0.0-canary.caa73aeee.0":{"name":"@material/density","version":"12.0.0-canary.caa73aeee.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.caa73aeee.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"343845992009679703b389e3ba9ab0eb42466a4d","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.caa73aeee.0.tgz","fileCount":10,"integrity":"sha512-BRTNrE4Qmgf/Bf9QYff1kuYPftP9IJufhppd26amvRDo0lVKf/R88i1lnYASl9hooM2dFhhJZBp5lsHsWLAEXw==","signatures":[{"sig":"MEUCIDuenOtTelVpw0WRnlA24QlfR+oPm8GZhfDcjCKsqCNYAiEA7jFQAOf9qetbWe8kFEb/PbFmdrJ4FIHpMXMFFD9wy8I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrQX9CRA9TVsSAnZWagAAuDUP/i8mDYDpIufUYe3j/AMU\n7LNLv5Pz6BcPYQvoQHYOKqSVuEhs8WPT0Zb+/F/dL2l1cgd3X/rEZvn/JQAZ\nxbtaqsJKOK0ZtvO6k9D3Zwcz6pTVyvCoB9FJRCMtclVW8uFsUtV8/7LOF+5y\nyaoUbkS57eS8swi8S61zJQNBtHBpLKMwKDz8GHG4TUnBtFbLPx7EzVU2qAMj\nFJcXtBA5M2EE5T6BdG29aQHRyANwe1BAhASLBjyzZL1MGn7+bn9przHoVC+6\nXaDS+hggJ3YyRXcdSIiWWRQSk3r3rFpTVHRg08uVY5xORE869rtK/F+lKlVv\nj6BwjL7JX72D9X+j6GyGfPZdsm8obNkN4zwtTOs+Q4p92ig7ArdHniojLJm0\njdsslddrvuI6+MKw0FVAWM0V6NhzCzQW9xh3bc12Wy55fdtEqyug9gIL1x8k\nzQfo/Qzef5mhSB0qf4FLN6UzkzLhxZXaZoiAgldNjVe1zaYNaW5reQ/qOisS\nqJzBr6kFlVTMhyOCrYc3GSikWcLdc1gC2d/ZdCjGRBIFtavXzmNyffjAwBgj\nCqzBmiRnRuRqtrQPbjdICSU0QWpvSjDA2D3t9N9g2cghSSfGU1rBZ7gIoexM\nxA0a+7KUUbvtxIBPyOOaR+iL30Wdhz7yzVUMz+900q8l/P0/Gnge2549gucp\n0B+X\r\n=+9zf\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"dca5692fda23e55426458f6b0c56c2b6dc9e2dd8","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.caa73aeee.0_1621951996776_0.2154687219553102","host":"s3://npm-registry-packages"}},"12.0.0-canary.ec31ae1ed.0":{"name":"@material/density","version":"12.0.0-canary.ec31ae1ed.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.ec31ae1ed.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"359347cb442c7af9dab5d07447ebed04c5242e57","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.ec31ae1ed.0.tgz","fileCount":10,"integrity":"sha512-DtMfmCXk7g7Sv416Bru7a9lyDjZ8GKkpM5BiBciYs4jpGCRKQGXiiOTpBoxqkQanQJ4mhGYaPaYqKVWfmvEv5w==","signatures":[{"sig":"MEQCIHB/H+AK3YIY8XIuW8x79N7Cni0VdFi6eE/ojjA4lO4mAiBKlZq0zblLoc9hWfUrsnXidKwFwaievdQQiPE4zZeaoA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrV9MCRA9TVsSAnZWagAA8fMQAIyA8EvyA8nDQhuSCZPe\nwDg0kk/9Dy2a5fK/GZxfbxACjmu2T4U0sqWxnAedi5X/zgs4gcZoGXpEESJk\nkyfVcARAxo/NcRKzDfrRTSSjtvKDPSZuejEYpLmibXqZhRmbTgYRE+AggSB8\ntDPZYgB68XN3gTa4LGK8s2UTLvMFt1Rx1h2c2EBeFwOKL99xQP2TGgiDfukW\nvF8Kc374YWDrWvYGmYrNPvexCqMxEQ2VAcrW3ArzcwBO90NH1QptM98Imjgf\nLHLrJWO8aJx/qVmHvj+6jNpnztdIY/4gfOvOmDJj8xD8ENUiNw6Xl+Oa0Kxe\nYGZ0/oOMqwIc5b/jg09yw651WZAbhTyDU5Binpe7MV7Xx0/7HODo4CIi0qpO\ne8vH+e52I+t6OqmTQUAd5gXlEFNg7ClU7YWj0WVxWT0qTpoqApwMlSBL/Ycn\n9m24Z47vKTWyLecgULRuKkpVV32iW1Dq+M0JROxtIaI9ptM19HUaPN5kQdew\na9WCDEn292Hg4ZmnUQWHT+pO52sN2DmqfDMHNNPoGHMOi/4dA3IW76O6/Djg\nMoQux8aQHTD5YTtiOtnEYNlPpytOlUF33nlGzWlHN/0VOrZ6yY6xeJR7KTz6\nIUP5u9ud6ahFA0UhHjyI0efJC9JI0X5mzcYmFPHjXz/KS1aVAc4fNSVJSjNI\nTcKF\r\n=uifu\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"f9db084a3aed73c844554c3b223d5185727b6d07","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.ec31ae1ed.0_1621974859921_0.1318413888796519","host":"s3://npm-registry-packages"}},"12.0.0-canary.8530d3514.0":{"name":"@material/density","version":"12.0.0-canary.8530d3514.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.8530d3514.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"04008728d29dec8b09fdeb9dcab701bfe0b922bc","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.8530d3514.0.tgz","fileCount":10,"integrity":"sha512-LQpzfyPq7CV1vJ9ScjnFmXU5iNV4dcrDnoidUZhosr9UJW4n6zaqKWbvVvlP7LN2Tz9TFlkywRyGdTSXm1/Vfw==","signatures":[{"sig":"MEQCIEjhLnrX1k/g0pFE4Z7yMAkVEsSXxaZ2jfVF7ZKfY7NCAiAfInaE6HC0Pajyt8+eiN3EmMwGEhxvsZxutiralIZBHA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgr8LgCRA9TVsSAnZWagAA6iYP/ivYMfkbQssadLBapTWl\nefvPKX8qxQdmtB9tUjahhsJedGlzZwn+5NWj6AojwmYVkIWwErnIYIP7GR1y\nyYPZ3/MQxiPRmFjUFudOZscCm7XQ9MRtZSBloAXkFa3vWbhNkI8LySY33LEf\nA+G05yzcnDSPlSiW5yiAkgHBpcY0S2OHcSslhtX4jrXJVOnWObx4fvtmYDAt\njXbroEYSTUw+FprKLHCjD1DAcl/LJsb9Fuw3n6lJ6n4eluuoHFNYqk9xiw0V\nd2rklf9K7YezCFavOF1K0SGPL71X4PGElvS9ULBMPpwbA0uWlRSreLQZaTQf\n0iGoBCqpkFPe+BW7bok6Wjp3+WRi7PBXYgpFFjCYdS5Zd+9a9jYAB4c4ym9u\nrgQ59qExtFOfPhm02dYF6r4VNJmCfr07C2vrj3lV7Ak7bUjBmrn7NwUIhx/B\nL7SgHeDK0QDFQmkVU4jMah8mWOhB1Mm+PPRAErLi5XvUdDMd6hH3lK0/AXE3\nb2jnt97oD+8ZuxsvOlRInLunkKjDW59Kbuv0RYtNOtdTlHQD/DKmy9rTxwtz\n3373hrVeZU+BNvQ+G0j7oQVfmisUlRKhNYW6eGDppJmsidBunaDlUuECLPqX\nobzYowqCxjga70oK0JeRcrBx5bdYxjsJRsa6ri+DJFe2VU0iUcjITEnODh1S\nLQWR\r\n=W07Z\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"e32508a69db8bd9ce4383a14f2c576d35950566c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.8530d3514.0_1622131423785_0.8266798710761729","host":"s3://npm-registry-packages"}},"12.0.0-canary.00b5899dc.0":{"name":"@material/density","version":"12.0.0-canary.00b5899dc.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.00b5899dc.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ff14765b0b9548d2c79516f91b6ad0ddf9ae5ce9","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.00b5899dc.0.tgz","fileCount":10,"integrity":"sha512-WIDuftOsZEg1IWLVq5deSpFORRBejdtMIqls6aVU3tSPbj+T1kXnB2HIGFQH5BIqjkC0aTfeLJk560fwmnlZ2g==","signatures":[{"sig":"MEYCIQDP1/Xgr2JPGRMY1Eao8jo+NG1YuQapG7tA//6MB/XRqgIhAOqEBPRu28N9amu8kMl0zZInX0WIXcVMO4MoMwBqyFW7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgtrhSCRA9TVsSAnZWagAANr0P/Riv0kbKzKhvrvjVI8AM\nCbwJ7QyqYzfk0iLHP/92Xr5kcamLxpxQ8xXBPi0YbuHYDpmn7mlreMmwN0/4\nY/r3AhlikMY1DXB9F3+WJFIEC2M3FRLqsOD+qxvAgHJz6m9wNRDrfbA/1FUd\nmVNW3XvcE/Vtx6fHFn5yy6LmM9SvZ2ZKxmQ5M/ZXQUgiRwbN0tByGUnmEdVS\nltmxzh1daVrW6mngGBGHvXbOBFR/00oMJeoC7bpjAneLOmoMogdwdgKZ8skH\nmUZqtRvoU2CAF3io5GlLbxr6qGzY5E4o8k3Fn7KNWEEWachIy+v2H/8sn3p1\njNTR4AVuWBF202zAHFTS9FHu23gCJsnSlXtlqQwDVVp4kC0XGhazO5Y5HeHJ\nnSCSnfMSz0jPVWNSnEj/2KHYFuoQC7KTcZWuZuzpASE95lvEPyAGSCpIzAFC\nKBnLUmZGt3r9osbz1NTlcf0tTiep2by7MTUzgx22Rst5bSywnxuW7MIpexl4\nGwdll7iQPN0JyVW+9r2FhHRNyuse2H2m0Xe5W3Hjr3WVpJMhzRY1psemBRxe\nkPJq6ytjDKPin5IzxMnhn8hL7nSJuq0kB4Ogpkc5tDl8ZbqKBYLR+JBQ3NV2\nvvydVnUovLyxxRKmgrZQE6CCngBRSAPiTBwwZPDX96quHwHAEJZFLNXJbNaI\n3uSO\r\n=oQTE\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"19ffd4cf15764c62ec7b1dfd76483a2919f6501d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.00b5899dc.0_1622587473554_0.22917618038308984","host":"s3://npm-registry-packages"}},"12.0.0-canary.f1525ea3e.0":{"name":"@material/density","version":"12.0.0-canary.f1525ea3e.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.f1525ea3e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2b950638a828a2738d9c1e708ba904f8947df671","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.f1525ea3e.0.tgz","fileCount":10,"integrity":"sha512-BI4Y9/GOWzsJ9260GCCIuGbx1iQFNKBurkcaVFps0qdfOjO/ZQhE9SxFmuemNxI89f+S3sndWz+4y09H4iPgnQ==","signatures":[{"sig":"MEYCIQCk9qYWJdhhH7LZHw/TI55lc9K5gcPxBYc77xA5UTHVOQIhANZREvd/NeVP4XNvIXcQdvpjGijtJfIIvx+iuDgBTqWI","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguN7KCRA9TVsSAnZWagAAvjcP/RZTifPI222ymSPJfVnG\nQ7wFoEJj/lpDjIGgsWs/kxLhPJVeRZRCqpNcH07vvzSa/9fXjBsXf1r5gGXF\nY6XNngS/gLrXwH7p7/YGyV7CrrNG8VKhmZb186Ftv2xygzQiw9sUlJAVAj8H\nFqXjjp5j5XpwJmn7W7S9/dmw/0T8Mm7Y2n89K6PHOovC8qoLRZzZ1B0051rF\nDkcomo7oM7WveAjRYDAE7RISlMR3Fx378fjgZecDp3zz7a3ibiLMqUFT4ZmR\nX55M+Ve6TpbVo78piCV/m0Lsm7kB/WR3OOF45tDyKQ25QlTIcCvWIGXgUiNg\nQCNkiINsf6XcDzJeLh0rtv7u+k+D5/oBFuV/cjZGsJ6YfRntmmUWIk2Yn+YG\nJYdmIicJ0yuSKAiFAABx6L9qX4x9jrG2mrrhhI+6ldgP+GECvUHb9FMgaQnt\n+9RATOfOOPrhBttxu2xGsIi+6HdztJ2Kq9iSCfvKKFSn35lKbL/tKZk9V9Zl\n+TDPpUomgkKQy0cOMRh50qDcVYRCSaOgywCTYacUozcDXsLEB4H8qa0d8xbH\nPCBN9l7Cd4VPaiKuxXujtbB5bz4FwLI1wSEEj/IlctXQZex48Wf6k4lu1y5f\noh4x9bFEBgJEwFwbTGOntFR47Cd/5ihiyTQlark/fk4AZZXLpsTRW+bmMW7n\nLzed\r\n=H6Ku\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"97ff3c2e33330849b0ca447ac6983126a385d845","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.f1525ea3e.0_1622728394756_0.6879121840283535","host":"s3://npm-registry-packages"}},"12.0.0-canary.464a00286.0":{"name":"@material/density","version":"12.0.0-canary.464a00286.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.464a00286.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e6e618316711de04921a1c27fa75d104dc7d5513","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.464a00286.0.tgz","fileCount":10,"integrity":"sha512-x/OwGlObYjXarLDHcaQr6OqQEFM/XzXNjyUsxloKZZ8s7GzBhGqn0Ze0wkZCYggc+/PHstdQbyqZcNc/NiFDkg==","signatures":[{"sig":"MEUCIEZ4m4oOiHFQ+TswD4k98e6GEierZyg/oii0gfzZtiGWAiEA9rvrEObZOaDbLIurh+uhtXP7RAiYOxOQ/aJCpj4AVxM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguOrWCRA9TVsSAnZWagAA3GAP/2h4KGYbbVXGUQWEvy2a\nbw7fwNiGpALOhEg0H/feVARFaRkU/OtSeDt7EElUIjuIvFZA0hxzJqs+GPjl\nrsuIROtb2acG+u3id2nsKVeVafFbgSClj1Ip3MoPlmLW0xDC3e3ZmUFF4Le9\nO9L0ZpghdqbDz26PrFaUX8SKh7TKKlyQeTNAHYpiM8eMbG0x/jcsBCd1Viq7\n4xfJMCp2k5K7krgPGFtnUe1cVW4WInw9sgp0zarGudW0u11/ngSjVPuDLkul\nSo+F0NnVjdHtzHFMd9/fFltub02sJ+ptqWxNSW9Lmj7hct+Gf7Rje8NKVwXx\n1+hWhmcHvEemKete5x1rbnSY0z6Uqvpbpvx05WI92DPjHi52dUDeEo/3EPOJ\ntMFcSM3XcJRu7VPKYk+WDo0tD+YLpC8YBgB/74dj2Iyl9bt3IW22ipsRk5hh\n7RVB/DqOqP/UU2/8hfl8qXFeijIGBZXRc4t12KTm2VaLeslHsEglf8w8eoUP\nGNh8crWWaXouChnhte8qXF3I0yD/iw0r2akunAQj1xGm3XDpcxLCH5qSWZGr\nx+V3RXf982CTU3grURFR7jBiIWpk9rlXyJuw+UcjjIn1p9suRH+sr4j+SqpG\nG1va+rdHkDQo+toJ72BYcrf0WaC9Qvx9G0UcLu+T4Qu+mHuAuo6eYvrW1bxe\n8KWG\r\n=iz2E\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"ceb43f7f74f7db77edbe7a13d3b92e853d599d6b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.464a00286.0_1622731478764_0.26723461784374103","host":"s3://npm-registry-packages"}},"12.0.0-canary.474de7878.0":{"name":"@material/density","version":"12.0.0-canary.474de7878.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.474de7878.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"63f7f176ffa91ff5bcfb4694015ca7325765239e","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.474de7878.0.tgz","fileCount":10,"integrity":"sha512-mMTARrPdxZUcrpgrorwdEvPId0HwG8xKFjp5UQTpoEILrX5t1S7ksF02DI1aGuJY6BM79Kanh5FaUwoVfhAycQ==","signatures":[{"sig":"MEQCIGMS+N9kGoH1nyvoWdtdUfikAyu+8ZPU8toZOGy1kjEAAiBeFSMcM10lB8ym0omvBTCwS/oikqQhTofLtYjeeQT81Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguPGHCRA9TVsSAnZWagAAbIsQAJq3GyfozUTYd8WEkk5k\nEr11zNI1tHW0H376Nont3ITFOxBpmbzkXLkK8yV0dnc/KKRcVqpPSzZBodWZ\nDo3Ym3h6xIy4IoYI599ck2EKL9u/WG6Wd9F5O72/AqsHN0n29BDvspqcxkIV\ndouvZ67uT0r5lqog9C0Yu9QUNURcGf9AiYEjRtDCq2TMqOquzZSJ2vHX1oty\nXdn312M7EKIsNMtK0eaKvudQxSwur5CDHFvp8BndT70j4cr5EwrpfsWnqu9p\nQmOe4xzpJNJStbjgy/nnTpN2MeVRO1zKT+ncYyNj+W7+k8G6DUP7UdZPFC9V\nAcDptV20DVyBpGKEc3rh0wPCUv7By7eC9NrvaQb/JuaYGAXtYUX17QPMB5yz\nzq/+CLz1hPlVjxjfse+SursZUQSadUdvREhAKMVMQbuu2yNqSh7bH3eRHdGe\ntqaAM89rQGp2K0NklDWicRSpXK2FPdbIXzTfIC+oh/NlGfcLumFEfDz++rFz\ngBu8dXPtsZ23YLQg3qOU3N71woFMLrXptf38cWl/QVLmHGIllfKywBKxWi9Y\nFltCme40IlY+Rsn4zkoM1BCxhL0EOj8jtETsw5s4cSnMrv1kKjWN09M8suHX\n2r9pJQa3mkfFfDC3N7ygovxC+QZVordMUcbct1+p/FnMGAtHx8WUVlr3W8Ka\n/9si\r\n=wkbv\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"67d604ec9cbaa0dc385eb36be35e0adfe641b244","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.474de7878.0_1622733190961_0.6998123790612987","host":"s3://npm-registry-packages"}},"12.0.0-canary.b87ebf74d.0":{"name":"@material/density","version":"12.0.0-canary.b87ebf74d.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.b87ebf74d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d96f5cb1ae66eb60e31c727aed7098f3496ad64b","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.b87ebf74d.0.tgz","fileCount":10,"integrity":"sha512-xpz7qr7HyMm2BkSHppr72xU23+g6WNsCCc6F2sk+jMX7MWbt/rNnufWu6jaUkpnSrDYjwMAT2ZtCwFt0yVKBxw==","signatures":[{"sig":"MEYCIQCiWDu0xNbUnOMdWhz1awfvEajyl4UM/IQBzcQFq5PF+gIhALjE32v0niu9h0+1wpHoFL4b5GIdG0XGpCTk0uJXsLgN","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguRUxCRA9TVsSAnZWagAAOuUP/3VcH80C+Tz2NZSGqA/X\njcxGsBSUaGpFPE1s8V4UILeyZidpr0R5IWjsBbmU4wA2wFqKL33DfXXcX/X/\nh9crgWLPhkPBJ+5S25JM6YhUBHSD6KKQrBO1LchKvmfFLi+umygES93Got1q\nSqAB48r+oC3hRwC3D5bfYe2VHXODb7siQNtDLBjXFTU92BgFv4YHz/rvr4AY\njWCqO2JDWjp/cdqAoA9Newy5Qv4E0KEO90BOoYNUWxahczAD84AA3daMqyVu\nErE7FNJm/7mduWGdn3OEJqSgMX0FDE9aiyfzkndXgqj1/qpcuAIZ/kcQ3ZEK\niXnrENLZa+yQjBu4MZ19zQ3/IHVksKPGx8PTjX4ing2k5C37ZZLJnZMLrqZu\nfaWx2R6CBFy+SdNxNA2KqMQoVl+nEvt4blz9Q9Wb78Yvd9c2+u7a3DzvtB7N\nIuDrjL+hGsZdyzw/wxKEuhldqsNQCGAN9+nagRQiC7NQ/muskjs/bZCB1X4R\nENjJRERfCdVTtd6bf+jGXCx+C70+zNjEHSpyU6gOaQsOO3/3WwhDD/AB/Dsr\n1l1szy+LqC5cM4OPit/5rbqqGJeMkzw99hr/Yu8XkJICrHAruCuV2l9ZmHv+\nV7o0jld7M/ILTq8i8XjASiOh/tE0U/EvShV8jQTks59URRTqO/8+U5Fyv+bH\nfqSH\r\n=G6eC\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"d3567c6dfa0fd347d2141fb92460c63fac28b46a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.b87ebf74d.0_1622742321187_0.9195149093079416","host":"s3://npm-registry-packages"}},"12.0.0-canary.2daa49b35.0":{"name":"@material/density","version":"12.0.0-canary.2daa49b35.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.2daa49b35.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e88fff6a4a84411f25bb582f554a8d89cdab6ac2","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.2daa49b35.0.tgz","fileCount":10,"integrity":"sha512-JppOv26u3UWoptsfEBh27f6mHJ+DCJzunRUH1X3jBoEsdvzCtxchcmVAd5K+Gc9YoUyVQYjpaxSm5q2cGDWRIg==","signatures":[{"sig":"MEQCIFv+r8P+dmjJUl7LK0Ysx8LEpAdl5A5sdqeqR99G3PbmAiBI5KzTlqXNG5gw2sBPumyYgD5hYyjjxPmvBWkuch/zCg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgulESCRA9TVsSAnZWagAAAegP/3h5cYtJZlBY6Z3h3SLM\nqxfjmtEjAw5isMFM8wlfJgne04d1mqK3RgF4iGpXrrtKylXuuq1DRUZc2926\n3UlhhuFbGMB01J4SArvHX6ktJh4EtKYCk5gWYJpJbF4HY1UJW+N+/2n+gxEQ\nkSHJh7EZs+YiGQDOBDfyO6t8ySFKGJ2H/toUP+j5uFAsTeeL/KV5OCbrjBRH\nY8RRRQLO8XSkP7FKHGkIqcqNeNFKjZJPRGqLnzxVhC4qYq+W9QWeIZWVypNg\npA3ictf1t2HTSkTjXR8h9Wj8ypxhjxCBxUfvQ+3LxleRakcaZiEoXTul5wcY\nwmaxXHKeiSuFsNfpfmg9EEHe0D4NMALsnTuqk+dFKnJuv5u5/REZ+MDXF+a6\nMBGYZI3uthdcThUPb3REgpo+C0i06QsYl6aOe2pqEA8ja5QzUsaJHwE4zM88\nBlAttRmYQknPOW01cb08v6juI8xWIrEJpQBWtryntgSenNwX1Nm6BgoyeHP3\n+tgeLrrwX+Nc6OpwLJUboiohrgYXTrQMO9MueuqkzNiYNF6kITB1hd6IXAeb\ncFpw+tdnJChgOzIAc5A5C0x5PTieS1VQLYqAHBnLdmCAhQ43lOaeqGYfkpN3\nbKPoued/o4IZx+LeUt0Cj5u1mDJbvc7oZJLDCrpg+1evDnWoBvNRQAxs1ySc\nNMLg\r\n=JDXU\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"3e759afe4116e5fb3941df918249b1b1348fe684","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.2daa49b35.0_1622823186044_0.17859136608798432","host":"s3://npm-registry-packages"}},"12.0.0-canary.08db3d737.0":{"name":"@material/density","version":"12.0.0-canary.08db3d737.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.08db3d737.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e1537d99e021f96e10aa7ac13dd9883d95e465d2","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.08db3d737.0.tgz","fileCount":10,"integrity":"sha512-mzLRmBt13EHLpWOaf/eEiNQdbA4bNs6hdzq2AD6saFdyGzQJoIZOogQFCZp7GLdijkPdc6BdEYHgIyJYe0CMfg==","signatures":[{"sig":"MEQCIEr58U0th/TYEAfQiYWgZH7GxiMulpHXJxuiYKkLyONVAiANotccXOXXsDBHCK9ahVLunNGUHpq/ki1VQZoa2L4xdg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguoG5CRA9TVsSAnZWagAA8y0P/Rmm1aKr7rD8wnr0dVDU\ntfTqPVyj/c09M9NVzxJy62zBPu3AFDC+Ey1kwKQr2W59DWy5KKIxTRE+/gYJ\nvphyZb+3u3VnrH5AJ057wvcyy0DbccfOo+e0OQsTyK96oeCB+7MJXng0YM8v\nP60IGZ+ROjpVjWRq1SFREIYukQc9mMy7n23z/JK2Vlt0ZrqfAnfXP/2qSx6D\nV9YPHUCUwnxvOXPai9hYNzL9DlLb46lP/kVaD+e/ClinnsavvIQyHKK5Bp4G\n+BIigsuZNd9RyicjIIceYWkHi245bi91gmdUhxJSWOKVCcoZlbS4xRoW869P\ngb+rz0SZz7zO5ObLLKp2RMfyd2aaWpws1Xm92RlrpOhZt2qVUGCHDoQyuXCd\nUcAXw2rH+fTis4kH7Fn8VNa5V79lam18ELd5uIgjJZz1moEYHGSKAowDlCNY\ncnZnblrZ4QtqjV08j+Mglu3bnZR+o7NVbgiQKSEoX/VhTEHHgQFNH9eFJvP5\nDCr2ToPCUF/COAM/ZkRXH26hFne2T2IIEeRYjJxtGpclooWmaZgPoWsISWgM\n2xvo5GpA/mN3qz8SedHG7ajgAPFK1ZtSnn8yoYHH9F/xuBBgPLvs495Vf41F\nZaQOE0yF6co/DsBlE5rrA3gDIqdMg5S+04Z6SLNKrlG+CAtdUj0TPW4zlu4m\n2hy1\r\n=UBa/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"0175b9a3635a8e6c8c6690948618b55f39ca1ffb","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.08db3d737.0_1622835641041_0.1170441589993092","host":"s3://npm-registry-packages"}},"12.0.0-canary.5823407a7.0":{"name":"@material/density","version":"12.0.0-canary.5823407a7.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.5823407a7.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4825ed83a53370867f504fc1f2a968835f69f501","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.5823407a7.0.tgz","fileCount":10,"integrity":"sha512-v89OfV7IYefEz+JslolEqJb2Hbyp22l8W+e+E9nNp2iHMe5GMIY2JQNl5kWpIdL3tgFimk5fyER7A1mHEsJR6A==","signatures":[{"sig":"MEUCICGSoCr92JDayL8wYvDh5MbSW7EFPjVbsGFog84J3GyRAiEAh3VaZswTPTDOBr94LcO/liGQiewkQAej3Ctp6odhF+w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgvr4KCRA9TVsSAnZWagAAs2gP/RC5nejZ0k6T8qxqYgen\nlaW//Y6H8miSwRhX4QhaGbfRyKv/z5bPFWUWp2X9hJtKXpNffbzh6t8cm96o\n6EEy+3YepJaUzsO2CXbifgp08iVqBfdcQNb9lN6fIYW2bn2NtodJkUt8W4mS\nfCxeZMN38aSXlWuBzSSaWvMGJvpjXhDuzDOxoFtB6yt39QfDKakR3Xjzw/s0\nPkV2JZOWQDGz3zSw8nmr5l0/3B7UXZbypSNWPh1LgzbyepoTHYFg+Vi4EjDU\n5gqXooyeHoZna+5jDymh1G0cSsXcTYBTSPDZZ5GcW4sN2KraraaZuRmGWh5S\n/szaFws9Qx4So6fOwP8FFCavNLV7w8cfHSXuig5Gwrc8pgV3oh6l7GvEPKun\nSotT1Dk7DNkq+MS+pBo0clFFSnksXlgl+lxtMa4AeOw71JIjHULPI/n0RGR4\nft/pkidenqfflj4g0fvn2PS0Kpy8oXGI6Zn8FGoBT14RZda3ONgEfBavGWiM\noiihfYVJeqkw/V0S3GcerC42fcInhJ40r9jdWeis4ugo9F/iHwq7n44Ffzp0\nachpJ2faQmc1iVatBXe/Trfi10zoZINf2NZfkXEs/mAvlZtsuiIfJeVJVHmI\nO7Tl6jcBAoKy8OP2UV4uRDIlFgk1rhq2IFWgTqCvKiIetpxnCRTuH1i0v4Kc\nBnGX\r\n=7/Ax\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"dd3ce4590e0d881d04e885d116e10e680b6c01f9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.5823407a7.0_1623113226326_0.11068051822443548","host":"s3://npm-registry-packages"}},"12.0.0-canary.23b0c5e22.0":{"name":"@material/density","version":"12.0.0-canary.23b0c5e22.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.23b0c5e22.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c70bbc97802494b273d2097dca2fee6453492214","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.23b0c5e22.0.tgz","fileCount":10,"integrity":"sha512-mUPIiom2dBOX4sbWYkIbZC9O+hz2TW7VTIT+LbfUG82z/Zwup6Lo51ytAB6fXX76Lt+Ulp5guoYwLys/zYn9nw==","signatures":[{"sig":"MEQCICrTii7CDwCzot8l62UEvkI1bg+0lPAkCu1vvdDZlLpQAiAKXy0VigPhtomBHRrzKKXaRWHA1awG3GfJ65+KjuhXKw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgv5j1CRA9TVsSAnZWagAAYIUP/3PTTZwJV+KTeF42Rkg1\n765TY74j9R84+kddYuQ8lB+v5saZtqMPoapuNhVoWbKs4AslWVdXdhczUeFD\nZjVUe4R1F6yIpHG+7nw+mxz/2o0dBL8M/nYdV8LjXrrRnbBYV1nN4gEdl+67\n8kCC3TDNzkMaOmmEov47Ivomffax1wTQQX3ha8tTiyk9SC5+UaVjFZwYDgeu\nQ8ihdPx31ut7/4PmPR5jUto83J8Zucn8DAIu5BjC3vD3geuef/mJ4kFxFbBL\nLWmRrYA5T2qPzV7KO7Td54vqD+vhV4vns4xGd4hu/DXsZY/FVEtzW59mReGm\nPpV7kUkky4dahLYeV+YfHexeOcejz11snZYl/G2mentxAnhrMn+8CPz0LIq4\ndUCEht0r/b1I9CMc0sJLXfKSS8jz1634UTcPjzsncQhPsH8QeT+XBHKmR87I\nCi/BAqTvYlvMX4V6GJGuFKA+o4bKPRtx6QNxoUPhAxQLgDnr2H0ARKX+xojo\nCpnm+uf5+AdvzHVtNljF9xkTPZjm8HnMaVd9zB9xkDWrQSlGT3GedtwUiduW\nRN6opnoORi9xblzMbcHuT6qI/BIl1ismGEZ4GXrV6A0ODVWhvOuNT2Xvy5Ch\nDiac52zAJvZjmfxFQ849ZPI6wHTLhbN+6ZmacadQwojb+dZEacJBsj5lkp66\nMi+S\r\n=06z+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"fc55a497a3b0d48a691942de987d781555ef9d82","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.23b0c5e22.0_1623169269049_0.11775026398201471","host":"s3://npm-registry-packages"}},"12.0.0-canary.2952c6a76.0":{"name":"@material/density","version":"12.0.0-canary.2952c6a76.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.2952c6a76.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fb5fad018da06cda0c0470f18420c1a87f72bd5a","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.2952c6a76.0.tgz","fileCount":10,"integrity":"sha512-vcMNr1mWsb6M1z7BQan6gA5EYhSSt2/m9nnwf/OPoA3OYfas2IaHV4rV5OqTmrPaebcodCtT2jY4P+/RjHd5XQ==","signatures":[{"sig":"MEUCIQDkBvLR7quPkyAJnWDtHuEGxUspvCP62/EwMSxGGnP8YwIgdxt1kxCzIfqgD5QduZOJRlJ3oFieHCQegK90oXPxJcM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgv6tdCRA9TVsSAnZWagAAF5cQAIaZ2/f4QvqjQj5u1+Qx\nMABSjVsxgxWf1iJ11H0BxPRW5aGbjzFxiYvn3VDXL6HjrhAse1Ascb5DqOkY\nhFfwGyOB8YMAp9VBACFyEBLBZbwHojRLwYoXBWSgjc+TTAMpf7N1Pahy6YQs\nZVi3eyhlIGEkkgbi0qvh6DchRm5Tz53TD2FHjyAB1303RhuNQ1JKwSXYIgQy\n/SDIT80zulq8C4Pi3riIMt0qVkoUx9SCKhxTYx0a8ZlM1B+CrsOU65DH+WTU\nNn8jM5UTV6eZVsrfIDAn3LFiSy5Zes2vas18tq6p3948jyXSGqopuFtiTwY8\n+kPbIe0luHdP/I6G6deY2zIZwKT4+ZR+FFok7UhnCWBz8oB46tnki42LERb1\n7SuQa9whmzypzNgi4ohLEUfBDkx0aTqlfX11ei2BuA+NsCrzEAOcBe/YREtC\nAtEKAyun24PXTicj5NsQkNC7aVjJtLlbLJVvrEXY8lpY6OmBXW4H7a3TjazE\n4ps8FB94fVQ8vtrKV7B/4DhQihLdXekP7zAdIvpJpNt1Ns48ljw8qWTWnbQ+\n47rkyo2sIlcblc1KFvfEm3I6wdvO2JA1bVi5ggRLNZ4xaLcSo6GYlIy9znkr\nTLwz4T+NqzjboUrGcItolAIeLfkrym2f1zLIX7oL+BOKiyyrFt0+eCVvjG9M\nhImW\r\n=Qpy7\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"c1b0afec5d55ef54d74fa1cea1899368fe5c7180","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.2952c6a76.0_1623173981830_0.45632706928885236","host":"s3://npm-registry-packages"}},"12.0.0-canary.f12425f88.0":{"name":"@material/density","version":"12.0.0-canary.f12425f88.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.f12425f88.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1230f450918d90a81c3095c1ca80c8c8a46e9398","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.f12425f88.0.tgz","fileCount":10,"integrity":"sha512-QoI9CLjMGWz764kGx5lPn95WyXqGR3vz1vKeYceKDdzSY5pFxpdwHmTVbnj9TPDzK50I0np2FprC2H6b+0C92Q==","signatures":[{"sig":"MEQCICVUjvf+Mloa0ApnDs0mIi84hVg5wnaHiEEjF1wZUNheAiBaE960MlHAXeVpES2dfNBlKKb0g5ckVsfRcGVlbM5owg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwWUtCRA9TVsSAnZWagAAxf8P/RXN1ksr1b7qNrcOj5vf\nw00v14Qprtn37rUluZbht8mytalWymQM7hH4MgSnJ5OnpfjmMOsaGHBBj20P\nQMRvQUSn8O+63MaLt6NiXw19fuDRHwA9hmvELfe6TLuJ5jYMd/zxXv5QBrfV\npiR7glFsM4qFkmxOnayJYa03Ru8z9maB7mbrPa/dufeoMWDd6lWmkqA+ErYh\n1Vq7KTecGQ95C9wnoZKMZFrajS0bGYfzhMp5KnFVumfMEI60DiwAUPwxYvRI\n675LY/O/LzlcShjpfuZsOZyuz6dFhZZpiOFRQ6klfH0rxEBSUsooklU4lSSz\nIOkWR7HLJR4uUnpfVcnIsdc6+tovj2cZhBcnuus/SLjEPE+7KD4p8nuCpgdM\nV3+azx2nlSlxWw90XoaLN9oHeooz8jFp5QCSPgWWIPLMwdQPYCXQSi5/udEF\nkIzBA7OOIAot8YB+5nRSv23TPF09LIuk0LaDjOsaCT0k300fo6xE/wSo+Q+Y\nKabJWp2tZWgcU5oaYXjcds3GHl9ftMd7g/qXpf1mf9kRrfcbMpg4wiY/xUkc\nAxNAHckt1Cynza/q9MACrr0boVTixiuAw7fmiUMFqqEtF7aPIZVE9mF3wivT\nqs0qvA03NGjUj6oLMPeBXhLPTuLPV6AuKpkOWuWmHjquns9k+sC/2vgXIv7c\nMyOs\r\n=F3H+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"c8fa3a7d372e06e42b474eed4ef3e4105dc43301","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.f12425f88.0_1623287085532_0.5084188710648461","host":"s3://npm-registry-packages"}},"12.0.0-canary.e543628c3.0":{"name":"@material/density","version":"12.0.0-canary.e543628c3.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.e543628c3.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ae8a3caaf54877d8f9a03f0c0aba535ebe160704","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.e543628c3.0.tgz","fileCount":10,"integrity":"sha512-UE63NpHHqAgt1STTv1cv9neV7h8D/P6LVt+AkZM8CfWNObijSv5ZkqPUtdJ59WzkrlDiNYQdcfuktCuXgcUr4w==","signatures":[{"sig":"MEUCIQCu46V22E1i2rlGHlGsBNhjoEsXpNAFTpF8Z/1n7pwL0AIgBaIlYf6MDBGWxDZ+tUIClZX6c68c6CF6B30bNhK7zA4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwWVsCRA9TVsSAnZWagAA+z4P/2hQNHiuNGm33Yi1efV2\nEiEjc4FdZJI5LTFnwmcxlViDL3nrVIv4QiBVM3yWiGWWG1gWqem0mqAxKVPw\niSzCLJekC/uNDwQnK0koNgSpsKJln/mHfUx3ILKiC9tcdEotWEBX6wFttgMC\nlnQ0W/Y5DCN0wFvR9TwX6kM0gtjmoFrNdGpL297/s4bGzlK8GRUBt6tr4UF8\nqPrWU5WAZvuE7SyPjp3CV53dfTcCoUoJwXsoOxoPRAcnEcWByg7iLojAwIpG\nLuHuS7LRXY+4kDEn1hN6IBpobH9tisEURprDQ0Ao+0BFNr/7K+YA0SuiKMuE\nWYMC2p1wNuZiNdAazk9cW8smQFJeLj2IuM7BtlExP3omAkDnn9PN2o29unFJ\nEpotAVNyobIJdiHJTMxWHbcVwtOBrMQab5PRejOuiZ+mfqBR4BzSyQgrBgw/\nH8bXZolevHkTSflBpx5iFaDmXi4Rd2NLIzfsVMr+94t4movzEeGmO+k44k1r\nF2ENKKm3/yrCDjw5brunIwGGDuRqCFBsQ8CXlzkmdDPUP2HVQYfjtStOebEI\nUmowIztamuCQiTzjydBewLYoj6Tiuvjuyrhrat4kh/eNkpPQNzGlTX0Txym6\nmQkQiB5gZ6jvKJUXeiJWLSSJM6Qgo9DESQH45grhKD47cBOP6Ir8dgeYkD2e\neTF2\r\n=+zZB\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"6e28195a46e3b2108c76ee1a6a9ea9416276ce52","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.e543628c3.0_1623287148397_0.12228366172598237","host":"s3://npm-registry-packages"}},"12.0.0-canary.e0c346286.0":{"name":"@material/density","version":"12.0.0-canary.e0c346286.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.e0c346286.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d597b8ae2f64adf7ff053eac07b12a101cd3432e","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.e0c346286.0.tgz","fileCount":10,"integrity":"sha512-pJ/PJkmGs/tZHcs8GbLRumb3N8u4rAz/OirVm96gOmlNv3E4DrYk2ohVTN5hcsJHhZJy0h2GUyhA53SHI3RXBg==","signatures":[{"sig":"MEUCIGeuIneQc9NruynLixQn34XdVOdr2QXuM4fNcDyuVkREAiEAych+Uyiim5MP2oTmqKSNR2sCBz+j+jPRC3nF4BYaQr8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwj8mCRA9TVsSAnZWagAAHmwP/1hq+xY8ijk8ddH2ES6V\n/8JpXaDumzMRPFr2VlQc18cKpCzuYbi8Tki4e+YhVa+wyJiwNqOQMTqqgYBv\nyKW/Ah9MpV6kfr0xpBP3Sx4lDbvg0D2ud/JFOW2zv1ARIuq2DVQ2vYLngHje\nUTPg89wUEdbcBKcI9aIw/lLxJpjj6nfbJk6OxOHBqiS+UNuZjLJMsaYD7efE\nREE1YIcO+e9+bFIQeckqKsrQxMEzcL9OP0+51qRyRhpu20/I7ShUfJhrCq8v\nfBKtYsovI40GhgsI/BwcFMjWLv7MizukeA2pIlYPaxpqZ+l+28dIoBp9+eCa\nD5YiKU7TOge/V5VgozUxyupI511J3/OLBWS5pqS0ffzBt+WWIrfV48CFGYu4\n7BOk/4LQS9OGkaYXdQwymFw1bz1lXtpm36ok1/kld+9O2dztZYroCNo5bX8f\n4VrPRSUz1Kz+/QNfpCxnhsB5OGC9OjluQmbKMiA55R3lg4aA8ZGJMeWo6Mfp\nY4ypd9qRwvGT09aIoS9es993BukMvrn5EgjYNoqX/8qb3DCBSlLBwmccyIGr\nxeR0jY5WZJDF6WhS4+Q08Bu2KjWzuPTgzRQGexqcKIMN9qoeJzSNHOFXkfqr\nZqiPRddafsffSJSBtcBDLTolzMvF8H3sAZGE3s4tnVaIZbz4skN7Amm34Ouu\n/RiP\r\n=U5ki\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"405607237a611d804caa0b022897b683aed90ccc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.e0c346286.0_1623342886284_0.9299922284967141","host":"s3://npm-registry-packages"}},"12.0.0-canary.f43af5633.0":{"name":"@material/density","version":"12.0.0-canary.f43af5633.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.f43af5633.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"48e1c096426ef47aefe8d124043e35db3cc2a8c1","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.f43af5633.0.tgz","fileCount":10,"integrity":"sha512-aXsAKFPpNBycrgu+R64mBViF+kL0asIVW9uP+6xQFbOvbSbBW0h4YVSShxFnpIdAwWD+XjgOsLQYGBL0XxVeuw==","signatures":[{"sig":"MEYCIQCFcuLjzDu/j3/ADRPHnN7qQeFOaxpwtkj7ukQVZjwVXAIhAIlOIhwpt/6aLM1KEJOf33/nUgRmZ/wR3LuUpNplTqcH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwndiCRA9TVsSAnZWagAASr0P/0JMEnBA9LDWozIDhV9Q\nuUlWDB2AlTdrnAQBdJCVcsh06sZeRsgBaYDU5Te/dR+RtTDQ7O1FxIv4HgnI\ninYWeBmvyGRLD1PldoC1PanM75fuqrTIyEvnUS/GBT7d63pg35EjnNe7q9FB\n/bl+sYgEuUO5TBogezBVTX1fwnhgzWpbi1l7bxbXvgeL56SftUTF3FGSnMST\nOYWtz6AxwbShEfuJKa5HoD4kSJELFoefEgd1/JEO3WiVrkstKJ8hqQeyK38g\n5fsZAgiDl5R5F+jFY8d+XPmw7bwGvyzfATa1zBjt39tLP78z4VE2n+Oic8sE\nBdp/BuBrVPIRcNef78YEvNH+jqaDoSaFmXtbMm44TIIPrCgow3chpNoMUTEr\n0Jh3uzH7KYv5wDh9jPndpd3jmzsHxCCj6azO+NUI3ec80Gj/KkqQoZRDmTH2\nJC39+tnh5K5RLixOEYw0OKA3gj4XFtx+7lJj96KRBo7Ga41OB/1VEsfDyVa/\nU9aPu8LWzRRcuwdeJUhxt+/WcSgASvOyl1bIHw431UPemS0QMv096pCho4i8\nYm3YlXjQPiro2mVvJZEe7Ky7Y63NizajNDV0oLeoQC0p++e6s1eMiJMhuCgs\nIrEG4CZaoZU+tlqozfS2Shj/uu/4YlLYpYuyyIYCGBMAJZ1UxXDL81IGisuh\nwy4l\r\n=Dhz3\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"6889f0098642c4b4f3987ba353e17a9a22de856b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.f43af5633.0_1623357282207_0.2521504759532449","host":"s3://npm-registry-packages"}},"12.0.0-canary.8415ae585.0":{"name":"@material/density","version":"12.0.0-canary.8415ae585.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.8415ae585.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"be094ff02bd68241a27609febab0c5b32a2e98d2","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.8415ae585.0.tgz","fileCount":10,"integrity":"sha512-AOfd5uwT48ETh9j7cj40OlGuDilUQUQiOesrZPRJ4onLH8AyWggGX0pLPjv0w7UIjA6SgXVyUAQBivXVIS2BLA==","signatures":[{"sig":"MEUCIAEpYOeOyiusHVVi0fI+PmIyWAF6UmohI5JCct3u/C+OAiEA5zwjD23maV0RPxmupen3sIKPX0iUYpu7PVUYWXkyf7I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgw4mYCRA9TVsSAnZWagAAXYAQAJGqhG9HGbiw1sT6ptES\nWDchhGB4+IbNFDH7CpJlvk4S0YMud7ZRN8oScTdXm7D+nrpTcvaAUnZr1Bk4\nYlcj1hUqd1gb0m92MqcrrpCs3yxIUO7MJ1mvIlUBq2pVgcQtOdL6Qhu8H/T5\nHQ9p64L1TQ1Gl1vB8hVKZE9O7sLl+v8EKdijjATFK5V6ApsUOF/K4RpJg1H1\nVyr4CO3Z75Gkamms9jY0DxI7fxWrapsQrHA59RT0fmB8TPYC6+60bOAKDSB6\nYXPnt4uj93uhfjPu0DmjA1uWN9Ywgil1U8yOPI2ZcMdxvXhtmy0F9NSW2Kwk\n2W7TVe79lZjTGBJGbwDvb2S/Wlevte+2uaUV59Cw7kfzqyC15CtMFEd+KV2N\nRUJMpOe68ILZc82LMix0zKzWZBsPGTEAGItmz6RuaYAKfJlUnfvACw/sP6bL\njx/+Qo/MzGkzd1ann54hrfm7Vc9uHjolVyDsN/IopOlCGkCJbQMUXwxxlEc5\nJJnczZlD2glCQ7meMrdLVAo2J9lfyjhfETYJO3PTqD3BIM+ik2HJk8lVhf4r\nM6ZLrbIoxsdB3y+ecF+EWFuu42E9JoHXnGz98gksi1RAKFNmHdtIaMdT0Bqv\ngcCLsUcNcS2ofiA0kLa938bIomSeckoHI3Zb0v7x9Skj60mIMUPxZV3f+DoT\ng0Yg\r\n=uVLr\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"d00f19e41330e3956e7355a23ea132e5ff37403e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.8415ae585.0_1623427480785_0.331130452113245","host":"s3://npm-registry-packages"}},"12.0.0-canary.598fcccc8.0":{"name":"@material/density","version":"12.0.0-canary.598fcccc8.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.598fcccc8.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c1e96061d97e4c8d3d5699453a0369926a7f2eaa","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.598fcccc8.0.tgz","fileCount":10,"integrity":"sha512-Pl8wDnifLKR9od59Ys+qEgt/1ZC9NK1oeH+bcKdp1Dd927kPqVkqE8PX/xAQ1ZITfDY/cnL2fzpSZ8FEroziSQ==","signatures":[{"sig":"MEQCIFWNcG9uVUDz4jdI5aKATuaiyaI8kFUZTEbq1UKhGtbUAiB+zax0oZdYfXDcR8JdmfK4qNqj2oWaDTK7vdHQdEEnag==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgw9l1CRA9TVsSAnZWagAA/EEQAKHTun359RwRtQH7UAJl\n/b4kY3vdu4jhmHPp2lTKhIldFYCVI2x8LXSVMowH7GYP33Zo3EsO0A01TNFY\napkE0xYRRD+YZ6Om+fxwFcdMX1ZBkZobksw4OOfmvViei43TC/DsB3N3Wvju\n9Gobi+YklM/LPnegyGIuelnYpiLgnHkNXz/NbA5cyzcGLHlRH4lC9ny3rNIw\nSVFtrN/1+00xwWPFSDGmgBS1iElYHJGjpBzBt+2JL0PqPsvNGWbHwvL3N5oA\n1v1qRj2M58SupVwJ5Y4A6Jf5IY05QllZgPGFgyHgjbXBz8QRtfQ7/GBLpa0/\nC8+eic1XISsoo456YmhD8YWdT4vDUTvGJxt7vT8xACQMKQ4XNZi1mEdrA29I\neqXn16e4S/zKgEU56rXCzFfY4m0HvOL9aLxvLAiDFua9dgSAoZ9nfarXGt6Y\njU9je50JzjU0rATZoYP6x+PIRt3FR+iQfZxuuOb5+Ghq95bP/HDd6oRjO8ZX\nyUdCl5rYBMW/7rSY/5hZellDvmHCJsgVL+gUzBm+LYgpFnaAlGBlDlVDjabG\nU/BNG9akqCojW8CJuxaDYBkP+QYxDN1dZ2PnfDRKTJ5M3siSk3695LlvpDgB\niADCghHnghg7PYvo5t/53hRxhNVmCpZ4te1JW2d2sEMOactOGtrKBX2ukbSD\nGmXN\r\n=vlFz\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"ccbc9ce9b0bfd89a7b5d57d3e0d6bc2ae297f66c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.598fcccc8.0_1623447925180_0.7605421401228851","host":"s3://npm-registry-packages"}},"12.0.0-canary.5d0605188.0":{"name":"@material/density","version":"12.0.0-canary.5d0605188.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.5d0605188.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dd66c99fbccad04e450f11e46483c6d188968bf0","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.5d0605188.0.tgz","fileCount":10,"integrity":"sha512-IT2H5CKVaPW9we2SKkDF+SgXeP5f1pi0J4sv9X827BKRqc5h/aD5ryVhDKoeS+G8wW0E2DQHz+svC3R2Titjmg==","signatures":[{"sig":"MEUCIDk3ycx79Hd+QjYlCfCaYfuMoRv3pZqYOJb1sT2WRBFWAiEA9l8MgRsDJyx9LTM151SB8e+MLJSeW9aQGrmZPZLVMrw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgx5P8CRA9TVsSAnZWagAAEEMP+wRgiiYHMreW9tJN1Nkv\nW68kQGDr9JKIgAWf4Brjbk+sARYGLoHimVRCAxGApUWbXFBmmaCouohNdOCM\nB3dhVWrIDc4XZbfSITy8SRKKwqe5nbIMkAEopgmCNka1PcuLGUa6bU/oX7lE\nMClJKMxRVYzGATgIlUS8jx8wxDzbRNGCXla0h7llkY/Qd/qYF/pKQsW+q5Q0\n0EgpKp/xfZRl4ur5Y/0nLvHqb+HveLCEq0j4/wKPkKCbhVso3vpctLqprqYv\n+/k0naA21JurpnYBisV2sQ20ZxcwT4ftr86rrujPJaREmBdX/oFU6n4KmB2N\n0A+pIMWXA+eacJNu/8NdgPwZZhN+3qG9XKFilqfH1QMnELXkHf8uP2LR5NgX\natFQgbDe3EU+qMlgj0CyUVvnfkP/bGURwR5EywKiZIvzObUU9qyHWX1dqaW+\n1wn9J4CUtbNx2F4CbbvF6eTa07Psw62PIjhss46rZj2w62SZawBNHzpeiEjI\n71vY1vz/jOLbAH7djJCTCepKrTB8dlxgE9RhUQ2SHs5DyHW2S1Z7xWgXkTZ2\n1tBNeSv80yH9ImZjfn/xUTPAY4Q+uNhH7gZLJOJaklbZ4q8iLCg/dk9A/4Fl\nDL+PnkfaS7QFIY1c3XBFqALM585WzkRYPghIcXUMawnJ4qQz1ggoEMCW38BN\nMWXL\r\n=T5ZJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"0ecd220c6043621c1d471242f32f317475b671f4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.5d0605188.0_1623692284678_0.7691768061512705","host":"s3://npm-registry-packages"}},"12.0.0-canary.f147a2271.0":{"name":"@material/density","version":"12.0.0-canary.f147a2271.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.f147a2271.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"241b6a8994edc17b7e559c1196582eea40f02882","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.f147a2271.0.tgz","fileCount":10,"integrity":"sha512-iYuAg7cOQKbb/QmX4RjTrJ8ca22YpNZPxFupxkaPVCgWoX9JRdFus9pZBJu6HvhQhIpSKGJovUAN8Em7KnU4lA==","signatures":[{"sig":"MEUCIQD+Y2qIEBVB+8G6Upbi9GEHVcDWVoAMdKCwCDK+tzpL2AIgdpGL52HIZ3vzOqrKNmPoBABP5gSV7egAbFc63EVZLT0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgx6stCRA9TVsSAnZWagAAZOcQAIFJKaPr3uuKYgNkDcCP\ndIEeca+wDldjhYeQgMppu+zxqbF8tnqcmfiycxVEXCzMWlOHc2ZqEqoxUvyD\n8534nPz/TPkX83Mne1i8fm9tI+ROelqLfKmeGTOdfgKdEcaB8wcqQpYJX7Fj\naDrSd3dKIG/QkTsS53r+tlUkNVmPjt5GgkmfYGtOiQGl1Gnc43dXvUCfTAQ4\niSSHNuoPj58iYLu+BYm7DcJ3XWp8d3diYBILogkbIJKrLTE3OmHaf3MJl9Tv\no37VdV6H7syx9aRovrzZgOwjtQGQOs2NxT7XGXVIvbf4iT+rJiF71B6aO+ou\nWCBzkSOmnLtZ1jtm4JkahlcH9hYyJvs1p9G+VGdUbCJrZSo6BznB9Z244bG4\nsVZl+QK8FuQXmGNVnrafLQLrF6xNwPGjaj/2Gb+ylFA53hNcF9qSIG8Ng+Hx\nwQyYzBeiuEUPIwOdhXiQ32pM/8UefK+XUuOM/NKe+qfzL7fyV/2EBWSbJl0k\nT550pJhd78ie5qGV0bvnUJV8mkpv7pmZGnSkx5owE+35PP4cGIUAaKO5NaSE\njXaB18dN3+FSxQbJA1s06WtXMG3qojy/yiXQLWFRCSZaPWQvRPH1mPwH3aZD\nhHG70QAxTYQxFLSpLzn+X5ccBUF2RCKga7okccnl8P/CxJtuHh6R1mwa98z8\nS2B3\r\n=VjJE\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"70b871f06c34302277b9eb3064110dd70afb181b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.f147a2271.0_1623698221267_0.7644605782120588","host":"s3://npm-registry-packages"}},"12.0.0-canary.33579e00b.0":{"name":"@material/density","version":"12.0.0-canary.33579e00b.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.33579e00b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b65f88aa084d4c0ffcdde4959e13895af4294d5c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.33579e00b.0.tgz","fileCount":10,"integrity":"sha512-loKOGXNZkGMeMGfmbfqwOIWwnLVMwlN3H/ef6vwKwThZMURbUI4rSc5puuW2e+7ra4GBt9K38vVRPByNHi4R5A==","signatures":[{"sig":"MEUCIFZkGRXKd/X2fc3TPS8jMgn7VeYx346nru9LBSN3Oy9vAiEAx9GTLx+bAlIeyEiKR0urJBGVU73QlSV+96W4E+eod3o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgx/JjCRA9TVsSAnZWagAAjI0P/R+sDQt4bhqwR29DEswC\ngmzRbqpFQhfbvpB5hsH54mleD20KbLXWimtW/LtNnyYJ4VXvUN+WXtryIC7r\npVfKcXMaI6SS+amcBtfnAUMxuB6ebquuRecVqHhkvTpXep1uUbLSl5qvGwUN\nXDf7ADPAXD+FvQ2kG3crRBqN0mLlFg5U2/tkI78TFzL/NNf+Im0mqDT6PyQe\nsBaU302ptiqJjQC6DlbZyAd4FKUylQjvPqJxSaJoaHWSBLLbXmDsYGVwI3I+\nKBO6Qj0QogjHnYlpCedVEFRkK4iulUPd1QPs1VeJ/zGLZJET74k275ExIXc5\nItTxSJBfdWfLL3LDLGVRucohKYERmsVWEFH8LHhM8s2cSWN30FYLlAYCPEeK\naOAUL5hAq16p0C867H0HDid6lA+0qng3w+KDVe8zY7tuHYGH3jRU/OPgk51b\n8SbJt8erVg+bbwlWvSFufRNt/27OhWcGA5rGSbUFYJzMFsmR2H1FGWGOu2cd\ng9sWLXT5duUw+PVjp/PWQBI8QOa2aEbQdLoEqPoP4++ZJsaPt6bW2W45w7Jd\nn8xnFOi5mXJky1jcB16qMvn9AnwwCgAriO5IPe6sM84eaXCy5sz+4pRSnEmi\nq7q4lgQw3mme6nZGNdPV6dtFRg6r1wz2apVcGWbknWaycL0B4qvfl2dl+2/u\norKG\r\n=YaKd\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"13a815cd8b945d23ba7ba2ebd6730088fa195237","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.33579e00b.0_1623716450901_0.5148838860543621","host":"s3://npm-registry-packages"}},"12.0.0-canary.a6909c0e6.0":{"name":"@material/density","version":"12.0.0-canary.a6909c0e6.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.a6909c0e6.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"89f1011889e7276d7f6fd52c046893f9fb553c3f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.a6909c0e6.0.tgz","fileCount":10,"integrity":"sha512-C8xiMIu5/JRRGVbZnPcMlr5d5qdfJSjmSDuv4T8d1kYUfcjFPHn32Zzsj9KQfHrRvbAJ55vG7HTYtD2InqLp7A==","signatures":[{"sig":"MEQCIBzBQ4Wt8TI7Lk9fauvJr0arXEw8QwR0MaY4Mhdyqa2KAiB5yH5V/G+1mN5XJEctcDOSlbk7yRK4JDfr+j/dRwyPXg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyPFyCRA9TVsSAnZWagAAkxkQAI1TPPewXNANobZeT+B5\nzeGD0XBE/11GtlT06+6CM9CtUo/yoS4IgMlESXLLO4zCT1OcNwUXthmACdnQ\nDQcYnCX9mi+u1g6em0SAFNgExj5zot3ovJbFnVzctgxTYjXOMsLvPLl38tUF\nUDvR1+wV533mX4xNeHhf0s7BaVknY3nUh+xEZ8iIWFw3zLfaRKvTcTE7Uv0y\nZyUOb3oW9HQtbhJQqnCJTRMF2yrF0pAznlDLjsvmsvundYkKMwopVRHSK0/N\nmPkSOIe0+yCR42uLMnICjYs4Ixunqp5BH8aqj9Nfhn+vXktHe12hrzGaS+Ol\nI+254Eif9lvGzaqJaBbnk0XBKp1DH9eBTMGgQdN2sLAcJDp/7hdGzgOMFlC2\nE6zbad04vpPbD3PvvnnQG9W2LUWL51JbldxBHMRuy2KziFftLmCgXzIwls9x\nXXpRyUQ3EZRDWe5Z2wnBER/+jyo8q+RjHTT3iKCpM2NOF7g3waEF8Zw3E1EQ\nV3B5Myws2/nE3IFH08FkBmmda9NoKBrj8PW4u12AaBr0qLZ1T3QezJ7eE4Rr\n3ZojOMy7AX91s+2ijXqtf5rIYbsDUZZ8SuZSaMY1K/0/orjDnm5A6FCXy/1m\nfAeUipKFuJGyQfj3qJgLAPXDHrLbsgu8vxiUsFnnZgX9rhJVDFV4lcE4nGsM\n0AqH\r\n=iCKW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"f4852598d008bc1750e5e9d2a0e828aa8804f87f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.a6909c0e6.0_1623781746547_0.03483497495822796","host":"s3://npm-registry-packages"}},"12.0.0-canary.c18b5925b.0":{"name":"@material/density","version":"12.0.0-canary.c18b5925b.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.c18b5925b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8c7a55d2839ae28d02eee5f2ad812c74d582ff17","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.c18b5925b.0.tgz","fileCount":10,"integrity":"sha512-MrJi+9oZOGEq9eU8T/NVKX56zOoCUrtlB/h5ujLLTrk3vcCncigTda+b0VD0mM89eHTOwgqAi8sYZTtGdLtKmQ==","signatures":[{"sig":"MEQCIHGOyZVRVSYlbZ+IFr6Em3YhaIsaJPH6Zy7P9dSyYn7DAiBDbdFUgMmuRLibgtGLVEaC86dc3SqmVEP3dh/Oho4WBg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyRVhCRA9TVsSAnZWagAAlCwP/jF2wiBBMPHqrj7YTABq\nHg1wbvz0hifkB1/Md15hpDzmIC74X7autObWaxOq6iZHuWnoZCwBjYTQaRzp\ng+lfNXy+hzyPYroq0BgEM7zapYb/OCVrK+4UxnTbmGLr+O9OJLBibUN0SedF\niLPwf76VrtIh8ISfgBqgPq+nWJWfsr8T/mveT+P9/xyY47/WL2YCvbAQsLJg\nh0t9oDbhWwGc8LVgEmgN52fiAOLoaLU+wkmmkpLJMfLor/eWS765Srh8NbiK\nejN8htN/tt7ZQ6hLf1whUhu4M8Js3WJiNnH6IH9iwTGalnd32Xi5kvrahWLF\nqhJ99NsUmEdnSY+xo9HYacHre94rxZOxKW65q0mVDsh5FdESyGhkJFrMzxVD\njJGvDgIV8Ns5aWhEj1soKaJyS5kY9XTsoZy5utYgEyi5iIuwNLx0Iwe789n+\nfBPfoE5cTDL2FMQ/LC5ZgqLEDi+xfUQJuyrx6ET2lWJSnGVMTdn14P2awbFO\nzU4c5ytJdrT1mX16sRUS9gvOTXl4dorJDpARonbX4N4ue8BfTs4HbVPxY+Fr\n8o9weQz72Bodl8rBJkqbVERQ13G6xTw0wKFctpya9Kf0MRW9he8wWFxHHdiy\nRNeUXD8QxOVKoGdmsGR+t9ByOaHcuC0VKeKfitIITmY8kZIJibt2uNz/Fj9k\nskiM\r\n=JaIv\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"bc767c077b93ce415f2505e54f329042c80b0d3c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.c18b5925b.0_1623790945464_0.049273602128053096","host":"s3://npm-registry-packages"}},"12.0.0-canary.7ea2e830d.0":{"name":"@material/density","version":"12.0.0-canary.7ea2e830d.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.7ea2e830d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e33ba90e6888bdc80b2192335a2c9008c836fb2b","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.7ea2e830d.0.tgz","fileCount":10,"integrity":"sha512-z7i7iUBMzSrOWEq77RNOmEwEuwCpiZKTMzt1N47uIpJCY8XE2XkZeLKqkdy+yPe3Per6cgOYqLY+GV5QyxZEqg==","signatures":[{"sig":"MEUCIBAWpJMByqKUBgaPZgNZMcTAzRuiiMt0igbcZgeUkK11AiEA8926MPM0dCfBEGY/qOpHg8a5Xj/2AtjEyKtOKgdRiQ8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyS6FCRA9TVsSAnZWagAAvCsP+QDgWN7o/pVHZBz8aK4z\nG3XggmMShXvKYWF7uQgjf3I9gfbaRA8sZu4k813mZfayOhPmGmob/i6lVOzz\n0QS7X3ZfQmZ8m4oTbi8Y4zJRaqRPjK5vo2iYGyQWgg0RsfFgWSlC4R5k+HFr\nrriSfTrJXL63WxwMEnC4U6slU48Qhcp6LdQY1zyueo/KreUXwA5VnhNFUNjI\neUfCzqqgY3ItXduB2A1jxK68hnhiuLWYW2AAXZsUevs9ygRjQZJWqu5MoqCR\nkDkrM/tyFUA1qaYsG33RstNq9Fl00hoYP7GpNcHNyrZaC9AqS+x1RWG1bFWx\ncEyXe1e95nFXOsFnr8PITljrScOYi/HErGFWCjAZU/rcKZXBXdKDeXFpfb8E\nUH7160v1eaklNGGJSA9zY37mdfus4yup9R9waipbNDOhrZrashmYtOR4j9ew\nFw+7sirnstdtbeKNfUMq9/FAz8PKOsx4GRNDdUHORSSP7VLCvyBZmsSyTxeC\nrctPc5I77vMRyka5M4/nULyXJN0ps6XFSG2bbJ8DOiq7QkIPlYS/s1q18SNp\nerRvoL3Mqa5EyFjVxZRVvqWjYmFcuExhS6wAFOzwdwfoawo8QSJ3+9O+RHaF\nv6OjCpFsXAzUf412dPfcZVgce3zV4a8vNU4i3gnf9jBln4yHbB0LBiHTqxN5\n5QC5\r\n=QM2z\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"e1f3cd5692e7f4572664681a049ec1ea1548eb15","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.7ea2e830d.0_1623797381075_0.8908154834662629","host":"s3://npm-registry-packages"}},"12.0.0-canary.271fff902.0":{"name":"@material/density","version":"12.0.0-canary.271fff902.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.271fff902.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a48db8fab5593cdae7b2c705339052d953235e25","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.271fff902.0.tgz","fileCount":10,"integrity":"sha512-GWUPvPqiv9xvkN9KO+RafLLogmCZ387XPM4XH6ddel7mWVS8JA+crPZlkSKs6oFF1d0+OsbEEXPfkN2boJFioQ==","signatures":[{"sig":"MEYCIQDwE46xh0h3MHUi6qipfc4tgdkQgNYxz2MIG+P7tLQEcgIhAK1ftmTsbEAfDTwHQMkXLJfCzTg35a+ut9X8Yn3efZKi","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyS6cCRA9TVsSAnZWagAALgUP/AtUskYyS4IosnKXsCaT\nEXeWp4sAhWSOPoJJdwrS6jcSsqGLiyAIFOPEcXf4d9MtCOi9IA9FJVEb8UJT\nXAkdviU5IgNQ7MeNEKAkAgxtI6SDDW9hToO0pLbc9ospktYjmxuw8MM0It7l\ncz2OUxlMKrBrxCo3F1Lh7mZF5XY9Dc7EaxqBwRPGjyFVMxc2iNz2oxAvLlpi\nIp74cdgMpyXAnolEkBwWI7Mdm8mcj6pZzwtWifnukqxJMGshDzHvX7dKblJb\n01rmR7pDenCWpnjjQzY5ALzRp9SFF9uHGzIdHsH7ScQUKnc92dlF39d5IxdE\nApXDKuBkiapgyL/XXdYX3LZkp1TMabpbRcnu3Z+sfEtdbfsUKGXTJASmr/pk\ncqeWJkAXA6PaaZs2VxS8MF5wknhN4pN5EYstflZJg+ByWvTICG8kHvX55tPd\ngB0l5L7fwXufD9+66g6NNTDXKTJsQAEWyOCMaVLzJp4+8/NVBtcO780CqLXg\nLUy51FDQuBQcnmI1VA3G2TRdh/f6GfoISu9MkxA6K8Aje3OAADCPlLoSGdEp\njW8q5oeixU9jMENj7cpowXaVMtPkgE6AY4cEFU6LfNr53iQhCFQajZwt8F6K\nrCHPP2G+k4AD08yz0orQzEOECqYIdg4Wr8x9/zHaJiN9rt09cb8SCNf3t06C\n0ZVV\r\n=QwCG\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"4306227bc7e5f014c5e961178b436b394f0dee6b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.271fff902.0_1623797404102_0.4288200446807391","host":"s3://npm-registry-packages"}},"12.0.0-canary.d96f0a1e0.0":{"name":"@material/density","version":"12.0.0-canary.d96f0a1e0.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.d96f0a1e0.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a0b1b2addab829925615b1576f792df1b7359c21","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.d96f0a1e0.0.tgz","fileCount":10,"integrity":"sha512-uHhXHGaypmnJVxehdwwHECFlg6im2uKVDWyEflU0Q1FM2hXye3jdgj0asOh2YpoxjYLLefOq3xIZBHv40L1jnA==","signatures":[{"sig":"MEYCIQCjnv05Gd6CTQ86mi9IOds8kd7vHwblh1GA4NTY8WNMVQIhAOeUjUe6L/6O8cmHQ4Jq6vHECOspI5xfCoC95rJmF9Gi","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgymd9CRA9TVsSAnZWagAAaC8QAIpGNDwO+8iEEGIxy0D/\niHEuaQxIzhjmfB9dimifp0ly5GphsiQXgdAUZHAc3apCoZCp70Uo87Py/CIg\nB5u5bQu2h86Yhqpbf2WvinbVqmOaWsfz8AhMtMPcgeYd94+jJ8ZvcIrzKQtP\nVaAV6WSZ79SsImItVrzyFy4V5cM0OMAJKRzhH4F/kPVdUKkT7CYR/Zvl1a4C\nIpq1fiUi2hxrwIZU0c6DKXNaCONJ6s72RW3H/8ns5qTYVPNMBA2xaJCNlbxe\nNQJHVTepV8DCG288Hnb9vWSFgaHBxiM1UAzZVpimSgVMsrekOkJtcY3Kmu+d\nSN/lU9vfb7yUWeEP20yKSP2Qo7dYOIRFHcI2gDG6A9WRqwei+13myDFRt1UY\nigsUvG/yJXSEPyGgGzqfxi5yEZvrNzcYXTIItBQbfseCS7AZRgpePw6ht0Qo\ntpYO4MtPwxdZoxx4u6B7LYwIJHOUo6o7LoJVpm+NxKWkp8lwMfDRa8iBv49M\nYrFQmO7lXa8zG5VZtfSZd5vULw1tSJ/Agg3mONHoKTKF14gdca9RvTY8GvCF\nWN7B9wkLyV6Nh7/ao4Wa91kP7ifZOsvivrnAGrpMx7qfyG6jVupy/IsFbZoT\nvgVsFb2Xi1+gtcH8qJwG0bDCfR3xpndmJRrW+RMoO/alL/IeApk36NG7Z7c8\n7Sc+\r\n=IKhp\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"32470ff9121448fb2599b2985e276f51563ed4f5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.d96f0a1e0.0_1623877501454_0.9499645461676425","host":"s3://npm-registry-packages"}},"12.0.0-canary.a6183801a.0":{"name":"@material/density","version":"12.0.0-canary.a6183801a.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.a6183801a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5e57ac40dabe0abec0e8df2fb46d6116f1982265","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.a6183801a.0.tgz","fileCount":10,"integrity":"sha512-GxmXcRHGt8b9if2pgkSl2YUv6GtWwWIT7hLhVOFXAWOizsJCb51fTwQP8JpUjcNMZlTSy1N+OtfK7ogxvWX5vQ==","signatures":[{"sig":"MEYCIQCTwu274ACpFXDPG29TM/J1JGUDyyk9npXCGhmkSC2yRAIhAP7NUOnnko9tjrbXaVADd1rTt2uV5+trA7538wx5jQza","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgynVhCRA9TVsSAnZWagAADVAP/1NcBiSzpvANXtpO8bSI\nPm0Hqw0Hzrs6GxQPxupuIa4rsdCS0Jy5R1Bmxy+MRe/gTnfs8VkZWKZTMm9M\nzgtX1GmAYd/g+G+PYQbpZMRN4VBkO7v/PGZikwG0kPZRFFE4oyIXrBsvpT3c\njuGAgqP8GCNbd+GtLkJQMoO3Pp7QxN38BKYfs/nb0X9FbDv2wVgbUAuOCuTi\nsnVgOjRHP8GEPSQKeL4Pjgyt3Kvmhb5c2wGctiF4wAsbPNM7uU7PFdZK4XFC\niOkY4UKdbLvqqB+P2fJCQADgt8ht9KY/TDZx3bF8U/857oSaM5z1r73gwYhT\nPw80sdhQUDgE4pVcwF1f0EWD+3WMcyNTdkrFEh9aF1hgfuH+pStlA80+Zfmn\njj0rfB+1banq8vT+IRu9wtJOTiH7ZA9Q1ZgvtxITVxAZpGO5EnbWJe8ililP\nsIanhS8CH8+CGiLeJ2bXAI6KgRhJJ7XtcCV5DWDp6yAtN1xu7BVpz5FIcaEt\nwwN3DSfjG/ZUrk0RX37OGmsmm+EHQMdYQ+FJfgxx093za5tR4caawDYZenRW\nduaFlydnMVnP2ssmq6xR/Ban7lUut/OwKAMtb5IwHtpall14w5DwZrLgRXLD\n/exz3UDpeM7ZNvZ8baVOnAURrW0mN2icqZ4qWHrJu/ouvG9B5qiSzbYzvy+L\nFBCC\r\n=E1/8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"b5eb42f66e2a670e1f9573b4feb1a600a95b49b7","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.a6183801a.0_1623881056973_0.04061535388589821","host":"s3://npm-registry-packages"}},"12.0.0-canary.940550232.0":{"name":"@material/density","version":"12.0.0-canary.940550232.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.940550232.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c9565015240210224c7db61bf09d0013ccf22030","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.940550232.0.tgz","fileCount":10,"integrity":"sha512-Si4Sr7ZuUcKUDkvz9wedcNrvtDrRjZkE0AVJIza9XEVQ91iItfXJCfz2b5viUQXX3+ITK4B/f2odHXdTpoymMA==","signatures":[{"sig":"MEUCIQDJ4penoeHBgdkWmhePAMozrtnvoKYjhVyUEsR8kjQhVAIgDIHMxpb3hRNS2rL6GA3Ly8nwio0I6pFMczOhmmJOYws=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgy6TSCRA9TVsSAnZWagAA/0cP/04vx5qkYAhgdGyhORfp\n4nryB3XZ8MWoDU6BFstVKDx813OJfX1V232ykFSa1h6eYj1uSzctfG7ka+Z7\n3PSs3W+S7xrhVKqKrBqZ2n47FfyKnRE9jAHzjJLBZP6eYS+rJuah0p+ChwSo\n/7PELE0NBtAJExEgdx/KQIFaQt+rxmXPRJ9jxCc69O/2yiwinUvNCdx+223/\nw1TJq24OfAIgC5g3/WOqHNj9AjpATSJPyf3xWuzR05gAzqn8e1AMyOs21xzO\nPaqGVlzTrKZ2de4ynDYviiZdcvxZPdYG5AqcxxIPAMKP2s4JqBQdicT5Sesc\nDU9/N6aFKbSqfxz9tse0/qw2+ryci1VliDWAaG5J9q19XTeNDbG/FR00cndO\n+9G+AYd56f7UCuluRZwz+IizETNdjz7Kwdemcijbm/2xRH3UYORRySs9MWry\njpkc/ZBei5HKihh9qX50tj9ETBr7BJskBoSzb+2ZMnkpAEdxCe0TDo63V0i9\nIdM/gtaRYLoFiy3npvdKi7AjFZ8oh7ekYLPV4NrQQ12fhx47iXF1JgnyZ5B6\nR9s6Tsc3cLch3PwLKABx+q8GG6ipXeg4cBnL48T4nkCilt8oRU4JFJGO/zTG\nlVb1TtsneKedjBprOpw6Phu80TVRoijTpuy0plVy8z4f3S6HvMhYSzaYmS/P\n9ufn\r\n=bQeG\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"1d6560428828a2c7ac90d050a744265e63c8563e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.940550232.0_1623958738292_0.3436463774162528","host":"s3://npm-registry-packages"}},"12.0.0-canary.f705e8048.0":{"name":"@material/density","version":"12.0.0-canary.f705e8048.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.f705e8048.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dea91e253788b69c721e859fd8b1a3ebf279ed3c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.f705e8048.0.tgz","fileCount":10,"integrity":"sha512-Ljxw/I1eXEr8n4fxBmFR2nrPaRNLYVXpTCWumj0X5WEkBIxujFVpU7h6I4K4Igz3o3xAn/JpcqOp4w/Vu0fD4w==","signatures":[{"sig":"MEUCIDq0Xy63qp1tAzMUAvW3RtK9e70MQ8ljwBFyYVY9pzj5AiEAtKs5gLdd25/X4NBvCt1ZCxwMwnHdbKiJjLKThCfEnec=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgzLpmCRA9TVsSAnZWagAAXIwQAJtKCRze/Lo+DUWF9KZh\nLoVI60gC8paCQNrkd+skFOmi/GK8z/A/eks3LXtGgCHrLg0BEa0CAyn8ivWF\nUYALeJLiOawiN7V28b2AuNQkeVb075r1JrZkdFGKDNNKI5q+Y/VeDO+0Qjp5\nT00hQzKhufB4UPVrSI5E+dw8Ji67h8N3gtZsGSFfZY06bTTS6ew9wKHetHQI\negVkEF2ZtwnF3kCmyftgZkXLpXyB/1FGlIPiWOktkClsHo1li1JQmtR02TJ+\njy4raIX8i60vQf+58FqhhYRzrH9dMA6YdaPwr8Cucjey9QX9+GwNZzhWheoF\n5KsYHDesCi09e5G2sxZhiL2wULq41ODWlNzLK2VPJKJGMBXA7oFogrMML+da\nIDpPQhtIwVNAHEBAxHa/if+b59UjQNUbvKb5JCU4peV3U/gW4ujxQGuOVl3J\n/nsxUlTMQKc9PAVXVoHun4p2Q6REMLC9GeakKCRhCiyD3rSmBb75XCdlcBoM\n5pu5C+aPGHx+r+S1xNaiDa5fYMsXflv6jsA4syECrMZ4FDAQhwrt4ih2P4Cg\n7XGr96zKAUi5CvxejlSdqQDVDBNf19QvXZPGO7TsyXaWzcEkFYUATE15YQHn\n5G3MEKgBfjEwh7Oz9aGndYoAJb2U8DRQ3kWQ78XgxZYmniBpvtH0JuRP7338\n1Ovr\r\n=rwis\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"65fc1ee152f3abef35713b70962e3d5b848a5e78","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.f705e8048.0_1624029797638_0.5215481702656888","host":"s3://npm-registry-packages"}},"12.0.0-canary.08d791f37.0":{"name":"@material/density","version":"12.0.0-canary.08d791f37.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.08d791f37.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3f0bacc81c71e3be850c0d215f92b185f7e5570c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.08d791f37.0.tgz","fileCount":10,"integrity":"sha512-Bg2DZcVZgMDqUNOwxOiC32azk1Te1hdWAKwVPjSltCW/t9aAE0ENOcbj5q33qykvzKG8E5bb2uL3y024ux4Oag==","signatures":[{"sig":"MEUCIEIH0c7eVVJyD/JPRFbxlA1wi0m4pwUJHIIeQ5ruid5xAiEAnPSKxSoMA0RG3hfl9rhdXFXIo3dEA+Z3RixO7OLlyOo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgzQvMCRA9TVsSAnZWagAA6AwP/j0AVFe8DKs64lblPAHQ\n8aPTBmppWta0Ds7FcpUocwFoxBoJdfIG5J+FIYelv3Evo3Q2i8ozmiJXefAs\nA2Ah8RwfPKBkCqL5+LS/jLC/4zsMMXtH1CpEM8yxKUC1u46ZMpXCb/hQp97O\nRZn2f//pwMpsK38CrHjt588AXcdvZ+Wh2kDCl4tGMlI5Xm/FHTcHNx4nQ5Vz\nb+AQN/q84360Ae2BTIF1BEspjz6hWbOkhEO2GRGLhfO9koc7vvhdyS/DVxdk\nP3+fnjrIw2x2e9Cyj7Ev1e7bgb85HTpbu6f8QhXt/9NQ3K7F22QLNjYLlNgi\n9pjSc5FIpXzU55y9tYBpVuQdxk0qMgQNlHRCrW2dNW0ntcwJqz1TqSEj4N71\n/vvVj1dl8Foq9P7QB7eG/AU47jmaH83b7c00eEz+oAnT9r1PcWOS/9WMCRgW\nCGrMwOCd47hjc5tdxseOQW8ayNznvnX9aescNrbQJz7IiY8bJS/8zUAUPS+y\nRSb6+XOLfot99GlnA7QAsTyQjZadiTPeHW6M3u0WbtOUISSdMrKum+U1k4q+\nfxc3sfSkM82cx9n4T/iBRBLThJfaQH+SFGJxQv//qUTOur+DNaTSFoF6cOo5\n4V61KPN9X6uWGCfAt9OjVb3Q8nSvx27ZIWFy+XG9kt19BudSiCExqyZYdvD9\n1cNt\r\n=bRF9\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"854f301ec7183c3cbd2e62f9ab541f21aa6a459f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.08d791f37.0_1624050636365_0.742734144529438","host":"s3://npm-registry-packages"}},"12.0.0-canary.e38d7440f.0":{"name":"@material/density","version":"12.0.0-canary.e38d7440f.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.e38d7440f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4efe30d259fe849832ae474fc9e35c3e89808251","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.e38d7440f.0.tgz","fileCount":10,"integrity":"sha512-oYpG+w+/YqGj7s8UxQaZmuroSfP/zLcnH/PZQ4Ykjt4xnyQx7zzHZr7TF0uK85jEgrcsbWWOzyZ3Io+BfcCV9w==","signatures":[{"sig":"MEYCIQCqDYciDY7+b9jupaVQ6xjJWcUOqXhtStX2f6WXCE0XugIhAPSRWUkLKm4ZvGU0Gm07/L6r3MY7ZCgcaq5bUyItmk4O","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0M7ECRA9TVsSAnZWagAAVCsP/AvadEMHjnrTErcEu90y\nrZBhwHeJ+/ed++sfdSdrw8xWLus7RuSlqtGY8Ht5sH65BaDxS6Rz3nTtH42S\nEsPajjC560gt0Cg3FxwizP1Eb4aL0+po8bpE/o9Q5OC9CoRBRHJ8mhtTQEmq\nGd9lqU0tEeAR1FUB6Kq4OYSFvwrHRJdirJRA2TpgOuWhGnZv+c7oy8NdpLGy\n8uajJVtGbcw9GiuVF/vxAb8yraUVE4Xoz/5/N8Va9LwS8pTQknF+5mxIMw99\nVgMvdfbOKe1NRgaRmuNZEbhRo+flNIHzAknoEcvQmqHvLixeryIMZjsGe/us\nBn2xY0ztUsCmPpmn/RGPEoJA0TwdfwpmIsrCtGSGc5tlI5uoZ/U2cTtBLUD3\n9Np58ESWL0RrwudoWev9fvdEOFVm3nCGXLVMODl4KQ7aJQBCy0hGS7PTwiQq\nglh+A8hZJiXDo7sGHd0Q/mBjy3rMyRo7F00WLotUm1UJEG3/uxesAcG7CQKl\nE6b9kqoFqjU4a/4L3MaTQWL2ibH+TQjf3xSPWudwcumXHOJcVipaYYQm7v1s\n9GsstA+yv5xzrBVYrnnMcuV8HfQN+wu173KTiozktiHNIAJ0pRZB2S7MUniH\njxrozxoo9O3P725AY/ie80WxuGVskMbPeQEIK0jRV6pfdtqfcxG+xG+MENR3\nsZse\r\n=SDNj\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"1d46835e968c827eb3b359624ebb85f8e3ccf528","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.e38d7440f.0_1624297155757_0.33501064091781196","host":"s3://npm-registry-packages"}},"12.0.0-canary.75900a5a9.0":{"name":"@material/density","version":"12.0.0-canary.75900a5a9.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.75900a5a9.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3a564d1177349971659260150bd10caa0bafb5a7","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.75900a5a9.0.tgz","fileCount":10,"integrity":"sha512-prTX8sIh0liUNEV77ZQ5QkpLIjRDZMRvRn1qCnJLvpKwb1juTgk4E8d1Kaw3b3p/u6w2AHbV5a6d6wofO9HGgA==","signatures":[{"sig":"MEQCIEYZ+ruXGG008W85OZIe3yvC5mYSTzREz0uCWAwH8VxPAiAktCqxomqHosC4KomCPZFaDas87/5+nFFv586zuvifjA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0Nv2CRA9TVsSAnZWagAAUMoP/i7KHeG3iKmR1AECjCnD\nx3pZ+HnJk2yU9cqkBLGR1vwYNzMGMKSQGdq1Z1G1bAcs1sSRSJOeQtH3Cfq/\niwE8O9dd4ZvzhKhuYVbXoSBSbQCIjvjvN/lfNCk6H8jtEDjLFG9xDDLcRUma\nxfLXRnvHpHATP+Vc3TY8BdL/3QA9aTRMpWyPZ3R+1D8ov1R+3c6d0d6itApn\nhWh6zVZOMPohd3IT8/YUlPKwIW5XNw2zi9ppcSprEsXWwWk4jPaZqLT0uJsY\nDIWjzIDGdW1q6Y3pBVitK2YxL2cuXSqLuQxQ9FagJzAzOlpktukqtA/uNxus\nSkTm/DTENpt+PNqSOZrWEfVk4u+cOJag5ToCcoMSVMmSP/NcxQYVg1bpdJ0T\nLMKz7diW7EcONGMLBxQjEPIetdS7tYTP2rhXDCjQYHpy9HDvOtL1JvO1Fylv\n9LODXL8uTe3kUXH2MAwWz7RpRyPQ4X0f3jhXIK8H1EjKSnns8LfHIyetHIbV\n0Oaz8PP0Z0Z55FN16MRGO7o3+CD0Jlb0aTbVA6iT5Qi2YSAK/J1gd0yUent7\nADbfjLu0PNs9iaXT+9AH7uhciuuOdYnjrMTcEx2Osx9Hl69o6Fmn9dDq27F8\ntcV+6yv+Q7u6TdjQO45y4gZij9EK5Lr3fy8oLo5YitTpRQjnmIi9e8wgBUuQ\niaw5\r\n=sxF4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"f08daf05a41f44cbb5e5c07039e1e165d123c405","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.75900a5a9.0_1624300533756_0.48000887667174386","host":"s3://npm-registry-packages"}},"12.0.0-canary.33e6f50e9.0":{"name":"@material/density","version":"12.0.0-canary.33e6f50e9.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.33e6f50e9.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"59c547eda1fa517820b8286323f597014ab90b49","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.33e6f50e9.0.tgz","fileCount":10,"integrity":"sha512-2qWZmHAwU7RQKkB06QNvUyUITOAePcUvyPmPMBgMD2KvPkE6NAMgHhMOZWuSRDdGy/N8CpHPVh7hXE5py54fww==","signatures":[{"sig":"MEUCIQD2GdXfkMrPArpnbI9hY8oumIz7HsjfFwkSpQMYPA6/9QIgIHob5X9mp6h4GixpmTB66eKmWKEiqrbk5VUlXcabztc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0nwMCRA9TVsSAnZWagAAkH8P/3Z1TTwh12Abllj6uIpm\nlENzXE57j6Hl9pfEabWXqLU4oj9jQC3ISnXaV1+hFBHnFj6WAWKU/gpTMJMX\nBwWTsL0JIc8ZgqWT27qXztvQaUqdVNSvOL0QrPOYIyWx5Ou+mOmkuV/k+23o\nQef2gAMswvXFrEnSX9QTRyZL9ZNPrZM8f2NHNNGju3GEaaGeNImpBiKYjRZA\nRDWBCBG9z/oOSKUIS45NhJFpWRwhrOpIyLsaKjGpiX+PYIKhcfBaN6lQ56PG\nD68q3pczHRm9mt7XjiX22soBQQ1zmIrKE9dZV16+VdHaUDrskdYx3uJ7kM22\nZcQ/NFIbNdTaeXazSq0+zPEsp41xFclfajODZZTOzLYB0jNHMTJ1iOujSpjm\nC/YxWmj0M+UahGQWUitbqU5sJm2n8cplBq/jV2y6hStb746f+zsq3kl/Ohof\niyzVMU8PV1r9gJ9omo7XUC9XOZkfV3g6xlrNIXoMtbCjrmNelLXz7VBaGhVG\nY48e9g3yW+/2gdlhuv3l1nzbZKsv7iX8sulDTOQZ5zYnjSc0mwIkjqKq3MRO\nP/EVAwVbcqmSzo+ck+3I5nbV06hSeHNdiJVsTU02Khk5D0KsiHUrhcxLHZgO\n0FN91H59I0hUorSHnB1q43/5heGIbK1untgu3p94Lzh17Jb8pn9tIOcczaIV\nUhZB\r\n=8UGS\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"fb208c22fe558f863d851b5bda74038d5a3b09d6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.33e6f50e9.0_1624407051666_0.33740341236636917","host":"s3://npm-registry-packages"}},"12.0.0-canary.8c685301d.0":{"name":"@material/density","version":"12.0.0-canary.8c685301d.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.8c685301d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2aa154ffc9cd54844e13669a14db019bf96f7d49","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.8c685301d.0.tgz","fileCount":10,"integrity":"sha512-ta3DtOQ+BxSLQQrDpOk08/DbyCaF2F/TloapkTaGu086hX8fq6uL/D5a7TgMHmaP2WMF4f2SRMO3T8Gs8QnJvg==","signatures":[{"sig":"MEQCIEVyW1uAIWOfhy0SAmuXBqnDNi8bkcLs0TRkaQzvinn6AiBKlDmLHT3HWVM/oW4Q0b3t/SNW0/Jcn9orEZ88ttLvTQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg03wiCRA9TVsSAnZWagAApYgP+wW2Dvv5KJ1J5aD4qrjn\nO9vtOrWmSgA8+D1b93fpbBLgoNyK66hB2j4QtGTNUvPH4xax0IMbIU+fY4fv\nD5A5MYGt6OfB8MxobvOtXqyAZ3B4UYqVrTDOGUlH2fetdCzvUYcPE3y2NyCw\nSzdAJrr9yq/3EB9z3U06w98VRHHbAWgpulTk5pfLjRppOUWXjUcb+XC/OFnA\nXZu4yM6gZ+b05yXpENbM0WnItslHYOLi1GgN4Leu5Oqwp6ylbeI1Gq8l/5cz\nRMLwf64gJgrkQVi39sccIz2cBh+WbXyK2ozz0K24BfQyeo6zW98lMQuPQ17m\nCgNlTHoTUpIOrZ+wIFANnrHDpff4p+PA+lBZlEaPjIMjvy2m+7XfjJxK8j48\nxeC0x/RjLANad1FpqtNBtkCbGPMegXP91LrL8F/+gY5pGFARpqwwH7REgnTb\nVfcyJpZwXwyQeuHRgv6+X5PT4JDi73pgUBQaLUhxP/AAdL9ehNMSnLOQVJzq\nuPl+lCD83JtrhFKIfy3dU4oIBv23jYVGX59Eqv39GU3LJZdVWumtS1R2lR6I\nk4AD6Xhpn6efCj431V/JkXjq2ceF7UB40n/9z4mDixRBWlS7j5m6SCqs1sW1\nJhxD8zKes8GcoJVuEOwrlWbwxMrY3DuL3d4zw/MJAU7ShgF8jlBYPSsfuk5g\n44+6\r\n=n9m7\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"43d0ab810254e565375b55ae118522d89b7e9254","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.8c685301d.0_1624472609804_0.9480337370507623","host":"s3://npm-registry-packages"}},"12.0.0-canary.8c7d994ae.0":{"name":"@material/density","version":"12.0.0-canary.8c7d994ae.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.8c7d994ae.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2f523f3c2efd32d480ee0f90caf9dba4dee45869","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.8c7d994ae.0.tgz","fileCount":10,"integrity":"sha512-TWrvxnnAYHi5uRiPoAukOzxUYd84mJ9ZPK2FlftgH4vpEbJoZTPMiccef9Mb3qPCifGjqmf7DvWWXvgMWvqR8g==","signatures":[{"sig":"MEUCIBoODhvPA6TwbIGZEZ0fZKvXaSXtK8UE+afsuC0KHkx/AiEA1pa/BJB9ugWF4st7ibXy4xS3Zf1wawxUkNId8kDtrGI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg04reCRA9TVsSAnZWagAA8HQP/Rs6lLpyrn2QcIvSLOHB\n4sE5CUfMY+Mh1tFFpLc4khekI60POCkXMGZJCMFQA5SrBK/nQC8uyZSlR3ZC\nq/Aop2X9bb1VfxlzNE9Ki0ms2tOuZCN8qCHNeINYUdnxCiqmtoUq8fsy98J9\nnOu1d3KbaPn7qGm4vPFW/nJ1HsllTqepVfQo+UsYzMOOleAXVTwVXJe6CcRB\nw20cvowLNwmYIlNi3DTy9Yo/IsPwB64SoEgKMksX9O2HRduB/1zcjviSsaYH\nKwx5Ls5Vp9F/Wm5oB38bSlvBYocJaOBsUbWdWkFQRj+3IF0I1IM3ViPVaG+I\nbtpGlWg6+iwjTSeVImcN4cKZqqlL1HpPmjoxcZTt3q5RrsQwfgHsmYchg5eD\ncpicS2Zm3Zelven7ixTuLNNFMqtj2wKaEkvW0J/0Ama+C9nrY0gbTiTfZmjS\njx1KIz0IOMGWil9Ime8dxH++mP8QzlN7Nz28e0pTWCGk+WHU9LRz0dpVrkr0\n5Njkx2FAyd4iBlU/TYS/HwliJrAi9XGUk3JLb+teAyL/htLwgb82ci+WMhJV\nRuo3bum4/ebnRxJAiF9ilLplUUuugOXCtp4iD8u0QtiGrwUINmncJi28NZ+r\nMdLBo0M4/iVMw+StF2MLewM5yTSloliOd5gxQkI+vBRKLhPXS0wOIoEnqEEm\nAw9l\r\n=f/iR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"85693f86d68563f451e95113f3d03a29fedcf142","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.8c7d994ae.0_1624476382373_0.10606983223587996","host":"s3://npm-registry-packages"}},"12.0.0-canary.4ccd39bdd.0":{"name":"@material/density","version":"12.0.0-canary.4ccd39bdd.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.4ccd39bdd.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c18f8194d8a7c3473c8492ea39b659599e767b8a","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.4ccd39bdd.0.tgz","fileCount":10,"integrity":"sha512-yoSM7+ofF6vIRRtYDsH2H6hMyCS2PF3VHfvWMHBEHMl/HzMUCC66dr2/h8MiUL9WEfFkr39gO50BqZVA9hF2lA==","signatures":[{"sig":"MEYCIQDngws8lZTj/djrpF45h+kOmGrZ0f4UNwbWRo/Tbjq5HwIhAPjbJ9bOtaoMf8iy4QIwrRDzC4VPmgSYsq6/TFK7NUSr","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg1K83CRA9TVsSAnZWagAABHEQAIxkboEsDTkL8VwOCrKn\nPX0g2V3lMgPl+KfXRUvbXiBvYlj4nnywECurFbWyVw4YDgkHVYspKOsvPUiU\nF/ug5+QWsFciFSuCTCfpbMq5lePrLCd2Mk2yGUgpwCEBOh3iNKfI+1xF12Ka\nvBc3d+byDOLvoZX1S+D0Yho7fAQthtCBWiQP0i1+/Al+PFUJVtFYtrjbKeOT\nICXrz1F2L6By1uNhsJ3GGAnwcDcNcfUThdRvfrM8lwhOel93hkQoBDZ1ep4G\nTFqDjUYc82eXKQuu9mFWUlruE2MDOxB2mjULxNUuC5uoXQIjQWcUJw14YXXY\nwXCbxB0Q+qHvHB0hN1UqviRnrHK9qt7WgXdf5K0XelS6F4RisT7W1q+0IljY\n5cMHb2SJ9ctF8YzDen/7GeaI7awQ6TP/SoIQ82GQIIA+ZPBUfu6+JUtz2lZH\nLvM7VWec4PVV0vCirs+3qvA3bzhF6aHOy2yRjOtwtMc/04LPAbyQxvY3G2f8\ng/tQB6NGVl0/ln56/xBPQ6WIm6VcwYfTp1lIood6BD/Whqg2Iukj/VZWPc0F\nEQ+GYCdn73Cyv5XveSq4CcCm1ihy1fcs76dlRlaOriSeD0MELt8QvA2vEury\nODylXf5EEbOCiY/A81XRtLCIoyiAok8EZy5T7RZqW70nwffjlYdTf3/8tdiY\ntNYm\r\n=z/jr\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"0954a36f2cbd31614158e8425662a4969ce9c299","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.4ccd39bdd.0_1624551223275_0.4545378937933586","host":"s3://npm-registry-packages"}},"12.0.0-canary.17553e9f8.0":{"name":"@material/density","version":"12.0.0-canary.17553e9f8.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.17553e9f8.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0f6cd781b6738f702fb3032598aae75f8300d206","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.17553e9f8.0.tgz","fileCount":10,"integrity":"sha512-hx2ZD+7EkYNwK/wGXbfBjhLTDvijQEaLHTep7F80XAVcIR3RiU1pj3/iyn6E9nE/9dcFzsItYR7B/Adl/h/0OA==","signatures":[{"sig":"MEQCIDhGw2SFOU9FEL08aTuKhPbtKzCvDvcqQeVmd4qdQWc4AiB7dsnd6MFAWbi2vysmL0+Qza5Z1DZ/PQ92PFCi4gPdSw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg2lJpCRA9TVsSAnZWagAA/60QAKIZ5sIXk1mv4AKd4CYY\n/M5KZNr+lHBJgWuNDf/Vo+7pypH3vY7MDOW+mVgpoyLe25LfkAT5jYnNlPTh\nhNxm0QFQBrZKC3SG7QEX0jdiHZSslxntuXDessreAZil5UlemQig86G2RCCO\nhbSOjdkLXkizKxX8dunFvPRMO43aRRTl6Aq1tXpCi1pQd01C/ehy610yzomS\nCi7+CZ1SWxtic4dHH1m62p2xfu0djrQqyZDdAdKjEg7mMx8y6aS1JdGin0Ih\n9hH0HjmG6iyYWc9B/QgEehLAwLWQCYuk9S1ancDw81Il/+X/qLIScmdHarUo\nsWmCDAw/p/OoHXXGKLrCsHzC2/xG/GTElM/70w5FBkRnOEglrPJKQURrmjfz\nDWgOczeHJ390Pw4LYrJvebh31iToljnKrNv1pPH7F/YyHofVPQFpbOaeqT4L\nAqCKtjMtiq6rpPXDqFCH+YTDQNpo4Uz+ejtIyh/9r46YAmo79k8B5SEs46d6\nsjQMdmr/9WNtKrA5bV9JucYVpoyPvIlVDCjlUDihQn6SNLYoDFBgVTBVrcLi\n877uSk7wGUl+pLfmAsS13ZZQFmTNZLXXvyC2QsoVXEv9HmZHhrs9CuQR0yv3\ndGTtNDnhA0N2FVh2t7/7ETWelbYvsk57IehtAl5GpAKRx0PHzfJbB5aY5WSt\ndqXk\r\n=Khnh\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"bbd7dc5fbee09c82081517ffc14264d4834209ba","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.17553e9f8.0_1624920680542_0.49202071163806793","host":"s3://npm-registry-packages"}},"12.0.0-canary.4c80072fd.0":{"name":"@material/density","version":"12.0.0-canary.4c80072fd.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.4c80072fd.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7bd542ced4172ccf5d474dda84bd187e5271bcd4","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.4c80072fd.0.tgz","fileCount":10,"integrity":"sha512-GsLRxWp+S2RHd9Rfy8HI0a9iS/vWbSgDV5zGsukrmlf/Dsh7FhQ9xPgk+JWGP8LF1ymFKFlX+879CnI20pm7WA==","signatures":[{"sig":"MEQCIAbQ9FUecfObhoZASOJjA2cThuEpyr7rM+x2V4Qag6uYAiA9QASgZ1z+plS86ji+QzGMxg84CVOon/BzMuV5auNhzw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg22jyCRA9TVsSAnZWagAAm2cP/2IyUPNEuT3rEPqpnUqJ\nMFyASm8UXYlgInoclWw8vM2oM8IvYE5B9ugky4GOpz7aclXi32Fx+Zl8ERGp\nPxQufjoW/ZCo2iGi9jgTMw3n2cgm7ctscgE9OxJS46uDqUF1BHUdxP+KFgTL\nqAKzj4hrOyzk0nCss8+enbtwr2+JbHmvx88caXtbsddhjIkvkzkqP1/Nht3M\neeRfeBPuQxOzGjvkkYBF3c/oeLGz017gVah1Wmpto1f3Grpp2C5oj0KMcSPT\nnhFwTsjzwjM5QBVhgF0OVPsQ8bDNF4s9XY04FZBWdoWOWHlENLIjKZAc4guE\nku9ilNyJY/kFmEFrKgoRjzZvY+GhtEe10qwNCQHUVuc+e9fS1WuEE9X0ZJBI\nLPNRYA021iUOlHxa8n0iQvX/DSlbxCt2D4jn0svTls9YLZK25oIOaq3U8Q/F\nr+5P57mBAOyeEVK8VY5O9tQpMah/+ZVyzC8uo3uYKiqPee8AT/ILc2gX+RaL\nxLNbWuuk0ERuuF4q3KCnCjL3/iNJFbyiBoiTVUr3jmxXGcAYHTPtjCly/oo2\nyU4/UA//x5AI0yET1zhv9nJVZ9YAMyXJJTJ72PSMLf40q8ix8py7Z5WdpncQ\nn+QMfaggd5bW5L8L3Vd84RrOSZrwtc5coNSMnDs2BxJ7J2zuad7Zm8tc+DEB\nRLZz\r\n=ExWu\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"9f6d10da43c6e0fbb1366c1e37fbca58ce00dc12","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.4c80072fd.0_1624991985586_0.40546494121816035","host":"s3://npm-registry-packages"}},"12.0.0-canary.796811db7.0":{"name":"@material/density","version":"12.0.0-canary.796811db7.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.796811db7.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"88e4778f225a6f053a7c2c9b375c9031c02c9e4a","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.796811db7.0.tgz","fileCount":10,"integrity":"sha512-fzzA4578Cg8WzBMMfwE8ER7BkUsN6Twbks1HDI0Y1bgnzXkzyP6c55OZgq/Ltta1LSKglIEqvPPht4i6t5D9aQ==","signatures":[{"sig":"MEUCIQCHwzvM3usXWpiCpy8RCZHDh0dYqcyRB76JKphHwmOcTwIgRhf4JiGpUB6RJGNnjumsaCrrdohCuJ5WAjNi4DXb8DU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3QYKCRA9TVsSAnZWagAA6BkP/iVqh+ydT1IXMiNaemav\nsmvrA8UgJWtQP0QXFgEfWsssjS/yH5ZLwC0sihmm9laPWhz6uxP96JUrYMbU\nhmYDppP3V4Y4PCbF7WisEN0ir5QPhrXRPM+/elO94EqSu8ftqcdkUyKGVRPz\nBQJgdXAWZSs6XUitf2iZJxEx/AnKHeVMf1GevrSCK5N0Y5YwwfN4J2z2d3dl\ngJjlg+EQjZi3ekuxAqttj8oY2sqbq9MalUcA5AxGpegoxoYUJzbv/dbIBuJo\nxVPthSZ7CpKJJL5SRd4G+wmKz+ljdvO1wAgdAFj5EKIzPdUL5HfAL10IvP8G\n9VD/uHxTby++/hQV5zQB+rxRZTz0HqGtAuLvbM7I8Hee6He4e80lKJxxttz3\nll3+i410+jYQfIjZz2GtY1Y6emBIRHsI5VYzAodV5F6OxZFBTQRstbSlub+T\nuoFh7d3j4eb3mUVgHti1MbBCWKEOjF4gYobrn1RDvlCl/pWD/RDndAo3HArj\ndpC+EtgtqzWRkorT2sM5DxLCykEjpmydEPkVBDNW01gCfxEBLn72rtkKBrNH\nIvV/iT3Il+ZGEIEDmORNhGXbC41sPIHAu6tHfs91tmHh1WiAcFiih/Gein3e\n/mVAavEnpX/ZJIDfylWeJ+b3W8ffKciEy9Em+N9MQV3DIj6C8nqzF5Iis1M3\nG6cl\r\n=QSDb\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"b02de77dcf32bdce7d23406dd395390b35e386e0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.796811db7.0_1625097737961_0.8640043715972923","host":"s3://npm-registry-packages"}},"12.0.0-canary.70e1efdca.0":{"name":"@material/density","version":"12.0.0-canary.70e1efdca.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.70e1efdca.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"252976db1af5fbedc428a5f43a43088180dd8c4f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.70e1efdca.0.tgz","fileCount":10,"integrity":"sha512-xm1VjLfwZUJvR7LP6RlHB8QzLsSPDV51bmwS8XFvP/OQORs2cKIuscCEQSSOPvtxpDUGDnEGvAecyoCwPKA4og==","signatures":[{"sig":"MEUCIQDSmkQ1kgIS5Gzfgf/1ESogTsQSmOne6Gtn3n7BLIQfdgIgbfNILk/h1FFqAB2OEA6/n/kgizwf0t4L4g1fE26yxXs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3fXMCRA9TVsSAnZWagAAhIMP/i7HhE0bQYHyUiwCsjmA\nQoWSCycgYEEPfuNVVu8PWTeRWBBDHfDp+0/qf/4I4UwOiCF6WQmvmgKzNy1s\n7teATdautic+IpDCoLZJ0YCugnb7OjiTp48eX/H5Ql+WziAKFuZwk/3L3gmh\nXd0CimG6ey6m0NFIeEG0d8NH8RuAhEcGnwwFHZtiPfhYZ9Phrex6SnHHfEh0\nHwHdgHUoBhhjUj/bdHuNvtQ4aWI1UlQ9QIig3EO1aue4UNmwIP0ODDeR7mHJ\n2Ykdj5XGhrNwLXJNm0EY5KkaBdwhcD4AVdYq5gZkd4ak5s5SWZKJZrmmnmo0\nzAOSP4d8zlseJLfLT7r9LSCzg26D2IP/9IOPsCBPiAE4MliVFNatV6et3sQf\nEzDuygezK7VbQrxFSQdQqh2Cr7gRAvDl3WiDGwUhStwkEFr6uMuH5vUhSUGk\nqVYoZ0g1wTXAkc9qcP/pmxsWHM2o3nTwHb3UeybR5GUYgzsOC7+jV6oNYyWc\noFDx5hGOpSGzqLOFFR+7Yo6ECiC3VuQhyFIrlw2SWDxzhqkvpecSqRYKQqet\nu8koQGX3aY8Jo2SK9q0c0HjEdQ28/4JTSw0uueozCmhuHogbctzck3idGypN\nrY1MS/PwD5R2IdpOoC8xPM8s9ube6fpeI+5PebeHIWzu5OOUpm4ftcLZMoCi\naMuI\r\n=c0kM\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"ab5924ae38bb3ce40d3b1c303e1ae6d175b844ce","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.70e1efdca.0_1625159116122_0.290370530785516","host":"s3://npm-registry-packages"}},"12.0.0-canary.435866d32.0":{"name":"@material/density","version":"12.0.0-canary.435866d32.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.435866d32.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9e51e398de007c4dadf5b73ec0cba263c91d78e7","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.435866d32.0.tgz","fileCount":10,"integrity":"sha512-UBZ2hvycqa/6gmHEfXJj9NKNgE3gigtAJ6J77te+VjWITUfq8Psnht7MCg8xM1kcCYElMFsBlig3ON3iAFlq8A==","signatures":[{"sig":"MEYCIQConoe3wmRu2OC41S4Tu990FL5Z5vEvOzHKGgUqRHNj4AIhAK5svpxhm6VXfaZ045UBDrBpb7A6u9CnyLodGkQdG7wI","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg31jaCRA9TVsSAnZWagAALdQQAIECIOuJ9D6ZsAS3zp7f\nxFb1NpmkDyKM1YypB7jp0M19ObKdn/ntHKKxcplJN93PGkuoio1ptZnOl1LX\nIF5UacyW/vcJTZ0OlP2GxjtQDlJgPeDP1Ub72GZQzkCyEQfNAg1IoWLR2u+5\nTi7apxK6q9S2XLP+a3wyH/62/EFS+nI5ePn1J2XPgHdVelOGdB/CcOd/6wjf\nUxMys+9Pg/U62718Z5taWtICp7RQoT5ncxsnUYW4Waq0kvrQwJ7dtKjhzRXi\nBJVwA3+dctek2SXapXog3JoCm7XeDiRnjFsEP7aez2ViwrRabXEd2FOF4xG9\n8ZTl0KqrXi/xBF5SqxDlIi89ZQDfBVpgVnoGNvbtY2mR+x+Q5evF7U+5NjUY\nc8+3uK7M6/1bBU14DiKrj6sEfN+DD9/wosTkF+myeRsU1HPmqtmHOCh6Q3l2\nRwfNyOtSicTftD/fHJOGRN6x6vdYcUkYhK2EAr3jk+H7EYzx4F1uakPhMe1A\nc5lJpsYKZT2I1552sMu01fJjhwx0g7oRoccXp7M33JOq2iz8V3eVlCWIcuY0\n2RPW2fNvG7shAI8QBt9aD8ekbDi2LIRAhe1T4+Vc82+glQ/ijiXFfeY5DmT4\nRzME1GzZoDQ4znWLBFy7nxbroeXw37xN5XF8shel5DFWZ25q7oQnzDSU20YB\nctlI\r\n=PNwo\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"ecf68c368bd1ea5571aa4da569d6fe6c4b8b8caf","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.435866d32.0_1625250009578_0.7110015417431605","host":"s3://npm-registry-packages"}},"12.0.0-canary.d0f9f3f2e.0":{"name":"@material/density","version":"12.0.0-canary.d0f9f3f2e.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.d0f9f3f2e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e752f1eef77dc444dc777cf9ba1ca780c4d54206","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.d0f9f3f2e.0.tgz","fileCount":10,"integrity":"sha512-mzqGeG+AFTkg4gFip1hxeQFHktrlbZqZzkLXD2EdLw5oq9Bf+QKxPrxo1ssWvZis1NsuHBeX63r7DOOaadJvQg==","signatures":[{"sig":"MEUCIHiXXQXqRIRzj8B+8TSqYHpoZiFSCep5YEA9ngb1F24hAiEA0v3qdndbbLOjCg0jX7pgqRxok5WGRnMvnTcgrUBsb0s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg36hACRA9TVsSAnZWagAAKeUP/R0pw17/62OtstSy7KqG\nKXwYtjv8D9g1r9n+92dpWh9VtkWLOqOndt5PBzT4AL3tKyjWS98pbE7fW69Z\nwhdSP2543T2gw4Xl+CaOFy8+ou83VjcJ4AFOJz8o/X9eDSLQkjmqTwTaIadc\nPvz1fBfadda56PBV8YUsuXZ3WO9GkdJy4mPacN3ewuJqAXVrnztyT036/K1e\nrLUtnSa3xusVsnUC+t5gCTW5kJClDN8DiPmfAfKwnbf0t0IXfuEeVz4hgY9I\nTKGzb2P4gosO51B5p+RXXn1KMFCN9AEGxVf7wIOdaF1jDMkFI4w0kveNT0nR\nr/NtKp4xa7PmMclOv6jO+1RpP5+a2zdIX7UoVl59+iFU+in7lqzVaPBJqW2u\nZC5ksNbCtLzBPKd/gxzxi42i4cYG+o/yqFbkLv2/P2E3Myj6WnpYBDwl5VIt\nOPWk4G2RzL4dpgvBunqc/rkwVXlF/R+RSGScLbUb9SJcfbP+I1lBD9WJYg/S\nbPoxq43DA5EEbjBTsdPmJT1urVHXWia99i+Romar/vqvw4Xe9jSWguX9hfu3\njkDpYEfFYnrUEzLzjx6WWWq14ai/tgixRNxfAHhZiL7vCEGgSdYVu8/ceupy\n9xgzw2lTU2dYOd6Hzo+QB7Q+pN4OE7x1xnLsMME1RTdtkVKTFQ2qj877EbIv\nn7AP\r\n=s3op\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"ed31c78c6a84cb24353ffd1d406693496f090e29","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.d0f9f3f2e.0_1625270336366_0.07753904125003186","host":"s3://npm-registry-packages"}},"12.0.0-canary.adeac0549.0":{"name":"@material/density","version":"12.0.0-canary.adeac0549.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.adeac0549.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f1b92facf5deb2cd34500f83bb7828807b33f9df","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.adeac0549.0.tgz","fileCount":10,"integrity":"sha512-cayqCPQ7cCwG2WZ5QH9Pl8FCiJeVVB1flyAJ8irp3W8UvDKqiMh3rLvIIzK3KY/ov/MUNYb+kkOxJDJpxBgZzQ==","signatures":[{"sig":"MEYCIQCPp0a0ah1HI7pizu0+tcuTuB3EQl1h3JXJV85H54itqQIhAJ1St8EJaKYXWgh4H+haOiizxYx7RDrnPZQ0JmpwB+jS","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg5xTVCRA9TVsSAnZWagAAIIkP/3ORRIB9MIPr0BQRMsvq\nwvccOL6yv0i9JUjdNNrP8VzKY8rVXr2zjDM9/317pYwPs5HzNipryzQY38WB\noJvY7rF/x1NF6c3rcl1j5FBLXaQAwYvt57Amh0+UxUPBFIMaj0h31mKDprOr\n06A4QpykoYexkBY8tPVgtDuV8iW7aS8yL+eI4Nrz934jFZJaPh2bCGIRjfGF\nN3qUhqC1GoXqR1dv7FRFiD/dYBcJQHP9njU2HPDvqDqRlBKAeBJnsaxFPJhn\nDKrnz6vPjBlSL902A7h30O/JQUNCMJzQNjDSkj7/OWKGo0mXuTBtgFfOltu8\nLy5OOGJydR4fbaroucPBOlQF5u4xE/MEYDu6PQ2P0Lr2eqa3fdYEmtfDdk8t\neNZhqgSF3hZ1mcKRIXtjT1GSXOSodkH0AL5TZGsC87z0xZpxl6AxVMA8KKLx\nPZk65L9btfdVqPAEVKAK/hr5bFUsGGsegPfnNBOeamy7gGzl0uaUYF6t6bKy\nAAstOx+pRlfmDqatRtloIj4BT86u2qRE003rfQbYwG86X8re+bKZgLSvYutx\nEquV9Ws0nXA7FM4Zny1xDLLA8FZIgt9B+nn9y1TpbQzl2krVXEcHdBZiPRWh\nCXmsVQtlCd4rQZtx86APnAAPJ4EsJ/k3F6aEAiINZC18myaflskv1Z2svsSp\n4SrR\r\n=8R7k\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"a189bfd7e13b17660ad97870e074af0ee245e36d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.adeac0549.0_1625756884799_0.4990841595104185","host":"s3://npm-registry-packages"}},"12.0.0-canary.068fd5028.0":{"name":"@material/density","version":"12.0.0-canary.068fd5028.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.068fd5028.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"96b5f55a6ea3f31e3419ea95c2391a75b8303986","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.068fd5028.0.tgz","fileCount":10,"integrity":"sha512-a0c1nIjb3RkQr1L3YW3LcDGgOjwxVAeYEm5eOnh8U0HV1yU7avm4K2jxibxrzV6ShOjthz2NMK0g0DUxRw/Mgw==","signatures":[{"sig":"MEQCIFnfV9vim2L5+5TyBXzp6QB55UP/AkH9D5qDl8hHcs8DAiAMHwIxdN47bRE46ihvoJWSWapgbYPKCgHcDA4ZvdRw/A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg50vFCRA9TVsSAnZWagAAVAoP/1je4YG9a9DfeBEpBfDO\ngxtL4xgIKw8bKX9HAgB+jqnm1+s0t7/w6/EuQhXvIhsNXlXr4/hmh4hfstKf\nAZfOQY38zlKWodFLtRbMu7ncVrBE2Pe0wlFQw8d/hwbUWKp2CS51j62g4En9\n4Zq6yO91ywpcw/+GZHxXtyQG+w6hpZe4L4HNvgab7h67QeX5Za8MVta/ckVE\nC1UQKolpdssoL3CH2wjL85uoERj8f8oLxp0ifesP9Z+8C3rW6zRyEu7HXztb\nm6fmkse0jHHZnIFaB+ale23D8UrQpKNyUPN6gIwLCYaFxu7ww5fOUhI2H6ES\n2+6MR0CZCp7t4TVd33z7eshQOlCS813cUeNzDV0i7+aq0pLor9ImLD6CumJu\nKXUVm6Z69jDiFJjfbiMfKK2ganf8/h4Ou0LFlhZNseTa/RYMMsxcXbnjkwy9\nihLVMd9rkk1QS2+8HQMIo9JrkNZ5vW6RGEZG1N5Gb8HAQ3A1P/mUxhjUxbbi\nl1HQ/IsLcXY26f0MgJZqW4Qo6K4E8wPMU9TZWwQvwjMU1gcsOizyZaDrykQf\n+3a9VxwOwtZmvlnoEQRGikgfpypdC2gvW53xR4UniMe1eZ/J37zvprC0qfON\n34mjTyFBqaF1guWY4s1rEmJLLOGw9XvTX8sz5xQxojgSLjbbdNMdIMh4Fm4G\naDRP\r\n=C2yg\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"daf6a798ec3c54ddba492f33c939c41a8d88655f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.068fd5028.0_1625770948935_0.34476967240519807","host":"s3://npm-registry-packages"}},"12.0.0-canary.5dfec7a14.0":{"name":"@material/density","version":"12.0.0-canary.5dfec7a14.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.5dfec7a14.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e06b83fb0a0d4ae05a17a8db08ad53b18a8af805","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.5dfec7a14.0.tgz","fileCount":10,"integrity":"sha512-6vFlvFL8x4DyGyxVmjU/btf+TvbdK+tKgVdUYs2f5d8anK1hFoB1Rzj3wPkfmIndrtWLEP7F9YAzmxaJmLm/zg==","signatures":[{"sig":"MEYCIQCxt/CtZUvRC8/8T/Js+pgY0goky2HmaijY2rJL6i7bFwIhAKQgE6T6USeVSycu/MS+zyQ/8cOzMBq/lbz/KI5J7fuu","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7J/9CRA9TVsSAnZWagAALNEQAInPs5YqEyIMThQPZPhU\nEH206W5G83nNzmCJkqTjnHFk6/PSxMdRh36KLqcmjLERgoGXkspykSPsSUnS\nfOKoN73NFYRaG3ovgYko/8EykUHiBYy8hL7KtPo1jsVDD4Smczql6r9xgqM9\nrWbY+t22M5T3h5mfc2suI/k9He4GDJKu1ECghJg3GrD49MOLu9CTyNkY0GLs\n8EmM3ETEcbjcAP1Bt10Gb0YCr2Q4IpR2kwYAUgTo2b2zYXNY8OfZ82xI6tze\nzVxpolnJhQF4C6I6EiDol1juXf/+UoLgdB5soJ3GcDqa6rGFKWn4IB7WAH0c\nwx1vHR+K1p12vRwI0heiI9Gr3nhz9sLK/AG5/bXEqec24vVtHXphlHirRRG2\nIyhKex8876ba/RCIoXemtu9iVHQBuCkrp7FlFpqWxY1I41vJBAkJj0+1pU5R\nv7SnedC2jeBj4ljNoPVnVzD24uFKe/vIU6NTSPIEp3IggKqosfZTa0OjuRNZ\nUT8pm7U6frAtUBULB4Wm2zPx1SlhYsfrHcRpPQCEMx3p+fiWC5PmXvCmLrTG\n/TzKWAqkuXu99jFQimuoxkja2WqxQgLet+DMu3ZDxRtMxXKJZ0VCTc+e/lJj\nsfqo0y/MzPKl10LnMhxkj1mlOGWxcWUy9Z2Vivn4O0UrKwJlpYMtlNw9In60\ns52O\r\n=OHmh\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"7295656b25be2c03cf7ca7ca800e7dbec4d9b531","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.5dfec7a14.0_1626120189277_0.051260245173579966","host":"s3://npm-registry-packages"}},"12.0.0-canary.07a73750c.0":{"name":"@material/density","version":"12.0.0-canary.07a73750c.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.07a73750c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ee9acd5c842bd680592b0d99a6831ee35d3c5ced","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.07a73750c.0.tgz","fileCount":10,"integrity":"sha512-Z3UZ9ExGxBEWXdmPLKhgtBZ15lHggoe7LvlOZPLmdE4NFCP6fwWA7c1zeInlKP8WhkrAAdZeihXMTIJbae1EcA==","signatures":[{"sig":"MEUCIQCicsDz0Gfyt1yBO/cx+oF11djUF1oL79pQO7vOqDUOOAIgVokj+cv/8eIrOuvX8ahjkdZuEJFDpU4YUc/BV7jRROQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7KT0CRA9TVsSAnZWagAA0ZYP/Rwu1hDr6FZcasiurUud\ns53oWvHSD52Len+4JsgpjWwCDD901m0B/X7C/qJmz51mXUJxFDwNQMI1W4x+\nC/IpWR1R0mCDfeI2egI8dep9KjT+IKCishT6HHXv8ukjK1fNuiqL86ViBGP+\njB+9RPHX+WI0G1R9wq9LakDfgEGFDSMsSYXdlP6oh2MGXSqOqriElw1TefdF\nar11xicwU6NC6/7B/hddO79f7mR8nA9zlRNRneaaSc0TNcgA0dNllMVkFa4l\n6YOxXJP8cd14li5IfOBswTHVAc8xtEd1OxUssDRYWGfESfBcXkHxGU9vK/kY\nWBuOsjLIBXu3aNdXYr6OEidLdq3Ab+ydOogWm8w9gpXoz6ae7kr8XwiD47JE\nZ/PJKbafB+InJvRKZGpYHckXspFXe3zeqn5gu4/CFn+Gsa4HnStD5F+TGILC\n0Jp8mh3382OmSksDxrC89mJzHmc1gGsgKnNWF5dT+thY1SP9RxNx+mEny8df\nIhOxTkBa/+bQXZbdo1EANUIC9/SoMC+3es2rtVb1Zmh3syyq47jpus1ClejA\nVtV5eDhz5ieq3uFB0eLLvpgrcjTRjrgKNXN04ZHh1L9rC2JiKHpjtvMloQur\nlMtCdC1xQtRztiqexMqEjPGJpfnNjpaEuuBtxunRveZiSvuEVDLER4PWLelr\nDKDd\r\n=5mee\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"3534c8199752b92a52696d2065e73b8e4a997195","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.07a73750c.0_1626121459895_0.5564941941990802","host":"s3://npm-registry-packages"}},"12.0.0-canary.3e4c6dca1.0":{"name":"@material/density","version":"12.0.0-canary.3e4c6dca1.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.3e4c6dca1.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"806be920ab9eb766d4b212dbd05940a70990d1bc","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.3e4c6dca1.0.tgz","fileCount":10,"integrity":"sha512-B+S1oIkuDzdeEIGIanEgONgILsuSg1tpN8pk8ZN6NAbicxIDc1MkAN81ibiYEMN0JEQM0mBFb2s3k09fp9VQDw==","signatures":[{"sig":"MEUCIHdeH8JKREGGfuXlz//RrDzDUGd3fyDdHSX3H33wUWCYAiEA398NB+C1BQfg8U8Uw1AOYdR9NKLJgfvnlS2IeA78PTU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7PFLCRA9TVsSAnZWagAAQJAP+wYXSY0kpv+JTYSlmpI1\nUd34JrCovowBpEkpDH8yjnz5vxbctPNfI8ZprIfsxL/mOqNF78AAq5/x3LLL\nfASO2RmnDKDcCFDcsm9RSBclx2U62rsUW8Im+tmFhGX/qTuS0sEHzobw4rft\nxuEYhqRCK2fRAD24Y6+wTN1t6rj2RgLDT2pyOQsfMbUYiM+ldOHnLGwOzIgE\njz+OY/UL2Q661NWP604wagnET/q8yyt7rNaT2mlJBRsBPa+kJu1wpEZKeLfh\nTrI1ZuBoaP0Ko4BnZo5LQtfB8Iybc726jOp7mWezKsrvMW7LXzB3oHcCChpj\nZRCA3/DmZbvJPCPc9fv1/S6aVRUQQco8mJTCD9FJr8wqOrRdW8Md3oJWzKto\nqf9wpXHNid6mpw7gaMRLiWAWuRgfbP8UPFBplnFZ7pLeLRv5G5BQYmDer9Ov\n+JRiAVj0+Z7C12AMG4mfdxomlZRhJ43Ct0dxxlq2j/gDWhTfq1+n6p9S9qv+\nAcfF79S8VsdYgsMfdES54qMXYhb3ZGk+4u7F25idjsl8vnmqlQqXPdfRFH2Q\nbGecrxbaOwrgT5CLJ9weUReA2sMajrbQH8Avjlo11fYt0UPopQLQFEpwNI9Y\nB/ybPMm9p4NpVcBXG/Zydip/faaORfZSX0UXwE5js0HsRbdoIQ36TzC6w9Gn\nKfQz\r\n=JVyt\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"1a6a8bc529062b0303c0df830b36d3110a389f4d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.3e4c6dca1.0_1626141002939_0.60284155857301","host":"s3://npm-registry-packages"}},"12.0.0-canary.ea77795b1.0":{"name":"@material/density","version":"12.0.0-canary.ea77795b1.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.ea77795b1.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5d5828f9a35f1740ba9646bf9100f3f10b5f30c3","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.ea77795b1.0.tgz","fileCount":10,"integrity":"sha512-fx+OxEs4ljghjLk2ET4gH1jIssnqWJk951Oqmn+zKPpALFHQoSLMkvdH4iYv0br48PLQvq7tPIeSx9gyluWWfg==","signatures":[{"sig":"MEUCIQDU27L7qRzu7YvBEJubpKH9HGAKKltv4F+7HfUTaGZhBAIge6TjK3VGRKdDrbQdR4peR/a2nuTYWJjlkaG6As0pMoI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7bWuCRA9TVsSAnZWagAAfTQP/16zV+VkCrEghNFf62oL\n0Wg+seWcDOLYEWrT24qLw1GNKfB0naDyPfG+66YET+TwgZzipdIemlpaIkj6\nbRHGgKHBTR5mffGkBUouy0JxHr39L2KFFZ6HNWtFl+ttokuY3GorGhBHMQat\n8J95N0Gr+h6OxQlWEw5ESvZKdQTbXLH1qBH/eXhkKZQNEAMwxWev8JNsNDP6\nddBdgohx4T0RhdJULV+1rBb/ab5fq3CltPkikwYHCAV+oeekHG9B5/jVrEaA\nLUPzsJeq4zmEkKsB6fkNigJ724QmA0ienlc1vhHv7CF7UeLb/gpIyJyU2zd3\nedplovE6Ux3jvSELtuoGWP+u4pCaYjkSNzOl5eo26QZfHTzKaKalIql6IN+v\nCtpSHfUq5xJSpms1mrXa76M0cm69c2XMQ6cZi75mU0n/GPIiI74Ou3q/JcsH\nZOo6LjtOXHJ6ndePiqD41at6UyiXP4sJO7kZdLyFimQdTh9uXA4etnacjIXe\nSTpuEn3yVtQmTPiVTNkP8Eeel12QpycpHWqmjSXNfJ2Fy2idX9ExSFdnY4Fq\nRg42psGxIw6RTWNE646IOqPjJRUctQDiYjtzo3XmVbneBlAONmMDAPFRQIGI\nVyjIg5GvRggHdroOsvStYch1TF7LAZA9/Otj0bWcNy/NoFKkwd3NB9emgAyf\nomYH\r\n=iSvT\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"830444e6567decdb85bd9b22a92d5f85b103f107","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.ea77795b1.0_1626191278185_0.9683725641466117","host":"s3://npm-registry-packages"}},"12.0.0-canary.15a179fad.0":{"name":"@material/density","version":"12.0.0-canary.15a179fad.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.15a179fad.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"40589f4080c7b87b5b42b4ff30f6d8e711e01f84","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.15a179fad.0.tgz","fileCount":10,"integrity":"sha512-1B0NUykF0Zr1SsAbDTXiIdCsyCgpE6aOcgrosWLI2t+VB5Abj9eUwRf0OFlguGmBCrTQatiZQKw4bI2XG43ppw==","signatures":[{"sig":"MEUCIQDUNP7g//MVCirrDIC3kI6r5qSYdgrWNTZliT99xQejeQIgA8EQiVyJqzD5VqrqFY8Qgcn6OpZXmTzXmzjLcQ3x6ZE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7daBCRA9TVsSAnZWagAAT1sQAIuNpbOlIxDcXcuDid/Q\nWd7qz+PquJIJOO746i8FxctW5MmxyHWG01YPdtKzIlA3nmvmDpbcwvmXxCQ2\niW0xLoVFmUXk+Ce1TjPLX9QV9vNyagD0r4wFMit3Z/nI8Mcrk7wPdGw4wTc+\n8p2bVeh9+87S7pfQXTyZ98MIW1Mn9npzmZ4JHJePYkgk1wy51AOT2iDdmQG7\nF25R5UquJKUvVx98MJV1uEX6G5guXNVfqNyaP142xxbJXEgp5lMFtSi4yRmL\nn0/JAMazXTgnkGkpEe1C1cFa6DwNjG46f79MjxtDXx9e63fV8JyX982aYWR/\nIwlRA+45gvXaTWc34vYm0ssHRFYKWtP7VIYGtvJ4P80s9nv2VJLmse9rJ24c\nobnSMVBBO8GMvh15oUzbyXHR4hAQ3eC0is18WtU0BhDVTQvwtGN1uqt7p5El\nS0AR54oax6ANwg7G1vsZKNTr05HPN0Ud/CC0uJnhXLxnBuhOkGFnjKKl49Zd\nvmEsKhQ07Zk5VbLE3NAHgL8H01dYK/6UN+iCmMtM9pNBZtdCrbMCBDilK4iX\nKHTOolu1BgvIAtttNX2qSxuJDG2c5l2F8yTfcshq9ykM3YLYempOJCeTaaUv\nBtgEvBNhqO1tgJTI8YLVJzTb4b2tBZHEs6wU8+8pUkBvKcjUjhvX81PS+vNi\nfqie\r\n=wMoZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"eb659691c3a77be825ea082c434c0b24c53cd610","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.15a179fad.0_1626199680920_0.8518345477577214","host":"s3://npm-registry-packages"}},"12.0.0-canary.c73142a1b.0":{"name":"@material/density","version":"12.0.0-canary.c73142a1b.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.c73142a1b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a634e1a2f2e5966ff9fe1b3c4d0de7b21c7a9394","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.c73142a1b.0.tgz","fileCount":10,"integrity":"sha512-fkBT9HqGFyMpwJTbjARBPgYx95nGmTvWBB4i0+79x7T4r2VANEsjllMPlOt4gw5uXWn/OetEmMA8BoOw3Y20yw==","signatures":[{"sig":"MEQCIAbnA3k6IBaTM2YXxmR6keK1auXTYO+TYcce4vbVpBxpAiBQW0qfbniLV/7oAsh8bdSDX4vGRsXf/TJVfD3MbiLY8Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7d67CRA9TVsSAnZWagAAcXoP/2gkeKWS657jna872spp\nqF+8UliFaHOGiJNhYB2tvjTbxWT5Y0pAxLvyHJRj7vPX7+hV3oLrbXh7Rr0A\nlcyxZA0mz2wbk1v2Y7CtDBNDa57LLCpy08jWQtIAU9EYTxGC515Tr4AsQ2xt\nBps8kkrm2wdHkPeg2wShA1wcuknXb6sHxbNaTT7EmaVSNwREph2vG4EctH3Y\nXwO8WHzzMmzVyTCbcWGXjfv4sDn0+stIK83dx5U5hg3jEow2+wWZny+rsobr\nTkiniAnCHGPXfiw//s2HfigjUlgQaoDeVu6kwrFbEn4VqpLk8bl3BuJJ0D5M\nkoKaKv7idDvHdZ3bqWjwZ2KYKUBf4KHWhyX1jf77rbUEK9LbcgUrOA+356O0\nfdHoiWDxFCHzTwssLSE91HKIq5CdP9/1RUTN6MJP/B34dKrVNFITz/Am/oM/\nD7Xsdr/SxLTzh3id3kk6di/+DOSrPl3I4li3taCE6wSscgQeiKwXlQwrLWvS\n2aAz11lyi/CGEQUtqRE/8Ylx43WKye1yPi72wFudtxgvJZA9kMf6fGojAgaH\nnX9/cJcy2pB4iLd3eFApP5TCkbn3DaoDMAfewiam4xU13CmzLvFPIrw8uIL4\ngDsJTCqd5/jpsEPJhMJQPBMbYsb5NcABe+obVqEUabBiejWEjz5tY686y0cq\nctfR\r\n=5V7D\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"037ccc3828bb7b7c6f3375754059c10c231a6b60","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.c73142a1b.0_1626201786806_0.8170980654967432","host":"s3://npm-registry-packages"}},"12.0.0-canary.d923db73a.0":{"name":"@material/density","version":"12.0.0-canary.d923db73a.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.d923db73a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a77abcfa899811d963d2ace29474eb043c8cfdd3","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.d923db73a.0.tgz","fileCount":10,"integrity":"sha512-tTJ2K5aQLU4xuQziPTTe5N0ZCv4F68bMk3LeaqIWn9E/8TScZJqTf2hWa1sEV+fB5iRmEXp568ie8TKgeQ79fQ==","signatures":[{"sig":"MEYCIQDv8yHWxu0u7XE/9GSvUtX9IhfE6Hfm8sL3lU1NXY6bJgIhANSaL7IvaO8nxa/N5/n586/38lPZhnWJC2DpTg/66VQm","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7f0kCRA9TVsSAnZWagAAAFIP/2U9D3JTrhG9ZX7amPDs\nImPyA4+wIEzIipSMNdsbQJaKWckMSj7UbgfwtlrbJUS3CN7r0aAiQdwyePPy\nOkN/nFl0UdJwoZ5JHACKK2w0H0f8/bWifpWaDhONBK5eAEybIifbmjFwSnBh\n6wcQn16XsFpDLjQLWrmkTaiGEXJ2QQQnoukF1Q9J3jplpPTNHN+KxfONhDc6\ns7FqS6/Hy0JInfn3lGILVQuKZUPsjJQ+kqtQ1KeBLQhOlRL2cHs491Dl94i8\nE+IilAAKKKcBxC36SQectjJUvyHdapHI1+TdtJPZOMdhSMzNXl2/sblW9UV6\nVX/YpxDtMqAu5+d36CPqnJJMpF/VUfS6DSv2xSfgTxo0Hgv+0GHQRLhhS0hN\nm/kDjTMyt8FwV4+EJr4nbK5USlxhcOl8oeQRS++9soN/jGKJffNSLp0pl1pG\na6NN/GqGuEndkZeep1igvRcU6k0aqw9dMQMvKCd7MSyPpMNuxm8L4IglV1zA\n5mIrxisQUnCP6gzbh5qX3K3SFaIA7hBDo2W7txBos4GwC7ew9MhYHD9ufDIH\nyo2t2S45cHm2NY+NLqgllUMJ7VjC9M3vWCP3GszUfUaVUi77pb83LWG8ve9l\nsDShbZ9n+Uohy1VKD3zHKZkn5rL4SLTYr+IFIgZEsHQRW2Ic4r0eGlbLXptZ\nGr2V\r\n=NCRK\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"ae010eec116ad324d7e442d7ffac5c8ddcb9edf6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.d923db73a.0_1626209571839_0.8781212006500243","host":"s3://npm-registry-packages"}},"12.0.0-canary.22d29cbb4.0":{"name":"@material/density","version":"12.0.0-canary.22d29cbb4.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.22d29cbb4.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2fce30a88ad93ddf4376e7a9bb481119c954965d","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.22d29cbb4.0.tgz","fileCount":10,"integrity":"sha512-uCOzDL3U8EAOU6A+3lwbys6lB5P24PwEsNoe5YoB7CmkNS+8LLFPdemp4dMdVY2xGlDX+McaUOKJKmFub4cPUA==","signatures":[{"sig":"MEYCIQDlVDjH/MPDAfH8VGs9FGe65oKUuFp0OSXlVUEcdwm0BwIhANFceFXGTPtRFLkE66EImjB8qhR18/msiBCkbVN4Q8oC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7hhwCRA9TVsSAnZWagAA8OMP/iPjrigOAqvedD3/Ejhq\nZD85M+YNLJXrdAIFxlDrNC9rSg6/sMuw/qJm7VbVdN3LUdY4YjR+APP/kf8d\njJNnzPjBtRArHHAPtMNiAziBiZ6nGUm6QvMDpGS1mSiNaMwoUjd5BSBpBU3C\nY+MsgnL+X8pvCFxoh3KZKyWXKqbLrJ912l68sDlE3tLuqaj/4bx0LYqRx23B\n+wewlh30AVt/WOZQXAwhc7AA1AzX5KZxcnPssrv+fjcwaNrwzl/1uRIRGtYT\nLHASdaQgX+bPcxvMxFwR1BRsox3eodZu/nyEw3eRRoFdl4QIN4eygZY3DcdQ\nFug4JMjErgLsPxWIDPqU4/RgM95EzL+Q5vFiSuE4l3njXtATWOts8cJBD1f+\ns6ef9/C7OsIHEu7yKJxq/2J95qw4YTbE6f9kyTfKgG4uWWr5m9O1S7O1GZBi\njQtK1ifD+DVsTW79CUCkok0AjG3hUm+O0VQK+IBURKgQbLiU5PbvVBkfovqH\ndzt7qaJ7BlY+TieWW1cM00QXnDVZrQsXHfLG/JeZKMkVCUiNacTmhUPPZI9v\n+3iPwxBxmfCBiijkfuJMxMEQV+CZxQf97ANiGIS+iztWTcXiw4rFCPrZf/ZX\nGamgDe6iuhgmT5ncV3ARFr/B8Qpu8TDEy6X2A+SgqQPYf+sJm1C/IH+XKDwe\nZ3CR\r\n=46hH\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"b37054450964af349924b81bae43ec6b3beb2808","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.22d29cbb4.0_1626216560223_0.2717838522916849","host":"s3://npm-registry-packages"}},"12.0.0-canary.2749604bc.0":{"name":"@material/density","version":"12.0.0-canary.2749604bc.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.2749604bc.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ee42a16c72cf52bc85f3319b36638d87d1c4b783","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.2749604bc.0.tgz","fileCount":10,"integrity":"sha512-lCgnpe35/PO7Zpv6CfDVSZL0CalH+IPUdKZbzpA9YodYSKL8LL+BZj45m5TcvVYgXxmpTtNfNMfvXXxQqzsaXg==","signatures":[{"sig":"MEQCIHj29Ktjy2JDboyiz+RZjex1rhBRuGCVxjWHt2hWBYTWAiAeREcltiy9g6hHtPeXXxm4Yoa4o1pKZ93l+/Greqcb7g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7w70CRA9TVsSAnZWagAA62QP/AvFqCYguzd8cAEMLTXP\n6qKVAkdEm4GNg7zZN7MNErR8s1kE6CFYRifmL2rWkfn7OVPlr6wvdDvTYdxM\ner7RpA+Xa6Ra6sMUq/VobFXJqcpHF36tQlja3o2RYD0nhior5NyzMxZ6Mzx1\nbQqOQt4SQcs3E41myNC8MNGMm0TssTjMzA2NYdLvU12bcDJR721TorzadVOp\nFoBvzJmLysQOcuf5s3le8iXuCNRY+MWOLb4SIJKgRmICjuU7LMo1cVY9xDit\noXuT6sCS/XWOEaeNxeSOFWMoz5pgL9A2f2/B/X4T6CwCi4YcCFCdZYw0lpzk\noEMvjlv+89BVjxP47xxpZ2l5arZ3rZ4mYuRsd6Y0yE6g84B3ymIJuz3DvSYd\nQQKB4rxuunN3k9fJdObNqKzytNOCXe8hhGRCIT5W4k6lKkTTAKhvweKUe5Qu\n6mNSV8v4mQr2u4mDBxnZG2ZMzfkz9vPkkHme28M+BlVkkUYOZBjg6nncvIMs\nfqafDgo6qOLPKli4bUUQDpY+8ox1PdTyq5P1SUkuTn6cnRp2o5+YHFJxhwbX\ndtmMPEJtYdmFl0eLpEZOtI8PSOQXUj47lpKNHmOSZyDmcqim+6shgUwM33PY\n2mbGiHVuww+TXmM8Rcx/n1a1HcFDjfCFf6JyZhs/rG2V0bbriRNNoPn8RMGg\nCfSV\r\n=oKsl\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"58ae4287239fcccbe4c5dd9259164a0660c76f85","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.2749604bc.0_1626279667998_0.08458550524324093","host":"s3://npm-registry-packages"}},"12.0.0-canary.e1703bed9.0":{"name":"@material/density","version":"12.0.0-canary.e1703bed9.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.e1703bed9.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6f73f9a73dbc607c20f06a4dfa69bc041fac9a31","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.e1703bed9.0.tgz","fileCount":10,"integrity":"sha512-vovCUk89Ji+G2L60LvDB8rPTGQdoeVwJB+U9J+Ak7QNN8GgnTmqLI+AEhXHbPgzaMB9w1CtVMqKByJdYxsOg3A==","signatures":[{"sig":"MEUCIA/CqdPJ/NG7/tm0QK8dooGBhcr9TDdPRnUY+BGjFf/WAiEA+T45Cp5ERBVEvw9XttgL5Ye5m9oU89zp7Nbj4ywKNQA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg71tJCRA9TVsSAnZWagAAD40P/j4EtjcLg9siKRbL/4jb\n84jLjExYPPmR5nj59knBZHTicitrRd2q5gpw+ymuC8XpuyaiSc1j8nvjb3EV\nAFqnpdEyWLBsEL725ZZHBerp+Ts0AY+NzML/IRkPn/rhQtOqXV6nqHwO34xq\nZqg/movAE4vsN0XSZiBxtzjhvDSkm4RPVJGZbZdBBFdJnYNTLcdU+LnFPV3s\nmWZs3qDGjrEBtn1iTr9MMSseQ2Lp2jl4Zlr7wtPwy3V+Amm2FazHSLG6p6HJ\n2G3XXtBk8rtfv1ndC4CLtlUrAPdJ6zuesdad779LMr8F/zvulBnHJZnGlzBP\nOXSpPXu2Vdw+5Rz8520LyL3dGSnKBqOgR2woM+gvJ5Dp9M31AC5hEaE1W4k/\n4/zCemVHiStZR52ffJn8+toqB7J5IYcYuA1EZ4goWUtKQeH30CMhIGVnSjME\nRB/H00P5hgnNQU1rh4GjNRPf/pn8raM6GYd2xyQxFIbONV9lmNAZImZGzmFI\nFQj/cP/e2ZWjGRmmjDmBcbjq7teDSKiBbcrhPHIw6UDA4nVENAMXBNPmXOVn\nYGISSdLDvl5huLz0M3V/Fp0mmIhLOT1mKDcXZQTLUhMQojo97q4bH5bvmBSt\nY5QN5rcrHE88iXYwvg0P9UyeuhsrtwTwmnpXjfTJyTPQJCN3ilGiTJ2csZGC\nO4Zh\r\n=Qc/2\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"ca9075f939dcacc82290fe2b01214639958bde93","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.e1703bed9.0_1626299208852_0.445310595781073","host":"s3://npm-registry-packages"}},"12.0.0-canary.de48eff0d.0":{"name":"@material/density","version":"12.0.0-canary.de48eff0d.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.de48eff0d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9df7d5a08d9c482f37e71227769687a0272d61d7","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.de48eff0d.0.tgz","fileCount":10,"integrity":"sha512-aMFd7INP0tC9ohXsm5jxvnYV9WlIoYvrwXgnyfzz6yEbQH48xER5xJNoNLVwfWMPjyU6rL7TDi4HKJ8kEDXAHA==","signatures":[{"sig":"MEYCIQDouAuoXdJqXUhWG29ST9rW+N2RRg7NDcSEUJ/YYs8aAwIhAMJTIVJTVHxtctjAnN10OQOAp3/EwsnNLGwjI0qfNX5D","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8GsyCRA9TVsSAnZWagAArncP/2WwCSRt2GI7b2DiT7+j\nZb5wx/uoLpBmNTzYNAkfHhZqePUHnVG/2x03OQhihThsOKLha0zCO5S6oKPL\nwxAP7hTwQ/HoAYdXnvE+ow5gXyKyjwy+7imPaOksoy5tZ4mFWb8K42l7WWA9\nTZ0LP9OC3uMXZt+hH1SQaCQ3kZ33+EL6IVe0Dz3p7RdZJbMGqoQzP30/WbWF\noSJbl6lhqj2vtl1Z5zxEAV5r4xHNr1MNJ0nPdrE7D6lI3TmbdsxiYmZfbN/t\nggU4NF2O2S9a1y8G0+Yl8yhlpPYiIR/RBfD17nh0J6j9tIvMlBrRzIze+Rbq\nddfF/j3jLe7uwiZ1qGG3lpd9bgydiQwEMGq5cZP93xp5Qdm7Pz5qyw2HzAan\n21J17/vlcacECPmFMuhknu8M7ZH+G/HuNLZL2Ltum5iJ1m+MngAyy1kr5PZo\nNfaW4uoo0i8VGtQenhl9CgcZHlMMNt9FTHY32mVsRxxX2NSc7wVNKVLrhe9l\nmH6UWHB8781zy1CkFqopkMaF81L7HNsjaF94uXBCbQwyYjQiZ4OO314ub5Mf\n/koWs0RoXTxayqwta8Lo6I6V1jyISqeYrYy8kSC92r2OoNGvWIM9ayHwQsVW\nOixaPMl87799id6WwCQA+hvMw/uJGF9U5jja7e8KWsPEgMOMeEh3RtcEWOjA\nfpeP\r\n=Wwv9\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"121530dfc073c7b24dc1cb75732a0d4c0e6a3f28","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.de48eff0d.0_1626368818204_0.08479297308476075","host":"s3://npm-registry-packages"}},"12.0.0-canary.4f060adc5.0":{"name":"@material/density","version":"12.0.0-canary.4f060adc5.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.4f060adc5.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0294e5b01bde94b34b31793cb3ca3d0e7ffd36ae","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.4f060adc5.0.tgz","fileCount":10,"integrity":"sha512-qD6/9hsQom8EZHfcyY6w2D7xdTVLbZRzkgYbnaVCC3Xy/0/7i4wILKAq6HfV3xf1OEjXU4AVMvRvG2h3eEFcXg==","signatures":[{"sig":"MEUCIQCb57xIZfu3LhVj1GoDZlFlZAbzOFFr1NoSuTvj/F2MZgIgF+s8TFX5Wbrg/kkjhI1xoG6L12VTCnusE/IHkExOuX4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8IqSCRA9TVsSAnZWagAAoPcP+wYiQ3ec+/0mfScILUwn\nMOkVKph0+Sq53je29tloHgvelto7b5NRg+v8MsE4l/o8XgNB1mSHM7pWDfzF\n36CzY4ulAkZyP5tbgXyUWFohUnn/0t8V9/MmwvMDzHVcTQIP3YMtFt8dTFAz\nw50YfGfuirGbVIJ2UnLPN1CCCuMCsEdkys0ksHgp1dNt8lKl/rEkzg0XnNun\nj2Iid6BCDdHwm9TVyGUksP2v+xZjZKVKOf/adLdeFSK1CX2wbPPH9hIBeXbr\nHJnm/0Otso7e40x3COJHgigBO5IU4UPXv/HaNCH72SZWqg8f8gLURZZVrl4U\nDe6wGuaHm3rbKroWDRpWt/cU6cs3/dgtGOq1Q1KKgqG6gMBcGw30WfNAhM8S\nv8m5M2CdBGhXjL5N0TqbOu9AuJac2FF/DBvR6F9FCjGXsKkVOhR6KzWj/YNn\n3dGXGzLSu63z4YXaPzKFif+2wwio95NSWPNWAQHxxBEFnWIuo5zhGDt1b9ek\n3j5ZqFAVaZGjTpBi0pqSWDGMfq6dKd5tetmI18P3v4xyW/KEdsGKD+SplFe6\nWp9cisemEWV0tEuXCVjUSqjWGRQLdymptpwIlI3rw7pnVxIrttGvjkWj885+\nnqYC7sxKZVBORAtIt2dD4BT6m8pkwylW1jQ0f6O/5vY1Uu+X1NXfOv0UrHzP\n31kd\r\n=1npb\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"2e70b8cd653f195a01f93c3e9928feabf39fa87e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.4f060adc5.0_1626376850831_0.9138301555860959","host":"s3://npm-registry-packages"}},"12.0.0-canary.bd25779b2.0":{"name":"@material/density","version":"12.0.0-canary.bd25779b2.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.bd25779b2.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c76d40b157e201dd3bf74a10061711c9438923c2","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.bd25779b2.0.tgz","fileCount":10,"integrity":"sha512-D4FY0mt7kCkGfanVMue2wmaNZCgEmoF8yCLQkt5FSlKvFV3ywUz9NWMAoLRx4Q4gYqJZBulZuDSaiquyicw1/Q==","signatures":[{"sig":"MEQCIGDHgkuUF+EMrKaU+bBizZe6SvvUcpwE91C2M9+dJWoQAiBM79AAkmDFyUuYcaV4MAdayW9Mt8/BBLSEnNnNEPJuoA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8J1pCRA9TVsSAnZWagAAuQgQAJmVln6d+f3cQ+/bcwvn\nUqP2yszJXoPCfkANx6t7SxHgPx+jsHpeA0kyA4GMl4iPaDYCdGNbXTpOUBSV\nJ2FrIRnp5lmjfrJ/jrREdMKS8gjdeJ6gjjgEpjpJvGyk+83e5UmGeILtIc8v\nVQqC/QtKa2uMDC/TPXEwz5/148HpqJwPnivQCU5or95X2mOadJyXHQJpX6yS\nOELLuDy1yfn3b/eXXo0UgUzkChpDBTfVVkW+x++BdFNs5npGUl8qNLFb3zx+\nAZuNgcXTnqBX/Pmqfvd4ERqoFoXsbW7dnBvRXSRV75Nbs5HgroVbEkTcPWog\nSgEQifxjScP3h93QoRkY383oIMx28vuG4D4ZrndHxl89xtdTSCaEAWvso8bt\n6TaopUv9H8lA1TceN8nYmczBzuCSjRaJHveZEiiNlPbrA9HULW8aQRnGNitg\nMY2W9V45/T3CzHGrpwyAyAK2VVQrs0cd0P3kFWuYvx7UsxZKIlTlzOqPztZj\n4wo9YAaFhmaTzoZQcANCZgSpfUPtbVTShAwO0kwQOpV3oGwMJtSqVonecFeK\nWJ9vgJ9zoyjiMXq8wbZ7Px/t/iHQEWzljYMVAj5RimrDEWKMv/cW1S/+V47d\nu2PTgHJQzyERACCW9emWqslqEO++z9DX6NJFwzpwTmBJR1ArkpUBOhMuOT1J\nT4pE\r\n=CYTB\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"3ea8422325f9bc5f9a356842191da47e282aa4dd","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.bd25779b2.0_1626381673353_0.1806254657579014","host":"s3://npm-registry-packages"}},"12.0.0-canary.9f68a932e.0":{"name":"@material/density","version":"12.0.0-canary.9f68a932e.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.9f68a932e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e1aba9fb3242c3e94223700da4cbf6178bfe3170","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.9f68a932e.0.tgz","fileCount":10,"integrity":"sha512-HPhZJ1oiCobba2HKxDQ5M2RS7bbHBgTqYMDtx5pPsWiO6dVGz2eGTv/R2hAcqTBPv4HhIaAkSk1zfmAwU+y/OQ==","signatures":[{"sig":"MEUCIEO1IIc8xG9H/x0S45TuYgAZP9dFv/3hnKZgwHT9zy0BAiEA26Jr++VxUMesT0LnTw/fZ+v+yVu2FUcimPSMuxyu8P0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8LFFCRA9TVsSAnZWagAAkqEP/0FBYZ/OQFhdyFat+PlL\nu6FkA0knNj435lDChomqnluufvKo3GCiokBitS+rm3vIByeJmHTudvBZKxkp\n/dDbig2aJEb2C+cHagA2w8fjwK1BeE+jobVpee5d20Dl6QllrKC2Eb5OwIrU\nY/lj8AdjBTxnuPD9HOkoqha0p64LXtSAZ/pgBlfEhtQYanXTqpxbItmhzfra\nelgHU8PAO4wop1FT0rzHFFERwotDDd6Qi8TS+5xjYz5PdmNJs2PjRKKJSRuC\nm6XidGeC32OuNGYTw1Pby3x1Iu+b++vG0jf9mVZsJiMByT+CEppNaAsm+h5q\nUIufm6fAIWtdEQknfBd7Uq9ixUO8nAc+jIJdPr41itD4HpKKY7+fqllVKmO0\n70IFcMe1vQ8nT4WLQ5baDA0ZanhJRXDlWmdHVts27FvMKOxcTaOxcP3SQNK3\nOFl1tWI6acQGwLqxVMPgAERwOAlSQHHkBMswVFBBSLGeiRThalY07+LJN2Om\n1p+Lo96QjV3BpduS0F5Z0DTe20P9WsQyV9o9+NejQzzXcRRKddGmP0HSedzL\n1hKoPUOhtHcGrjXAAv4PWaafpDvIonhVD9lnnFvqLYNn1OA0TupN4GW4gBHu\n/81AH3GQjGYlsN4hZK0W+kSMRuv3FQDn63qGCDHyNiE31dOrfuD9OWnc482A\nT0ri\r\n=5fkS\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"34b4e5801eaff79707e9f2c769df2c1a34bbdb11","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.9f68a932e.0_1626386757498_0.7757446391310592","host":"s3://npm-registry-packages"}},"12.0.0-canary.4eecdeaf0.0":{"name":"@material/density","version":"12.0.0-canary.4eecdeaf0.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.4eecdeaf0.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1cacc0105f13d04a263a2d82e1fe7c610045cdef","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.4eecdeaf0.0.tgz","fileCount":10,"integrity":"sha512-9bMAmwZFdViBHZPWp4TvlA+HQMuGT5o6hYUlQv7cUvU02RUDSlEbdWee0gw9HjcsnfUYE5EUkyZFo1DeggOAQg==","signatures":[{"sig":"MEQCH3TyX/tpqDETW+DEMOtLOByB/D7z8MsBTCE0mxWRkf4CIQCmuOfZR+0PgCq1KsfpabH91L0RTHLdCffq++cvE8V0aA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8Z4uCRA9TVsSAnZWagAAI9kQAIyhMDLy25L71FO4RzZz\nljvI2myPao6LCbVShZuAvYc8snGrlNouA+1gXl878zlGpmEHLwc7O2C/E2GP\nKnEs6J+o8ND1Ry2h5I6oYR6quETerVs6avJcuWY4eC4gn50OzSHvWRCbBoMy\nEoRPIxLCszpLkNY3/Z1PXm28C/UQww0lVVKgf7LmknoRyuj25ZNBM97h9EYa\ncSwiL4p6VmOLvMmg99Bik9yLtlvvUV7rZe7PXkB5PwktIsGikxmbTb9V+BHa\nZT7sZHXH8RJ5JQdyn+CzzY7oBc9k3pENkbpd1k3Ha3EShpQyKfu2SYmR2EL3\nv6SkYY/vyXYv8H07PxqyJ/8hySzDejpEIx7teJq3V3uQWCrbr4uAGKQjmoa5\njZPLwnswubB1aQxHpeMK5fR048IDKHQeL5oEL6fGIUoV5rJoQG3sRM2E7CMF\n1b1CMIWAGJLkAxt93C+8g/TXFYMwAS7nTgVYju1EUGwH9PnBd9EZ8Ns6P07M\nOrd117wp2Y6sRFiTV57FUhZgQxgnBtnkfpyf2qxYS6vt2CzMZ35gU3+TgTho\ncpUn10QSr8xj1zR/q/Q00ZcYMM1XTEefCm49UObPfpHKNYG7jaj3G9h6XfSP\npiVVPjkQk/pBKWdp1hm6H2j4XrtUFVD8acP+7zwJBb3RvEIdcW06O5ySVVJ6\n/881\r\n=q539\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"89a3faf78d32cadbed38135c9ae10ab1f3c8e9a6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.4eecdeaf0.0_1626447406532_0.6713363196624709","host":"s3://npm-registry-packages"}},"12.0.0-canary.7239684d4.0":{"name":"@material/density","version":"12.0.0-canary.7239684d4.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.7239684d4.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1b047612a171b5cef5ea0866d3fd487e0e451d6e","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.7239684d4.0.tgz","fileCount":10,"integrity":"sha512-Du5tEoMWhSWcdGw/H/OgvL/6d1sgg2K9DPL9Br2QSNqWPg0FwVUmibZaXu0xBY+OCM1+lXr9pn/hmt2RvBzMHg==","signatures":[{"sig":"MEQCIAlvsfVgy1Zmi7tUPk7iTVmIuJM4q5hrdEkENloxufPNAiA1yH+FK9HfVVpuGu/CGbgp8fgyDoigYiAqGcv51kJylg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8ayICRA9TVsSAnZWagAAOQwP/1qXYEGXbNwhymrbYC4I\nWD+MV1lsaQvfX9yewq03si2cbb6C1Ug60cV+gr7r6pog7Z8zc2DM28co9KZh\n3W4ZsA1kZgzJHbyd5ikr9nLACJkeY6oZ0Pl04r4i1sDNVjCtoH/zx1WUUQK6\nbSb6VwZro/Js/ritpyNQYPf7bZkCvM6+1cL6xE2IZu+I3JM4XbduDo1SdfX7\nfiuuTmojn5DlRwxh8Qp4zIHeqI3g6ikhPKD0WVfQEOa0pih5pfQ3g2SNTsYm\nI1Vs4lqTzRH/4bx2DkT1ZNgOSsBhCUBtJDK7pHP5C8HsVTDUUOSwuh8nCed1\nUcV2D8nd7vjjTuBveLCh3V7zJ46JZKKviapJWGfoWn75+xFunfB8p//3yCQ2\nKdCyntv81vzhDIBvMcK1hogSEHe/s32QHzWs5H3obLSISErA+ownXerxNh2y\ncs9gDENdrVAbh0MpJ6kFttjcb7ZvCchUIh8Z9n1CNKdcroEUJMPeVzwpSWaB\n0zRTFy6QbtdGAYY99+XLnJLmULGKRBPAttzzFdKojdTaIBJw8cLYELaILDPX\nN+Nisu23NDqljZpcaI9M9OnspTnlTNJQZjPbGTcyDrNgCENN5dPKKIR+gHhk\n4jzulHm9Xcp9TYubiqPhlV3SL5SurVxM/xiT1q7xTQlingy6av00KNuJzVON\npprr\r\n=iRxn\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"4b35543a488bb22a0855f6f0d00b047fa76bd623","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.7239684d4.0_1626451079897_0.011723506358056968","host":"s3://npm-registry-packages"}},"12.0.0-canary.d5f1f7c72.0":{"name":"@material/density","version":"12.0.0-canary.d5f1f7c72.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.d5f1f7c72.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a4decdca950a93e3224203c2f8bee9ff6274df8a","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.d5f1f7c72.0.tgz","fileCount":10,"integrity":"sha512-PqReqhuRRpebO+VEBFx0OpX/3w4aoTrefxUa8p2Na6/AABikYs5B6s5sTDkKRyReyfedg5W4sUqc+whT4J6/sQ==","signatures":[{"sig":"MEUCIQDurmbXO35jupfWQ6yir/3/GsbZHe342qW15H3N4qLNuQIgFkAf/1/Dx3+hNMw518UU3OUipvNTBDVkXV51rgXwt8c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8bAFCRA9TVsSAnZWagAAaBMP/inflVV7n+LAva7P32Q9\n20ruMzAw4hSAa+pIT+1R80HxPlCJu5GD6+MkYMu48m07eMquEZFVDvVD0IxK\n+2Uw1o3FAGjPz+LyFRyVibjJa3uKHMNbYVqAi09fyxzWM+U0vFdMVgZ7TqMJ\nngaYTsgJcc0ejawH6gARCYqSSoVXD2LAm4kSQ1J9WusG4qKJleLQwDldeweP\nHrIEvbpJ0ru6hGtt6+iRDNBl1IjYVFFZI1wzwp67ePTveiPf8jl5MFjmBgVp\ngguF8NrLIlEh4u7ah82koLhIPxfMlZekxOKyZ1nvQGaBjVEERU/e97dpGFWS\nh4B9uyYH/WwsUIEIdOQS51cCqu7vitqmddgipVwXOVUWfMpgF0AiLYAYCMOM\nuzy5JCTgKjtgyYalx8x0Iaepu5XDVQnCzW5w6al809Nj+3r6qBKpSDl8pG+3\nkmYdNR5LN4Xw5SGbajhbGvEvY6Tn2D1bGYSnHoQj3D7f0+oCwTg3EUINV26W\n2V18F+sTfjbugp2rjvJWNHsvoEaLvlRPcf2mvghMGEeFIkGiCZ5Tydc0j9L+\nHzzsawsoONwMkzO+dQZyDqAbRjbBzuQoyWxEXQWdzVKuoF/uVVH45gaWW4H8\nHsdJcv8XAzqZvj5Qv3fKzJvheIGnTEDGDKZxws3v4nfK9fCu4hBJyWmOI2Y1\nYVEk\r\n=zMvw\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"ef327d93f5a591e88ce5af94a2bb181d97b58472","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.d5f1f7c72.0_1626451973759_0.8290429782158504","host":"s3://npm-registry-packages"}},"12.0.0-canary.4d95812f9.0":{"name":"@material/density","version":"12.0.0-canary.4d95812f9.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.4d95812f9.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"485132fb6758c6eb363fdd8e821e603b5e47fe28","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.4d95812f9.0.tgz","fileCount":10,"integrity":"sha512-aMM23hz0RRsVsflt/Rd4rvpy422SNMUbwM1XAaWrw0zozjVf0XrJYIZ2OQfoM4soMJ77x3D3fHHpCDL4HwZ5IQ==","signatures":[{"sig":"MEQCIF6rgfj8aVjZDu9CTmTxPguzISff5c41AkF7pTrlj+PnAiB8x+a5E1H8bVruw5x/jImrWrlJ9IT9AZN7f1zUmA8jYw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8eEMCRA9TVsSAnZWagAA2TUQAKNdccMi7HbdhNoBpGrG\nNfhcGVKlEzztVSnEldUFGfBtgoFGkS0nUOI9ZGd6F7DD+mnjR3zwzy9qkg3u\naSlmTESzSXgR4zqQfOobopdK6V5/9ZEHBUaoLYQV6VjEOyeOcFBwWNUDkBYT\ntuePkxRD7XDdcqnmzsPlw7AuOGRanccYljTNHLQqht0qBfuN4toDhG6LJAqA\nRnckg0LOf/WFzdg1QoMZDskaRyTqQn0SG1cw023tK3fRlICTBRsjK0IQm+JH\ni21Qshaz/658K3Dok+KEhIPeFqIFWDgnXwoEJDi4roS1R1gQ8oXIOGXyokDs\n3yKRcqW4MAfJbSyG4qm0ZoNLWe8DWIWiku127Px9K5E65IP1qpOE2cteiqPq\nXxv9GUkzc51ZK1BHBIqm9s9s97/as+wtr0t9FtF/0NTWUEGFDogE7ye5UgjD\njgu+1CPQr1RkvoBJZuyZ4QLU0ueG8ORvZm1vLJJW9HP9BJVd7DEewxJTBGB2\n6YLYE79Kr0lUWc1iP5y90C0jo7ZuwsCDHQDlM/0vRI8YoZcgOW7kQ7+O+8XN\n2MyrZ9cUnIdxsxLB4Irptd511jzgIHsHUe7FwJVFxEtRjJbPizf1MfoMbee5\naWdbanG8QwJ9gpH7fXM3L7qn3Ye/soaOtwwzKF0nQCvjG+gD46iaaINXHCcD\nE5Fq\r\n=4kr7\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"34bd44726ccda77331fa29afdc1d5ab7ff0879af","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.4d95812f9.0_1626464524821_0.08152549801161091","host":"s3://npm-registry-packages"}},"12.0.0-canary.38d1846cc.0":{"name":"@material/density","version":"12.0.0-canary.38d1846cc.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.38d1846cc.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b893f0a60c8ba023b6cad570c39104bfc7444acf","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.38d1846cc.0.tgz","fileCount":10,"integrity":"sha512-wZQVPUykk/XRzNHqXBEV4dZsS3gvNeesK3L2r2/B7lqD1ILbK+ZsTV2+w0Z+Hs4++0GuQT3sy4GcXpiKL+0kLA==","signatures":[{"sig":"MEQCIEiHWrW1jqF7bbKY2lSMGDh2MsyYNGEM9e0R7ODdbXR6AiAT1RE4ZjAUDPwHvgSLmDoBaWhwibA2UgsDyuy6bMfLtQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9ccqCRA9TVsSAnZWagAAcq0P/R3UbLaw4uOF6AU0kMPs\nZPKpDXwf/SrxKLh+ynaQfJObrh9AIy2+5pd0UwIvXpP/wR3ykDKP5X4Rw0mo\nRwCCqWKv4kvHtMgmtOSHyNZi3Y1iN0Vrvdu4Be3gequNCfkSSLV6V4sexSFP\nVQGhjVkyFhxNO2y47iqs9+wN79LCGa5wx5QNE9K2pSDrHx1ZJeLuDTS/Q/nU\na4UwUMePCkRrHdQIAq2K18b+RouE6u2TXvaM9XmVM/jdVNLDuFgk+6cHZOGX\nwtKvtLjDUBAAc35ZUpvSbk+tBG39a6mWy+9AQO/bk6F4IZG8sWZeXcf4BDX3\nGaiipzES5lfeticjhTTSsOqVfwfe7i103XLDAZqtPXTHFHW+YhwvKXdAq18U\nSflsHEmdc5jJPseXrYhiaCuJ1vixEAQ/DcxaWW8RkSZL3P/pz9eZcUrPMn1B\n1gWn8IBPgmC5PYosGATfDUvrkxAWQF2d3HLktn+LvDyP/9sfN8h34HLUwDRZ\nYcvLyEr3IQa0KJwqM4miry2Vbz+BFqJ1m3qrdzGiTUjPpxxdwmSuQqhsQOyH\nbdnikYeSbjMkYqRksJgDb5GEO2qdtNppAgXcWT5uPHsTGsWmTZznZGguWe4L\nN4j7CYNRjeH4PhJgFv1KNd6Natm5adyrmBXlSdafEwNuIdAjZH080ErIRdnh\nccIC\r\n=99zV\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"77a8b2af56ebd184dae02df9198e75b16f4db385","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.38d1846cc.0_1626720042590_0.7077339790089816","host":"s3://npm-registry-packages"}},"12.0.0-canary.3f691eccf.0":{"name":"@material/density","version":"12.0.0-canary.3f691eccf.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.3f691eccf.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"880c55af759891f217cb56f8d331b90550595fce","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.3f691eccf.0.tgz","fileCount":10,"integrity":"sha512-1Wf4KznH4RGwFpJiSmabbes5lQQlqqPh7BZhR8lKNxZeikULzrNeB/0V2mNLZBdLq997/6BymVLFEBsAm7BUpQ==","signatures":[{"sig":"MEUCIQCb1Y1SRjE8CA0DMy7bEgbq06iVQZ6vSPWWvYLhYzbzMQIgRWLm5YSBPOTotWMxxN7/EwUY7JPg3+8zsz1ykHDDtIk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9vTKCRA9TVsSAnZWagAAhDIP/2j9YwSTPaDWlOrmws2g\nh+aNbml8CARwnYgVOocZh58LC+SXmYruoqDrz8AHmI9ybB8iBwEcBUKKdQ4+\ncE/bkEjmbNbgxMwHQG9wo0bzeynkZiGDfOghulDRvId2KEo4T2N/jqht4kJ6\nLHlscXzVvCpSQzcY1pVZF5jCclrvYci6wNayAhCMv2SweaBngWabbd+ch72x\n+fi+w8KBkZWBY3ByMgGWVWxej9yaaJRW9aQtsrUe3vkpeKSJQPufVGHBkvD9\nOG/mdUXfKbj9Xu3FVbYPH6y0LkygwJWCdJdULuzDlg2GFUyN3Wiw9gYnzCIY\nXuCcE6PpuRGpDMrfzDoIn7jX5EM6LuIeWIt79S9ntcw30cBWtPDu4C6rQe2n\nRYU/TH9IIazmVsYzCj628+mmu0nE7lh1ue4BEvXgY3Pfb7nLMOAsIbov4uoB\nLfQ/k4JRTMc14W+kvAL+NujflpKIW+Peohr1N7b4pcOiS1neFAHkcFzfw/a2\nhViSDF1jLrT9a9MrCYFXOuqaA9tU+9fhM37f1Fu/aD68iaOllY3imz3W8wmO\nAva7lsLoWg+756nHsgRENiSvg5G6/EE9SYTVGKdZpFX7YFjhpeHtclZY3IzQ\nu4pVEEvMjiUvAl3uasymIE5yi7kWTjBwQQ6UWQuiZ/3XrkRNk2FrGUso2phy\nPaUP\r\n=/AGv\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"58271219b83ef8db16c68153037e69345831b4cf","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.3f691eccf.0_1626797258649_0.5526823882803129","host":"s3://npm-registry-packages"}},"12.0.0-canary.ebb5c73bb.0":{"name":"@material/density","version":"12.0.0-canary.ebb5c73bb.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.ebb5c73bb.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"60d92a05e20951786b04f92983c014631238ca36","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.ebb5c73bb.0.tgz","fileCount":10,"integrity":"sha512-HG6BklmGuzqfAykevitHlUcppZn9Mwk+TZpwnTRJ/f6kRMGbrI3HRWPFI7phRguZo2j8JWcXbuhTSDaQvtk4Uw==","signatures":[{"sig":"MEQCIFKnDcGUtQSOzZA9mNb+zYaAjfAiSfED3gDpSxBled5xAiAh8CPdnfGVFrCuU9F5Bjqiv8KBRryBl2D5r89DutR/Og==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9wARCRA9TVsSAnZWagAAlzMQAIToNkpDnV7SCTvzalhR\nAL1SPRy3WrXmk8RwF7rJmkNG04DZadZvyYfT/lg2l5Q+AbiHNOn/L4WJRFR9\nXs6rdpoHU4Yw+HKpon0sMDjH6sHfReSTCETavNaESBDGp0cmXwgLQCN5K4Wp\nEFtgk3Ke6bW9BkIXGN0KZCb4wvrL8VD6L2Zgexhgqee1U+4Ezi3CYZQnaaJs\nplorJMNcCMVSQhggI3qUjhoWdcdukcPhv9wQoUyMc3rXARurPd2iKE875Z3p\nQZrF807Cu4v8u+eiWj8Gx3KgGB/yAIajx+MSIM6u/IRG9Gy4R06mlqTL+fhN\nolX+hGxVmQPukoJQiqICDDb9A2W1HBvYP15CWVg1Ilcw7Apm5R2+y5xmjn81\npt/wDnDolMGVhG1fnK9h9BOR+GM1hjyQeAa/oRG1iEqUD1OZ/3E+Ac1CMaMV\nozioLeEHIBV1At9dCNlK402zPD4B+ajEj1jqpb/NGxyqOB+1lzqmXF27+JB2\nhj/F82X4O7SX+dI40jw3h+HS7Cg8WkUKSUgFTbSaXWCto7nTAzWYm51FjaXr\nZ6PJ9e7q0hTso33919Xq3WxgtbCZBCgGUskji6xxV31VgR9tQvHF12X2ymNr\nVoUkYf9IiNCaajci4nN2rKrnelHTdk0HhPmyC8RzBZShTMqxKpEOFBqjSiIU\noWTJ\r\n=p/fS\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"b37a38f7ce62c0d87ebbb4bafa0f1fb02aedb050","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.ebb5c73bb.0_1626800145097_0.30060849644980814","host":"s3://npm-registry-packages"}},"12.0.0-nightly.778a0e8a.0":{"name":"@material/density","version":"12.0.0-nightly.778a0e8a.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-nightly.778a0e8a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ae5221ac53ff69500d32c3fc65431dfacfdbf47b","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-nightly.778a0e8a.0.tgz","fileCount":10,"integrity":"sha512-ukdj5BF3MhF+eVrU99hVSU+d8XkWHBmdptd8sehKEUN3Vy8WZwGIdRLIwdNOBH6h58VrQZwpvNdXxP3vgigzjw==","signatures":[{"sig":"MEUCIQDx5WKS950/rUYZlktCfNB6vjRGekiVDznrksKTpSSpgQIgOBQhWc1iTGxqXGOlyrqKUix4fAxV6Mfs9eG/bFYp43o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13662,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9zpbCRA9TVsSAnZWagAAgNkP/i/yak0xLkOfAQwsx5Yy\nL0DcK5bnwEKy4DIuBp5bfINsv64AdTKoCtKVuEogcg+rzRPtexTyYwDGYYTT\n6Tetsrw9wxsY/PcuxwuNke024qYwVA0zdQq2/9Fr4pyjmh1UW37yeEA/G7Xy\n1/zfVOD6FjZDA+55VibiBd8/+2W2HiXY/Qgib574RUFVA9tfhYz2dKb6lp0Q\nPBnkvq3VI0uxtXarlha09jKBy3x5NPyHtm7DKWvyg0QajtdzprLN5RvLr9GP\na+/jNiMaC6m2oaipUyRfzDg/+8NIfxa6kMxkZmDPH/4ClaF15XwG848GeHcY\n6EwIhf95ONUxICZDFfF2C3JqKx70Cky0o86wa96cBqxQiZk1ztomccjgJ8kI\nolgo8rdjD74wHYRV0UlC+WjVB6j7tVgfU7g0lqWD/blgmq+KrpBi2V8Z/4fa\njxiZ9+tw6Cuuej9Gq4p9teB8p8BlTD3Ohx4qwELSQlnO5rm/bbGaaSenYqoa\nRcIT76YKOGDObp1PYDFvZnL5UM+lW9LogN7qb7V4ODmzhA2ziBfbSWMMwFTP\ng5ibQIjthwpF5YLvpDwj+DmzhsAr50bW4PYytDYKGbBdpr/OsQ45q82tjtr/\nRvtufrmxsnSe2N3rPfZwx3Y65/hIxvKLsLSHz5kICSEbNpnjFW/KvyZDl/G9\nCbRP\r\n=wRIt\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"d86234d661f09ad766ffa2f82c69582e585a8fdd","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-nightly.778a0e8a.0_1626815067775_0.31470452719674147","host":"s3://npm-registry-packages"}},"12.0.0-canary.791311bba.0":{"name":"@material/density","version":"12.0.0-canary.791311bba.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.791311bba.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e6b5026d9314c2881af12c318a60a2593006b6fb","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.791311bba.0.tgz","fileCount":10,"integrity":"sha512-+SLSPOTWf8nQ0n5CrXx3AA/fa5LH16qRB13oSVQdT/vHz6dBjf4B8rq44DfjoJsmbzn8qtbusCJDjqV4mT/aMQ==","signatures":[{"sig":"MEQCID0k1nyWNcL9y9p/0SyRfa+4qJvosHap/00aWTJOVH7CAiANh7oc3/N6Lu2MHMStQ0GAB3dAOqnauRoxLF3hn4P3Ow==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg90jkCRA9TVsSAnZWagAAszMP/3TrOzFVgjEnLxPnekAv\no7m04RvuZTH9QKJrJx8yypuQwz5JSBoWbBiHQalmEYIeXePuOlpIB+rqwHfG\nPSfFheY8TKEjKBuvgcQUnd16vU1ZLe10jHyLYyG5UnF4LMU05b7yznxzuf8b\n3a0JUy5Swfjin+eNDFbm9BckisERw1BLHRukRWSUvZvvQ46dQ2K223XOKZJq\nem5KCdq70k9yfWkaff5pKkfxWCkgfPsNheB1eLpkgr/bOqwJqSVyL5cv+XQ5\n10FJzNwxVKH3zPJcm47EFTQaN5/aQiED8q6mTvaJrSPG6HKHcIWNi2+CoVZV\n7c4a58mW0h3FhYEzXCCVDJ5Ut6AaGxVYfnwvhRRc89PLnsu6+5yenKQpxUOe\nbqDgD30E1uOdFydv877rcDJltUptiwlT+Y83EvlWJT9rlHk/qjnrNux5d+u5\n3u5Z9M8nfxPTTJiR5GTfyO1CjDsLVGk7I/jwU9uB8HmZpwvP/eKuUV8/DvPC\n53G5Mz3WNlkAsqbSAnWUFm2aJDZz9o/gnaDrnP2ziWXTrgXqNkQF8zefddJ0\nKe/MmTOhykak8Pla9E7Z9H0hG3nVbSOUx8kyVH2st57N8Zyuz12enhKe0xVV\nl/Zxbs7spX3sEdUHzJGxRaVr4IHtbggAivLxXDft0QdaiuUT2HAQwY/j9fB1\n7XPy\r\n=1xYz\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"b915b82632a30b60ae4dca5d12fc23d5a5df4d4a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.791311bba.0_1626818788273_0.8188580620827592","host":"s3://npm-registry-packages"}},"12.0.0-canary.85e9a6ac3.0":{"name":"@material/density","version":"12.0.0-canary.85e9a6ac3.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.85e9a6ac3.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"70e93640825c94c16c4eca0b79586953a93fce9a","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.85e9a6ac3.0.tgz","fileCount":10,"integrity":"sha512-AxMY4+3n3KtGeuVYAQeKPKkQGE0U4wToqQmz/W0UKp8SfJcJ9gdTbmeEtjkUsIWNR0JxW+LP6MLJC7ICqcF2Qw==","signatures":[{"sig":"MEQCIBpbRAAs4j6a3wHOeIj4+Ywf8GILSONvUu0XQdRCLoNeAiBwMEFI4nc3xWfzZ9YTMc8glbXYMAVxe2RnloWT7/eINw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+D6dCRA9TVsSAnZWagAApLkP/1QmGQqsXm6owbgyQlZ1\nOlWW+HG+oB9ekaImpSFGzVoHERscVaUbhfgrxFW+nfQlAODPXzB/cFMdCkEj\nZNkk/Ao19dJKAR/QA9WK99snsaKLKCuXtHlC5H6OrXlEmquCIP5rKU4UUiQz\n3A+5cga3PRK4aS1PuEnk+QqkCgp+Ww+xGDtR/IhKt+ZhG7YeY+u1nGoUY28Y\nYnc+4sQ7+Ocz7nr84ineScT6aTiRPr3LSvdbT5netUDJpprFj6TY/zQGF95Q\nADEe2T1uV/NTDkNbhFNRyE+coS5PsHofTXUp8UkwoOaAXQIxklqRXpz3SER8\nr0Vx4CXfr8LZPM6WZJSdyeGL6wMswO57FHStlXCy3CZUf8B7Ftihpd751imm\nYAfF5Xh/4zBPsImWbBs/tz/UNGHgO9OO2iDPX2GMuP4OK4wzn7kJI8psP7Bd\nDT+YESzWys5B6oWsTJNsDTtj5+Km5JV0oDjYQqzTvcSSjQdLE4QrmvA1Dv8O\n538H+jUcahWRO7p4MOrQOQT58qTqGLbR3AflehPz3kbWnufyIW3OoOGlg8ty\nErO83pB1lZTsS2RxwJYGf7VD9IDJNHRPSJy19kJqH3DyM8d3WbsoRv5TA+6D\nvULYpHj+86u9upXlrEe4vJItPlet0RiibN95zlPyoxc+Dki5BjDYWlRFNV4I\nRpI6\r\n=rOFw\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"651354325ad21ac082f791ec2abb0aa32b3ba936","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.85e9a6ac3.0_1626881693755_0.8676629479430191","host":"s3://npm-registry-packages"}},"12.0.0-canary.6b0442278.0":{"name":"@material/density","version":"12.0.0-canary.6b0442278.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.6b0442278.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dcf23e5145001f0adeb7b932ee54d7d019d713e7","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.6b0442278.0.tgz","fileCount":10,"integrity":"sha512-GFN8P2EGxrb5iPM9fRSSWFX0kbfqCRyn7nQBjtazYMTeUbTXrOCZT/C6DKhQUnbQBcthPFgCVDDnKs/C5sf/SQ==","signatures":[{"sig":"MEQCIE+N5yjn0ucld9uSQhVpMOS8GjB39wdIte/9CB5jorLGAiBaqys3CSKTev/cZV+lzcRbkk02WWrWeKl4mR/pgYusbQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+GwQCRA9TVsSAnZWagAAB/IQAINaSpjDQhVrSkO6r+Y1\nQSJuVpySeDAeAuDP+PRE+w51NRK+MdU/MoAHtbeEHUlsukM1BpgDadf8+3Tl\nPIXSovAy9k/AfeoelwtJxeOKkbxuVzIwmVxj2zehWFK73HWtwZYYFjsjJNrA\nk2NJzku4DCCNRL+lY+LFiC9W5NEptkcColglyg3heOcdmilqjQKdcuwyuR2Q\n8+bVPx6eW7NkAu/7AmE0R3RDA1NMPt2dmX8Jv9FjYt5GF9YsSLPhH29iqpRi\nkYI56CmlJR8C+yYV3zRM90UthqHQRBzSSDVxemW5YqK4nX98hLu5RiSstlid\nsGlZRP9EkZPMzoiggNaldFg2rsa48fxJtXKCCx1wAp7TcK1FghYvh2drsVTj\nceC5T3sO+Od4KhNHa9eKck2ua56K6X7c4N+hjSE4/QBUBZU22jAqjx+qpbMP\np/jymTssdGVQut1q+7KydyEgKtI3oelzZIqzVdXR38dQXCXMY4iyMgIYwS2K\nKwguZkn+1BqfRRk7jAAqwOf+5mcDVpWbfcaZjLBIW6g1fRdJiKLAuVfb9NmB\nPFL0h68naxvAFKKAGeuFdFiIOrBoZX5gzoLtLiG6bDDMW6LAKkQlgwR5SAEk\np6/jAWi7ZpYcfgVK2AL3iAJXF1sF+u+T0lIUwsRpjpAKx9/Q52doM9J9w31r\nuEJq\r\n=kszX\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"fefa69e22f9083ed30aa4ea05114191682b45a14","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.6b0442278.0_1626893328446_0.03703961166472958","host":"s3://npm-registry-packages"}},"12.0.0-canary.5f00e454a.0":{"name":"@material/density","version":"12.0.0-canary.5f00e454a.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.5f00e454a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"365ac14b55afd6fb02f546cb4356cb44123b58cc","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.5f00e454a.0.tgz","fileCount":10,"integrity":"sha512-oCZLNtpWe0O3SI4UqMsPX7H/725LTEhbQG1yG1YtXYXImzng+cdDlwX10nbd7V22q88hQFByu9yqYWXa2LwA/Q==","signatures":[{"sig":"MEUCIBgZmCTZ7o7vTFdWOUX2h1xjQI1dKAySx7M0k+3bpf3HAiEA5UpN7g2N5TGPxLOrwQyS9XJ7M2MpAe0YTEIMjgH4DUQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+aU6CRA9TVsSAnZWagAA7UUP/0Cs5y8caJErkLoU4+OQ\nsPP3hqps7ewFCR9cpSNx9NvRiMjpH+ktQljNSNtG8+5nD6uuDoXDGB6h5tFh\nmBU8g4ad91VY8pSLyR6Dn2Nekj8yklUpygxjaxfsEJMqCrgFpyNRsR2FwCr7\nHwtGCLs9fQ81m1c6PTbIahyzHq7qVPCCOc3LfnKtPv+aP4k+zIYddCwkVZXt\noWpKJsjd4CWTic6te8vH/0PcPHsQVSfB5A76dPgfQbQ7S9xGWq/A8ZgiJNEa\nJPyCIimVby2NUkpgBj+BEKiPqFipOvu/rMeyTYOnR8aUJULZHeALPwsHLuog\n5vW9FxmmD20sBXmws5nRK4/Aq+nlyy3+/SQ5nCsKuO5H5ed/87ANJGziI2qn\nVH8BOFJaVNGKA/ljzTaBa5fBUvEgc45xCJa3GmfnJYmVxsztaNtBTHBjJdW/\nHO97m9wAAeM/9/1iH74+iFDwTdsB9w8zuZcCzmASdXx3EMs6dz+A5LMYXe5F\nZreSLmJr1T8PTNs3uZKsAkmg2mgz+jL9h0q9QnWH7RkQj5DOeJTQE0I1GEc4\nHn1TLxC9tN9cAtNBOOmmyUKW2BT8n9SsB/Re/vKd8OGHHXAecwAKInwy3AGk\nzMLg45vk20OpJ1Ytc35RqMTp9wr+BfGgVrEtH9FuUws16awawHQe79DbcV6g\ny0sj\r\n=dd8H\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"b9c8a5899d6bb5475fc5fb2c76a300d4a28f0ffe","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.5f00e454a.0_1626973497927_0.844350622995639","host":"s3://npm-registry-packages"}},"12.0.0-canary.90e08fc6b.0":{"name":"@material/density","version":"12.0.0-canary.90e08fc6b.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.90e08fc6b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1717803a2bb7188df27d512d33c9fe5f7a6627d7","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.90e08fc6b.0.tgz","fileCount":10,"integrity":"sha512-ZJRqDU0nbAfclNYHvJmmTKtk6HF2fo70RV7LSmttD4sXN2hMdh3rQ3/nleFsbdoP9wwqwKbfKDU9nisECgryDg==","signatures":[{"sig":"MEQCIA4/DG42Z7RHcq25eTc39KcbNbWrZlNFPEdEF4FxUVt+AiARIX1lsXDo1ugJE5V1Qp4EFrMHb5gmWfZe7Z19TkTavA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+gEuCRA9TVsSAnZWagAAJZAP+wdZf9/t7RqDxNrg3dzV\nvlI+VhgT35lera7Slvw5Z+gr71H4FjhByaoa9tySAwo+XdnNZu8hdY58YhoW\nKp8oAPjFq99w84KqVvfL19iaQpkKApqTcPvXa9wF6LrR7du3SsDxwSL7/z6t\nLthmQ71cyqupvnasAuehVWlae3Yc7NiUix1EOtiYLMgsPVEFULhVr5hJ0vAh\nYD1ssEjsE6di+4SL2biHDp4XgLpgCBOpa+eyqpxX7TeaW7IP9Rm2Xym5Vupz\n7clptLxo8qfi633FDrHuPXY4VOclrFwpYEzabpxpSot0//oKljJFaeHrvGo8\nJ3uj+gX9k/WFpLT1sbyz0kfgZqsQW8zGQfqL28O/jdWZOhsyFToIaWC+vB6V\nM/7Rcoef6KkVCOzpHvhy/3R7NwVY+Pzcw0L4yStBXYW3ETmOkhfvSfiWvReQ\nh2zSFeSQOSwMuG0eoPrOu9sPAJXiv1DpUv48xsz5sbuiL3gIBeL/uj7Bq3Fd\nCytGMaC0hpeCcJTIlI4LWB5TtKBCpGBpX6VUNOozQjnuk5MeRP1BD2jxZxhC\nNWAr4VUGZhDvUV9tA0FQaqjDa7rOmT+/H1rC2+pzmhYBZ1KjIEoyOx5uV+xy\nie56zOtJj0RTmzeLZ089bYz53PArvnsKAsc4FkkU+WOhQU9a+eqyeIuWt6VU\nXewJ\r\n=nIL2\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"267e307e557cdce4bda13e55c34cb0d1aa0d0b8f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.90e08fc6b.0_1626997038657_0.1569732290775494","host":"s3://npm-registry-packages"}},"12.0.0-canary.cf5b9eb86.0":{"name":"@material/density","version":"12.0.0-canary.cf5b9eb86.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.cf5b9eb86.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"78a004b1ca766b1f6974a666bb4b038ba7bf7dd7","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.cf5b9eb86.0.tgz","fileCount":10,"integrity":"sha512-kuIp+m41CDNFEoEuQelyKx1RnjOZrxnxbh+cEV27Eo9TLcEwPnCRtdgmJWoklI4Rz3gWmYh8Zqpte/vyN/1wvg==","signatures":[{"sig":"MEQCIBMAQ6p2m7Q+UFeOtCe+uuUQWNr9h1C13B0erbxZ5yCkAiBLJnsKLR8p2itKYq2LENF8rurmBMAYcvHpTsBly6fnzw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+wZACRA9TVsSAnZWagAAz70P+gNIYdRkyZqRUb5DV3Lw\n34C8dEDDHHAdUti3Tv9PeU6fRMLUpC2tJaldqK4D11Kjk/FAJTSmoOsJDfSy\n3w0mqtrarjWk0JXWQqdOspbSJAaxLJ/yu4qWdsyii6V/j53/amMZ0N+nLDIE\n0WLa/d5cyrOz4o7y0SO5tuNec06CClZpkLQsIvSY2C+gGpWYQ5SZKJIkVSWK\nsa96wFvV109pbi4nokhczuIziZfxISES4YIUXCPMVffCUjuMllblA4NX1g14\ny8oyXX4OVy//y8LXGQsHKiDdyr1Rs2g4mjOL2ut2k8+hi4Ospl8slOTLC0N3\no5Qa+ZEcEPGuIxm4LP02Rb+OaDq/gUbDTvsw4hDwSjziHkkf+i4Nmd8aPgLp\nqQbTvFERTqE2q4JCYHsKJ5lAKGS/1ckh/De2RrOoVv0kYabCXhsWppQrq21o\ncrY4N8yLfC51NWRRhVpy8DbbkrqpqGcFK7R0y0+0oR400Tlz7CFl1WieH2Vm\nFL1g4DHztS7rx9NrOXQQMuqyS7h6x2XJ7NJcSQzg8MFQ/efCwywB3sZAlL1M\nejbv/6mRdgrImpBO332UAPAajydFZNEhCWiX0NoDBeRcxL70AUWFas8tK7xW\ntgjUM2JjRZKB5BYmde2edQT1IAvHBb67mn32WTkqwLAcBFris/QTq2WQFzhk\n30A0\r\n=AdGg\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"8447b42cdc88335a4d5a37bb048f5babc1c5bc82","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.cf5b9eb86.0_1627063872711_0.835861429448844","host":"s3://npm-registry-packages"}},"12.0.0-canary.3f36ac75c.0":{"name":"@material/density","version":"12.0.0-canary.3f36ac75c.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.3f36ac75c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cb6e83af4340ce8c17e296dfad9d4936db386756","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.3f36ac75c.0.tgz","fileCount":10,"integrity":"sha512-qOUMq7hjpoAnWaT5yiHhmsXro376/rJxHRkWfIrjB/dme1nkPkpVN2iYoLped6Y7anDdwOpIzHJHkIgCI13Y8A==","signatures":[{"sig":"MEQCIDkTn/Wln9nt2gX/DxdCVXIcear7DyxFHTP8UMEd6j55AiAcJQ1pCk3FfFW2R4nSZ675nkftl5hC2E8ajjktVa0dFQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+wryCRA9TVsSAnZWagAAVwwP/jhYUXUqqQjS85CR7CIe\nPio/jjx4/gwXNO1h6qpxIXPqQyZkuhSo+Fg7P1lkdJxVOOL5byyhiz3kYCKu\nvPu0iyUtZHRAS6HiK8TBx7mnZZCh/EbuITzL2KKwUJLCnBtH+RpCsTDp7JtM\nAZ9Y2HdsIA1RQy3q+5BHzkvWBVuEWakUQZnQ6E+gWpAk+xx7qAJPcDFYfCAa\nSCm+vL4Yh8qXjtTEsl+1kz7iKGxag88y7nFjN9V2FkaonI6sKFAeQe80JXkk\nAQ2BNydHnSZxXBsstnTcwM6h+kUAflvKMYtjBNyv/nw0f3mxHHTNHiiq4Lso\nuW9HalQnIRwwSNcvJjsnZtbTXQRnezPO9H83uSwXp81aFBalzAkGoAjG3B6R\nIESm41cGSR8nQGWQ5h2458nNHlGtGkeNXn2M1NUUZWoOmeZN6hkCdUj65+sr\nF7KyJDG4SrvD6bGF5pxn4XI9HR2RxMJ4w6WJn8i6BmhVCH3ra6QeBJACRJOJ\nLvH5R68jrt/R9/RMYOnTltg4jryne28bHSWZ9ln/6Q7feVNU7iIdPWTnxgIo\nwew+GLGYUtyngZzr9/S8qTXB+21wEF6aylPlzZ/21ZpDWqYAo64pA2LqPZ/b\nDnofWw6h3zYjuwshUuMrOk3iTmrvsHSn3M19A+cbKTUOoBjs3FueLCJ09sjy\nt3Nm\r\n=aQtR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"b0f70c5fff2a6f188b24beae7ecdf708b5bbdcb4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.3f36ac75c.0_1627065074132_0.626014745330141","host":"s3://npm-registry-packages"}},"12.0.0-canary.ea1e1b850.0":{"name":"@material/density","version":"12.0.0-canary.ea1e1b850.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.ea1e1b850.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fdec5701b37d685ffcf67fd7ef4f512664a76d4c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.ea1e1b850.0.tgz","fileCount":10,"integrity":"sha512-uPI5ae0r76+xGpXcr7jM1D+krTlB3Wyd1NksdaCZepv5xecEIa/3ixA0yb1qs1szNieJIRu3NBGxup4uvHaMuA==","signatures":[{"sig":"MEQCIC6LwbgJpcjle72vZSWFgsyWUS6mCQcEp/C09v4Gv7qRAiAPNeLbbzCst0to7+yHrxAxe9KqFPZqrcdAhr4qlizTgw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg/H4WCRA9TVsSAnZWagAAcQgQAIDjxfVREXzDz5sGTWE0\nN98+ujmiZ2yWYAj/lIt9MRf0mbA0rw1uEd0wBVIFar59ylfjyY3c3q9OUib4\nWCmXVZmXBLCc/JQFGcfSAWz0YT0tEQbT1K1aaDNllWh1KqmxBbwVTcW5hNg0\nWBN3PpXKhlbQrQxfnUBqvIMxpX+rtE9JvdaP276Vl3wTWmI9jSW3f13L7cFS\nBZwA0/cwNS7lRmk6RS97KyyGah0nvo2MBYo+pOPKa51fKLcxGq2vnvY6UqWE\n35OFdxOMjSjVQUAhtOTtHiNkalcWshMigHmFz3Weomqf9T1FUImhvVA+5IKw\nFU8DNdZpaKif5nI68eU+AFkI1P00LPYQCjj9JgexY9Zl7ap8we/K3dyv3MGX\nVfVuEBiw7S+gpj4vk4iuti+LGMJms7HWfFAuU36QZXJXp0kEufsFyNrqozQ0\n0pQm8NsgCyz9KeDhhA6qNDWeYIFmVADVbsyuRG+TuQTp/lUIZPNIh079sa3Y\nwQJO32s0Eg2sGcPO9IIWeJPxk/49NNcCb0HCJusaWnSyUGCv886CYrXDkIaX\nIlXctO8hVr+rmMBbewFFxWePlZQyUZ1xk5GkrRD141iWoTooGO+YfEts8kTW\nzKc08Dx3sFlleeAHH1sjKmPToS26nsJ36440AiVB0Y6PJwztsdt7rNM3mhBQ\n5Pk2\r\n=18rJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"7c296c6f9b2c20eb32b0501c98b6415bd193dc46","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.ea1e1b850.0_1627160085907_0.5406101757315824","host":"s3://npm-registry-packages"}},"12.0.0-canary.22f390c43.0":{"name":"@material/density","version":"12.0.0-canary.22f390c43.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0-canary.22f390c43.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1ac158ba22c4a6a6d4fa663631cbe2c1646695fd","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0-canary.22f390c43.0.tgz","fileCount":10,"integrity":"sha512-mAJw3iOliuMJIRnjEkMTaOK2hnyXhRIKpydmVt3w3sz50txRBGHk/9vqUbSqL/TMD8cN4RP67IaYqQ70ZizmcA==","signatures":[{"sig":"MEYCIQDSCQwmezM5dEAbxxf873ivhfpO4QMnT9B+b1QOgKxpKgIhAIxP/C6oVnDJJNKJnHpG9qB/V9ZMVOCZ4mpxhZcDnVTj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAFdqCRA9TVsSAnZWagAARV0P/3JUar0SJaAI1hxOBaPy\nU6jfJ8QmI91d5e+2k0Tbd6RtF0RyvL0fmllk1SHju6T4AUnT9sMlkfE5yqxi\nVZfcxpPg4GaqKN0qdXWAZ9x/mJSWGpUsxNniDh8ne7/aee1g8aY7clD8G0nd\nUPf096Tphfpn61iVuuL3z49aafylj/pDn/5bLg1MaJTI8b44W90YiGYf2nRX\nen7IRTcOBjByLiEUX3fUArtnyZh7oSLWcdA6Z0hQ47gliCJMhzZ7yrsCsFAH\n2yvv1jfJ2XSungyQ7ibpSPw2v1aWU4bSbz/dainEkNP4cFyr/OtTNJhFpEHo\n+kzj+848gKzF7OB1wAU829UIETwnGakkgWTFEb3kfPMVDsHfKpyiZ/9tH2zE\nS4FPmgqmSemwQIn5IHeQomsPfa/64NWXSOgHDdCnxEg2tK6mWR4MImNxbAWH\nLCldyZUsN6LhLXJddYemh7sdYDrA/GmBppvmGwIY9Ut7fmP07HmcbGF3pGrl\nj6Js5n62ht5FGcc3qbOGpyid6ULDKOCiO9Jbx1+5DVbBbaRBIFbvt5K4az+S\n5xLiTIbMSVaOzPaTyjjGX6f1/74aX++IlZFYu21pkAfXsLjx4s12qBsfyBEv\nvjxenTgRH3TTsLsgUNlEl0H5D5WF/N8MFDygDKE+4wyz8JyRF39pBqg44sRK\nyDlm\r\n=5TLp\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"2eba31ea1c3ae3c0e3497f3dae6cde368675a496","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_12.0.0-canary.22f390c43.0_1627412330130_0.4876560448198928","host":"s3://npm-registry-packages"}},"12.0.0":{"name":"@material/density","version":"12.0.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@12.0.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"badb014ea90968a603f2042287e8974d6caa814b","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-12.0.0.tgz","fileCount":9,"integrity":"sha512-7kWsFPiiTcw5FKdm6zvMp3ygLhHINXMScrUcRTW9RoIzC6EgWrzF/UC1XEt48Yg4Ux6K/98QJ4B53CoVv1Z/OQ==","signatures":[{"sig":"MEUCIFqQtGyegp8oP938gx9k4Mdb97zXB4XUEiOeKrFb+1/+AiEA6nG8PM4U9t64RIKQ5HzICwSmUerH/bz+BqhMkFIcxnI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13376,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAGMhCRA9TVsSAnZWagAAidkP/iDM5QvfZ4n1PWzjAyo1\nZIeGJsAViUWMVjDcQRULn4jKa9iw/Hhhgxwhz/WvUYmVW32NhKueKs5RW9pV\nyzc9ArG3KiHCalRq9/wSJvTCOQ5sLKtsLUSaTxII4YjOhAZtXSKlxjj9pWyF\nZHKBBEgRqAEVB5fbWjjmhwtZhD+qiqfh+dv0cYANSIXUT+PUDSPGCPb6xIGf\nI+2aspJ49BonXVrb47MGs83xNjUtz71h7wRWgWNZelG757xM8tUyaz/OpgiM\nEDxFbOhsiVm6cVMfl4W7SCoLspDmKAJ3apCtDwRP46jBJajL8i/6uOkCWlAE\nMMkhCNQhpBrQ+9o5Ieu8p4HAtrsFJV9yaqiOn1vxBXjJYbXky/2Fs9g8uQgF\ny6ntENQg81cX655f8DobCl2VppMiAvPHXumQN+Av6ypQKAyZNLge9CDwBm4o\nTaGiceYxxazrfKmkecJd8b897wSdo85l+NHbAqqaSiJxjwtjESPMyyxbPloP\nPxNl5Rb8ADz4YET16A9w22DWaOLvC3jhBub3DP3svJJxJaYCIJXwzDw6c8Rx\nE4dyWsECOsKTwtkVcIA5Txtks8I2XGZkpHnNkeQ0v6A0KWyj1jfmcNyMtzXR\niNwkKreKOMMsIe85ozZl3A64matDn7yOMP/hmKsZgAQJuibKBbFdXl4HLduF\nq/du\r\n=zFR9\r\n-----END PGP SIGNATURE-----\r\n"},"gitHead":"ae85f7eba0d72f4fa5f3e8669cd316336b3e6828","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/density_12.0.0_1627415329137_0.7116665117510765","host":"s3://npm-registry-packages"}},"13.0.0-canary.ae85f7eba.0":{"name":"@material/density","version":"13.0.0-canary.ae85f7eba.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@13.0.0-canary.ae85f7eba.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"93dd21735098584c61c102d236d5e231d1b8a291","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-13.0.0-canary.ae85f7eba.0.tgz","fileCount":10,"integrity":"sha512-fld7KbojYJ+LC0Ym5KyllgL3vKB9htLQX0st5WLQqQvOeI3RsWHN9t/jAI609p2HOKv8lyMFTToSXVB0MG1a+Q==","signatures":[{"sig":"MEUCIQD//Nsa27U7dpPyxdMOUBeMyySVNGf59rnBXwHcn9NhKQIgKZ7rHj3vQZCGBYN6lwhghhLIHJ7LENkvjDouUDXTIv0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAGN9CRA9TVsSAnZWagAAIU0P/RYIIxS8WBizFs10YqJf\nBa6+9J2Z2FO4IuEBbyX6+tA83eHutCJC7xLBvZgTnZNvlf0OZGpvorV7s9aT\ngigouVPwfoogwbVAjh65tnP2rEhIA8BK1Ik0zhbTHL/3miaT4X7uBQpTQn0E\noK6u0ICaYyfWScyn1bMA/0Du2vhdMjosOYqI9e8Mv0k4nfC0I2OS0u884p1+\nENaNdI9n49AdkA/WqzimqI7pKw2yRLP5AM+Cp1f/hWgl7TjTieJKlENh9ozT\nr4f2tzlZTIfGlcobRQj0VMUp4aG9B9xKEIpE+URDDRMB45BIyuvY8cgfWXHN\nOn8bulVCUy8+eh3Ffn+ZgcrUJFTYFM7RyhFIYkpICpRJ/U7XtcRlYOagYnKR\n2nGyqF7PxZHsMKNp4xOon+phfQqtQvIrPayTXwlKJVzsBfutvbmwqRz0NEwK\n8Gri28wQVXhctdhiaaHtjnmZvGlvXQit6ANR1bmaK+0bVAJCJWSYRlE2zNaB\niN/9UFKUQi0ahgDGeclQa/3x10FjeNZ4szPk/rFzLZaK56+8PuzkRh3IXzfh\nJxBLEytRbg8woEGQrHjmJIcAxuD77oHsHgGO6MZZ5z27TmXp9FgIwo3NUOic\nxRnpbUM5lX+8fHKu+Hv+oqLfgj5sZOARfyZoW1fxWvuKhmRcu3+x2itR57xW\nsp6g\r\n=1Sca\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"087c731cd84ebd8c578510bd4c8dfb5d11e8c574","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_13.0.0-canary.ae85f7eba.0_1627415421111_0.5474522604370999","host":"s3://npm-registry-packages"}},"13.0.0-canary.5981207f7.0":{"name":"@material/density","version":"13.0.0-canary.5981207f7.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@13.0.0-canary.5981207f7.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f25f29465ec287bfc69810eaa5083d780e54e602","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-13.0.0-canary.5981207f7.0.tgz","fileCount":10,"integrity":"sha512-JgTn8hxTzzOstBzj8c+LcqiXnabD+VeE4uLgfbXLJ3Rf3M9eLJIx5FVSFQ3mNKwi2l2+VO7Ka9xcHkcTrQG9YA==","signatures":[{"sig":"MEUCIQCi1l+tpTHyw14tYxOtjjaUksvVpAI8mP0noLiat7nt/QIgGfwplFxY9COiDKwvgquFu9P6aFs+CbecM5yJu7j6DeU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAJPzCRA9TVsSAnZWagAAli0P/jhizqB9fJ0LAjAgYODW\n61tbAARtw0OW8z4xVqsehAxN00xJfaZhitIZDxbODsh5RVE9wRh1rd3Graxk\nAD6wwtzZIEpsKhTmsQUfIiwXWjio7lhvisZ9hk6RijIWBQ4QR3s/QMF3tUVV\nEt/2ttmvFcQjT3AeyRv7R/p1axWyYyq2LzX00REazl1R4C1sOWj86AXMdtv+\nVzBeMZnhhPm66nPMUHpmJiDXW4Mmy2HFwecpQVg+OCb7VpLLdM3tLBXELyxo\nyhJxfhNCJF4CsI+E4YOXo8DZltjdD/uCUkd6vEJTwIOjHjsC4VR38a4vI2RT\nxG+WxSQMZDXcGYhZhk1VntiVdaIriBi+jp7TqJM9AvsiNlsIOhtMj8A5KpXQ\nEKVBMZUxgAvJuxw2sqXiQmGiMqTmZu5wVDrckcYtncRXiIXJABOYGq7zYg2L\n3UzHqYVvFLwmlokXFlN74RVE0jIzdsb0xjY644Ox0UwYIwCcNwnhkFrkk8Rz\nArN4Cg9igQDqLoCwL74GZeA7MYfUjeTWEI74aExscwRSLEK8pOg8kSczPEsW\nI0/KSDceydhA98qvBi6k/CFusaDasVsviVI1Mz0x+ZAMeEmWo9yKrPXGVaWv\nFQrrGVH4yq2Fu/H6kKfsquvMQDkGxBeVMl7eqYBwzHAbi7uwNzoiEghp99Ui\nph6O\r\n=dUhg\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"8a8b67c19b2a9f80923dd162098b373bbf34b58e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_13.0.0-canary.5981207f7.0_1627427827809_0.19599291971392474","host":"s3://npm-registry-packages"}},"13.0.0-canary.83bdd0222.0":{"name":"@material/density","version":"13.0.0-canary.83bdd0222.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@13.0.0-canary.83bdd0222.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"12b266ce6648c38162b930a434fd6cdbb91b1f3a","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-13.0.0-canary.83bdd0222.0.tgz","fileCount":10,"integrity":"sha512-f4glIr6EZmH4HIubdh3bLcGAfj5bFzftuweUKlCtru3mc0dosY6DVHytLu79AZqQSc+UYslPK2HTn2hYpNK1Yw==","signatures":[{"sig":"MEUCID14Keyeb+kW4+YrbzZ47CqTA6zxgA9LW8pCQBOwPnRvAiEAhzdC0PDqo1kTvnuWLBWP+SuoRvYZuSEzk9RuGrCRTJg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAZLbCRA9TVsSAnZWagAAGI4QAIwG9M130stlUzReA1L/\n0/MNEIRRl0gcZGfWbJjebkgt9OmsvZoX8vp86OJ1YupX90tVuZoyBQwy2N1L\nBqS8rOm8bzfBuJpNtWD0CBagY2S6QcXc7omGCn+DgeXx8+4DXIElOgg4g0Ih\n5Po8cXQwRgU7Id+lrQFCgFNNZu4nqbuV0lVnStrrAaWE2de+7U4w/xj8a9T2\nt+9s89tMi630trIErckMD2DsYC3zPJGBVXAAB3OCuXePk8ZBRLJ9bF+mr6rx\neXflY+iTnEPwLYbf7Rg4L5yOcil/r5CDkTfXE8c8rqSSfOfskoZEpihV5BwJ\nBu6kyqYV0AP4c5JkGs7Yk/PBEK1r+M2y8mdZsSmlxCAj4dhnk6VrQLQU+u4I\nRW7W9sv5c83ku8mBLKe1h8V6hsNhmmoT3+XlskNYlTDC3EdahTmyVMvF0EyR\nLzS6AFpZqqIVthkjbU5Et6CjEs/5q+lHuhvUBhBl956qkpVFnzzobnOo/hPP\nHPIsv0LVsX1knooyMhym3WULKX8IlhutXHjlPgUFOTD7xyRz/SmKYIGgac9k\nrabvexJ9/1ZmPtXEhoJfBUWbImyM3xqv9WBLwt1waMjeSv7h0MJpCw4BRe6J\nHrFBPC5Ni4Fw63PYFGosGR2PMyfgmxtyF2yFfeSVRbb+OXEI953jTDcPo6uN\naxUh\r\n=VU/Y\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"1f2b23ad4bf20ade58cc1b10490e9ca3f9469405","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_13.0.0-canary.83bdd0222.0_1627493083246_0.9750810754759296","host":"s3://npm-registry-packages"}},"13.0.0-canary.28656298a.0":{"name":"@material/density","version":"13.0.0-canary.28656298a.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@13.0.0-canary.28656298a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"091f0f30fd49d2c149d9494aa78a8d0a4a699652","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-13.0.0-canary.28656298a.0.tgz","fileCount":10,"integrity":"sha512-R1QTAi5oBl38Ji5+vv9Qxc6Gdi5CabAkelCZTi3IaSL5tZC6XyyKnfk4losmgq3SzcBWv8UojKlahL4QucynQA==","signatures":[{"sig":"MEQCIELtpU26gT3CAXEuk+LzduF2HbaWyvX/wNoT8OD3ZitPAiAnzSzEcLwDFrPZEBF9LH+nAmttUKzfdP9LKRDlswP7mQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAu9yCRA9TVsSAnZWagAAh/cP/RWOYvHOpMXDUpeEEwJt\nhfLAR3Y1GNkuk8vc7MnDN6PNvRy88xUZYfnxRez1DEVT1MW418/m4Fkc3x18\nhyEX7gO6F8w3GG8QO20Bx4PD1WZjTlYJRChrGD+vleFx9a9Qidr+jWGs6x7B\nxhVJ1fD256EWTwIz1DeJIggQbO4HeUcOOcUegQh6VaZacw/7zlFFQvVFd0AS\nXFKV5Eo7zzATPW7PO5tuTpcD8W5PPHGt1LPrvwclE3eJ+JSVzRpKxPL9tuBW\nqKMHl6jyNsDoV2rWz05jUhVEStZcvrwZyxOKI9JprHB1YQ0mF+KE/zZEupP1\nZAMUdleaR1C2dQr/ZbG9VINkhX8nO3sd0//jn9btdZYS/wj85YRCU0Lajwa/\nMoLIb2ANcuP0M+eTYXFO71sEorTAKJxtbQ5ncFeAnjED5cxB6/j9o+Y6iDW9\nXr2r44WH8bpZ6pXJgHYbOWOyYghFsNGFus0/wDG3K2S7z846NPhaGwc4ETQs\npQRXTXJD/PrfYLkoOYF6/Lf+k9ijxHBW5yAi7BaMnUm79XXXUKuS7yMCOVj8\nBWAnQC2wly/V/3uoHzeatmIkdvQY/QBYXH0oOPbWSNLqIJ1so8ZMY5hibpl3\nBqZ9IC0EveTEz7NDL0dMF3+a5sTWuT1Z1MVL8OtpJCDI3cnn8/cMFNxM3KVM\nVquI\r\n=K3uj\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"5fe3e7fec89669c56504c13aadf80a71a543df78","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_13.0.0-canary.28656298a.0_1627582322479_0.15159965523093488","host":"s3://npm-registry-packages"}},"13.0.0-canary.9e797daaf.0":{"name":"@material/density","version":"13.0.0-canary.9e797daaf.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@13.0.0-canary.9e797daaf.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"741c012fc7a97ac6ee019ab834354e30eb45ea3e","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-13.0.0-canary.9e797daaf.0.tgz","fileCount":10,"integrity":"sha512-/yAPtrbGkPiC1Pv4qZ5fcJmFmbRJ/+CPZl0efOp+BmfEMwIQ80NzCOoZcdWfvvrUZ+fGgEjboXSFI7gvjluXew==","signatures":[{"sig":"MEUCIBd/XKZIwJPed5q6xrA8RqMbeLyX1IRVZZ+ToPMFl/guAiEAqbMQCOoVF/5r2ZLT8TFxXQValYwYklOl//hdP4XPuEs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAvSrCRA9TVsSAnZWagAAhwgQAIsyHhrjx9W7Bu6KPO/i\ncviahv/V3912fiCgXqXr4yJEjz8Cmi/isPNs73qtyWlJUCH4IG9Z46gCPPGF\nSb5aqeDZsZ41YJUuMoUTY+xkTmQVZFodKISvaLc1zl7KXW5Q5LiZqzVZYTxa\nowYiKh5KCPhOqhmH/fHWVX/16RTDC6o+07gGf4dFvESL0H0bngAQ+VUtMCBs\n0DV6oY0FE7BX4s1gFl+iXAmG8L8ZKoZ5i8TvcwGyVtywcM4m6dMtrZJDtBpH\nw6TMUZ8UDcP1ftqOmXRgcf3YOLfqhAetI3PsuyTIPf1MVn/IsMafyIApZulw\nEQqFa/Q7n1Cs3fBcdlLzN96mR28F/ByUU8vGjXqOStm2/xJ69Sn0zX4fyLPC\ndmrToWOwigFXFW2gQ30Z55cwyTjh1WZi097Aa5qAVjZX8qlSHWg5ZwgYknBT\nC7IelEdQN+dI63vF2+oAC6PdyrU5BEUvJbRqxpIsa1BLzY+bgScpmKYap8Mf\nzb9phLymFeZn8xzFAQH5thpyjYtPWBrNXlCoCrIjww9rHJoeqf8lXS2Bs9PC\nlfC4aHtF3McNiYW0X0amf7NUmBBT93FYaowvUnui9LXF2QPHH0mI9trGbsQE\n71A8fBNhYipiSr2pKzqbbBAoBdryljy4cE3Gkjn1SI/GPlrg/VhZ5VId08Bz\n1Fus\r\n=agU0\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"cad664597e3cc10ce42dff721f26f40b986db48a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_13.0.0-canary.9e797daaf.0_1627583659540_0.463557304676699","host":"s3://npm-registry-packages"}},"13.0.0-canary.adb9f1ad8.0":{"name":"@material/density","version":"13.0.0-canary.adb9f1ad8.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@13.0.0-canary.adb9f1ad8.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"829017ebd6990a26965792b555288c17b8b79bf7","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-13.0.0-canary.adb9f1ad8.0.tgz","fileCount":10,"integrity":"sha512-WJLQtq8nEpfOsJZrem4pqBND1uscAoY8gjubuAE9m0dO3yPPoV3LLRm+iUf+f6NLBYuECjc94ZPQtL/11cHobg==","signatures":[{"sig":"MEUCIAS4bo0L8yT8xkrO8rYoC0PikpIshn0fShzYbHxyKZMUAiEAgptpHwrLYVan9TIH3X37/X0cqLKG21576vpEeGHlLCM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhBE0WCRA9TVsSAnZWagAACdQQAJyGde+dYT0PTyejPhqU\n8Ne/Gq2tBYgusN+Mq4e3SmOME46iimWmXumdfHHVKHk7jDXTZTXDUyCwuZQ9\nWPOOqXe0+vm8MEoY9jCkSWZo3Rd5Qzyqs2LGkNZ6t4OMFJwGBwaH9M7wA86g\n4zadDFvEwd/fxFcJSyrxVGWlLFhrC+ppjDz6BCvimeFPW667hB2zCLGqdyMq\nyLYmE4rXNJP7JGRfwAZgZtrq0GaF/oQGS6MKsW7GdJ9/diwXsmQ/Qf8uIOl4\nGNlp4EO89/dqX5FUJ/VZjTGRKzg8rBQuEzZsr4syYR1eI1tjofyilZQrVEHY\nAyRm3yrCdPwBYxEQrofobbubJniQo4NZ5k0VN61NPf2k0mWFZs9WwXaaTKKT\ng5ghcDhaY1GgR6fTtn1v0QdgA4bkrds+nBoFnJZne1G2SK2rvwN6EDOQnNbi\nNDGQR2APqUwC6VbDV4FFzG97VW9frvZpSZFOy1XmALaUNwqmyoq5C8cm5eAi\nJDg3/vqHxJycPtPknbWuZ3AqfqEcmI4sg5FvEd/0jwMAIOR8C36DS8AEHMYV\n+jT36vWZgetzPTKfVGq+iKqg63c2sLPNxgTciHoQ78k/SPTC2x6/CGBhoIcu\nXfTPWEP9UFxk4oaCJOz1ryhEM4n/NcCiZc/oSuC4wDOjTsP7xnSTx+hhAECr\n80fE\r\n=6oQG\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"db010696805aae457c8d8c9da8b394efff28ee35","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_13.0.0-canary.adb9f1ad8.0_1627671830432_0.544914700843262","host":"s3://npm-registry-packages"}},"13.0.0-canary.cc5377458.0":{"name":"@material/density","version":"13.0.0-canary.cc5377458.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@13.0.0-canary.cc5377458.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4fd1e0027be36d8f0e4964d78dff258c3b7eb0b1","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-13.0.0-canary.cc5377458.0.tgz","fileCount":10,"integrity":"sha512-QnnmqMpLUtWDdA8Hxbj1oMtMDMrmmVT43yFq1zCabrxTLjfUtwpev3XIvPLX+Q7oc+PpdcDa9dPqJPTqm/g6aA==","signatures":[{"sig":"MEUCIQCA2IC0RrBZum+VAdehGMijxqjrWzlHN50X9ZCow4sknAIgY/5FODAjs/oJUhobu5vEyEWFqKmCIXQ6oFioMRjfNuA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhBG/nCRA9TVsSAnZWagAA4MQP+wSh6rgwuIwfabe/Fzg7\n5ZNiPmMS6iNsCx2kmk5pbMdy1PXDQLC+HeMWZVEpmPn0/kxBp5NQwLbBhr4h\ncJkqlxxIEKSHV03CpdtE1B9pVmt4GoKH7ySThn+rLtAqeGsLO/VFHXAIVJpm\nMD3MtCGAdKOO7IOj8D7CLmdFce6urKpu51Yzw0Zsk9r57Homfg3o0JDTAyGU\nTcyfUqv0rROXVXhURtb+R6Rj3AI+v8k0RuBRruzzq4zE7NIhrc0Rg+f+mJ5V\n3W5RMcCsk6xgncELi6mcayoKmqhfXG/SBR9NANOCmiq13/MLmS6aV5wf7r4C\nxjE7duWP+bIII5Fs5ts0ZReiqJiLKBFqmBqnp6W56cz+kaothdvuTsSD7tTy\nEVlWQ33UWhgBLSw4X2xvQ9UWaupPAnWKDT9TGTTKSLhgcSPV2dtG0a1Qgm7c\nwr9lG6n9H+3guuTLqKrzkkd/IYFe9yN63fkNaDdq58nux2CABJLv8egIoPnO\nwwtv1Lyq6DoP08ropBUlOREU9g1ryNk7ltnFKn9vqeFG/p+XgXverF8dUxsp\nLfhCvSRpgnJVj+joofX3xpZBiwdT2f6Bty4dW8HKWCSD5Q8gULpVYKLmdEJ8\nF58k/c/W8MPW3gWSj4fsdiDZ3BvTBrLpk1icV5zrglcQQFBb5/Hd+tlRqjYW\nGH9N\r\n=KAFw\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"f4f5852cfac85d68dbd83665da839943c29dd866","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_13.0.0-canary.cc5377458.0_1627680743769_0.04488039512056119","host":"s3://npm-registry-packages"}},"13.0.0-canary.a395972cf.0":{"name":"@material/density","version":"13.0.0-canary.a395972cf.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@13.0.0-canary.a395972cf.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1f024ffc1c867b591307cca04e17f691f5dae08e","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-13.0.0-canary.a395972cf.0.tgz","fileCount":10,"integrity":"sha512-p9UoL6vkHu8Y/ua2lapTWkN2ywlqjqngN92vYkkNpfMVRJXfdbzggfHqENvmL+/9iDjY0v192OuNlIcCxcVCbQ==","signatures":[{"sig":"MEUCIQCMRXPsy3ycU5lHwJo9aexEOhFTSSABoHGX2DDaCZHfxwIgZ5s75wedZ+eAYVmcghrKuQTzTpb7VYRtoLRcEgQMStM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCbOLCRA9TVsSAnZWagAAkMkQAIJSSg6hWe4KYOSzRQGc\n74H/2xMUGMYL0qLBOk7XA9j4bW1gYpZgXwQRtJ6hp5lKJMKbnnEYj1gYsevC\nC6px+44EQaTkoZXeckVRmDUht4dbT8FG+yNN3OOXIoNP4+f4iNFbohyqLpw0\nKVRvZ5yh/s826ETfybnHeYVKhqlMqdqTDHFmnwHqN9J/nQZ2iQ8J7w1IeZxD\nFnHY/u+MxUgAt7SCd6vycQrpaOtTz4Dd9rBaPLSAgI77AOle/ANfJEVGSLmK\ndkU5yNpo4UIroUUP9jiQJKVGFng1/MVSs0FtUz/qUNyOvi25xbFCr8JmIuIx\n5rF0dLHNcuJz0/HJR2v+UwJLLZK/tsAVpYHd5LaTqjzl7nuitbxMp7/X/Rh8\n2Od5gy4S1ByaFQhfChOp+yG1wTwy2pWuXdiWy3mWTd36pyALUCnZDyUkL33S\n1kFl9wK1Nt+vKIYWs04kgQS0DuSk2wjah3H+pE6hw5caUu/lI8fGICoHAlP5\ntR1KtKrCXaTqOvtLTK110SWOy53BOOefyU+omJ6zd7g4x91C3eCwAwWp/Itq\nIFEUUuxR5g7i4D9SB84USAoRs3uYVXa8eitMB0L5Es2i57X/ioqosfJc/d+t\noMr7KHTVaOLhiFFsQPnWiu5LgTgJTQ1sgLfEHkVv619y9XBLNolE4ABqCvoX\nTRq2\r\n=/rsW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"00a6b6110465620df99cf5f775d52a1054c91cef","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_13.0.0-canary.a395972cf.0_1628025739295_0.25055726659313304","host":"s3://npm-registry-packages"}},"13.0.0-canary.7c96e6b98.0":{"name":"@material/density","version":"13.0.0-canary.7c96e6b98.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@13.0.0-canary.7c96e6b98.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b3175d47f06d183aeef4e0979955a4a0c21e9c65","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-13.0.0-canary.7c96e6b98.0.tgz","fileCount":10,"integrity":"sha512-4EJG3mdNMEKZpmLtUrpzqTvbgzDwsLlJqtDVdlwIz/6IC/+ZbG2ECy7JMKRPnucuY++oqmd5bPB/d86EBdi8QQ==","signatures":[{"sig":"MEUCIQDeYfDtwdHL2BquEe8497MqUjvPPHH+ZtdO4ztdl9pHtQIgcFxyuK1whcCWvhFM1xNdXPnKcrMfO5SlSKJbNzS69SE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCb9jCRA9TVsSAnZWagAAL84P/Aox2AN+sa/ymkR6nABS\ni8Z0YmcZyHASDQTNLWHTsfUQY357HYyBiO+9FAC7ylB5Kq9uCD+a5v6lLg1N\nAzbRskJ62rufQRDyCGgH8eoeL/EjlXsXM0FKGaGa6bZ7e1mnCjf/6ukvqyzM\n8FJgtxYfW9o2lO4aYf9dq4AJyE5rJyFBV/0g+zEIXGP2B6up8mqiOjDVAs8A\nmQf/7O6/61c4PlVq1Qf9XrxKCgb67I9jMuCTSAtv/1IBtTJ67fAOB8I7y1SY\ndQhZ38X2DtL4AFTyRyqdis1sfzIKpwilwa6RptKt9quaJ0IH/M0yJphM3h2k\nF/bapPzOIimX7XpOWVe574Edw17dPpJFWGrpL38y6rtapoZNBOt+SiZHE+zQ\n6oTCc815ImWCg/hTqnzMy3d+TZ8dcXplDe4cO1VO0pETskbdLCgUM76Kio/W\nCVV0oV4s9Udyx7hAL/piBmvlMfk1zvmIb+9MFY65z8Z7Z48jcO+if0weqG7R\nHCX4fsefyRMFdtbqEVXwG0q8wVbfM0hOjpi+WoI269SVcWRhC64aJRV5or/9\n8K9kHfh9Hjg5QWRQx8ylLnYPnJUJhLkaWrNPm1Ss4JUScl1t49W5GH2TrDYc\nKH0yqr5veW3le5Rrkyi2nVwzuAYxtce3cSazfigIv2u6zXqAKXMidd0qrROk\nOwkf\r\n=MpB6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"38c48bd580ff0facb66c28bf9caeebbd2a6a4033","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_13.0.0-canary.7c96e6b98.0_1628028771611_0.7199190425253383","host":"s3://npm-registry-packages"}},"13.0.0-canary.a80c8b2c2.0":{"name":"@material/density","version":"13.0.0-canary.a80c8b2c2.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@13.0.0-canary.a80c8b2c2.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"96fd86e74435f8a28415714ad3eb5fd4dc8a5947","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-13.0.0-canary.a80c8b2c2.0.tgz","fileCount":10,"integrity":"sha512-cvga5ylERliV1bSKrveJXeBJywna3EyK/w207xJSwJVEOkoHu1xrEmrzf8w8HSp1MfR4f79U0U8n4WEO9JVCdw==","signatures":[{"sig":"MEUCICwQe0JxJRwVArdpgNMGhq9DCbJjQ+YUwZwZnA30ro5BAiEA2C1zfHZmR0XR6mvME2CY888i/+Nob6TMd1FY3TrhQk8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCym0CRA9TVsSAnZWagAAG1EP/jEv2wGGn9VJh3uFZfhX\nDdPv0DrURG2BFSTj9nVQ2ZIANQ373NMgXZaPZ9cBEK/oEsxC71jDX8GYDHvo\ndEFoQIa6Rh1djTLWrs1qqVGojfXem8K4ZiQ/14vlTzhcEOTNJnYziRTZZAg2\nKj/hzu4baAAslXQ6dXl8/yEI7i6YDcVDimwVGJ4t4lgTNs8eI5KyNXB5oWKC\nXeNlczXet+f8OoplsSl7hbuz8AtbribN1uP/gaBLEWC1OB/kchcWFXqRZeeU\nRjCWEJH33YfGP4Cx8oy0hQHi0awm+pyNN9h4MCbZ6x144PAZVXb9CVV70cjW\nNupJnGrApjWsuZh0f4zr+7gsq13vt2XY5a3kBAIOheUsotShwNpZa0v9dHyb\nIcZ7mqJrhi8mXjYgO+mFpyAcvfMRYF9H+i757NX95Hxg7AKx/b3MiGP/M9Mo\nVz8cIFDPskZSkt5QQPN6ACnvP/j7BP20Lf3yB0InD734BUv7M8Wru9Zf8HTw\nngi1PqoF9pRUXNFFHo8F1WVTZkF596lgFXoOM0q4Zivr97CgYIHhGWtf7C+q\nsAmvB7acF2ZEuT6SPWxlJ0FavEDk9BEMyqzhcElt20PtQ0E30UY3fXJOvpUW\n8BaAkFCIsUFYpsrQW69oopevUyDKZBBxMeEJsQ97Xi++cb4SzqNLUuAAoYq6\n/2fs\r\n=8gHB\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"cb4d3f1d1d37c50939ed5269748eebb96f798601","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_13.0.0-canary.a80c8b2c2.0_1628121524211_0.4059137739757914","host":"s3://npm-registry-packages"}},"13.0.0-canary.3dd611091.0":{"name":"@material/density","version":"13.0.0-canary.3dd611091.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@13.0.0-canary.3dd611091.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"551a7a89e6124232ef2e9151708a4e6eee74885b","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-13.0.0-canary.3dd611091.0.tgz","fileCount":10,"integrity":"sha512-413gckKW3bEjoViXezd8llXPf4BGB7YEQhuZqdZXTLyzFGAI4YGBzUdqaa6WC9z7uEjuxw7IwlEzru44Dcs0mQ==","signatures":[{"sig":"MEQCIGffuJub6q9+SdWnRs2QOm2ULKdLQOmpK0Z6rDWJUuS3AiBIAoszLr6o4EoQkgb7538tovd2ghZcXTUa6PfJ5jdvxg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhC2EkCRA9TVsSAnZWagAAS+YP/0dXq6Dw7eKja3zE0VRI\nTK/wkO4MqpfeBuTRD3XcA0IGx4GgH6JE+pNZkRu4J2Yr1dUC65g/xnxCB2f3\nSH4efv+hXx0MmJ1bPMdJkwGXiDiDz/gcIuUGCN0V7Hw3/aiNS6/L34KYE4Qm\nivrs0nCYQY5kCBvq3GzMwYrGYRWh+Om91ksaEmJsWLe0QR/ciDlomK+e9QgH\n/GZ/n8L0tdDdgvVcZvJxhSvkpEtzkzZyIpc6ioQqx0Qd4zYSwMTTGxpulGxA\nYtUr30V06LgGBPoERXlGYaGeNpkxzXPrf/CPkX3u+6Qt0+kGFTHWKtVZBLd9\nt17C/epcScPCqovYxdx3fv8MPxPdx0h31AOIMzcK67qT5nfoC7LTL6JHeRm1\nbJN313c2zcG68mhtyAonpjDQZbVr0cCnPLGsHQF9TL2unhbI6DRaSaykurHS\niBq0cxTFY+OzwZkgcsFeqlfH8XJXQzAgSvhLEjUOPFGdZY0d3oM8Io4KfopP\nkcnJT7/b/aQ8c1ddcrDICORpHwEw9KMIJPfhdnls6yTNG2QH9f1P/cKV0fDK\nHqjcxH+AdttCZ2tuZXt0DHzKNXLnyoz46FsmiBd5TU3bVViyX0clpXeRmQiu\nuBrzGIPo2n3mpwKh96VoSvMyVrJoKnIZaYxoq3wqVKDtXFwF1rDHBRe7/eTo\n33vm\r\n=CZfM\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"fc6a6a59d9c86ac1f85efd94a4aa6a8e4c27c379","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_13.0.0-canary.3dd611091.0_1628135716792_0.0030859554583411164","host":"s3://npm-registry-packages"}},"13.0.0-canary.5dee37ff6.0":{"name":"@material/density","version":"13.0.0-canary.5dee37ff6.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@13.0.0-canary.5dee37ff6.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6ab8bc6646176f3f2e2bd6e9e254ee9c7e3a94ec","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-13.0.0-canary.5dee37ff6.0.tgz","fileCount":10,"integrity":"sha512-KUEPROtd8XRwlv4nFM93+IsiCDI2M2widn005KH9bFW4oywaUpuai5OHYHLGe8UOL+dXpYUSDUVv9NADxLM5FQ==","signatures":[{"sig":"MEQCIBiXk1gYtjwuy5kTloMrX5A1+8kiiiugrWy4i+GMTYxFAiA/gqv806SJjuosPC6seBHYlqLAKHyiQormhV7nMpct4g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDCK4CRA9TVsSAnZWagAAX8UP/jlbUa0teGwelQLpRRw0\n98WOoVoJx4drb0psPiOXnz9qPoy2DWVNNK5FNnovqMeOTR+W7lCcFEz9yAYb\nD/GojHpT5z0tFXz/vqu73VF+csKV+UXvg0uUCHsJmVK8u59eaE9Kk/42EvVQ\nSxvx6L1+bIOoV9Be5NbnI8vXo2RBmX0bPw9uzjQb4pg7FH2GcDSswIMYgdjG\n2ZVoFhLNs9YfzRl1ktqbd6Yakb3oCCkt7nslsAl0r+7jic0xbCmuCQqEFYK5\naiPHOOven7kHB3zyOXJbMuujR/YmwmTq/Vfs3+tcFLrXann2fdvvVvBfH+Ad\nbOlDJ9d2vCURITL696JUnt+mmVGnirQuiugzK7C6v/kU76JtkK3rN38m19Td\nqXSkaUOCgr1Kndcpv1BpwXVmaZ/a2xFFOxqLDaCDAByv/AyxaY1Xnces52io\nBgjnDqZ75b8+tuNOuhxJ6aXsvSuxQ7Xvwugd5gtIy/w/8TCFPOE0SrsbfUTo\nU2/2eJRoWWAeDBC22c0B89gzwvaQJDjYTGY1hzCzZZMco39iddKztnsSDygx\nEMMi6dbevnwHRaZRZJa6CuCh8DSGgUHItHZ6VjoxPzGlUKd1D0Ho5PmuwW+x\nEznOXfez3K2VEtuOi7KGgiPFUE0WAPtoZ4rbq8GElmLWtYyjfTC1VZ+wICbj\nhAn0\r\n=Jo6y\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"a7b521f6e807878ddba15c813505134621ef85d5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_13.0.0-canary.5dee37ff6.0_1628185271898_0.2922697811881383","host":"s3://npm-registry-packages"}},"13.0.0-canary.bf405d22a.0":{"name":"@material/density","version":"13.0.0-canary.bf405d22a.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@13.0.0-canary.bf405d22a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"226b2e2aa82004b1d4257d4013b4cf0a6dbf3b11","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-13.0.0-canary.bf405d22a.0.tgz","fileCount":10,"integrity":"sha512-BnGStxVgTXjv1JsJFXapABgD7qEJrkKcoMGfS4ZLQLE3dmoxp+zFspH2QZjAWrCk6S3KT9Bd9LJLYmI+s+2eYQ==","signatures":[{"sig":"MEYCIQD+ky0OiJWrARdWCsTrHyOdZpGz9WB50T0k0HN63IqImgIhAMKb56Azszq3/HCKzM8wlsXcqYgpeQVmhgmFo2diH79j","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDEdBCRA9TVsSAnZWagAAAcUQAIxkvlDPqUwGemanIT6k\nQTOM9Y57dJuycFL3k1GO3x8rDSjV2yuFPROq8M45PTC64XQsccCeKidYH35S\nPk/a71QON5xUtRVuO1zfnROa47QxW2A5sRz61xRRxXQ6aOSxLHMAchAGhky9\nS7t3hFzaeXEGgHF4p3OryWE3im0WIULM0mbhb4+SqVYg6tLRcIcAvkggJjCk\nNZfv0coY/eXNYcYflIep+j74eclvwJzA+jr66mff2mhlAtX9FcYaH0ZYWIyW\nc3icvW+p5zrgek3qsj5Y4Lz+tBz9g4HeyVN6GkUI9zYdDlstQtCbUfppMw+X\nrbEgJV/fiURz4M9p3Yfb/BP4vCiwcD48ZjOrlSBZXgYvaSnSf9JIoSzaNDX3\nvStJYWfkO7OdyVWea1vVJGDKxi3y600MzKP12qYAYGMrsbooAj+Q4WTqkSCz\n0CkAk5omTvOL2VxLa5AuiYfv4RXT87awNc8PDh6kSiLDPi2EYfGJRq4BF59+\n+2gZpf3oeQA0FgxDPfD9lwMdRFWfTXp4sZIWjjpthUDRPTS7U747dw6R7BF5\nCAuiVMcn6CjFuOnflHUMdvYaFSYk4qzwluSOXPe+CrSx4g2Z1Mnp3IPAUgFX\n9g3zalcuaxYFgSSCrYZn3/w1AoTCpaZNQ/RvyFpKeULmK1tS04tNVQoVHGqb\n5ye7\r\n=rHkc\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"00ae15a245c6a46fa0a13aa61a02e5958c0eddbb","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_13.0.0-canary.bf405d22a.0_1628194624984_0.1712420256208962","host":"s3://npm-registry-packages"}},"13.0.0-canary.b47dd37a6.0":{"name":"@material/density","version":"13.0.0-canary.b47dd37a6.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@13.0.0-canary.b47dd37a6.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"373dccc3572588dcd4c8a015aedd84007de9c171","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-13.0.0-canary.b47dd37a6.0.tgz","fileCount":10,"integrity":"sha512-tal+oR9NxW6ZrUnf718Kf8mHF6tXUlAUI+KKsUgH6RWL7oeCIbaOR81lJvbLWlA90o6rWebfeAXH62cVJJz3Iw==","signatures":[{"sig":"MEUCIQD2z9eeSw1CkVVR/UETOvpgxOd5d6YYyKM2NpatpIG7iQIgNFOE96Smu7U6VOSmTz7Pn0tiLHKTB9VhakupafmJ7nY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDE63CRA9TVsSAnZWagAA2RoP/2+9sFvMhr9mLOywfMsF\nh4DZxTblNUwUVzWN9rRn25z81Il4VtxO8exaOiFJ3XuzIK1m+yxbg3nuHH01\nvC/ekAZUAsp7ww0R1tlIsrklmzW/Z6mpKIGupZRYo4oiPn97ki1TOXhr03dF\nj8/tKW/sNIO9oj93hLRhc5Iu1J3jWvnMjotCr3vhANmfovTBDd0vzYIhtWQa\niAnrsz8GE7hDV5ClH3ajHpv3pu8J6Q7NMhk/oVwfpYE5u3IqxiHgXpGYQd2N\nbv8uAUxxjpSIzLGC0XHIUEyVn+Z7BPE13dOd1+YrxBMJS7ktL3lDWjU+p3yZ\nicerPk7A7M+AS+/R8F81AO9ldbXR/1oyL+lC37kBjlTEuPrg+/a0EzWv2I95\nbvSkFDEA3ik++1gJy2SY1QW9qf9ArZC7Q1jeJ1ECMkFs7z5F/A47c8Gdy8RM\nzgoajGmO5/Q5EFLSaMGUval7aDgjOLXs9JhDcn3uk5GX3K2bobXXah8bXagN\nx/rfF3oeP5sLmaS0Hfg8Y9iFiIBMXs0lGF3zXtTdPx1Ngj0EOLfwN+C0F/DE\nRFrwP5vVHDJSxePywZqdo5tCXKASrgmk9XFGuFv8K/ge+CTT6bM8OcLFBjb3\nmu9To19LZyq0h2BelAUwCoR0jTgR8Dr51+ICQl8KHpJOpv4FSJHscXMTOpyz\nXaMo\r\n=bu8+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"47f67e5fb310c13dac39b9beefbd6b53fa54d1b2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_13.0.0-canary.b47dd37a6.0_1628196534888_0.0884836061542158","host":"s3://npm-registry-packages"}},"13.0.0-canary.6c82b965b.0":{"name":"@material/density","version":"13.0.0-canary.6c82b965b.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@13.0.0-canary.6c82b965b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3b96653ef8682701f3a537573ea6f7f8b56b0643","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-13.0.0-canary.6c82b965b.0.tgz","fileCount":10,"integrity":"sha512-CMwpXc2/vW7dCPpw1zcT1CXOHDnJ/140nttEEUbE6Rw28OvSwHazNbDsp3CUjyrxNjEuIQK9Vc6MoAt7Cu/Pbg==","signatures":[{"sig":"MEQCIAd5yFChLoj5MvaJF0Yehx0hp2Gl8I1HJWsd4DJOpL5EAiAjSwA7Jt6Uw557+ciU4Dm12IKrxA/U4NHJsY1MFRvDBw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDV+9CRA9TVsSAnZWagAAEkoP/3Vg3U5+RcI1+wGi3ce/\nK8FCid6ornl71S7dTotJcZWfgM94FKBiFZTOqGDYHZ4t3M+0CBbVqCssSOlm\nyuKFePtEp6psf095G5D+bog7N9d8utPH27UlUj1r74Oh5VIixZ6noN0edo+K\n8kbXmrPzxE7d/Zawv6EZoqLBuojzOmShz4kHtzFYpIsjFGL1mCO27VZjXj20\nm4D+aNufFJHRJMCUMvJt1RJCQxlGwYbFoJepBtk02rtjKGy8KrFabYxt17ts\nQu608CTapajUw3iMzq6+P2YXkvlmMbQAhQC0VjOxvP799sq5M80dZGElKWhq\nkm0QXJrHyxvARPUC9aK/8H9QLiJd4Cxr2sWibKFRQBPKmvbvnffULuJdh1Z8\nQ3XwbnGzn8amWQfugQz0yQUh5ajnnK2UB6AycnUVu5JOz+ZRyW0wwv0WbRn1\ncr4fSRYLH+aBlpupDAvU71nSq0ORjFfYVld6zEb309tfTrLNEF3wvW7CxUzA\nWTrwy6VjLmskBC3rU+b3BT4G5MfPb2cKrJLAogE1Gfso1AoAXbG/Mw8Dvgox\ndoAMnicKI+TnZdfQfIvtKH9rIIEatp/MJqt4jPgXmwHmKWkoz/zcydbVJ73K\nDjMs/Xz6VJGsodiTxOZJje7UpXWR2LSkOcnq2Szj+kf7619JDE0Di3C4QsE/\n8SmK\r\n=Pk0X\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"434420b9fc9470dc77940d2240234a564be58d02","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_13.0.0-canary.6c82b965b.0_1628266429444_0.14371677911283687","host":"s3://npm-registry-packages"}},"13.0.0-canary.4ca11fe76.0":{"name":"@material/density","version":"13.0.0-canary.4ca11fe76.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@13.0.0-canary.4ca11fe76.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"505ce9d1a89c6048940c52d51497113d82620c34","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-13.0.0-canary.4ca11fe76.0.tgz","fileCount":10,"integrity":"sha512-j7DLxYNif/pOc2T6AjSlr/s7CSvK/dz6LDLTCrSL8x38BkDluYZ8XNOejmI3lJb0vy3DtNFEtsVCpsKtL3R/rw==","signatures":[{"sig":"MEUCIBVvIlxDa6djStImewDw90+kcBc5dohZTsPjOO5pxj55AiEArMCMGYCrPBmoBHIlhFyI/TT2AN7NVwDUdbKkFdJBzL4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDWwOCRA9TVsSAnZWagAA2xAP/iwD7NJk+F77ZSX/biq2\nya/wBuCNXwjxicOKGXE9rGi1NZILsFiknVjh2ggv6V11a+S/hC24urskZ7hh\nSnu6CkmGtEodKP+d912adjzKIQJDSytTyQ4dDNKTXikT1vo3Fenz/FeLjSDA\nWgqFMrA1kT0bf1PWT90iN1p6VZLAvfpEh3N2ivJ3YnAelLdBN/x1pYjfDMIJ\nHrDwEHuAcp9PteuCYe++tRPbkNP4rpnxvLyN2JDolYsUJ8ZlUDWh2iTf2y1x\nUCKXXBy5bRI7lOrB0LIc0GzQcIQb9+deqB1QtHgqqvMRhFQSl5UjMgiP1zYL\nbMOYwYm073x6XdxPL7MqjPJn2VYcKBT9qL+AU2MR0Uxzsr/1xGKxP4W+Jtsz\ny4Q36ZMlfERjjl0KNjW7i5jUv4czUZ2em44vYsXxkXKCKT9lzXlBfUtB5F5g\nUav4uaXvOBj0SE4RN2PJ2EyJ8I47oz1N6uu4yUYipx0wtyPtPpj1D1+NlDAS\n2QMQMSYXF0DOsn2+cAg1r8JHkqu4p8toiJWFaJfKpOpsFyPPuETouZzFwSjo\nxOA+yxKRjtggS7u7kDe5h+/ZopjqC/n3UqJ9oQAHSdwghvas73FXBnxKB14G\nFg18fYavMMSGIMKZuCeHizzag+cuD1lV0CeGJd6sUeBYe3s8N1dOKNoAw4OW\nMCwR\r\n=got/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"f012412147804a7e8c4bbcb205a7a48a045cd694","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_13.0.0-canary.4ca11fe76.0_1628269581914_0.948734522600867","host":"s3://npm-registry-packages"}},"13.0.0-canary.510cf90f2.0":{"name":"@material/density","version":"13.0.0-canary.510cf90f2.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@13.0.0-canary.510cf90f2.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"426db37942531c0098706c8c43cdc3ad6324fff2","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-13.0.0-canary.510cf90f2.0.tgz","fileCount":10,"integrity":"sha512-Of7M3Mxpq3oTq00yeO2RIBQtXCp0JPOOKUWmpE26IQw+HUns/z8kTcXFVvH98EMVbAj8zPg9EOQl/A91q6M3gw==","signatures":[{"sig":"MEUCIQDr5K+7J5p8BuZRY/XgcTyir2DzgkJqf8cgQt16jHaoGgIgEc+zazLVjWn3tuklQzXpiBB4MU7sRP89j+4JFHpdcb0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEWLeCRA9TVsSAnZWagAAkI0P/13js7NH8O8NeT0HT8Kc\nO+DVeTAfSwD7kmzKZegWuwx/KYk1eJSxQ8OGmSkCoyNOVLUdbsc6wX5rM/O0\n8joqtQuvSpDL2XGYEs8GB2cNZVpdEoXa+bqKzJcTA9R7JKvbV/12J7+fbnfH\nny1rSLjIfSspeJk0fL6iXgE0dWfYXofsK3ELDDgFcP08BNEml96qFCSowhXM\ntzVxxzgMc4Q64clt4AtxoVtuK0d/jKdrSNrfUp676ixDCByzYYT/Jgi1rwr2\nTZpNGaNaw7/HCS9gFtJOlqK8LdQoAblczvO+AE6kEOtCk0ynqhWwHPC1ELtP\nD9Jl4wJMbo3mHG6rHfB9icqEEii70rAUDb9Zg5jR8BgN3Q+x9vDPoDlF4UbS\nH+VwiCmZHAFOiDjZpin0u+JSrxTDSbFGfIO1i0CzXqgY7ofnLZWZpZKWMpOr\na7qeTJX+09uPODV6sPjBE2CLN6yW7qn4JF7g+9OE9RuGlFi6EUBnHBiLCGck\nK8A3CGQkAyy80xGE4BmPce4JF0VTR3vrhNg40WAfgxXgadXyvvUKEXjS5AF9\nxkblAJVxfNVyACPkr+S0DV6oHKVe9Mp+V6MhURveqF0mcHJT5aYiSJSVQqW0\npU0mkCet3NXwwc7O9eYhqTpFNoU9kf8s4y3eyHCn0ohKo+Ka6/47Q0c8UYYc\n4p3u\r\n=iIis\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"1e11d1f2c4c830419dc862b62700d4484604a3fd","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_13.0.0-canary.510cf90f2.0_1628529373904_0.3868522233398273","host":"s3://npm-registry-packages"}},"13.0.0-canary.17580ebf7.0":{"name":"@material/density","version":"13.0.0-canary.17580ebf7.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@13.0.0-canary.17580ebf7.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0d4dede38ff0d63d657ab8d8207d3910ecdf4342","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-13.0.0-canary.17580ebf7.0.tgz","fileCount":10,"integrity":"sha512-UgvUUY2cwOichdy1dWZJu6niRM+jE4NUBujqFGwPVE79TdzvsyL2eJoqsuWziyB9O47qBW9eGQWD2zWE4oDBKw==","signatures":[{"sig":"MEYCIQDbSDWm9wnUrDC8EI9D7Yf0cVm1S87YpiGGVoyUlBaK7AIhAIFvZ2fPJ3t4bGoNvbJ2Dyo+adBjFoA411NU4JUI97k4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEXDsCRA9TVsSAnZWagAAiikP/i42S8P5kiR8qf9wQKUG\nhGjYKKs70hDYsGu/1MHpAtqRVb6WiIzYST1c0H3Qu246/FZJIsVORlIS0RPX\nlaLw6getnc1V5pMhDbUNQZgtzkgqiuuFGDXh9R/pNve3pScio5uqUq6LKsze\n41LLuqWwj2Zgml0Wr0nsTwisO2pu+/WG4SX+l8VYrnz7P88DVezIfE0CVSjr\nkyDh0Q38aU9oTr33IMHwMxYCheSf7Xk3PaLSrG0e1cXgWQwGdIPYHdRLeje+\ny/NaRpAfHOl5MxLmL9F2Pl2EVRrbH/y1xoyaC0S8lqY7nOfPufEXhc+0KM+B\nYxRgT1tkxklL02mmsP70iam2fxZLW9+opq1szXlTwyj9ZH7fDzh0Rxn9536g\nFNiZCi1XYYdPB0COxixs2z0RNCrsI+rQ6DnyIYuk2yeqrDWEztmRuAM/HcOJ\npBO+sT+h5KSbL32XKv4UF+7tt3VpPGXdcG82zETICPhGdb/3TSGzLrC5dZG3\nLn1YO9ivBAeu+Hjp6KTgjoCSBvPGPwDUgdUxCJQbYo0NXEd2g1f4+se8Qkbi\nAwOTOwaFgARuSCvdc0Z8qFJOKZy0P34UrPU6rtuYieOsBmGFCy21FneJ23kH\nGLEtpRq3ZJQsptcUOQBDnCdunbgI1Soo45c+3aSdy3woXY55C1wQb9IPG/L/\nP0xJ\r\n=4uxt\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"5bde42052101fa1fdd48d89c3dde8b9e99bdd1b2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_13.0.0-canary.17580ebf7.0_1628532972628_0.8002843959397385","host":"s3://npm-registry-packages"}},"13.0.0-canary.7249a3060.0":{"name":"@material/density","version":"13.0.0-canary.7249a3060.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@13.0.0-canary.7249a3060.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cdebce652f2893cb9ee7caa899549f5a691e1f33","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-13.0.0-canary.7249a3060.0.tgz","fileCount":10,"integrity":"sha512-5urPfGDFEGVhr/8RUWrmSznNBjVFF4PUmPNwUTk98XMZE40fu9InfhIj0w3Tm1tZMhjUeXyC1EwDnzvI6UpuYQ==","signatures":[{"sig":"MEUCIQDjBB9amzgzWduMQ4jGBZE2StfJ1GgL7XQTtDmzZ+K9yQIgC/wCqd/rPROdzSMj1Yr1n9/mycnD6aejS4NcA8EuMKw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEXHvCRA9TVsSAnZWagAAlscQAJb1dgZB/xhrqXU1A173\nkt1/bONmBIpGq3enysqOtvt3PNxaiJBuA4TrOBoGiaPzu4UraPX77NV7wyCF\n+MJiZiyjXbV2iKhcVOTCGD/V8xdLQlncXWob20c7S8o8Et6lORkjEFnM4kGV\nt68a1UdMLCAU62h8VF6f88iToFCTsNiyDZrVF5uSBNn/t5lA5SjYuWElKEHF\nNIqJa2MtzdVgZ5S3I5LeRcOxu1rj6VO0oYwFUbCsPHSeGxDo7pCO3OSddrSZ\nPIthoTaa5qzWWMGTVv6/5Iqdb+U0VaFZuePbINdcMVeQYbnTiOjWwnqmfy3/\nT2FggvUxJ4Vu6T2ubINBfVgKT1rTiBabzGpM1ArRU85957dZ/5KSNH7u15rq\nFOsegD0Nrq05oSOtAL3FA6Hz+cJa7dssBe8KPBBS/bAovbVte/18jUSHkLih\nH4C2qDrpEBihmqYGk1sB9Zmxl8ccwNprgWgZTpoD+Xnvj5INPKdscSVDJIWU\nPYlKfeMFXW/WyyIipDIS+t87m3vbxCWlN/yXgkcjF1GPQDMv6g/vopKGbh7X\nOBc/RDHjc4lk2B1VpvIPwxVrUbFSrQQRcz+RBnybieXGn/apJqtHkxanma9C\nafVTwW+ZXrQgRqmdcRt60JXtgsEmRafLjdo2nQxSmXXM/UmfjNMlWCkVwb3Z\n3iwy\r\n=MLxc\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"3412ad644836acdf464e70d019c36080ab377321","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_13.0.0-canary.7249a3060.0_1628533231420_0.17276072977969248","host":"s3://npm-registry-packages"}},"13.0.0-canary.4c405863b.0":{"name":"@material/density","version":"13.0.0-canary.4c405863b.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@13.0.0-canary.4c405863b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c694ae504c53f9dd6c7d772fd7dc97324bf65ce4","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-13.0.0-canary.4c405863b.0.tgz","fileCount":10,"integrity":"sha512-3jsxL+G0O1VWoRwUDxxvBnVRby9gGSvEihG/7OmuTqdrhVMvHNJfmgIUS5J/La7X07uWgwSfRlDjh3WPsJBcLg==","signatures":[{"sig":"MEQCIFeOcdP0zN1W+WNQyv+S6EmFAGtfums8mFKejdvgWFtrAiAUde0I5RCan5owbO0B63zmJ/itcUUeep7Ry75Ls8N5gA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhErneCRA9TVsSAnZWagAASEwP/jXS3BFJ2qVM3yEIHBMD\npTstxRsjd89RRXU90/USEEn7XAl2KoNnWms29L6bxu9Bg573oct72fi56DZX\nMWKMsyC2RGSwUTnOMW0VwWQDWFqXHLlDPS6JXFTwDQzDRu6O3pWNpJ3WMl/Q\nvE/F/osOIoZia1an8WBT2c7Mu5DBKuKUy7msScCzKqmAqUqqPBC75IRCO2Cn\n/UoSFYEYXdJzJppt1EzM/eFftI8nL9sR6pyDBLIxMBsgXiz88X7QdtEJ0tZO\nV0UJINDrKyFx8Fa3zyxiR3TDO0THkFjRBttA72Fo8ThfxxY4sNdB+u51DrL1\nyCSAsM8iVfP9I3JKpJviYxVqeAxJkPNIZ7z5gZvFfZw2F5FojFZ8JVDaJefH\ny0KpmFFMYYSuhYSA63vg6Om8+ODxiGO/GyO2ObTGaus8REzEj+yJ589ikYb6\nl54EyUxQ7aOKuw3rul4CdpIHH7oB+m295rnTUStrko2w0nHBj/pBAi7kn2d8\nfj2ICYSQdAKDJHlL28DnVbSYZV4MhTIq7EtCfaU1eYuc6YluZIAslnhMAZUx\nbtilIImzmBBkU85Hw8xj+Lv6CZ6pafjB67rmh49Z0kV+Oo6IqI9cWugmwgRa\nf2/fdxiA73xzEQ4vfkLOHWU/y94QT06ZhPRiu+zHbk29VLvFDNpzsachMZoy\n4cAC\r\n=XC/N\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"b3861554313a19a861a5f6850f9df33ae5bc42b6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_13.0.0-canary.4c405863b.0_1628617181988_0.021353232222969254","host":"s3://npm-registry-packages"}},"13.0.0-canary.f4241a42a.0":{"name":"@material/density","version":"13.0.0-canary.f4241a42a.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@13.0.0-canary.f4241a42a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c7c03e518240e986afbbe0f6ef07cc22250e241b","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-13.0.0-canary.f4241a42a.0.tgz","fileCount":10,"integrity":"sha512-UouH5A2oQ3e1V4vs/hBXF2E73DqEo0gMMBmJmSsRXuFMlU5b4uZLBbeGGk6ligC1pFsgqvSCedkd4/m/yu5C2g==","signatures":[{"sig":"MEYCIQDBplHrEv8/Wczqk/A6dSbeXkT8tZYwHRlVnX6SZMlyAgIhAMQoWeGvmib9ChO20Dw+oqMJ5LrF+BdSIAZRotIIyvu4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFAGsCRA9TVsSAnZWagAADz4QAJzOa9/LcpGH9WTUAlPZ\nr06OPFZs2Vtvcr+UKQqclpbWRfTD3jH716j1u23AD+G1YrAf4psGBg9bkMye\nkI96EQUJI3PSNAbq0LdnxJM7jElZGEglU6RaCXo7iN1dfhm2fAgCP1zKXoCV\nLjCOzknoJoVjdAj5VgH0HcYE5dQWm7kMGX3rklGtiJLo1t6eT4d8bZWo2brK\nlrH9eF+Xt3/5RYEaWC2tDybYY7ND7WJAp4+1TfLfSWApRLy9eQTZ4P/1rEwC\nvCkmFyj8UthHd3AzmpyLXWuTUe9iTHMH2hQ8ATk4fN4qxKk/g5MCplr4D9YI\nAFZxC5srBr8MmjXATrTgvHLcT+NyoB3lxbf5+ombrqzj1RCJH+Lk3h9upMqe\nPb4GiNiKhAKdu7rssGnljvzK6YoO7XkJeb0PGXxtGBrSb1vGhvjgmyCnAs/7\nGAUfelZ2jY4URZDsS6Z03M/4o1mjzUvCrvSMvNPc18aBzWdu7aE1szI+PcQ6\npmOVCDmFypj2MkX8qdX6dj8FhE7b1nLxs7Jcui6uuuLO4DKC6ELvUoPrka3g\nLQTcCQltFTO35M3tZtu8VO9gkESADYA5s1bqI2v79TYb9NlQ9SURTXO3GMJU\nLXsBAilQhQZkk/b/qmAcG80lq/njqIwmVeHMGGAMAdHuLhF7EoAJ67fEeVlv\nSDLS\r\n=TMLX\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"bd97e42dc6a97fb74d92a9cb04e919c5c8af4da6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_13.0.0-canary.f4241a42a.0_1628701100324_0.5145224846838228","host":"s3://npm-registry-packages"}},"13.0.0-canary.0ad12ed3c.0":{"name":"@material/density","version":"13.0.0-canary.0ad12ed3c.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@13.0.0-canary.0ad12ed3c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5d0328a555d10d94400827c9d0093816b4db76b6","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-13.0.0-canary.0ad12ed3c.0.tgz","fileCount":10,"integrity":"sha512-sr7o0Ylqq/ZL+xUjiJbBswbi8Ntaq3Ej7itZB+XuGVG1sGrrZrgb5yLogB1vkz/4oc7QIG4OU96OrdgOGWzgXA==","signatures":[{"sig":"MEUCIQCA4TFOjVmqpwpkCMzL9JVzr29faEmfIvVjYCd7BvZMtAIgU89sKnH3ANxm9Fv6n6LyMgt18WCRq9Klm2Q+Iof6Cqo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFEDVCRA9TVsSAnZWagAAoE4P/2v5a3YhxzwzekbwXN8i\nOZ+Tk5TlxTotR8lRtjWiRCz23ebxd4Uf7CaLnPzAQOzWchu0eOVXbpQpjdL6\nHit3ywu0E+StlpLxhqp/4nRxnMt/XYGV4veO5m9uc0ZHiN85ZKtOl0ItzmT1\nRDxncmuJK9PRhpAV+nPnEgBysF9kD1g1nKmf8c8TwPw93W41h+P3383wxlIv\nn5NpxWRPzUcJyE7A1/qB6hg7Uk0ODg9WjaCsOi9cwLHP05nr44Cm3bwvjVuz\ns+OFdccClpQ7BAaziyvZcg3Ry82aiu+iS9B6J+8Z2ZIvZM4eieaoBn1QjHhv\nDd+gI7iMSXD5ifDGvIwE7H0tB0RFSOvELIQ5nzYhb5/IbOVuZh2T7ms0guM/\n7EHU/CE3I+N1w3vSVVhaLQtoqHyGhpE+BSCMqTKTFZkVNGMN7HF3NrBfpgIW\nYITiC+lbm03sWdonavE+D6THJasUr4Pg6AkkPsCBW4zdH9xDjhNe5YTKlN7E\ncCppeknigxl4jqeZWIzqqQoms7lbDkT0THZNvL514ffjCbrkukRD2M/6I3n1\nM88THW6yOzRkP3RLx3uERbub3GypL2JKzh122vbsYTcNmfPx8kXIfMZTSOG9\nySeyvw3SDI5MV/4UNUpAcaVPJnVVe2Z3PCXdADxan6dOGxa9XA63+qmc8siy\niO5W\r\n=nkWI\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"db28e7f3596365b1d41f14b53d656a743eb28bf3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_13.0.0-canary.0ad12ed3c.0_1628717269139_0.6464440195727901","host":"s3://npm-registry-packages"}},"13.0.0-canary.077dcfcfe.0":{"name":"@material/density","version":"13.0.0-canary.077dcfcfe.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@13.0.0-canary.077dcfcfe.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7d173d1c166bc85f68dfb0e96ee8626fd7c2ea29","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-13.0.0-canary.077dcfcfe.0.tgz","fileCount":10,"integrity":"sha512-5kJHwORtKqkyFUBMZgl3kSCIYyJlW/aVHuOFGwHjMqMv4Zz8DjH9IibkhmFQCEpVq6NAwiDwQ/sp/5Fa0nlQfQ==","signatures":[{"sig":"MEUCIGfu3BiDk9GV5fhQLquftyy7LIZEUmA5+Zbpet5Ek8X7AiEAtV626+wD2SnQTZ+ILRP3UUoqlNBlzLWV0qAkcGuz85g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFWBLCRA9TVsSAnZWagAAiEYQAIvG0nC3VDgj431kq+Xc\nx9wmevISy7mv0BOwODWrTSG9X2qCiwhIgGbO0lsbUBz/UIL5maN1BcCPSJyR\nEkAVzct7k1cjFFN0xwev4q3EohEf6xqswd1sQKORXFAkKPn9FCr40jjv/dIJ\nssLp91tS6TB70Zip3Ek67xLXld90Yz6k8a3NGfejK/ElmoAhZGyBo3Ayy09q\nBpFcjQu8UtYxSv0aGZ+2kmg22PbSRNNsODkl85wl17bLUvykYLM2lcWqTO6I\n+84VKbviTjUNSmZH+ylIX4qcM5tmEompvpgWzmEdYfpxAGyj2TBS5UCzCFUz\nhmzOSCamBS2NguW5EseavUqXoADCp4M9r8spQV+rWbE67o+oo0FWSvVm0e78\nkc9HHF3xw60WIExlFUREpL7p/tDxnccA+60xdDhaJ+VH4ZkZqwjO9w+0rSwd\nWDAjrZUsYTFz+jRqqhGRDCAwclIAHkmHXKrg/REaqagwDzNSBSBSKhxu4Q5L\n1c/Vb+srQJdEeDEb2TSIbv3+eG08bwbGOsO8CAZqUIzBEN10Dw0PHIpcoz1C\nIfymj0D8AsdRzaMwpmPv5GeUqZHgEGbdX+g8z7xQMsKPkA47/XB7gs49ZNIz\n7WiPuVcy/MeRcdClrRyD2hyGbtbM9kZa82XxqN5UT/z4YcFDdlbqos0dHc9e\nvB8I\r\n=xpOH\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"0ce840a62c702182bebe1a5f2ed037bc002472dc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_13.0.0-canary.077dcfcfe.0_1628790859250_0.5212110885433279","host":"s3://npm-registry-packages"}},"13.0.0-canary.e3346766f.0":{"name":"@material/density","version":"13.0.0-canary.e3346766f.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@13.0.0-canary.e3346766f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"03e62a36d02ac171dcc0351411f051d6a4bc2aca","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-13.0.0-canary.e3346766f.0.tgz","fileCount":10,"integrity":"sha512-jHdk4pU9sL/Beck6bgnRYqDrLLVj6aoBHW5FrjHX929r2gJZ5HXEubFteq2i1oUt1oxbHtMgEIGsx7PbdXKDmA==","signatures":[{"sig":"MEQCIAHvaz7b+Yq+sZPo3WpZ4RCP2p3pFVCmi3nnj8t8Ua3eAiBBPCzSIyaQvbFZE+lctF2DXVwpsTp9hfuC/hlPiV+XKw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFsuOCRA9TVsSAnZWagAAAOQQAJKufMObPZ2No+wXirl7\nOsVOJ/jPeXUaL3viKOmMgmk/JyRkNQzqJ0+m9JuE4perk1b8X635sh5l2nw0\nZzSsfU91ztZDTM/FMhdv+jf5M4l2XN0ilaDpJkxmbQQUPK/wiDUiABFNFM9g\nrmU5LGZdEHlYf0ub2UYmaXfQnqrfCqJUVC9HbqAN6pRK7g0goUfDMbGEtp+a\nuq0Dj99mjnoCbpY0pHs3wGmlelF+k3Z6HAkuOONBc9X4PHPTBnTML5icE2GZ\nfjurDfbwRZayoMeX7lnWVoSentbiCwHc3OFeADj/Y0xd7uKyD2ew67ahJxPC\n6QjY9zkecapacI2Mbq9K2sXGOICv/eAie6rkZ67VAJYXY3Y0AGh+S0n2o0+s\nS3aYIVN2MzktovGH7CJUX1B/xHsz5VYK6BvdKzsC4OX1+r9VrCxiiqIMuI3x\nNGupjh/VDPCtW+8f376UC1XhpCGh38z3x435uT8x7zdaJQhISfnYKRXitZZK\nMvr1NbitFJdbDuWD4TNqamYG8n6KN78Agsr00W39YEN7MF5Ubfi8zna/z740\nUMN1MTUcaj6UP/ipapAn+eMFXltSCG11NJfMwEgyZv0F7karitiw8+jX554p\n7lycnrp4E6SibCaUBynxeqAhq/IWIutW8leLbRWH7VMFFu+TsiQsYgtMjaiV\n+PLg\r\n=y5Ls\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"03da616c76c8b7fab07a24f82209f171a2fec41c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_13.0.0-canary.e3346766f.0_1628883854688_0.10382280228519436","host":"s3://npm-registry-packages"}},"13.0.0-canary.2fb068fb0.0":{"name":"@material/density","version":"13.0.0-canary.2fb068fb0.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@13.0.0-canary.2fb068fb0.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"289bfbda1edf472e16441c1cdf7928c2e708ea24","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-13.0.0-canary.2fb068fb0.0.tgz","fileCount":10,"integrity":"sha512-JT7y3FXXnTUr1E5SOhbyWvg9vmR6iYzdRanhFDbX9/0Y9gj5KKjoIKkKbidaWJMNLJc1DYsxbbXzsvn+z+3Xfw==","signatures":[{"sig":"MEYCIQC2YlRkWvWbPNTuRt8+wDSStj2Y2hO3N2vBlFl9FKVyTgIhAMU1/p/CUenkDw/xc4ch1A8M4NHpKy0iBr4mlDiZ6SmU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFsxSCRA9TVsSAnZWagAAo70P/jcvY21xOJRCKLnnbPfu\ngQW//AW2cSEHdXrmBZjH1fuOTdFSefwZJhZTrRkM1L529fRvcSprSJ6AlhUo\nvdx2OK7FqW0XIguFPVgC3vcUBn6rx4n+sZcVXPiy1Ts6ybrzO2kC3cAr4yAg\nxGNVLnn60BuFSpL37cBDdrynH/LrH6FQtqTfEPgTBH8CX9Cc4iNNm5bzZ4K9\nO32yXK2N/cL0TL0URXbGTYPDZ2nO68xnRvwCDhBCYeFqr5l5AfHp7xL5ZsZP\naJIQ2MYK2uY3ozKU8wfQDdGzAOQ+BFlSrk2uIvUXJmYittYC4xjEA7jstr+R\n6QqGzUV/a736CUH9vHiJFplIcYpkICu+JCi6PxE1ilPY7jgp6duUE7ITN9hG\nLq3bt17/JNSb0WuekcmXaDm2HJGazC8phvZgfaIgBWoS7cWA7PFciBgVw/rZ\n+JD51WJ63c55WhqOLDkktTXahGeW8LKWDQgIY5uplLrGOMrOjd9HXckPYHIH\n2fXIU9WyjqBjQKzQ+ZUYSvvRjIrwHHzsAAOzjYwGtNAnDSClTqmoigi/SzK0\nDBnItwu8NmBYPCK7H9MYFRfT9wSEmJcRwkOmSWrX1wUsaxuyz4TAWw1KbCuW\nke/OA7pwMbzex4id1H6z4NG8JsfA7/ggOh+F5Udih+5HR2jWIGVjhuCCNPiz\nlVpX\r\n=LUeh\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"cd1967c0a3a80639eef1dd76a8e579a4456fee90","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_13.0.0-canary.2fb068fb0.0_1628884050790_0.6975148805148388","host":"s3://npm-registry-packages"}},"13.0.0-canary.fb76c5069.0":{"name":"@material/density","version":"13.0.0-canary.fb76c5069.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@13.0.0-canary.fb76c5069.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7e6cdbc04963528808e52b6af43007960a71b2aa","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-13.0.0-canary.fb76c5069.0.tgz","fileCount":10,"integrity":"sha512-PFTqjoOEf9qfxHJtDsIq4ADtsG1Pto/ulZce7roR5KwlsmLsWGznt3tkTsRtV6im6nQ42tT3lKt4uPLq+nWudA==","signatures":[{"sig":"MEYCIQCJfAQJKtCivU6MwZoErq5H+8fBvBdyGbAqmnauqUNX2QIhAL2hafZpkejltLOjDDXnrJA5KfesyppUMTssoPZcz1Zb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhGsVsCRA9TVsSAnZWagAApQgQAI2Lo1V00Qr75tWO/5Ov\nynzyDycpMfPuC1OirD1mzdD2FX5g0erBqEc4v/HX+j9QhuZLEBul4inR/gL4\nfTu1wif9Bt5dRx4MvQhsBv5dGqnKV4/PfHcDfrc8P8DtohwFalhgMP4CtyzC\nquwc50JyK99RI4WE9e43GNztZUheWrX+JfWTBThn3fYkUih6CiwFGaObssnZ\ndUl/oNL092dYSP2Kn/NVQ08QZOcgxE7WI67DMq/YbElQrNElp1Z9TKQK2Ox8\niLG2g/ddZj2y0ZCt6xqTn0qYh6pI0uRrdOYXfWG/K6DG+gdFq/UmK86jHUEb\nQP1AZTUpkBvvrWILPEUseScQbyW0qVoOq2Edv0PJ7GKNxzYGOefzPoRTToHQ\nXM5PpTdfREV4WrJTcNkOP8gidZWTaI8ql4iuSSJI3yjVQeGTWF1EmCjmKMC6\nKS0dig2TkXyBZPqSGUNXWBPxwdb9h2lhnZtt/mnYJytkWLVBCINL0LzKrTTm\n+DkOx6YZhQNSjZqGu9aidAs61P5UzU7f44He5NAxsf54pecvInWQwhfVawxH\nFdtv6duuhwsKtZofRcxaaWIYMaE+jWbgZsYBSfD87466uXfwExOdrNtEo4Vd\nMB1ZQjXw8YMICPYFcaY/XpGv2XutdG14OvFF+VGuh5WBhb7K9JJy7Tp7OlPf\nADu1\r\n=qhvY\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"8a969624431e3c1b8d80c2e2a37e5ea5af6bea4f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_13.0.0-canary.fb76c5069.0_1629144428811_0.8809641572901401","host":"s3://npm-registry-packages"}},"13.0.0-canary.457d89aad.0":{"name":"@material/density","version":"13.0.0-canary.457d89aad.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@13.0.0-canary.457d89aad.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2627d8be5fda9e17372bbed7cdf4911c1e5fc798","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-13.0.0-canary.457d89aad.0.tgz","fileCount":10,"integrity":"sha512-t46BoTG9EDWR3jQ4FCqT7TvtJrL8noK/r0xt7lXg6EtbHqfD6Q1NGIwQ/wNOnQl7SwDbi8d5mioU8O51cxZuWw==","signatures":[{"sig":"MEQCIEAQ0kSs57s6xHqb0ay6lxTSiQgvs0FlzaYJ4OdePcIRAiBvpT0RLv7mblko3Q+OAcZMlMRCNodaK3/7RIW4npVhVQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhG9PPCRA9TVsSAnZWagAAS5MP/3uAipqrhWS2gd0d8WDk\nMjJwSAwFKRIN3Xu+iF2l4mmbDkXGqQOwMwSFaFbZKS09pf4zcJjmh77/lbr7\nZ3njMmerQHN9wPEWTfLwk64kEhr4bl+A8tZYnyoLMpWe6ytujftNy45laE3U\nqaaXdGvshIYCG8L6hOJ1CnogisovKY1A3whPi0gqJstaoWR4BIYtK8+AjiK0\n1BgVuAziDQ++qcfyhSgL7Zx43FOW+gf+pcVo9VEYPnVEn6IVK7wh3iLM5xoN\naQtTMKi63ITsuct24LcITY3QCkPD+thcuCHWs51OEy9XbMsiKn8lUdrEWuZL\nQeUTd8El9uroU5ko1JSlb4dITCeGm23dEwq6JN8jVT6g/qSeU4v/scEpNw7Y\nHKbga6sYkLKhddCuYo0dZywSQUeqFUmA12R1PMROnsZOSH+8sM7rTuJURlhA\n8AoZuthC2B5mnwKjwjXIWQAhUhpFuE004MxXzi9SMa3hDM9K0erujt1i44Qu\nNDPJ2u+eWw64xT3kS6dHEV6I7USFeZUVD7CqqMbjzCAysSVn4pcPPthUeWNK\nWX1EEa0hwYedDmRuNY8dzRABIydvQcBt7IdchGOP7hhZKS2K8MVp2gQrb4xW\n2q+a9NyWWAPTKuVSBr1pV7oG0LbnwUJbvLDGEtWVC1BDuZrlyim83nyhwc8V\nfJ8R\r\n=lOQI\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"e1aeb9efe0d3f4d8670a6ce174d17d7528b34438","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_13.0.0-canary.457d89aad.0_1629213646815_0.07292988097700626","host":"s3://npm-registry-packages"}},"13.0.0-canary.0de2f2edc.0":{"name":"@material/density","version":"13.0.0-canary.0de2f2edc.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@13.0.0-canary.0de2f2edc.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c84dce08d8ffe61179a4459462092400dace435b","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-13.0.0-canary.0de2f2edc.0.tgz","fileCount":10,"integrity":"sha512-wzk2XaExwTL8/3CDzkMTct2eB3D5pI3ihtOM8tGJNHxH03CKeZWiI3pHB+kzTaUg7CspOOOEIsdDgYdtroDSxw==","signatures":[{"sig":"MEYCIQDOmijPJVl6F6jOVifMvRQjqOTXPvYjs60XyUjFg51+ggIhALNCnTv1Aw1fxiIWeigmXOTLyGKMvgyHySxj5UYVJgsa","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHCG5CRA9TVsSAnZWagAAS+8P/1FIlLi5Xms8d2meQyQe\nq46Js4FXHV9OSnTY7onkwOTYHP93z45iILOo0M9FAPOkeeM2OSfYG/wldhSk\n9VXMHj/WCEEk9IquT4yYMW+8P+7IMzdMO3hYZjPzOLcDZvd+L+dQZBHktJDe\nyv/UZKtiaCEn8lCkm1XHbpcAT5y21SCwzMSrQrOVl+9nZTXiYm6QhLU7/ehY\n073n0KcXiXGbCYJb96nzCN9QsYwqY+wp3GRR1WJwMoZJTJCh2DQSfYDrMxy5\nj1CYZgFaCfkQX4o2F6cJjMHcSH8P37gr84sfTyOthTqf9k9zz1EBxCmYz8x5\nA6HxVaacht4DrDrjhPRVgvZY/QGnX/jtQN6lZDZ4vQ32PcSJrnGpYH++94X6\n44Eb7M+43oPZObS7DpvfpHL3T9aEQwTJjruhKiC3aTksGzl8IF07easu5pQM\nkZC5h75xBb9R2TJMlBF1OxXxF+LHcNhfVGGreKupFuzorMwY9fGr347Jq2O6\nfzEXDq4SiiatEcpQG4mubLVUEDzHh4uHgSRtSS0nZq02kP0GBTavB+KwnSyK\no62cl1Y2tWw+UuHKaiDpWwLbeZSkzuDxlkWcfnP7QZospOk+kn1i0QI8Fifc\nWPTCucgpQxOCigV3amKqOn3dEaihh4ldSgMuj/B4KFuBM+9vU+1O1Jkbcsyj\n5gS4\r\n=drqW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"ecc5e8dc0157f612d4cbc7b03507e3779919d5d3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_13.0.0-canary.0de2f2edc.0_1629233593432_0.6738710709115827","host":"s3://npm-registry-packages"}},"13.0.0-canary.1f9259b9d.0":{"name":"@material/density","version":"13.0.0-canary.1f9259b9d.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@13.0.0-canary.1f9259b9d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bf959b3a732a7b4134512a630b869d5fd5331061","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-13.0.0-canary.1f9259b9d.0.tgz","fileCount":10,"integrity":"sha512-aL9mBdG6j3CWdxbuHUFy3QslDBIPqUENz+Lfuob2QRNjnh73O9a2z/HcsbKUE6gJWFZXk9VGB9Vq+4bNRghWDw==","signatures":[{"sig":"MEYCIQCYSEUxV22tC3rQx6Jps4oW/0hZCiMwk+AUZVny8AVCJwIhAJpW9N8imw22bDPYTu9ZPpC8b8G+V2InlPRx/1FSWcyT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHDRwCRA9TVsSAnZWagAAEIMQAKFGn/3u36YdC+fbcceJ\nensPhjcnzqS4eBzr+PzXKHqMbXaCplHdzjVMbm+oY1n/djQ3QHXlsPd6t4PX\nAadMfEkzz+zzY0pO/Lo2cETnLN9O+mo2Vey3xmCID6Wz+1RKGkeS+syn5B5h\nL/fmBF+6kx1K6o7pS+Hn+z2LCTqgzuuk6kD2jpgWpVMtZAn1/g9Sd46+DT51\n9glbR/OisgvkoVRrs5UMEW5GC9dAflMa7eS3eeibAEbiWkE7EHjtP+Gk0Rkj\nM8f2vQx6Yr5N2wDHMlnCYCLJ1/cnO6KWczJU58Nwiv5OLl9z0350gkz2ACoQ\n8WcF3OIlwySeBn770KTl/sdzDZ8hKtTqdFh3YdtMFtql0WD6yN2pSv3uywmo\nL3pooxSDe9G2Hmj42hd+WoyKv0hh69Cl0ZxALdTNuo3FqSi9s145eEO9DEzz\ni0bYHl135w3xanIhfR3T/ayGfzBAJSO4uCAnF12GQy8bVVj14g96RxZtvTf4\n1c/6m0Xo6zj6wycQQV/sqAoSRfVup7nm6x3bMBKt8YI2rNORkNioENUCDM2y\nxuKFidxB1+FonW8LitslgF+YyJxIBvyB6CPMItC8pkggMRvtuGz33cJQkHgz\nNlozVckEyF1nC6x0bbsjhsVb971WBTybg4r9m9eLAbghKZQZZCeiBnRfRv8V\nJSE4\r\n=LmFi\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"4c2c9aa7510a4854abb7f568046a44631dfe3e7e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_13.0.0-canary.1f9259b9d.0_1629238384789_0.7802616020779303","host":"s3://npm-registry-packages"}},"13.0.0-canary.3b9290351.0":{"name":"@material/density","version":"13.0.0-canary.3b9290351.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@13.0.0-canary.3b9290351.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e2085b35830b32758c487db954c1e8f5117b4955","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-13.0.0-canary.3b9290351.0.tgz","fileCount":10,"integrity":"sha512-S3gbHCTz768Y8pwBLC8GtkdnOBiM1uARE/dThOA81XqKIGG3MCVZpwVWSmvllZZS7wdD8/rGSNGkNC/mNh/7Aw==","signatures":[{"sig":"MEUCIQCrMBEZp7R2X/CLyqd3ptf4hX7Kmgiqsbx60P/M6dzggAIgAae6jXnjHmmrbeClAeeCpU1b9xJoB0f1GZrkTNbWCAY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHJkOCRA9TVsSAnZWagAAG3MP/14HAo4AIjUPUTQmOgfr\nx2BliwmO3nMxi/UV0itt6EIcxwalMhW7zuyDpCG/sjYrblXohQKxas9ucNNK\nid4ecAvf1JHdGJbS6yxs6rTVV0qd5TWXpdsURCdoPrXKClPBcJ+JQOMTtp8L\nklFJcgdOYoZRGysxfpvpR22Z4/PEvpayHaKtX3Yx92zvOKAwUX0jl7iHyqPq\na8R5GIUr+6VnQ4ZfILnN132MzC91f/SiDNpREAgwMiTZkNF8wkCAMXk3iWnl\n2xWgxE3jQD3pKM6xj92g78Z2J8Lw9UcTjfBIpHP5tp+4I0ET8LEdYhSOebt3\nuIUKcLu1iVWQWOIsQLFdR5i3IcjAytZBFlXPvXkkgbP0Yy/QLOuhnLOYGxZE\nd9805SKCNb9Bls+NAKOiBM3S8KN7V8EGPI9BZB0QGtEZHzMHeHBUOB+EV4aP\n7oPrlrPqU2AZrRU+eqNcf9NW3ymM3GveRiAUKehSen5ojMc6+HeHU5o/02n4\nQe2tk1zjAu2usBtC5aAgF+nET1CWtIPPdX9w70jV9ZRDytySVxorpnYxM6nW\neMFSghWBWJo2hxSCFvrhiU8g4djdXXjRTwy/7YRHK2V5o68p6GzKqux3xaEZ\nicEOG3Wu1gbHElsgYKYSzjPSCl+LpUzou34Rd0Oynu7RZqgQ2A7FDR87eQpj\nnRI3\r\n=2/hd\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"15fe006947f65208dd0e450f8cad53d361b2930b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_13.0.0-canary.3b9290351.0_1629264142280_0.23010703277596778","host":"s3://npm-registry-packages"}},"13.0.0-canary.43d2eed2a.0":{"name":"@material/density","version":"13.0.0-canary.43d2eed2a.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@13.0.0-canary.43d2eed2a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c2c1e90cda3f2f805e601ad85b7ec19b9d59ec76","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-13.0.0-canary.43d2eed2a.0.tgz","fileCount":10,"integrity":"sha512-92nhfgTaJTntncLXbbPFcys/LsPFGmfb4PU2LSRFJmbifCwoATGsqMbcMpn7ZDzE2/73xZ13NOjw1VXJDoIpvg==","signatures":[{"sig":"MEQCIBOG63mGLXYoQGYzzUm/510Fd5wVI4uNnnsURbdDq7o7AiAlW4VMVCU1DcmXpHZXUNv52F0IHZKa4ZmDtGxFKAcUcA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHS7HCRA9TVsSAnZWagAA3fIP/2x/V09MSJuL7To6gLcB\nvddNzfclvbFD9DLiBfBC11XAGmHbcnalQy10r5DXHxNwQ/kcLygqMmh7X2AC\nBe9QopefuhEDk3WeL7VIN01WvfpWO7iN84wYfoIBGvH9n8ESA4Ca86Sbhw/d\nxdo//qC6VK8i0npzbQDOyYe68MzzI8hwiSl6NFaK6cbywraO2wtRned7bAKJ\nsmpmTQP5mGDAL+8hNXBkMsA1W0CuOFYWTFU5y9nrdSj4vUAM/N2+p1oDT6eP\niHjc4VFF+BBN4qFnbVrhHv7OgddHDTntYHndJnRxuGFTw14NclZgKXqedqmj\nv9kTVlpw4Y57e6t8TunuIwhQAhB4ozi5q0NUZ6gAp7sQGd789yqu0khpC9qt\n06syO7ESkAlnHd2xDxXfUDH21Y8ovkqhNqfE6Tgw6HMrlbVFyKbxLbmvoNwo\nDtgsHGsiiNMEbINvvNdJw2jfRnG3D93ahnQxst23jov9mEyVJY83fV6s2Vlz\n5Kvpbcn6fJzVBZS623AvIlGnlMU6PcO098wkVzGmwDwVXdzG9IKLFvsnvNS6\nS/DNMlE8qIPoGsaJMuYXJ9+JvcIWwybUQmMLS0KUSDGj3wTb2QCqX4sHR6TN\nae3T99+QOU+xjGNoTfNlke93TVOfY5A7YkjyWVtJeth4Qll0JfHkzNKWKFqe\n0T7e\r\n=K4vb\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"687e2389ae76da9a31b26968c0cdd837208d3359","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_13.0.0-canary.43d2eed2a.0_1629302470947_0.5146471921389817","host":"s3://npm-registry-packages"}},"13.0.0-canary.0a9069300.0":{"name":"@material/density","version":"13.0.0-canary.0a9069300.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@13.0.0-canary.0a9069300.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"81eb3ac339093bbdd9978e2752284fefd53c74e4","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-13.0.0-canary.0a9069300.0.tgz","fileCount":10,"integrity":"sha512-CcvdCg8hjNr63TRnymjzDrC6hm55HHq2ljQvs/WEaLrCJmJSVZ4EG2szMa7xaK2uQFOxLaLXozyJvWlLU7+c/w==","signatures":[{"sig":"MEUCIQCleBRd0LqrT88gDJuwTUd5sDMQCGhzdu0vLfd97Hd4zQIgBwx0o+Gc361YHDnwczz3+/hF1Rm+K3Rkn6smWwRicFY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHoPlCRA9TVsSAnZWagAAt7cP/1tSNO8zXnA8EN60O8PS\n6n1sryLTKcR3ucKW7CSd6SBJL7/i+qztaMJ53AZkImpUIcauOspmvxKlrCKS\nioy2VeNEf3Lm9SUgq/FYOAUGEwrMHpw7f4PSkqbfi0a1lyFHrMY4YosYM4AE\nVyQVLW+tcoS2fT4VZRp6feuUSaGEmBlrieKWkLrrfVWeYv0qDC4nn16IbQf9\nPjqGHQfPrr+/Gv8HdW2UA0VvilqRil0VvG/9Z52t0rf+QWQ/95L6RprVaYKC\nxNDx2M0cGgosl0zSceTm0GRctWb7bS7nxrTiFXbYk47ZvxsWhuk094sDsg9T\nKE9/hxOw2pO49odSy2aXWu1NrRA2nliq40iqMcfjrGOW40U3iw8Bu5WeSBRd\nIOjjiIq4giD61h3DKSsxgKLy2/Jj6bCLo/Web8XKGGvwNq+JO/Kn6Ft3gC8U\nc+Oyj4Kv4yNh3q7ugppgCSqK5wU8SbEqd2s1uuIUyxMdWrIphysa02bR1arI\nyj7FzjEWQrH6pn6bmPrdrKwqw18xh5i4dQuOsQF6+VPB2ECfT/si/Lnto47a\nlCiJgw4v4ZruMJX2XpazK/WnTD/2++uPEHXgEOASI8V0xJfrl8qPphTRQagi\nDZMy8BeNdMxE+qCC5vIMMDECUyC8Z5lmP8V0/8A6aLcjHIKB6Lr47W1NdHZ4\nNgwE\r\n=8uDq\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"a7249c6c2dd2d786b2134e129bbe3b4ca596fee1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_13.0.0-canary.0a9069300.0_1629389797071_0.8785304721943157","host":"s3://npm-registry-packages"}},"13.0.0-canary.7da413ed8.0":{"name":"@material/density","version":"13.0.0-canary.7da413ed8.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@13.0.0-canary.7da413ed8.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1109909b95bd9f0a53d8f1672cd41cebbe8263f3","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-13.0.0-canary.7da413ed8.0.tgz","fileCount":10,"integrity":"sha512-4YosjWcui2QXCLSoBiw/kBGarlnK56OKFpfcnrBMgQTK9+fgJbmNRpceAETX0U3UxUsPBbXVRL/lijz/N3ldpQ==","signatures":[{"sig":"MEMCHwGHYy1GnB6Qz2/ZspmumFZ1ULeu1eRlVdkEPMZQ960CICA2ltrpc4E6MXzxDqMGKhPF0iCSk98sR+Rn30iAcoWg","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhH86SCRA9TVsSAnZWagAAUqgP/icxvy9of4S2PlsPe2E3\ndQ+3KWo9hvCoo/wn2YgZmQ3pchrqiY/A5uva2V53cSWo2woq3bj/0/ssgLfC\nOxlFNBRBDF4z6daFl5kS7iNJZYLQyHsHDWbsI/CS25FxVmtknkSy+PiFzRjU\naWp54gmMgBJvUd4wa3P6L5kP6lwu6S6Mju26lD45Suk8URWkvHF420jpJfSo\nnqi0mC7Lgs35HMMcGbxVvlHNs3RiCJJtYAGo1rmIDcUvbv4147312N4sKTnh\nWaS1oH7OmHH8cnf5eUzCF/D+EoCvjdAA7kH5h2J28Ygqx76ubE3J14FGVoE0\nA3z92MNtGJFVKWXKjKQwgA7otThRgMVkNstgSJaCq+OjIxZiyf2BG1dzQ4cp\nuBI15XO+RHDWnvXdWsdPe1MepPdm1k6dgtClfCRyoglv2kxgn2E/uUsTNjBT\no/IwC6g1TeIextGt/03YI6NftsaoHGj9f0jhMbWL/yXmmoraF5lnHvsMisvQ\n45TozaLGzmxH8NpTAnGQpm20nCYtwNDc6E0LztqTm/ewSfaEfYw7UC5qYE4V\nlPPp6U9cwP2/Vq6qrmMB4nYhHgaArveCTfYNm786ohCCjxZbAcg+cN9OO1gL\nrMYGL3DqmYGqiWl6oMo0P7v3XZchrYNND4rzDejItnLQS3p6xBpMG/dJjTlk\ndBru\r\n=gPc5\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"66fc8a91fb533a43e898483e7c4e1fac92aa0b7c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_13.0.0-canary.7da413ed8.0_1629474450397_0.6621145681463061","host":"s3://npm-registry-packages"}},"13.0.0-canary.e1e69fd8e.0":{"name":"@material/density","version":"13.0.0-canary.e1e69fd8e.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@13.0.0-canary.e1e69fd8e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fd04fa44039d7bb6ce56710b85faa719baee4924","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-13.0.0-canary.e1e69fd8e.0.tgz","fileCount":10,"integrity":"sha512-wgsTZ6ORVAIjTBT2coWMuNFck76pxRynzCZMXwVglZ4UKjF9IHk4jjc6M+SPfweykfH/C7wOAslhxxaivSYBlQ==","signatures":[{"sig":"MEUCIA7ES1fRFho5Yp7H50ZQbinMn0XqgmMh1I34VsNBNWkuAiEAj9cBBSwPkCE5j4ve26+vniE34TUkDbUqpoeQiqwxTnM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhIAMJCRA9TVsSAnZWagAAVroP/2fjOdma9dqgkQSyl5yy\nBrCpQS3ETjGtEmXjo8pWoXwqm8BKBzuOV89RCbvbMwP5VUzXDUvqRU+7ArFM\nP1f/nDFisCdwKPlowqh43D8NKuSrTtrFd/TbI0AsXrPT2iUHn1ruvSjYP1Sz\njFVJPDtC70O3G+YIRXxo00vNPvXCGTGSKUhAjg7jtGmh+O7qi5kla+q/N2sX\nRZHK4QeZA4JyBFIBmYGzrUvMoL9A9ZoU+POMdTuw0dCniwgK2omkIsKaxvqH\nDTpIGq1/WvD8+E7ZrNCH5WdLbhfoWA63srJDWxKciy0W5baBMet9sFFqWeEl\n2n57VEu551GynxnbF02r3TSlVtg2V3HpUfwQ5CQpsfXIiJfDggCHiGbcrijd\nNfoFmFFHFyfQXh7S2Pp5Uxl4ySk4Jkt+GekDEWLa7ik8oNhOlz9zyIunsGDr\nyBt8PvAQ6Ku7FhBmx0iqjHKdC+a8nk6phzMwQW2qZd83Clv3w4CCWGpUShn7\nmrslk38VviaTD4sXTNocBcJ3aNUCGu9Tw6qhIV6DVbYPuUJayP1RbOiFQXCP\nxcfF/rTBZr4XGumpLRoRNOyYA8ma4/FphjNcKRDExeC6obPx1cms82ARXADI\nCp9AvlTiwqifHi5nVvvdqBe/hk4BaKyni+PxPoJLbDp4Ebu2O5O81PmX/axI\nYdsN\r\n=PUDX\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"e400b9052366c6e1d6e27533a72ad00199b6313e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_13.0.0-canary.e1e69fd8e.0_1629487880898_0.06385756429408196","host":"s3://npm-registry-packages"}},"13.0.0-canary.f5afc16df.0":{"name":"@material/density","version":"13.0.0-canary.f5afc16df.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@13.0.0-canary.f5afc16df.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c65b1c5e1ab475f24e5edb52df150e33387ec360","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-13.0.0-canary.f5afc16df.0.tgz","fileCount":10,"integrity":"sha512-JwTxQZkzs3RcDDVCw+yfBVVyxipJfby0A6SWnsNtROU2XVkRmNtT2x9Ce3gQcbn+vf13478ZCOa0eimx+6/Mcw==","signatures":[{"sig":"MEUCIC5i9lL86qfEj/6HQ9v5JtLalQYSAHdZaJp/Ym8RWgyvAiEAuFt5I1jT5FRRxqdVvi+pwpemY97/VXx/eP27CL1XOa8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhIA/ECRA9TVsSAnZWagAA3OgP/2Bq68vxGVoG4y3J5d21\nwJBQu0m6f1XR2jdQ3L1XSgRUhMTnmizxWw5fLr7VXvfaOS71i/DW7xJ5t7U6\nFnXjY7UNUwXq6JMhYGMamk1G+pXDrP8g2bw6b3LI/0SQqHJRAWbn3XxOBmcs\nflcmbqkJNBBUzKQrjWx4fZUQUs3WYjj8XAhkVtd2rinPP9vI6MGX7vMhi6vV\n2Ib2wMEk8rPSkpMmcYRk2ezf6L0fKUIFhks8oARdnmZBLVFWhOGO2lLncxbu\nmTQnuh9Hf58VVs06pozfWoh51THgWEI4sefxH10d4l+TgazbxAnFpleoH+IQ\nCIry/0J3TvvLuWk4U4TFvyzCf9vUq+BzOuQoQLgVFG9p5+RkRwASPbY9QD9E\na+DNdVDHbV9v90KIWORCWMiakGfC+j7BsGi+0gyaDMJNKjL5bd6tnXl50CtC\nEEJ9X2+2rYb6sDOEJiP09nPRkcqRmswK9lnBnJL3Sn3/bM20veMyDF3U2Erm\n1taUwcVEiEEylKaWGdbnT5ubAfGcCHzdMfD4GOB2XXuYY5nYM1+E5FzM6gdH\n7iEMzIhBX3LWOMd8UpoNstWCBBtWySXRi9GAbHCdA21YgR5Z3EScwvYJbKV6\nPwys4hAW60C6kuo9r0eRR5xYleDXoizKCCTgQp30ulDaRsroMX8u7iy8EElC\n0yHQ\r\n=pzQK\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"9a5934ef5d223f46f61452bee68b0b45a21e20d6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_13.0.0-canary.f5afc16df.0_1629491140001_0.05428542314925111","host":"s3://npm-registry-packages"}},"13.0.0-canary.28d0d75bb.0":{"name":"@material/density","version":"13.0.0-canary.28d0d75bb.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@13.0.0-canary.28d0d75bb.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fdf64b246ba6c3d6f2db25d338f7b672a6ff23f4","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-13.0.0-canary.28d0d75bb.0.tgz","fileCount":10,"integrity":"sha512-Fxm9tUiH0Ru71oMDiSSAquiFSE1lNGYtTwvlH6zYI48jN7ZyE3QWIKe1YJXkK33HeQA7EOdBLr6eNaF7ctnSbA==","signatures":[{"sig":"MEUCICP6Nn8w0sXaB8hGbpVVTLxQtJs7JNp/8OYpTdcXogtgAiEAlwYR7+UUfXMuKsTlDrD95A641ZjI0HRQ6be60ogFKSc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhICpuCRA9TVsSAnZWagAAj0YP/idismLisSbSABbN1ICL\nz0jadCe2Hp3vzwI48AyqBXrjYu2P2n8jUk7oPSmT7uxqa5Q38opSrXLYLZDB\nMdkCWd4ds32YRLC0YobIaKlsMjYYr3N4B+78c4ugjlolGXLIWHdDLe7ISH0a\npdSwzgHQn2AJeq2VbbZQcA/E1Z423sSAkS8tkN+BiGYhe578CTqgjoD0hVoo\n0s293pAVuZUzGP28KrwZqicwmeg8grUrbIP0slExcn65+r/dJr5gku5DMAb0\n0ETQVdTzu1msiAASf0XQJ/UnwVUT8bb9g26mC3jTjIhKbGiP7mAr5lHuXCIF\nv1Zo77w+mMYEtwPV2or3unOWJobN5ABlGD2skeDNKexz7OPD+oZ3iOoEb2qF\ne25wjLmYhqUt4w5InozEfxxuW/rhOWTww6oEcDrSDHXCMPJvReS+t4H/MPuH\nLRd5GIO4ajwqOTpQblXyllmo+PUZVRIEyPo+ze3XYP6e+623upZkNgdeUBLN\nGInVHfznMcVfA/y+xdwbAXkGaT8Wa7hwLXiYJBjZ2W/sY0Yjd2/FUsq3rtGj\npy0Yvra/00m2PgNE+Kd/58Yr3qGZ5XymtI/+f0Jtp4R/9k7yvC79BQ/R07Lt\ndDOxrVq553PjxynPMEPp91KDTOEIIbwGTOWOIQCXXtWPhvwR4/GdajEKG7Uk\nCO0g\r\n=VxYj\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"4becb1aca9e878d432cf8308ec0f14cc50e9699b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_13.0.0-canary.28d0d75bb.0_1629497966108_0.9053156962787203","host":"s3://npm-registry-packages"}},"13.0.0-canary.21ece5360.0":{"name":"@material/density","version":"13.0.0-canary.21ece5360.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@13.0.0-canary.21ece5360.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"efbfaf6c10ef22cb0f4340e31398ada57246a756","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-13.0.0-canary.21ece5360.0.tgz","fileCount":10,"integrity":"sha512-cZEhyXleGChcVS//8/BgHWuixnMkEgczr323SnH7rpxqfUsXAywstuzzm0763qzbcXCyLO+HRfEhT6TO5XKFnA==","signatures":[{"sig":"MEYCIQCblf6vgtNrCq7YWKYH+q//MKU1A7iaOQPs4LHNnKW9vwIhAOL0Sv3cMCO2qieBhqrEnMxxPHAP3gYhkdH1AOaVHIdI","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhID4UCRA9TVsSAnZWagAAugAQAJV/rTi45zyrUjvOVrMT\nFzErsyJD7ARjRp9rfasUaOIpya9eAkkUdiKXxkzEeoiEqZDg2MGxf/cMMlIx\nYy+tpKu3bCivYOFPPP2XVLbg4RzgIDXNurwW5UZYgoUTfkifiPxgot0n4Per\nxodomSf2gIYxy74ayL6AKs4xZPikTrSryqaLFVIG3soD3MRhda3gAC5hka39\ngAU6fPCv5gkvB0MzHEKLc1dU532QXnpJuTcCV0G7rJLz4gsljEP+wwGsAOMJ\nzbrzzthYOkpE0x2XDbS6p3YB0oGiNPP0KrguvWOOqtl2wY4nfd7uFyHAr+74\nGmdQTM1bPLPqbRrlOjPXJKi3sF/9fawVHSyzLrbf8fJGFvgi0/VUR20n1NPE\nCZzkDvFpJqQYQLfn+U04MRYvEsXXWy043wMDUL6ou60Z9aSL/EBE/cmBX4ew\nQf7k5I/AdkqDdfRElcjOz5H/Bg2Ixs/D7BizTv7YeTQrE7BCOz0GPutQtgNF\ncE58maC8OS58/hggdvIF/qMAqGUByq5ER+DUVOHJ0/aw6RiPet8DQBeWd+BF\nUk6FhdpLdv9WxK5sq5U1RzGnQPNZTCvc5qIt8fcL6X2I2AsTjk0TIIdN2cJD\ngImbUAk2ZtlJTKxN8f4WtiWxrh6R/31+COFaauMbHnfp6XLxnuf/n9zkrm/T\naTZZ\r\n=Ic+k\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"9625caffe59fe4a84aea358993c2811ffcf33e74","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_13.0.0-canary.21ece5360.0_1629502996606_0.9648148546320743","host":"s3://npm-registry-packages"}},"13.0.0-canary.8de07c02a.0":{"name":"@material/density","version":"13.0.0-canary.8de07c02a.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@13.0.0-canary.8de07c02a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"45b3b00c10480403682e24cdf3496878c8c90585","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-13.0.0-canary.8de07c02a.0.tgz","fileCount":10,"integrity":"sha512-aX1NLW6ClK2qcdXHDIwtt+AYzAQk+ADFZVTXHyy1ydCJY/5+whdLKFuDDBvg2M9Hgg7/KdvCYSJGhmgvNRKUGQ==","signatures":[{"sig":"MEQCIB6iU++uXq5TkFKlETZ2Qy+fe6mjzZQEq7LA9L2QmUXtAiAYIYqyVNXcJWRmfxMBNKCm0qhnyiHVd3NrIQdM8HLAug==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhI73xCRA9TVsSAnZWagAAwLUP/2tYgdC/WnCZzwPr/hFu\nRO4EZYaBE8cSrBpz/w94YvVGp25FfyHyTNOPIXFX1GMBPAwGaqBoQ8wPdiLB\ny0C5LE2gN1cN2/lsIbXCIPVIgbdCKdQnaqSdRxWBGSfJQadW7MJqbRIiAzNV\nCPLKTwLY/PWox4C6FHtmHsFzOFFUJZ3ecXBsPLm1D0hoxjp+/7xAYdkUGoQ+\noBTvHi+YBjQOMRQD1H884F4agwH+zHBtzrwYpMOZEsrFrJqbverMY3guuTdj\nMIGL34KSztGvLjQKRZdVgEkl82xP8Mdk8LQ4STUX4El/n2jf+GO5+9lFNLxg\n2SFsGuUVooSNAKk9HXVo7AWQw+HPRXWk/NqR+Z/rKFoM5J7acsNZmSdXcbkx\nXLW8EX6HHYg5ov1+FcTBX5PzMJdc47iKQ3ujnNMaXA7Vj8aVcUcUcIeZkD4g\nz+2j8AMJbwQ6/EcXPcEkztNFIKNicyOVYxzpD97rsKj+mrvvZw+ZQCLC8EJ4\n9vO3OrwWHSF865BwqVgQxVyU2vYF27HUs1kjPLP9t9tX99PLcAeWXToSgM+w\nKAV2wouiLJ9ZrrsZ093CpD5Gu4r6HrqFJnoBm8mipCN+gCPazCMFE+E6jAC/\nD3SFwBxuPrxwZVBzW1UUf3F2aHickDrgTaAtP00fTaifyCobJ/U+MGX+r8ZC\nRuQx\r\n=bdsy\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"e55081eb44f85de06afceb7c0d189f0d358ad60c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_13.0.0-canary.8de07c02a.0_1629732337779_0.9564689917154612","host":"s3://npm-registry-packages"}},"13.0.0-canary.65aa63b0c.0":{"name":"@material/density","version":"13.0.0-canary.65aa63b0c.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@13.0.0-canary.65aa63b0c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6ae12c3cd27a169afd5f65980790492de1c2a820","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-13.0.0-canary.65aa63b0c.0.tgz","fileCount":10,"integrity":"sha512-NfbHf19p4I3yhVDFawIHmYsdtbLNZF+5eeF1fb6Cz7jpxjhXSYFBn1OL8yup2F61+jLo0rm7nOAnJkrRLJfLLg==","signatures":[{"sig":"MEUCIQDGoS4AOa48G0RrtD7qIIuyciBP7PIgQd3VI6DCwdHIswIgY8viRPX8U+RiI6TW7wMhs2IPDhTRCmpawAvmdhYdvtk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJQ/aCRA9TVsSAnZWagAADisP/0AmUHRLggBenz6sDaxC\nJEst09BBk7duQ9jW9u8yJBzzh5SDXSYBH8buPPlHs3lFhp4PR1MZ2cBuzNjg\nTAzzVCwbhvV8/lG2XU/zrRk6xftQCRTfvUog5s3VPWBDLtZn6VSlpq0AWg1L\nccoHkJNr75X9/Tkdn/E5rLcSbWL+bEGA2fGZU5PkMNuQMUPFgHhIpbtyjYEw\nBAoecBnPE8PDT83F+0bk9pA1AMmjxDCs25ZLrXOncI+xq/optbuWkY+yrDB3\nLQOwdQXrWlkTXCj8EqAiWgUFJYLHe1Hn2IBIuZgaI8NFdkjxN9KuA1kQAI95\ndt+O1ai5ATqIaCX1S5nAXX/rvd9jo6uN8NplJnxs1g4a8bA6UyiNgB66HSu1\n6n31qIRfAAL3L8soQ+OEnVHYnBr+HLMfyz9sEECmP7PmOUwt/Ns5ICxRExjq\n1NClV9U3U72EP8YJVjTQxcqQqwWG0DZyD6u7DJOCgzi0A/Gb9pWZQYnU9j3R\nfWm4qN556MSwvTPQ5ZeaqoUXfWoBALan0aMJBfSqPMiZfs7+f/iIANNSFJ+L\nNw596LzP39y5rh65tGGTiKoqa/+jVDet3DyrMNN1F0eX6+BRysa1+g/Cn3HF\nuPmeOo2ez1RExpNHlJGSM2d8M4cXAR8K0heJ/GzUhrDrpSyNE+bxu1Ar2A8K\nGz3T\r\n=HUHZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"0ac2dcf03064da43ca7eb352045fd4da0af02200","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_13.0.0-canary.65aa63b0c.0_1629818842200_0.9352304057317609","host":"s3://npm-registry-packages"}},"13.0.0-canary.15981e9d9.0":{"name":"@material/density","version":"13.0.0-canary.15981e9d9.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@13.0.0-canary.15981e9d9.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f8fb070a4ed82f72f5a43612cc940529545ac45c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-13.0.0-canary.15981e9d9.0.tgz","fileCount":10,"integrity":"sha512-r7Dot4KnBe0eXKCxuNdN+AwrwKiiUBrlhDZN84IBx2SLocAIEid1oBVJ6krX5gR6q/YCoiE95Elu2GNRoo6gOw==","signatures":[{"sig":"MEUCIDOGDT2W+tGLx9JeOnz8/qEUv3UeLFeOuNFUFgq9Ivx4AiEArfl+1TPFRjI3Duk1OTbmdTQt0RXt1EQNvN/hZpKBtYI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJRtFCRA9TVsSAnZWagAAEoAP/iJ9AStJfM9R13RRNtQx\nJglhhKImYvPZ8GpJx3Qxlkh2ZvmUJrmyy6x+UJdp3WE7nBndJzg1Nq7hxHDv\nyIlLJgEEenpNfceIfniy0L7cCspQbWlQShI+iQrXGykPaoJiE+6mqHIm9aDL\nfYuXr5x4lkXCqLUHa+YDUHIJoI8A0/9jwnu9/ypWnBGVXfMb/JA4eBA0Rz38\nSgxFqQ5MTOuCbg8J7/wJRCxV+efAijnbM4z5voM47Azec9TTVjHzpOWXJ14p\no30Ezfoi3KQDq5Otum/nyabmHo/9KnM/aD3sO9wjcYf2e1Mko5P4FFuDurBZ\nFzsirAVJsnFN9fajX/L+Yd8c9JycFqmtMsoxzXc0x9VucxNdbq+UCY0yZXXP\nkErDn5AEeUXcV4YR0umAhqatrpsL6xjEafMIAgcqaFxiUmfJL2OtLVyuMlxH\nUkHJqqm0fAQzYsqbzR6c3FbjfVA6VZkhH7rp7J7C1VQS2+bLtcT5x1Txefzu\nclAHiSlHk7qVe+3/VdTQIZNsrK0TVzBNY2hMs3Hm8XIjXtlTiP6/4vnBqh6J\nZeQiPxhFxyYQvK8ZjNUFF61vpMJ4Za0i2hinLFEVtkzuszLjQS39JAgoTRz8\ngAWrgn2Y1HAUWpZsZsES5pjRtPvAG50kIyfpt/XXDMbC050rv79KvEX+4vG4\nCcRf\r\n=eFgj\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"93acc5a9963b30cedb03f35eefb49cd35c93656b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_13.0.0-canary.15981e9d9.0_1629821765646_0.40431835268772254","host":"s3://npm-registry-packages"}},"13.0.0-canary.fa7520f62.0":{"name":"@material/density","version":"13.0.0-canary.fa7520f62.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@13.0.0-canary.fa7520f62.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"35b89c4de300fb1e3ba20dce5729ef60974f8428","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-13.0.0-canary.fa7520f62.0.tgz","fileCount":10,"integrity":"sha512-p/22TZwgWXwZ+D9HeoFzN4I99Bq1/gEUnZwEu4Dc0oGGvXYFn0N2xKj8R8LvLta3kmmFxL5B14IuwgOORdz6uw==","signatures":[{"sig":"MEUCIDFTkw/b1UEpziMq+sbll9lhyNVDJFNm2zMTmXfYOmsHAiEAzNAKsfGIM074tU3qmoB3zzjZ3CIzpIWocZAbU4duYHc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJXIwCRA9TVsSAnZWagAAuu4P/iSr4bRUeBaiL6IFR+AN\nAH3bQddfbaMCa7ozF2n8lGhM21X88GT+rNwGdmdU0hNJfIqId8ip2qTgceAs\nqdsfox6lZ3LvIDDfOYQQ45xhpxTNNclHOBuGNOGWvMQWqqnGtxY8Ra1bBH0z\nCVjfuXB9mICXPPOcBUUH5MBhTPV0ee7UICYT5TucgI9jsTWsfgoW+zBSJxga\nSggiNNVaXLnrNn5hc4o8L9reuN3ew073lmmacueSlwoTzvnhzymN1KIy6pbL\nV7m62upj+o8PBHZax7mpxf6+/eV5WOz5OfbFLVqpGEG2Ms2Y8mE9WSkBMCU7\ngVDe7buSascI6RbdfLj1pbbUfjYC+l5Pc88PIt+4oOMrY6iZgqzUZhTFiV89\nU27OPfnpYMKzw5YVSFBmNLipuVTsaPv+q3GDmD0/Lfc+DZWPKli4RuzO3oUx\nzI/upHJMAcrnfgWhFBcMdFolF824cKQI9dVsFwgOfCj5ha6i4mCqDaBR+sbW\nM8Zvm7LApAYTk6dBeaf728M0X7FK0oU6HRaMZUIpXP2E6hCP71GvOsoNRj9e\nXPO6rfHBwBam7lIx/TzAVil441PJ/vPqcw6mZnkdxYzm6LuuZRMwVwgRMPJ6\nhnsNRGdxSxGFxtg7fuERm11WYjV5S3PKYSSvXbw3Gjd1LpQPUle6xG6DqyVD\n9F1k\r\n=KJ2m\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"ded8a7ce355618969092a7bffde0da813aeec162","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_13.0.0-canary.fa7520f62.0_1629844016177_0.6735469399151686","host":"s3://npm-registry-packages"}},"13.0.0-canary.ce25bc3ec.0":{"name":"@material/density","version":"13.0.0-canary.ce25bc3ec.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@13.0.0-canary.ce25bc3ec.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1be8c4826c5640dd8023ae6bbe80aa1c1b8d27e3","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-13.0.0-canary.ce25bc3ec.0.tgz","fileCount":10,"integrity":"sha512-saqRGlYiUMDBDVvn0gpf6H5AuO/UZw18sdOvnJoYBFHzACZvveZ1T3cjSyRVSXDEvCLMkDb7ivGhWrJ2vc5knQ==","signatures":[{"sig":"MEUCIQDQHaGn45+5VbHlKHcJGVymzY+jeL7l5NR5wz7VgNsZRwIgO9bSAFwAgWhgMKtQ7GoIRHAm+chefddkGtE7EDsWSLo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJXb9CRA9TVsSAnZWagAAZhUP/03wvNhL8tH8eECkitdT\nxiOhyN0baIHdP1V+N4hCCNWCwZs4M+C9G3Z3E+METmw2k76HlSbDCUmTlFmp\nymPi2l2uZsBZvdhF3s2u9oMAI0KnauZOsAwOBb7u0IUbWRFCFW/OI0hgvi3F\naolG+TBNA4e/lNtGw3fhZVYXj2zyypR23ATo0GCrGM4zh9QFDPo9kajpskVK\nSvWUsnawaGg0ktsNkt4/Jqmf3OwAwzZVU4aw00s+0XzK9i7RaDGH6rUYeN8I\njazZICxOtNLNA0XUurPfIxfjp3u/UF7nz0DuoMZ4ESuj81l8v1+CxcNbM26Y\nb3ifjnW5KVH7Q95NUbDTHHfM/15jULorohjyJNTwIDbQUcTfDT9Dy6Wkzdbe\nKjTfP098PvE88exIDUNzJwmulAsC0iO/pfqKzZJUHyowP4hCmUWIUr1ZG1c4\nly52HEOV311Jb/bMxTXINwaGZ6GOXa4OZGhzIvqqZJQdOJPVXUcJBDpXlG7d\nlFvAJ3xnZLFt+ikF65O2bbZ+wv12fSOZ/bGtx9mqdZsO3YBdiT4Lnwsli6tl\ndZkS3n409FviP/ExbWhzTxv2lRHrNtsNGh3xP4lkeHil17R31I23T773xS/w\ndMukSMsh3IZzWRVZsrAJ/WEbZ3qiAMkvOR/F3aX5xNRMz9ii/kpdxgwkBn6U\nn5RB\r\n=y9MN\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"5296a1abf91023fbe0806f06b5b5fce528c40509","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_13.0.0-canary.ce25bc3ec.0_1629845245134_0.7913943326710262","host":"s3://npm-registry-packages"}},"13.0.0-canary.12f5622e1.0":{"name":"@material/density","version":"13.0.0-canary.12f5622e1.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@13.0.0-canary.12f5622e1.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2f9294c1420e15072e653a4dc07b63aacfe1400e","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-13.0.0-canary.12f5622e1.0.tgz","fileCount":10,"integrity":"sha512-TZODW8yqrt3ZdrUEP3ARAg6Gx9mhdMDLBhCXZLGkrmPbI2Ox5WYiW1YHlf6H/MIhGnSuPDvScmVct6OcyLRevQ==","signatures":[{"sig":"MEYCIQCHCK/Rt5QwOI8kcVLhyyOJGLzwvjSb9mgVB4oksMKBLgIhAOV7Lo/q10g/gtcCZnIpKF4ZksBLkFX5epZn7rTPokrC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJX33CRA9TVsSAnZWagAAXXIP+QBgQmK14u5y7Qy9Wyye\nLTwlO8PxFpHhOuuHj/FcO9UGZMf367vLjmcmGxA7/Ox9xGG9iFSSUg883M8c\nGxVe/T/cqJHyzscwJVxGET3FQmksWFrs6odMMl0YF3kV8CCtBU0z+k1MxOum\n9VfEcOfuz3N4759+Ucq6byLwbeKDlDuPmNRFg9Hld4S7xCdlsheIPBozF291\nJ11Va5u6HSCY5mHtUYJUakV6MkfF0Jv8QK0mGhAdHkM21pXgWm2A92EQeePg\nJmvzI20sRo4mPvfSrY43/ccrfVrQ/xinaSTK50xD+b681YVIEDEXhTvGOskl\nS1yV6KtDq9mhNBB8LjLneNi2Q2j4dGWrTA5acvD07a7hLVcDKzeqVoshMa4M\nIna/GrysNyNABgSCaY0Ddj18cjTuTtxqLdQg9iBubHyHjj7v9W81+2XBJ6rz\nvaw784b34W4WTUVNRLtaLWvaAoWZv5EtgIVb6lOgSPdCO3Q9JyUx1sYMmlDB\nDCPmd4JDlDds/oVIr5g991nVb17pGrkjoxvMXO4gz812H8Lvbf7PnfrPGvi/\npcn8me1W/vg/Ku9WKxxpQt3NCFDYeGE/jvbqRugLNVqs9S4R0Og7pe5wM+Mq\no3pin+h8Uj4cYJB5HbAU6/MlRSc6rGlnohbe62Ok60XQMOXyBmYWX0DYos1b\nfehS\r\n=Rq1w\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"2cfeb72e6002a5f3cf296794da5216b3114fbbc8","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_13.0.0-canary.12f5622e1.0_1629847031289_0.9138993420777402","host":"s3://npm-registry-packages"}},"13.0.0-canary.d97f8f133.0":{"name":"@material/density","version":"13.0.0-canary.d97f8f133.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@13.0.0-canary.d97f8f133.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2f3a38abbd6492f39a0344f369fcb87cb8cce217","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-13.0.0-canary.d97f8f133.0.tgz","fileCount":10,"integrity":"sha512-8z/3acIq09YrrvVzzu1P4iv2DBqKiVWIzRM7dgkJ+5S93LIE9V6cH9lEMCA6Hi45cb8P1mwjt+XUZ/AOhoY4gA==","signatures":[{"sig":"MEYCIQDE/7Z+nWKp+1Lzj5k9OgQgRSr2TJX+4exOfq5pDjfKbgIhAIhvS6hXVtjzy6cvtLPI26/7k7QvfQFT04Yzpqcag5+4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJoyuCRA9TVsSAnZWagAAZ+AP/2dwMzIiODwXmmuxwb2c\nme7o7MClpyST+UVQ2X5RvxTiZWDkIj2Zeme1jgi7MZtjVJqfznPLB17jV2qJ\n+4j6kXNtnT0G7w+iLC+QTDaCZfqZDYweGGXTWfdm//8qPYrJkaeOVYjSn1ZF\nYgkuQ8xfzrr9issSRjrBdwpe7SASbCblk/7oCxMAq/Ym4M/ReWbWJJ7ipmjE\nLzScHzgH4D2M+svHtnmvtzN5P8+E9QOlHeRo/+86AIN5MQcXYeNywyaOJ1Ld\n7g87af7HqRS8WNEkoeR+9aT23llUKcnyYhfe5JetuLmfxeJ6ujlnMPlTy682\nN07VLx/NvEMfTry/P9j+2ggDbB4hocf161FfXn6xnVYgopG19QUTcj39kMkR\nmW1I75Ndcgxer/AInjUcDe1ZbmMHWy0vfOrwCLvfp3kPZhDZHZu9cE+fLBLr\neeNa0x0U5UofE5TffohzOpp0S0315hz5+Rax2tM0z7m2Tznf0b6Z/MFidMrG\nCRYspp+mt8CHGDJf1U98Pt9Q9pmM3robwpbBDNw/Kv4HjvLZZfEn+wVwnXNj\nig+aMhjmLmAP96wp4YsmXf93QphcxGcjD5NT2FVVLAna/pAZSKEHTzFED+f7\nZ7I9j9cJx1rftK379384I2XtCUYVwnhXq2QeOLkahnzFmurmybJIBG1YFfai\n9Z6v\r\n=uaOC\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"e7295f4786bb26bbc05939b4d6e3e42f011cc033","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_13.0.0-canary.d97f8f133.0_1629916334267_0.40875688938830557","host":"s3://npm-registry-packages"}},"13.0.0-canary.d86fb6fac.0":{"name":"@material/density","version":"13.0.0-canary.d86fb6fac.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@13.0.0-canary.d86fb6fac.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a709ef39f39ff58d14e49804a20dc4eeb68dc970","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-13.0.0-canary.d86fb6fac.0.tgz","fileCount":10,"integrity":"sha512-h6rb/JC8+wDwM+B8pg3BtQ9O1tRJWJhP9adTkJQ9T0PH01p8EXnl+plDkFg/aC+wMW7c424ZIIhURh/uI7Y92g==","signatures":[{"sig":"MEQCIAaSNDoAIo2rs0kPyK79OBKxl4SHSm+8ZHPi/31HXMoYAiBgWlBHrKTm3MglZsXanY0B2ZUj5TSlJTNVK6Xrp/PKwg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJpGECRA9TVsSAnZWagAA66gP+QBnNlAu9TN0PQgcL62J\n3dyI8DAhPuh3gc/21+dvTglFJ2q1QZPeacLCgDqa09Hwfj8ws4KoCEkSgthi\nxRAItCham5H6iDK9b+dNXkYYswmeVLTbtJmhjJtTBsQqdwIcC0LTioiyr8NM\ng937FFs16vLt2K1X7OVe3/Q/jR+vcXWbjNoPmGb0Z5cD59/9pVN+fC1aBr0t\njPUmp83TsbbTu4K/md5NHhqeOBO+LxmJNhD8kjCPBoIOgvIgtfOayoGkSNSJ\n80hoWG/kBtQ6VyrhGUjXJUzS4f2b8Biq25tDOPJGJoPfNXWL/lWcfElfnZtM\n31cOY55knC1sbQgJUXEIwUbhqxxfQppbHq+Xpq488UnwWpT3GngleFjUF/gW\nJLK8H5VbdQo9JBzHK72THUeb6zG9vB4dAQYjCcYBxFFx0DbyZ+l11EP4ninK\nOs3/rvAQ34w3PAx5yHYCMyIRYNL/9PqUik2dAlLRqcuwq76eWOeLnK5E6Jrr\n7nrNW+3jfYpHmJVUjIMWRc2D9UxK5bzfm4ldHdw+1665+QhZuVt9gmr+Fjsj\nxeVZBBlFvkol3u+dvq+QezEeTwHMsiYY2Ilebqpbe8sryUq24lQ8NAYZzqxy\nMXUWhZWm9uKBRrLxScDvcZ/SxO0NI/9Uw+zvofrRgLe4+mFKuoI48E5aD1j8\ndt9b\r\n=gdRm\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"35d13d1a20fe14c295e8589fe5960bc9b4da1925","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_13.0.0-canary.d86fb6fac.0_1629917571942_0.885986164612832","host":"s3://npm-registry-packages"}},"13.0.0-canary.e8554dbbf.0":{"name":"@material/density","version":"13.0.0-canary.e8554dbbf.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@13.0.0-canary.e8554dbbf.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d70c17fc8d85749a7a6b66e273ef18967fd85a49","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-13.0.0-canary.e8554dbbf.0.tgz","fileCount":10,"integrity":"sha512-5S+44kKwxEw/HKzvA/5hsPKjtl8c6Nakf+klwkM5I+pVBkPjDuJjSI/8TB81vChxHmf7WEWEW5yNpj8RnpZxvQ==","signatures":[{"sig":"MEYCIQCv2gbcC+TeyxQPPZDbvjT4ZHEvy1NC3pu2sUtETKkpjgIhAOzwwCSkwUUa1DghaVyNTVS1yoaJRINWaavz2YDRCRlE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJrz/CRA9TVsSAnZWagAAlQUQAI9ySS9Ch9CWcay/cQ0Q\nqewHu1xInPISARYchvetk7tpKPgdTLcf0/seDEjskOHCogeMsfthybFv+na8\ndTJq6svsh8rbZC7YtOXmy+g1S9p4zLvfl7gIYe/HUTqOka2+GSQ4Tom4gckm\nXmeLkJwhPZLGaffqlj5KaSPu8nfFedb+VyHF2Wwx0vszi7PjtH2VP+VpBE43\n2faKwvTwC/p/1b2fvhoXn38G5hOUCvzGJZcK/JdX9bzw+uy8cnYtX+nWQueS\nEVTJ1Av64gviNF8mIQj8HGCWq17NnqhIi/AkTwNc3rvTjNiNehjhsIjjhJlF\nD03zQfmY9qi/lwcEP3UNIy+mjNh3jBHY25QNm3lZdB8CnIRgQJGs08BRi17q\nX+fPXw8uArI9/52rLtVW6javDtdjzsbKF/NkcHtzfUvxLSezTom8yaQJ4xrd\nSzlzEB8gnkQlUD5pjOsdLKwRb+mEO1GNg7HiPr27w4XgGeYeqJWiEX1iSYyo\nNpb0kquvF5sfgnMBvf4KiU77HhVSnW41xcwEIOsVA9xs0C9n3vlzrZSWEG3/\nLw9bXyQSSnLGVJO2AUT+f1fxI1gfGzaqpSrLP0pZrvM9Joiww8D4iY/uRja1\nI4njN0KksZQQdFI8r+ROly2hPbMRk51TEBQj7OT9Hahv3s8PaAbWDVvN+yMu\nKquv\r\n=5nd5\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"da636a8d32198c6289df3bcef39340bf76cf8265","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_13.0.0-canary.e8554dbbf.0_1629928703540_0.31849040942228934","host":"s3://npm-registry-packages"}},"13.0.0-canary.877e3fb0d.0":{"name":"@material/density","version":"13.0.0-canary.877e3fb0d.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@13.0.0-canary.877e3fb0d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d3843034cef2990fba7eebd5e00ff0114802e436","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-13.0.0-canary.877e3fb0d.0.tgz","fileCount":10,"integrity":"sha512-Q/jA+jznG/I09zy5f6j7cKY9tJTw+fi126VFv4FFg5aJIMRFX9jgOGTZJv0vIk/wuXlC2aj0qVPEPUH1BwpRQA==","signatures":[{"sig":"MEUCIBuO008citqtk746Lu58bnFjqKhbLHiQD3JvX2e8nkCsAiEA1QrkeORtYpaTVDdn1nXQCfV0Z8UyXiAPFp0tdi8+/XQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJ7UdCRA9TVsSAnZWagAAJIsP/jZBnkzaUIoSlDTymfS5\nAP/qlq3ZYEMHMI2Bl/Z0xml0A72My5OrK8lPn4HIIvGR4AtcqwtVbl6T0N2j\ngP521KicIDEKAJGuE5NNbf5yo1jl1t8+36K8GoB+6M7D8oh/mcNUO5/Awozs\nYW9g6RwzdBEivCnaUXV+5B971tsKP4x6h0j2qQI+u0FKT78VJRSRenDGzCxA\nLAinhAsQjpAbZE32D81jqlWLbKdSdWDhWiZmCakdOKllVhOYkEsYMGc/XAlH\nndtwmRJPROdidxaBFroEPJ+1f83JJI60XFCf59xeBM1StNphr6rkViuXaY3G\nZL0vG+/JKsefJ+HGuOctC0oy/vlALQbvye3dv5XLo946p4SSp8067rOdF9Pc\nvyQt6ZCUs6r9HowE1BcnrOILpobFNK6tvDb0HTmiL6Xad/WkEwQiTmrlbO94\nAYp4Lrg9H3TrmQx2F4HdRhQYCS0PUgiM1BExd4A0Rr2T25uRIZ2xy9adnU3h\nkmqWoKc2rgCnkzm6JntKV6rvkjLXfo9A0417nhpP55Pq97w/7tKeN1t68r67\nG2nvTdmHOZOnQoHEcZkUpteYRa8sNy5VDDMFes/lCKamSe01M0kGwA0HVgES\nujo5iPm92mdHmUu3NHmUZQRDFAX7qKGyyCdlH/2OfnrKgolvTNzuwi/r8fBc\nuoXO\r\n=jIEO\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"849a956f7ad3e0da0840469b917eb66537c875ff","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_13.0.0-canary.877e3fb0d.0_1629992221303_0.17721125426004325","host":"s3://npm-registry-packages"}},"13.0.0-canary.6236f3576.0":{"name":"@material/density","version":"13.0.0-canary.6236f3576.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@13.0.0-canary.6236f3576.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a2784e70aa6d32459254fa1f054e66774d9360ca","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-13.0.0-canary.6236f3576.0.tgz","fileCount":10,"integrity":"sha512-DSXY00Gz4C6QMiFaoQ9s1lMTRFydXcnTVEh49lMvSFMbn1zo2P+3EvDd/wG/DjwOcfGdPvmNlZnGon0BABRPLw==","signatures":[{"sig":"MEUCIQCbC0f7GsK1YnZ7PyTVM3LnBu//XxDjR6m3CLoajJmqgwIgXw6YyoSuzu/4Kn8rdsNASNC5qn2yOJiB6nf/BwpLY/g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJ7ucCRA9TVsSAnZWagAAZVMP/jLhKhQE3RPoDxpLWN4/\nzMXnEbYHMDTEsS5kvUGprwmpK5j1lUjQO9LIDU78P95LBL/aK9wxRrG2d0NO\nfWMx23tbOEj2XPeLbay+m0lYudbD9HiT5v+/Ns9neKSIF7PMMWVxIUEQqEsl\nznAOpOJF9OIcosyE+uWd4L+xOZogf08FfPz/KC6ZPrVD51kmI+IFtiFpfON+\nRc4J8EftEnVz3Pq+qJAQG13NBL4vF4nmSgtlcNX5K9woTn3znqA4SwDV+ZDr\n8vixaOXRgAap23jGVEacJinhMcontrmvRrPrq8SoNMhzY7oFvjtGWYZyv5Vo\n3+iKsJb5XZ87OgoRaxfb8LNvrbVwmxyepEUplCdwtKtts/SnXYRL3hhXakyI\n6QLpqYYB3H1d+pUWshRs1PPNcZwaLHOvToOUZxXNKfJXUAPIqa91UHrs1Fyn\n+QlfWKyiNOSB3huiaDj9LCOPi+QaMt5AulKnoXGdaoL3iYrwGjFo/UAAt8ds\n4sTIxzZrzlo9J9NE+8Qs6qyfjyveQNpcXrwpgtx57FLROj84HdIPYZIggdzj\nueqab4fpLVzLyyevvNzj+o7CQJiq7W5Z7KUJCLVaBs/SOJf78bf0oayzpSU8\niDNW15tl/ciZYBrqgXcgfUEQKju13CL2T8LRa32ffNUB8yko8ZFFDbnf9Vm3\n7xNL\r\n=JBn0\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"27220fe16ebbbdcba193340cb99388e30976a2d7","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_13.0.0-canary.6236f3576.0_1629993884813_0.2713273795393396","host":"s3://npm-registry-packages"}},"13.0.0-canary.1d19158a1.0":{"name":"@material/density","version":"13.0.0-canary.1d19158a1.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@13.0.0-canary.1d19158a1.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ac9ca8ceae6f0b8d945a0766e787bcca24119531","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-13.0.0-canary.1d19158a1.0.tgz","fileCount":10,"integrity":"sha512-Mu7TlCMDHpVc9M8c6OCPdsG6McdlRso4rbbmxKDGLUqVzhPTW0FiqsrggkROZPfjj4iTydfnB5OCD8bxmhCCUQ==","signatures":[{"sig":"MEUCIBv/TRWKgB3YAgQsEz9HPH9whGYG9PHgn05EBODnUVIkAiEA6QUgX4ibUAUpXzX95dgOqMQMhsABNRGuzT4jXbobuRE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJ8ptCRA9TVsSAnZWagAAqKgP/Ra+wHj6881Z2Usshbod\nerxINnk41ULu9BK3hYdn5U9pzYhdQ8EUFvdp/lQ+8FeAJBlcPiZKI6I73z0r\n6P7gIqcauqacxmIHFeQjNqMLit2Ah6ya/HVrWjFMK2nZLVQjml/PDvHu//5/\nyHDOyamWpBwfL4Ce+S+EpukxGBRNOSjfEe0xQF42vm1q8iEsm3+lx8ncCWlU\nfZBjZ3nDEUdbn1o/x6n3EZFVlvt6LFx+EZC83VP5XGYL34Ey3HLF41o4okBd\nLMGoY027KLeksvx4WAzAmk2ytnRQDjIDhOa2BDcP0TpJlWovXalzrjMp9E/E\nm2oZVzy5qWHWrNCMq4EaJ+vlp2cE3aptYXVW6XuMpm7CRLjy5GF8jqM28xXO\ncP6DNiedvKErp3OshWLvLwT6b3FKiiQNrmMqZchG10fDeNfINP40eYYF+Ksi\nB7fOyV9a8s5HlGH6mV2bev5Wx5DKpSY8W3mzwwh3v1fVs0JKpiaEkyG0Uajh\nKmooTa3m7zQnP0ZrocOVL4gViKGbvR32HNA+t9kwomasHEgKXbWuvDRwZXFv\nmjh7xNur3nb5837ZbFbodQmwjjIJS3wBzyxof0Y8BHZ9819ePuXc3wRSRWQ3\npBxMls0hoj7THsZvBvyDh3uUbkICkbXzyxFD+HfXTpsEjUdveOsjBNISxYSY\nuiCk\r\n=qwSk\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"451d11fe02e89db73e3ac79cab01741c3da63ab6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_13.0.0-canary.1d19158a1.0_1629997677131_0.6214522041177972","host":"s3://npm-registry-packages"}},"13.0.0-canary.6adc9e83f.0":{"name":"@material/density","version":"13.0.0-canary.6adc9e83f.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@13.0.0-canary.6adc9e83f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"851da079f9f8ab8bd9727eeb196f96bdbf157bd4","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-13.0.0-canary.6adc9e83f.0.tgz","fileCount":10,"integrity":"sha512-wQyO0liIQJZQeAZzf03uDNw6dEqqpk+DxtIeX8oOD2BI1n7w0VWa9egVTtK85f6olBZw6UOGXNcRe+GOkmZWtw==","signatures":[{"sig":"MEUCIEF/+LHwxY9JMSX9Zj60ZMUGq1BraeaH5NHEuBow3/HKAiEAwyyTWWQi8Kq5lXKUsU04uozH+nMykkkjQocoYEHHYCw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhLV8JCRA9TVsSAnZWagAAFKsP/jvNyoIlgJPhM9ihzs1z\nN8JR+nKu/B0K4VBC0MC1JtAa7fBlHMhk1Vle+oltwyxUN6HKIk/WR/gjiYSF\nptpcMsiRaNk2T/9as7/mIxpRRiwWj8W4kHDo+TZbPx5wqf18QgMu7DZzk/qu\nG4eRoJyXOpEmtBIdIKsZbitiIewQtude7FgIyKvwTE62xBw85pcx+D8dCkAS\n1Tgt+h1OG1fQZCV1bT4uosQJ9y7az0KkIHEYrWthYPFDNt8QBXEYgWjPz13F\nKJrMkrsdMwrr/PM5Xtxklcm4OfrXfQ2+3lQZLux95RmYMv4QASR4HGinAtsV\nQ/VupAJlVhtgYyT9lme3ETsEWpCaJm964lxIV0zUsLEfGOqslvIS/mKwQzin\ntmvtYWxdElXf5DGkUp32xbrF9lGCdoMZE47xCauiQSLxJzWrttaHhKNjymvy\nvvnfk3yRv+3OlwB7Acu8rywDxiFiZE/nFsmygO8vR/HPDM4XbsM6uLa94YZ6\nY6z0ebvSw/JHVFcoondqff2viIF3/d6MOHeseaSdX+3EC+v9pm7Lqe0r5jc9\nOusbTOYCiMkq4ARfvGcTtsuy7QRr8mC3GoceKZTDKSWKqa0/xp3XiJYwBXIi\n3RH8O+fzzDSPeE+6Bv7Y8iw9j9nBLZuHfJW3nDQ65vMTFyaG2TuoRWgcCc5u\nvYhm\r\n=gqDq\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"d3d9f017c96584c46d77544b9f0dcb6e22eeeede","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_13.0.0-canary.6adc9e83f.0_1630363401008_0.9418643604283474","host":"s3://npm-registry-packages"}},"13.0.0-canary.d082790f0.0":{"name":"@material/density","version":"13.0.0-canary.d082790f0.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@13.0.0-canary.d082790f0.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d86f3b12a1fe1185b278e8ec33e42c713059915f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-13.0.0-canary.d082790f0.0.tgz","fileCount":10,"integrity":"sha512-DmjdbEXmexThIb5x1/r/HHunMHoZlfV3OQSWN2vUvkD1+Ixhzoan742joR/XVDYxs0Y1p2p5VmDAY7h2kBISMA==","signatures":[{"sig":"MEUCIAyxpLY9dnc5bxJ7vZPL5UNf6Ex53kJCjuMfa8hve0NJAiEAgcz9EeC/wzY635eEbakKyap4N6OG94kREbGaBSXZldQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhL/ZSCRA9TVsSAnZWagAAeiAP/RDp89qS0E3eNSPFz9bz\nzt0AO0Rgq0Q/WtrSW+2U5Ql47ULRoP/g4Fh08Fp/JCJGVy1DSeCnbc79oVsE\nJ9/Zl3hTKptayyBUfEwv2Qes+irEXWPRRQF7QBCYTNcOM/xN9cLLB9XBh1RU\nz0JB0kJ+PzUEnjcGfRnbnsVHcLuV3H6hgQDCI94WclXn+o866NZpLDPfWC0e\n2UC8+EQZumoLiCGI/vIgKzJxfBKfUWmJElEuRXgMKbjje6YeAzyliB/U6qR0\n+X8Z/RXVHXdlYQDYoLdcslN3gP2y3VF1w+xxLeiFAlwiXN8jk5KNwD8HiyZ5\nZORhTOzszOiXtuL26k73gmi91CKqsKaQ5O0mQJkG1oGfJ4JwqeZpgssXMWFR\nZnWk/wTT6VnhfunkH75r2JI8LhEifJr8x+iBBY8LNA7u1CCl5l5TqqdKCbOb\n4ABp/aHI3EBxvc/9pY1D6ZyWxFGQWLvHvPixbxWQzqH7xyy5M0S8wlwmmdWM\ngC2UFd7uh7aVCM7MovXoDBNe/Lvqgquj0ylXMSE+kAvopRK1doAccQshZeSd\nM20RVjN2E1tlsZGNqeSOftB08NgSJ3nLU/kiHpCPEckqsIfUrSJa5wb2SX4w\nmDPz81lBoIyS2mpsBIvW7SFtFaeQBf0XpbXA7XEDHjMbOXcPeElF9ES2ky9m\nQBdD\r\n=Pckp\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"77212852cf39af4379f15c0daae076eb8b562c15","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_13.0.0-canary.d082790f0.0_1630533202011_0.4869476508550634","host":"s3://npm-registry-packages"}},"13.0.0-canary.e2c4f0196.0":{"name":"@material/density","version":"13.0.0-canary.e2c4f0196.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@13.0.0-canary.e2c4f0196.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5625f1a3f671d4307b949fa3bd1ffef858433f68","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-13.0.0-canary.e2c4f0196.0.tgz","fileCount":10,"integrity":"sha512-jTOypLpjKk1FWaYkeKjC0eHErj4UuK3O8TNqb4YKmm4ZW6PyRjzDKTWhnwrRKo5A5TKy6gN1KuzzCP/1YcMoUA==","signatures":[{"sig":"MEQCIFyDaktYTTlGa4LYy+svT1zGmkAdL0WayjdzKjPNDPYsAiBlqbTaAQiFl6SIui4mV0StZMOP25lCtUSgJG5IAx4JJA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMDKDCRA9TVsSAnZWagAAVJkP/RphdCxrnw4dUNlbSO59\nPnGsLLB39AwQ/NUm8t9JfbvRFeyDMeHvIXB6pwcn0/aZ6YBWFhC9YYO3xwM2\nLlItLny8IjUOmh38JTjiDOMd0PEzpXEIUv86KveBErN3rYUUSHRgCXkvBV5j\nrpR+m7gOpqO2/P6KQWWKB0MZZJMhVRBx97dPHaCSz4m/opnmxhWoy+SjFcYH\njd+wf4MoqAyvqOdB2s02v9XO7ux5W9/cfM6dTNE70Ep2q9I2tgac7HRXS1VD\nroD07el7abhCI34n6zuiKgTfqMHVKUc4+LRkkPdgc/D488TyVOlGlo9kCWFq\nU9Y3CIrsBUfuK/ResPY8l89vcbXwIHYy2JldSuOInqcMf4V3TjBd5GI3nTpZ\nC45BF8Z4683QEY5K+C+wSn7OyMdoEvT4DP/lbZBmiJEqodbnzynRQjy9idlZ\nuTOJwPORxRy+ynr42I70SMbS7Cdt+wj5+J7qaT/x6/RY4CUFIbnPPBGDWxdl\n4dB1BCHjZXaBKzJA9Du0KIN3D1MRZOx4i3lm1042UwzJILDJ6+6kDZumpUJJ\n0V2q5JpVaVtAsL6qiQ2RDp7X8jwomLF36/AJcJKGneZSUTEjyCMvmbBTToUk\nStyG2Hc0x0QrfwaS9EsfUABjDx5uoE/tLaWVDiidiaw1aq95Ae44Mn0ElQko\nVlZN\r\n=vddw\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"2100e21debb7fbebda0966c953fb24e1964c19fa","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_13.0.0-canary.e2c4f0196.0_1630548611743_0.4721711764023373","host":"s3://npm-registry-packages"}},"13.0.0-canary.611db508e.0":{"name":"@material/density","version":"13.0.0-canary.611db508e.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@13.0.0-canary.611db508e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5602d7ec9a8926dc57a5cdeff4633134789aac01","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-13.0.0-canary.611db508e.0.tgz","fileCount":10,"integrity":"sha512-Odb7TidhbTTlaQJjYxCRta5gtyScjhOj9mELnwwJ6KSy3r7Z9MaX2tRq+/LtId5DOuzgMDtHHyiv8Z5t6M48Hg==","signatures":[{"sig":"MEYCIQCdcaXgE+MEoGHO/+nP4i5mgBzwmoT7w7/sGKJ1L3KejgIhAKv+Ff8siXS4plMGxDq1W1SBcvcNHM8EePkS2Tq5WAch","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMEFxCRA9TVsSAnZWagAA43IP/1IcHoZ2QmBjkr2gOYzh\nkI7BoOmnUXglZLg9y5w4svMSQ5wR8otYqjuQKWVUYTdJC/E2QiHbBhGZDNW/\n0hoOn0MtfGOAkqU+Yr4gGQ80/WekxSUuQTi3oaqZI/ox707WMPjPAbTJJJ7W\nXVLkDweJWu2pB3Z6zz7Tajzj0mEg1eV/sSDE8g+yZjDBuTsPk0UNbjFYQtRy\nyMkBt95Cw6mSTnH+lnNNhRm8S27lcvWWONXnlPVjRC4I7zUPiSgNUBXbA2gD\n5r7FNPS4+snZaKev0lA1wRcPxcIpTCv4ssdnaFl7FsREW63YEBfS23eMErQD\nGX8Sj9/KLBBzVhY+WdEYWZR4dWuulWzY6s/xleF+FUblimJDitrZtLXYoqSq\n7s39l96c/B/p14l8c5NHkvBNgSawHJwaAnkDWJ6GUDEwMO4t/yyErPOOMvRn\nICY51+S6/h4vqrlLd7dUoTn9694q9nlyN1pb/9VFqBsgXkP1RXG1foEZ0J4+\nLEy0n5KlKuErIMcw0hWbpqIosyieVZnbYaJsy+pA+/K8d6GFH6c2tkKO0rl+\nDoaPQCOyl8SZY7ZSOM87TgjOwITjFvaug4X/hJVaTfV3yp8IoD3DxxMY8EaF\nNaL6vB5feZz7+HNFTp76qWuLYEKVbmaqS9tbiiK5VHR4Iw7uvBP2r5tj/m4H\n12jT\r\n=CqJ9\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"5d75be4b0e067fa5d6477869a053c630a67cd643","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_13.0.0-canary.611db508e.0_1630552433074_0.3427338907557729","host":"s3://npm-registry-packages"}},"13.0.0-canary.d4706933f.0":{"name":"@material/density","version":"13.0.0-canary.d4706933f.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@13.0.0-canary.d4706933f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a0620db3645aa7f4bf52dbca9fe0ae779ddc9a23","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-13.0.0-canary.d4706933f.0.tgz","fileCount":10,"integrity":"sha512-vN4m1nuh5QDdR4gAOckY9IpbEsJ8C30vKVbrgts2++qHslpJhIEuq8ESJ8GMW9xdCNRFP27/FlWM3RmmUm3vuA==","signatures":[{"sig":"MEQCIFGXQUZdFwx2YPPZ+WPpEdTwMCjRVeQBd2RdDQZgfT93AiBr5gVxlletm0AesHTiJwTDy7oMyWMukhKSQIY9Xsehaw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMO+LCRA9TVsSAnZWagAAS8sP/iGX5ar5B2/cc+5PzvpL\njtZW+jp/DpEkpxc2Nd2z8T7tAp/5mi/i72J2ghxYpM0fonaiLfjwtfT9kVbr\nlIMLPuk9K8pFxUJN36QiyWE/Bywqw3+QTBAguzDQ+D51luzuBUE6hcp3XiLw\n3tz89DJ+8rx1/NkqsRJ41hByNwjsLkqoOxIIK+I7UnIaIt58rtye5pLB8fXZ\n+wM9x1D3FIHMZPn9KVPu88o7vbz1O6r78DcsRS8M0l4grJs6tN5C+GCxSpLa\nD6csNSe8Ton3I8vYIIQKOJO2iC3ApZNcN3GcTpoPUvhEcCCVeDh94eV4F2WP\nJIk20tWEWfD/24RxwdR26P3msE9voDFd1Su+N3bfIC098sONMkc4Tlt96Ynv\nb73a1L7gXDE2CsmuNNBUqkLtLy3i6T4SkIK3KAyBIUnE9ADlU013MMGrC4/h\ni7Xiv+wWKuJRj80mI61eJ+4npX13VtgTJD1O3z5W7AGFCHrt8tMVpfU2k93B\nQw3SMNGuW+x9UhCJCptKcftuHwphJ0evj/TCOQ1MP2QesISGFPa+brBWT1Oh\nB43stv1Y4nSCNvTUmnQt99hBWzg856gUBmxuS2Qt0FByI3SIIoMHPf56fLY4\n34H2arNQDs8poJFFV+xenRx9ZUkRZy6FcXGHO2ATjuC2UtNIQUMGtAvHTuqj\nE/O9\r\n=Z2Ce\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"9e7edb1e0621060d55bf2765cadc8f2ffcfa0f30","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_13.0.0-canary.d4706933f.0_1630597003457_0.3175698617623288","host":"s3://npm-registry-packages"}},"13.0.0-canary.c16fe03ce.0":{"name":"@material/density","version":"13.0.0-canary.c16fe03ce.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@13.0.0-canary.c16fe03ce.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"508a9dc0b9c600b600bce06c9dc18562e3fa0ef3","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-13.0.0-canary.c16fe03ce.0.tgz","fileCount":10,"integrity":"sha512-vI38K5cv/Y3KzIlsWfgN3N2oHcRzOrOPrF34qHY/LsYPIhpc8i8s9ZgM6GYHuS6Fp5aBdoskuX40sHyEn6oTYQ==","signatures":[{"sig":"MEUCIEZfRjcU1YQ4MXjpCF3vEp5pwKHWYiLRex4BpKpVqTUOAiEA0sOooZPHmA5Ajzr4YPgdJb3qvoA7FXq1vBxz5eSasOE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMQ1UCRA9TVsSAnZWagAAy3sQAJpKmye8eGXV3ffUgHA7\ngLZFSfM1xA27ZTAkJ3jsH9T5hzOlnpbF+++unxJhpvgXp90gKkVwjrDfUk4P\nO52LaHDWyuPLtxgwygiXFa0qR6kCOqP183niYbkZW89ymY8B8lWBV72RVk4G\nZoXrIMkV9YlF28XY33vE/GbmUlnK5Dvi+OTHFpaGM+eTc89YYIFXkW6WhC1f\nJGaEl28xplKToDXtWacFsPYSRSt1bPpXRLWDGf+I0sMl4VpI5mcpTojYRpus\nSviqaOMbs3fqg4KorBjWj9J72XrQ7v3O/jMkOb6yPKwD3US8G6KLlM1qyx3h\nEok4RS+fcKWCoFaU9qojyYompJp5ihFcJb1cuBeI9KP10z42/XtyHf/aGnBI\n8/Y5dPr9MJ3L+EgcmxuHa+J4rPBJR3UE3IDVdjKZy6qX3yFh2IZq2/iWFgKA\nVUa7v6f2HmfQ9aA0kafJm0NSqeUpakuroHzWNTDu8cS+9a+mrtV3j5KHYJBB\nvEUgK5FRHJE2/iEHN2tDdlFXEB4OdYYyib+YonH7CMZuKzYnCrzO9mvB2PlX\ne6j6kh5yXxnFjvChVZKFGqSJO9P3Hl4HtZQtrQv8CKtHJbMbZQc2NgZNAmul\nKZXkZNGj8k3WTz4ZS0dWhHN2kjwBIeYCJHNFkZL48+7tKALHj6UyFX0LiIJm\nwCh+\r\n=zTO8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"28281c91b41ff8002401a21d1210e0fc629d55ae","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_13.0.0-canary.c16fe03ce.0_1630604627966_0.43038869566717763","host":"s3://npm-registry-packages"}},"13.0.0-canary.9203a958a.0":{"name":"@material/density","version":"13.0.0-canary.9203a958a.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@13.0.0-canary.9203a958a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"38ca29704607c2a1428b2ee3d0484b0acbdac381","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-13.0.0-canary.9203a958a.0.tgz","fileCount":10,"integrity":"sha512-uZlz3klRWkkyYrpdCejgbdLBEnkVoJ4/vX7utcmpbX/CgDZvVLReJwwfS/qnLxySUhcYrkiK/PUNAAKrkNlXVA==","signatures":[{"sig":"MEUCIQDPN/ksdoakMnB2sUGaZmCAjflxjPR1AP9MFDo58bEVRwIgV1l7c76VEgFrYemkPUuCmpGjmnrB93O+Zv0jra8ztK8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMWIWCRA9TVsSAnZWagAAd90P/1LMZSIktse3HbTZeMCo\neX/MrRK/f4eXL7JiDLRrQN3320GgbVs9mWFmeP5iC28nDBUEW6etIXY82286\n1CmKCDzVIOgVWl9OF6NBtZ5zz6YIwfkaEmJJgtGjxqvIHja6beB+z9UZC1Fn\n2fR1huJTbIYCoMSJMy8wXKvzfKvFYqcOGZeGBzZ9YyaPuSJ3bUADlh5XWMBi\nn/Lc7vkWD0EQVw0hqG7RvNzIKr+WmECJhnLVJFQMltxyecPbU39sdwg7OpWT\nI43gsi7B4JrEJkWHs9dvkmfQ+TLTUkcdMdnMP+wDdtIR2WbbDJuLU8I0wH1F\noWACp2OzZS0LAWE+ULuQBvMj0TnwWew3wtpgxpryLWHz7ybCnA8Y5dnFUAk1\nW4g+LCJ9Y1Hr87W2cK2xf9Cxy+FBH+PATGtaG2UE7ccbAAEx4TvWeRPO9fc2\ngYHEwgdYQQWnhACD2CNvfLbInAVPhcBkNfpGWS8MeRQy14mo/sZzNClnTTKp\nLPTlbK8oMdj/JPiWZEvLECUjwhJy16I7x1X9HMLMv6t3c9hvHtZGgnO9k/Qo\nO7DzBkysrbCDEDXRmeBoBo1E7U2aJUgHHgzLHyGt805xmnmflrEg+syC0nOD\nDf7u7ebmREyjI3AH4FUynpLIKbl6kygLnSuxcbGDqpvm5AAd/YiJb7juRia/\nnuDt\r\n=6tLa\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"2e0f9de34d700b0d1eabd5186c5b5cf8080eaf74","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_13.0.0-canary.9203a958a.0_1630626326577_0.46677751575437165","host":"s3://npm-registry-packages"}},"13.0.0-canary.fddd5ae93.0":{"name":"@material/density","version":"13.0.0-canary.fddd5ae93.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@13.0.0-canary.fddd5ae93.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"17a3f05e4cf5a49c29f0b01ddde16ae21fc4ea1a","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-13.0.0-canary.fddd5ae93.0.tgz","fileCount":10,"integrity":"sha512-Q24xihXjy9g8cs3Bmj/uvIWSzEeeEnUWAb35kSVJ2WNGtRJTEnZ0IIgv1C1w4OVmcNrPpwTzK4MWG7bdSJVsnw==","signatures":[{"sig":"MEQCIFlulccSPE335Dj0PIEmZInWPTHMqj/DOC3zYB0TqtizAiBKrot2BRxiTunfTmqkA8Ake2BvM63bOqIGhTErF5JWcA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMc63CRA9TVsSAnZWagAAqwwP/1EMpNjEY1TP7JTYokHx\nljCFWxqcfh/re2I/wpw1Of7zO2lDRaii82s40XJK+0WKPeB4meD+7nRdp24j\nuiBEJIeFhrK1asQZ+0dguna0xPDlROMPrIo+rYOmTiuMQLYCOdj/V+rClVQk\nwFpH5nSdVL7bYNhyzn5QMYYv0M2DX97ZUB5e/smxCp/ZmHJrCGh7MH/TCMVM\nwM+MDrbdvgewnpr+sVGXlx6rPAcIbA2SI+h8JAhBgNeDvHdvhJCot7iacgBl\nacRUfnYVtV22sw4nnnRKjlNQ1WMqIgE8oHPAZ2fb6l9aEWPdr1O8RR60bRvE\nWEfuxQF7KIOYa46N0rdyspcuWdxh1pQAoOBStWdyC0721g56pageGd9GR+/H\n09z2sz3O23K/hCgIioM+XsI59ZScxbY00az97F2f17l1qWNdAKhSrLH4qZWU\nQziORTVVzOhPN83AoWNQMO95ZmS9j2GPoarjWvJZsjT6v6jHWbzcRi4ZdifH\n8Viesopxs2K9sCf0IGtBSQcU5bwNdkiilUcOCZTWUqLLhxxgjHIXiD31CLqu\n3MpDbd7pnhFsJue5PwQCrVRIaX16uOI3NM1xV98zES1r0FMlViKgIeypJT7K\nFdexBbihTK3RQp3XlRZXmmd2TGn+svObNAuThe1GZHGkIBmE1uatkrbvAulh\nRPur\r\n=9cIL\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"b5407901afd7b18f851e64db0350e0c38797ae29","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_13.0.0-canary.fddd5ae93.0_1630654135801_0.5874203902282422","host":"s3://npm-registry-packages"}},"13.0.0-canary.117599a8b.0":{"name":"@material/density","version":"13.0.0-canary.117599a8b.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@13.0.0-canary.117599a8b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"06af2a054220f146eacda8e66433cfd7f3392e20","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-13.0.0-canary.117599a8b.0.tgz","fileCount":10,"integrity":"sha512-RN7sCk4DPYYbC09Bfyr8Rata0GswUcr38cU/7cpPtkbcCq6qPpPGxpXBlSQd8i6Kw7NuF38yVmMm0M38Lf8YAA==","signatures":[{"sig":"MEQCIFhT7KGY3EBcUvsnxvyf4KQqFj9SpwGQ1/Sf/9LkA594AiA/j9KtyLMHriq0BPxGZ6iN86GIG3j1egcndMqvN5mZyA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMc8MCRA9TVsSAnZWagAALVgP/0jiutKmO3vcxpwdInwz\nfAd/pM6ef1xBqrwWxOl3xvlgaDuTy/P9KTL4txEWPLEzP35vb2jhL+jDnLOG\nWf/VYm6ej99I4oe7FWNp0FShVjwxpRcozTeLWz7gmyskXTfUCFHd8MTwI4ck\ndld8PFZrXb83gK3SvgIV6qVg8Xa5WNO12Wr0doi2OkfMLtlR3R/EaRlKwNE5\ntOIjUvNdiDivjkGFZmpdghkHNuKivyfes5qHFxvX59TBnrMHCtKkWuVxsCiy\ntJn6gqJVfMKjTGinRNyyu8adBlZv5bvypZ7czcciq/nbHWKw0wkoYG9TcFly\nV1OV8jHh5Y8J41tlIQqmaFdrQkZy/qWcnigsWXmQeUjD8NqKXSGL7E9OIZ5e\nxHNg1qcjfI7bmCmaQJ/gbE1NvVdOQHL5LXqaNMYptZU98bETAFiNKq+TUYE3\nYH/rcLARoq18KrE8BL6Bq6WVVjNfHpcmoQdDjRqOSmHJCS/Lw+Q/T/6KSU/x\nCrVPsYPRlIYf4UU9zvL7c5M/7sjpCWuSfPPAKgcdk9F8MOYjmlIQg7Ho2c6y\nzwsG3x9oxRZLHxK+ujjnbxq0XKCvpXa4c+uxIEKzHOCe2X8Gbi6SwD/cd+Wr\nHyQ5BKDTTrld+ik5vi0SsO8EzB26HpTzgw8eM/9mWDbkZZ8zczi+b5sbPiIa\nq4JC\r\n=Roj6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"3dd17eaeb796b36aeda593de120f16c60ff06a0f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_13.0.0-canary.117599a8b.0_1630654220041_0.8612838673529586","host":"s3://npm-registry-packages"}},"13.0.0-canary.e4180d07b.0":{"name":"@material/density","version":"13.0.0-canary.e4180d07b.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@13.0.0-canary.e4180d07b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fa975c86cf81f13ad7bb99b6b2bbf36aa8cb7c6e","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-13.0.0-canary.e4180d07b.0.tgz","fileCount":10,"integrity":"sha512-pZpw3SOQZqNGJElK3Lu/IRpgYoxa4dbNbeq6nZ9OemyUUo119Aa85CwRDcKsnITxcZcyUkl4dgc6QARoBgYPWA==","signatures":[{"sig":"MEUCICoRjs34XaEykj30N8e1uta2Zy+n0l+MLkaj3wOtvnU2AiEAkfeiAZ00l35RmX+ta650K6sCFuWMOYmIO+4DuL5AVOE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMc8rCRA9TVsSAnZWagAAc7QQAIFWekAlyCHWrfIBNOm7\nen7/d1i9e8IiVp9TkCXcLwv6D/L4ErP/7QLP1h2fJo0PSBs7inrFows1Q2TP\n+qpeOsfDyVfc75rKKKuwyavKv7XHJkphFSZN0RMfHSQxwsE5diJVlkEI+jUW\nYSm+oz0Yl0pTXhA/1KyhzFyWtSXgUqUlwl0rF0yhdCjEyQDJKbhsP7Z10NJi\nTHWSbQHAmzzBC+Amj09yxEVGrnyK5QixUxsQea67MtMUPa1M3hxfxUFFAvWh\nCX6l9CF10Cpq2nqUgn1P08YzBwOZE0vThG0bg+p2juaj7DxUNyeHClPLjHTG\noqJ5vBSt4K8YL9WzQhWYP8fKIt+X5i84aMsDs8LAyHzkXmkUzTrRx9XVzH1I\nlfrD9sG87slawTtkI85OXksb1BP/CJOinUWMHpoGYu5cN4JRVLVh9ni4bl/B\nXWSoGy8an8X3QC7VLw2pUsw6saxJmTjRTh400wMuK5D02eJgLkEvjr//CI3b\nNk+K33twploJh45LgQEU7ZlHhGLQSUlelRukkoSsEM3PzYAFkwu+eQf2pkBm\np1afAVWeCifTF4szEifRkB2T6IPa+U/8xp0ZXWDeN+xn9VH9xVY61GVlip9/\nZnUQ7RNs6LVVsPs9oWiEJ7CpMasiEbCUx03R29U6JflSgCwaDm12PbbLZqzK\nylIO\r\n=4/M6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"3b94d02f75df256cd0543dbdf5062823ee527d4f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_13.0.0-canary.e4180d07b.0_1630654251751_0.9357273146917529","host":"s3://npm-registry-packages"}},"13.0.0-canary.42d175efc.0":{"name":"@material/density","version":"13.0.0-canary.42d175efc.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@13.0.0-canary.42d175efc.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8e961f5e139855f3acf0f875620f0e54321a88d9","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-13.0.0-canary.42d175efc.0.tgz","fileCount":10,"integrity":"sha512-KnzjCBWBVMdGuEP3sqeFzN5qnboADGTUFFN3tLl+SGbuSb+iLi8/JpjEJh5Dvg53IXF9JwZUg68dU2barMw5ig==","signatures":[{"sig":"MEYCIQCf6rppDi6vbmCx9wPAvi1Q6InyvfqLi34ENlLs1XXF3AIhANsN+5IrNlF7vVNwh+QlFcGbs6s+djfvEFlVflzDGgbc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMkJBCRA9TVsSAnZWagAAsRIQAJPlILE09Sc8LK4Ki3S0\nLOIPISsj0udp+h3XDunrO+X/xMjOy3rU9jfFdjFM5Wxy8KdPdQHL1Zmpu3lR\ngc8ur6IlPvo0xw2YzVba/3zffb8VZV9Tbqe5o2WmGaQtOqEZ1NOj9l7rZEkt\nYmXDlbPR2cyWGlNX+Gbp3kaaA7toNWa8VbTAddQvb5k67uTIP/Lb1F3vB7sI\nDc+JvRYUrX20f+ZdIg08RDuQiZrA93Uy4URwVZlVI79GIK5PzSxYOGv0P0Ql\nifeqr9fnMxO7t139lY/iBr4AM0zAtBi49N2mA+MuGR2la+M87bcS8i3y8g+C\n8pUidj8o1cVOa+HWCdpQ405NGVv9xsw/RsRbsJfCppvhRZvYpsqAJSuKtZn8\n9VRou2JGrvLqNnANv5EdNKXABMW2zgnLIBo/596M2KYjFGbAGsyWw9Wfi4Yf\n6PCNV4oQ3a2OfMoMXYcfSWutYAuaSAn+O4bYYJzJs2cDlxvA2XjD6GfLuj0r\nwu0gGMF1JjM6KMSILKgkp1vi+IsOf1yvyKa6RkEgm28DlNEahM9FVnpw0m/e\npA+hr60qV3o3CYqPeqHBKHdA59RjdKXTUCd9mmVfhoHYZEmN6FheJkHgmn9Q\nhNXZBfT4mjwWCaTcKDqVJj6UE8aG9i9IZtUu9jl80L250NRi87jYyME1IfBu\njHZu\r\n=YLh3\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"64e749d9e76a60e5559d8b19e4b57da1f44ebf0d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_13.0.0-canary.42d175efc.0_1630683713819_0.5977019874980007","host":"s3://npm-registry-packages"}},"13.0.0-canary.72464476c.0":{"name":"@material/density","version":"13.0.0-canary.72464476c.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@13.0.0-canary.72464476c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5c535f79ca3f6b256af7bd50d50a327832fd8aca","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-13.0.0-canary.72464476c.0.tgz","fileCount":10,"integrity":"sha512-H4yCDbaDs0Y69F22fneo7lFxFCFU7uYWmvVueXwEVAEhOUhiELxWNWAzOJWIKGzEkCH0f4ojwXD5q1bigL67Sw==","signatures":[{"sig":"MEUCIEEa0I5wC8lYF/rV9d/GBY8naZbdx0RYKTbwcnLKLO7QAiEAyOVuM8GPCw3Wcbp5S7jw4gbE/D08YIfubd+JbwjMnII=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhN4YwCRA9TVsSAnZWagAAcj0P/jhEiiTwSoy4R/rRpGtu\nOfvZrtW65/HHFUqzcgoi3b3cpt7Z/6BZ6bFaQt+BmSt/wPIj3MMIHhLzYv4a\nAx1Hkd7lsIRdUCoxz3ZdLUPkhge88pLq+eHB+vDIM8DRNvutPpIWroSb6upe\nHvGHQSHEZ7lSjZpUEQssiZJc65CCFVuVMEk3FTKmqb5z0AjOvc+zDRSKFWsb\nuAFifGcdlmioiAmqQQ/OTi+s/1bpF4oGo2/GcySZojjS7CpHAEuAgiC4U1IC\nAM45OBzPAgpHlztYK4eAC0wQ2lT8+cH7W5GMTkmMWAJrNCJKYNBEliMHvzbt\n5OZCkFUtf/eq/CG7S9y1wvTrFIqH6FaidISWdQRjYc8sPVnFGjrp6LAs9XGD\nwyPl7EphQTo7Z/wtI6ayv1sXFRGrIMky0TWE8fN6el2MpkcXWa31rsgRtCGt\nIX8/7eLhZ/5RRacdga/TVJDiVC3FU+o+A0ck2JHtHIL8pbXlGs3CsMSYtOPj\nMg7RBRhwiVRe5YrAfT2zhm7yLXHvTQvsfkBTI8r55yrA3/COegTMag+fNLGi\nfJDilvh+zNLbLeUe+QhHLxpCekNYWCQpF+WWc1hbaTlf3YuvJNQnXws0SL+6\no7KU5VfLLep5v8Jtcodq0tMI4ZYSISOzX8xfAn5gq9O1qJLcr5F58840J0cg\ny148\r\n=L5s2\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"4c409a18f3ef0a7ee6f9b223a514471c0515b639","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_13.0.0-canary.72464476c.0_1631028784229_0.06057542791612969","host":"s3://npm-registry-packages"}},"13.0.0-canary.37d4db866.0":{"name":"@material/density","version":"13.0.0-canary.37d4db866.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@13.0.0-canary.37d4db866.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9984104877ed503d45d5bf42f4ce974eaeea13e9","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-13.0.0-canary.37d4db866.0.tgz","fileCount":10,"integrity":"sha512-+cyAbOSPUxM/zv2MXXcnVnQf3rLYViGDXQacIaeLH0PH/9KQaR0k3NezM4TcMreEwgFagw8bgA67dGRH5uyr9g==","signatures":[{"sig":"MEUCIFuL8BUrY9py+5KRw3KFE/BN2RTIadTrArCnHd7zFAOZAiEArxqEYYIBV5GT3DwyifXItJzy/ajUPJKszmz9GxxBGgQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOhr4CRA9TVsSAnZWagAAFM4P/3tphAxhxBY4U/2HWWOp\naMSzu2t/pQcAlQ4zJPemSuljb02RbLCkZq1pIuWzS4B0GlBXNtt7N1uqfpCC\n/nJTDuHF6xEh/04PTyrlc/idDGxo1wjSx38/RVTyImnNYkrg8xKo9cXe13z8\nZOOT63wVbJ6oWrtD7ARB5NJuOWNFoDeR7dManlSh5XciVjKb/Q8N0XOQuwE5\nuVumWF4OklgygD/M3j7Jtn4HsNvExlxDim+kNOK3gDQ0udcTBUDFXrfcSBgf\nh8sfiVLqFWtSUc34sURcAeq32/HJSrE3VhturQ7nyZS1auo81El7K01vb7qc\njbRZYxgfFe4cGNmd4kqDoOOp3vpPoPZBJbGJO3ajs1HHLSHtB0CKhBnXbgwf\nSR/awoaLHQrao9963P34OZbDvx4mJS3yUS5+96ZxWC2av3cr6HF5BDir8Byw\nf94svJ6BzWXnBcx7r5tcCeK9GVRP4g7gexeHeyqfvza245bTKSfFmUIPmrtA\nUFGMObM0QqieT8k5CBddb77rGtcE4kAHjN3qvJiol+890DtnSuYbTa4mFkhf\nWtBzQsww+n0q0+2oc+7Yt4LJg4VGLMdxHSeWvFo6HNFDQicpN5KUJ6KUNeYP\nBQJnpX0nt/yKRbQbUiM+JvZpWniH7bHF0DaTTJgDTilX4jgSpIXBO6FnQrSZ\nUEez\r\n=wztS\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"25270b452713f831fa1adf302fa3f2c357ba759a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_13.0.0-canary.37d4db866.0_1631197944008_0.8566011785456369","host":"s3://npm-registry-packages"}},"13.0.0-canary.6df682e74.0":{"name":"@material/density","version":"13.0.0-canary.6df682e74.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@13.0.0-canary.6df682e74.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2bf3762ee66d6b1dbdbb3f34c1e68dc6ef1aeb2d","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-13.0.0-canary.6df682e74.0.tgz","fileCount":10,"integrity":"sha512-AnMcU/+SKPXe95GLS2A557E6WhCn3P9xJOLP9NQdzVJzzL4gGoOXBWbNdo1vY3fWv3tZ7+f6WM0JQCkYk2u5xA==","signatures":[{"sig":"MEQCIBbcaQ6ODROmhA/RlLqqhaU8pn+GhAbsfS6fZSwwkeKBAiAVY1eBw/ji/qzqBGccJqTeWOw2m/mqVK1eqQrJmb2HHQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13895,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOitSCRA9TVsSAnZWagAAWbUP/1E3x1sErjtJjkZ+z+/A\nMoYZusIrd6aAxcs8EarF/soEmVsJIlsNmHAy/e6Rz0DOQSOddSveC1AR7qLP\n3XTXFyqtuYOgFhqaDDnffdYs1hlou6lF6auiZGyBT1rDMY5ztCz/yXUaBv3N\n6Fco6NYbJ8ff/pTX5tPwP73IKthReVCuoAl2whhEX8rpk4Wcf1M5x5pfzyYH\nZHx9HXSsziMR8XkaiPK2ToaJUlkR1eVfQ7/og2nFZChGqQNo6/iQVE3qCEyv\nd7zlb2I3FKOELLSGu5BNDY9vSWZnbsA7jU//D6xShGC1GVJ8ez6ryp279fWI\nALmDEgKD0cfTQy7oN29kDtEP+jeRBJ3aA7+41CvS097Zs6+d0DtUg9LuwZxB\n1rWVHnXbeNgaMGLLftBTGxLTSCRPPA+YUsoujaxXlsqHMseOirB0WLSpg++n\nf8YHQDAU5sE9kUI8wgnD6ulB1Hr9qdqR1Dhg9P/UIpslvWEvuUQlkj+t9fLg\nAAh8sB8QjMVWPfXqG5TTi7Lqp7AcDLtfq1Gzf6fcXRS5krlj8yCrpTvRcvjO\n1IuS1h3Ypcgtk3KFdI6leMo7ewx4RydSnMyFyvjZWT7gM6VrPrbXTSFsKyBb\nqDg99nImSNhMJLi30IcALofnZ7HKZU8osLk3r9P5ctV6iF7JeXvyh21EK6+d\n6lmN\r\n=CbzZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"f8640926b088e6e6fd8688e2bf177fbb60e83f2f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_13.0.0-canary.6df682e74.0_1631202130280_0.2951544009457707","host":"s3://npm-registry-packages"}},"13.0.0-canary.b49359c35.0":{"name":"@material/density","version":"13.0.0-canary.b49359c35.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@13.0.0-canary.b49359c35.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0c4c925652a508294d3906ce17b2c6895db73864","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-13.0.0-canary.b49359c35.0.tgz","fileCount":10,"integrity":"sha512-hhRFRnXCsiqmHCKwQD16IKi0muOoaYGCmJejDXlQTyAun5psDZdoTVTtXQ2TxN8tshoZCvHSgB3vEWgFpoXJVw==","signatures":[{"sig":"MEYCIQC+S8WWzG+wdMMyF6OC/c2ubhkDnhHV0ygGsxWNS6lNCwIhAOZee6Q4W1P89oysOkabtpbAwXD5HKaUWFeCorPxYIv/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13895,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOkWnCRA9TVsSAnZWagAACk8QAJtXaMOMKOjCgmAKACY8\n8UUUsURVWr6h5OgAj+lK9GbZA7uBhUMuW6JnxT1mAlgnlVOlDNPZLmpHg1tY\n2KBg4HD9A66lxDP4GvOwcY3+Apo6nFEqM1ruHExKU5U7/9Ov7Ejn/ilOG/JI\naiGJs3eB1ig8fFpNrk1Js1eCB5ZUC5H/cNLXAJSWjUWeb8E28IOnz+7W4nHf\nqxnxsU9hFM2AGgyXIjQDxzh2q63xoOq4qrOiJ7qfrSNHurfn6U1Q0NaJA3E+\nTHVzsCPZbcW3jC6mG/j4yB3Nftn5tOdLs3m9HlhxZIYIIG/+mKTfJtD69t98\ntTRFQBIFO+MhiZbeMNMM5wxJC44abS1+noXpkoz6WKf4w/qVOhK1CMwztiVn\nFuiROYkbvNLkUCxVATXwu5ardRA9FQO2A28nhvTFn3ucrU9mVJz8Een9CUxT\n8bu7/FxbxMcyN4hSpXXgX8y3GiNcyd1QHXBTJCqbUFZPM7B/a0ly6xObr6aB\npnYHeas6hW+5TBE83Am6p/wu59xsMnHYGx/f+vks80PXyj9CcwzD99d1Ncsb\nYJ8U3R/sDRczF8Z2ja9gJHB1pONE4lUbPMEzRWd9Fg04S8G0AmQtAxnFKhlG\nd5FDs6165lSQ65mm7xvqJbl+xKXHa2GhnaDyP37G9b+Ram6U538X/72ZW+NJ\nzgvP\r\n=mWGX\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"817b18da85c93007b9b038927a1ae036f98f686e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_13.0.0-canary.b49359c35.0_1631208871791_0.19257124133142356","host":"s3://npm-registry-packages"}},"13.0.0-canary.470bd34e8.0":{"name":"@material/density","version":"13.0.0-canary.470bd34e8.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@13.0.0-canary.470bd34e8.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"02273c2145e31ec161321675d1aac189b67a1fb4","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-13.0.0-canary.470bd34e8.0.tgz","fileCount":10,"integrity":"sha512-+HbyapSEvWgO0bRZtgFSy6FW/ws6DN5rY+CWvnBw6hEV3Am/xEH/mxO6eCCakG467ZcNf4ZY/aMc39ebhohL/A==","signatures":[{"sig":"MEQCIAxak77Q4DiX+25DyJ/S7SVXKe452PaEcUEwNQTcwHncAiATUuEcBtCCV93dLf+cu+YN44SdAqNQ6EmplC+EpnXYSA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13895,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOkudCRA9TVsSAnZWagAAE20P/j85GsMMYQrenllfI7q8\nvLHCYbn/AxivaEHtJ5v17XHCl5EG9fbF7XuqeUxLLX+1NczoK/uOSxB+XyXB\nVGl24MySeNBwt7NACCRyXsdB0WDBWg1j3778BUTE7s25Uc8mh+h67tYE8Onp\nHYhD9Yz1oXWajBczDLaR+ACYUEHzXpx/nt6BG9Ip3m2THRATVTOotjTx4nAA\n0pZxolGk/sktBPxR4Snaemy8FmgeLpkR/irQ0VFlvqr2jAmNLkjtv38FNc/y\nf2bjHBwLr+xCtuBnEy49BsErga+BxGdrjRAis19PNh/eJHqkUUOsCpVlQC7X\n5MXIHYNe8eMJ0fSOckXq6pyZ0LamEpJ1TZw7lXbLIBEfqmVqi+pwD8Pk5BZV\nSgviZK9Yp6prkpD4+OxQP7CEtRhTAWndpPVG+c/h+iJEmsTsxNjsmoOc9hbh\nL0my1CkRmbl9TSM45+ZmXTxGAjy5y24M817vUQEmBbANxV8DyAf7FcQjyoOg\nUFjfhu9/Gx9HzH6b/kyqj8EPAbDW+M2VI7sBxnDrvBRsTSki4Tb0qVLONgGx\nWdWCxPCmTLUqy/sVH4uDzEl8bR5wjTaBieSqlZOzej0G1T6njKb2Mrx14Szm\nkeovChddkZPVkiLTPSMP7FF9ll5rcWToZ0jmZnfcEyKpifMMNbeMNqDLwygl\nGcJ4\r\n=M2re\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"f249b00e3cc067fbfdf722d71dd85392d031ca0c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_13.0.0-canary.470bd34e8.0_1631210397389_0.04761560932607467","host":"s3://npm-registry-packages"}},"13.0.0-canary.d48a01771.0":{"name":"@material/density","version":"13.0.0-canary.d48a01771.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@13.0.0-canary.d48a01771.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5cdde1726d27bc709d1c55b373342e41e89d9df2","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-13.0.0-canary.d48a01771.0.tgz","fileCount":10,"integrity":"sha512-jLlpvEf594f+D4FNDxQ0kYVq27NNpHR71E6EqjFxTTAZmbP3TPz/betezK6t2HYqmSHUNL6kxJT7U3ZvVblA4w==","signatures":[{"sig":"MEUCIDw7m4JzU+3X9P0CBJieG1DGEeH15X6e6NFUM9dIlJ6AAiEAiXf8J/6xBHqogiJF2FUWhtS9rzK8vBgxW9fZS8JNNxc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13895,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOk3OCRA9TVsSAnZWagAARlMQAJIw4dCpBtlAu5X8fHz7\n+05nYO7cG5JC7vQUhJwiH/D5k31iDRHblk4bNZKa4VJ0XgulcZoxCHpzTuF6\nbSmhrvIRcGjHnxxjHtNT5vki39tAMBPBdwvEdnEWb6eC74VMPaGablgC2GY9\nPQi3ooDuHeii/3OvjxPxfWLlWPd1i7y/EU56S65QgzBBtvpgQ4Qh4Zdh0ZZs\n3qnxunKYoTDnDZFPhoR/LdBDjY87oeNNFTGkiLljpQthMN9A3lEKkc3VV7ro\nphJ0prJxgXSj8R0iVBwZTu4jeKS4LfAKc4AUGgOxEMZaVdxRzqKeWJehGIsl\nMvWi7njw80A/rFKZvs6Fc4WrNL/Gt9I4kW+E2b5Ksl/QrebCTeO9+N2G7Awx\nU3TmrlqZxU1s1SuvV5v2GfP8iFQ+CsL8UGzYF9eYnEcGApMYdwuO9LuKK16I\nmJNQYAGjoravD3FJziaGvecqXDGwXC7VcjysgBDbOCxaHRtRADHE17ppBvD0\nFVDUKU99b0hEMzSCraosjTRfUTvJVfr6o2U9QSrQouNZVc8q79I/m5iluFDo\no/xayCx5zEj8m34HEnKBOGUFFHO2cPnVF9scU1sDmlBvWhhDzrIAFXzEG5Qq\nYv0WfszL+j+GHgTyhZdMjqZmP8IV9T0QVEePPb/Y4c9M/nInCabSDtzyujBC\n/hLY\r\n=FPka\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"6796441e86b583e99919b207640bd02efef6fdeb","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_13.0.0-canary.d48a01771.0_1631210957861_0.6498858508323095","host":"s3://npm-registry-packages"}},"13.0.0-canary.13db34b34.0":{"name":"@material/density","version":"13.0.0-canary.13db34b34.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@13.0.0-canary.13db34b34.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b1b3ef9f248336cc16aa635bdfc0afff6c8d167d","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-13.0.0-canary.13db34b34.0.tgz","fileCount":10,"integrity":"sha512-Z1s+6yv0DUfFzHTweYArYPkjYiOT83wa7fMVm+IBzWjlIsEghNfKo0ehRZx0g0YWFnTFxIoLjtn5MsTmNzA4UA==","signatures":[{"sig":"MEYCIQDrE4pFB0hAd9g5v7bkjtgSj7gHDgxxu4pi1TB4fzf7NwIhANFWIhbrwV5+cfi7612jBzFhsouo+RN0+S59J1G6LaCR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13895,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOlFQCRA9TVsSAnZWagAAAVAQAJ5iK9tUPkI8R24x8JwY\nROQKrCHzIRylqitt9MYdJMFVjdSJi8cFw+YjQVvh5824DebT42dr/JB6Jqkj\n2jOB8d3DXhW0gHmcladGbpn8TbFrDT8ft4k0fdA3CoAGc3zOgSQ2ltxAAoku\n+sjZbOwFJO7xBetGbXvWJMMdHcTi2yDU/+SmhP/Kr98bV/bG95E8gtsxvFE/\nRwG/WBsFirZ04gwSiAjKbjLeVuvHG6C0SyW+oxfzVsTzo3xw0qILf+NwKO/2\nAYGeP9O+dXlT9v9jmAhmtsW4SrenjAy0PtsziUJCugOaswx8sJVM3Sf5KosT\nd1K9KMbrzUyLq7Xv/WpOIN3f8wqNVtCkHSoHtHbUP4ZLpGjI2di2/y2hyp3O\nHTLTSDVW0dlPX8SauFW+TGW0SiN5piHjsMR/4rojafbu9O4wherK7vGemZtK\nqw0K+PKfIEjfEcXKtGDs2cw8YGNGN8ETReGi8aRFSUFilEV9sXHznEKyEyEM\n00qiXk7hv3omhVbdcmoOghXDdekybJ1AVE4EN4mK+HdHIAL3CTkEKyHw1u8E\nwe/yGcWEgC+pNzDmisivgl7+7kQlyZHIEtSl64RJ3BqqJikLQEwVlNE25uom\n7O3lB/6VHjQHzMdRNEpV+7gmpNoZQ73qcDCCQi8gvXlTL6YrT13MMc1FiyVy\nPG9H\r\n=7HsL\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"7883b32c9c6a3280e801925b874df667e1055809","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_13.0.0-canary.13db34b34.0_1631211856655_0.5124472949910963","host":"s3://npm-registry-packages"}},"13.0.0-canary.864798678.0":{"name":"@material/density","version":"13.0.0-canary.864798678.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@13.0.0-canary.864798678.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"178f4334b915f7094ca2b077c733e13b1a04ce1d","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-13.0.0-canary.864798678.0.tgz","fileCount":10,"integrity":"sha512-aoZA5649C7D2qE0hihAoF2x69Lug8OEJ4PLzcsvteSzlivtl/y/FtkoV3DXacYA6BFej6aN2Cz61H1JXp6Jv3A==","signatures":[{"sig":"MEUCIDB3TpVqyTQFskIyHKnu7hdbFnMEbOtI8ph6EJSQyglqAiEAnJJ/7HBP5vriQw70ImDzIZ2/Aa2q2fxYpMizD+v9TIU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13895,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOlQBCRA9TVsSAnZWagAAEH8QAImtkkDL1EUgOvRJ3g7C\nz4iMNZKBBKncuN4LXMEAnxk+y8XfA1UNP4yj05K4xCccekg1noIBKZ+A6qjc\nURRd/KtQssYuFcTSNqOCYO16lVBt+HweZt6W+8pwlzDA4Cou88xpRj5EPf8Y\nD6iTTbvm/SBDFI/k+CFxhOCaGoHfMRqKDwrcLefQ1FlxVGjk0UW8UdKq/kw0\nn1bp/ARQ/pKR/vqzxjpwDhwDnaYvB5inPUQK4yIhvPpJO2L6DaZ/3gJxykJf\nI3LLDg3peTfV/g0CV2AhJldvrXhACAbyeR0XYsYFXjqGZZ0Zoa9QK1tjl+tf\nDmLMP+UcXbwZ9p7dVxHTRbEticpO/xpK6LXRjTn/zWQAvSfUnrckbJ/QZwCB\nrWikVkWtPr6X/JKGX8YvbMjHsXfNFCLHytWYPRCLMjAOJZzYj4ZsHJahIrkY\nG15ktTDMxpMHQz/x1HW4iIvm8dC6bm+x16fIPD0lJMrDTnF4OkFMnXqTVM2e\nIWefNqjG/TdxBNX7JXpYJQUAdpo9JTXRVjgx7DJIByd679r9MNyDTig7PxLU\nkmE5ya0c6YGN+CEERslANVeVlD4dn4Nj++ELUwi4f7/Xuxjlb2r6sayTTaSi\nMH2de91FOsUmJ6eGInCUlFRQQ8X3MgVuAmkKqYGgcaVJ8Q09R3a7MbcG4/LB\n1n/Z\r\n=akUl\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"08d2ae683a56b5e86f7a54eaf5a2090fd4288df1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_13.0.0-canary.864798678.0_1631212545226_0.2311927318064233","host":"s3://npm-registry-packages"}},"13.0.0-canary.d04bda3fb.0":{"name":"@material/density","version":"13.0.0-canary.d04bda3fb.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@13.0.0-canary.d04bda3fb.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8deccfa7bb4a0cdabeee42ccb45f97da3f301ce4","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-13.0.0-canary.d04bda3fb.0.tgz","fileCount":10,"integrity":"sha512-QKyAF1/IduSfTOhXzQJU8lL93BMeow2d/UHpqfvywZIekpg6PnHBlvsTdOM7HkaFFlT9YPwn6F8Rn2z+ROgDJQ==","signatures":[{"sig":"MEQCIDoE6rpfF3mrStsgqNhZUqoxFyjzvI4fEhYol7uKFdzyAiBkQ79UY7u07GyqJWd17vkryb2+79dtqUNL/26o0sdGNg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13895,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhO3e6CRA9TVsSAnZWagAANP0P/iFwIrP6ttTMC6WwE+W/\nlNNSnhP4zuS+Kc5IuGn3URPum3dizgnW1ASC91QzS9NaVXetrMAnhsLjXWXo\nDLlVIZKIlvIodHKgUIgMP7Cd9SVX/qHb9ka8ovgtKz9j3RjbqgzLqtvRwzJT\npE5H2u9OPa2fgl/E46+1SiPzgreVBMfZyEtGgpIDBfrOlHrTtSdesy9Q6mRN\nvwQxmYD4uP0yV3WeENB0XCE8ub3uaCfiRPpj+rok3/N3BQ6NT4fjuucJ7FF0\nMt0vvANOvgDzFCWKv5jTQtus7/L0qyYRb+B7a92Uo9Tr8elCnXASLCVjh5T/\n3mrkygoIk2KZXkqUQVWVyiiI8uLBzn+AOxuC0vZ78oeTUNoubBfmv6RI1RG/\nazRupYvPI1hFbxz967T/uR+Wt8IsXjqbSHHvzZRvyybhgTnEpnauTOtbe92I\nnKKYomPzdUxav2Z+LNjYmF7gmuflJapAyw7qToA/xUSYlm5qi/sTmLNHhIDn\ncI5EIZ15ZV2Qaw39HibWNHpU62Pa0j/GeWceYonNKgnbr7/UIWIkIL5fSOV+\nfJuKM0ST7sPGMDCnQnB5PAlqBZg3MiT6/FW44bsFlQgvRHGqpxxGHteJwJYS\nN08iY73YddS72npaqmebYn2os6cNiXhSsUWIvJi+J5Xz1wSJkRQQV45O/28T\nnmpx\r\n=9IuK\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"7dcba6a47b77f0011a1f0e22b3540e2a70b285cd","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_13.0.0-canary.d04bda3fb.0_1631287226408_0.4342722148481728","host":"s3://npm-registry-packages"}},"13.0.0-canary.5533f73d3.0":{"name":"@material/density","version":"13.0.0-canary.5533f73d3.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@13.0.0-canary.5533f73d3.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3878b3a64b52577d5da5c7d373ad34fc4900de10","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-13.0.0-canary.5533f73d3.0.tgz","fileCount":10,"integrity":"sha512-r414yNFrLAr/X4y7Omm8nNxD4kB+atJ9zWrrvbebEdoQb1FLzMIqpVFDBRpXSEks0xqqrLiHK3aV1nDwB/5biA==","signatures":[{"sig":"MEYCIQC5PAbbYX8dWQSV84cMTMwPAv5an/9WufCDfZIuUG64AgIhAOLyAg8ozDi6HrnmrJVo/7RWcV63+tuQ7IREbxlxXbKR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13895,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP9iMCRA9TVsSAnZWagAA2JUP/3/sYD3NQlGohIncEqcZ\n0GV1lo7MMBAg0T69vOAZYIEET+iueHBeU9f+7cfQ/4YaeC1BrQnMnSQnEMTL\nRPH3yQYVfNWo4H15qXMtPnxjsLdTBJsP0esiW+d5aMddFhB9zq5nPhgrhfsZ\nGxXVpy3n1ED6Ra7zTG0QMsZ36DyQO4W0Y37/iUohHBS2SeTDpE0E1OTbNfs5\nIud1Lw5LRuJyO32B0GbjTv2guZn34IIOFjfh4nMD9itWlzdT9yDs1OU6K7hn\n4D/cMx2x7h7NjCGN3N98to51HMcnUJEzApTS1bDSbtodVFtzHhDBkHM4sR2c\nPgtkAd6qQhlhvUqQemNL61pgalNXklQI3mNcXXGpIewZW2gR85WkXp00Jq6R\nm0Mk/wCYv+WRiQGDQ/5W8uHgHnNfnNP5u8tgupByl/2dJdjB5SaW3Nr2CSUu\nOMTC/rGJEhzVq9GcWxiJ6ChPMe70eLQIHjy4mhaHMZgole74qMFjuEoWKRgA\nrhUi+0KYSl7+Dz86VDtw4qXTFTj3PhBdrn5kdM9kmAdtmzMgGLayqf/65yQN\nB5OO844TKKFl2unyKG7vMZReokmhn+iYVzjfhATqD2Hxef6I0UkAv+/EeSKL\n5xq3v17iQ1kvrlpncd8YHuGiEUDMaXmMQx4lr0dAHxisIp64iO/Eju8JPCE0\nZsdK\r\n=qRqt\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"20bf1d151f241eb77dfa3233eb61f4e35d5b2838","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_13.0.0-canary.5533f73d3.0_1631574156117_0.6601803479192125","host":"s3://npm-registry-packages"}},"13.0.0-canary.08398f880.0":{"name":"@material/density","version":"13.0.0-canary.08398f880.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@13.0.0-canary.08398f880.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1720621fbe4fc0a6e314a17817c7553018852fb1","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-13.0.0-canary.08398f880.0.tgz","fileCount":10,"integrity":"sha512-AaGhO9H9+2E9V7BKWKJKe/lPFxc5NwjMK7wEnxWWPDma8F4MVhPAT3VDvcWzrr45PlGGco/ky+cfeW1q/FdHtw==","signatures":[{"sig":"MEUCIBQf+B4ecYs9KzHP3YNgHgfEDYdvjK4ot3tbGEEx7B2MAiEAofpDHL4kNcwi+QPgS87Aj7RL485Jbi//DEATmDuSBpQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13895,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP9+/CRA9TVsSAnZWagAAe8kQAITNilsVQkN/yzk/JT/F\nFo+q7KYJwukc2T/0OSxEJcGIqgoxJ2OOBNTofT2DYvbIMkMN9EmiLFC8uugA\nQA5kJ/DBgIyGSaSlohKJ4MbtXzfJEftCR2T8AKjrE2sqkearE0rn9vs50KA9\nMvL7gdEpuPe08NjLheulUqjrUZhdXRrVkg0NGxE0VkrncZCzgyoNC4J9gFge\nCuqo87CwZO1i82oOnJKWrJDxVXSj+Xol/CCucWydjSYKgsT7c8/EZoV8DiKk\n06Edez/6QKtvER8Y50Va80zRzOAKrkwfNtgP+gJWQMu79YFNVIOefTmTBg5v\n7LLz5X9RKwewEtCx7ZOTlcnk8dworkT5z0hFZffl3ZzDWf5UHvDILRRlAfoH\ngqt9PunBluL0mN3TAK2u1fjhvjQ6hWEO6ClZ4lSQcafHdVzLa5Bc3Qc0eHMI\noHnqAjIpWw1/nMiBQfuGYl3VZF9xtE0K6AQgCLMHy6SsnWjs5XYIQLg05efp\nuYHQ54Wxm3tXsDhnptHupSQOAOKFTai5TfeNQCHNhJrPoMIKkiL3AjACB84c\ndgyCH2lpPzu/BCRD1pMoVDQRFLYx1UYEBSoq3vcxh1javgREGU2TmljNeLHb\nw9bJACo1RgzHcYiFu7/cxH6uT1XsJvv2Fzp8+/nqHM4jdRElPqGwid/hwJOA\nDBI3\r\n=zu7S\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"1a993a7d6bd4a018cc4ae230bf1cc3fecfc16d1b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_13.0.0-canary.08398f880.0_1631575999768_0.09441659516539391","host":"s3://npm-registry-packages"}},"13.0.0-canary.818f4ee93.0":{"name":"@material/density","version":"13.0.0-canary.818f4ee93.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@13.0.0-canary.818f4ee93.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"52559be93a1a18bc0812c31b88efd26b07715f0d","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-13.0.0-canary.818f4ee93.0.tgz","fileCount":10,"integrity":"sha512-04taQEgipHbKxqXbjKyULxQ6nyZaR7qVekiX4x/FxjOPUA0S7YbLw8P/T83UENAMhmXvfpO7ZnVD+FfN1CtYNQ==","signatures":[{"sig":"MEQCIDOgZ4yv88xzhTqICFWua8b7ZJ2XfLEYEH+K9H9KeFydAiBDQOAg+5YpwXSunaoVqf6c8WkiEuHetZAY1evKZXpB3Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13895,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQjIZCRA9TVsSAnZWagAACx4P+wZg/VDWDdOVIE6tHejZ\n4o9m48cJzbIeLz8anwE2l78jWU84oY2H3pZz33NI6SzPDX8oFKoREKXic5H1\nt+2XxZ/kXzL2FMDzolEcfr+nsG6Jb4X0mRUrp/SyW3H4gJj/CX9Sw61kOJtc\nhQB4P0hbfrqtvs6pQk3U037l9XJG4xgt6FH6g9SjzWt+K/Ekr+mQ7PKQDdFW\nHjQfLIInD6zsiq2IK4dv7E92uBLjyKWzFLLidmRc4E9Y6emIdnOZOpdso4yS\nZY++GowcyrnLA5FP1ye9YxaFTPG+b6imLfKxMWQ/Xj3PFqx4+8cqxywP476q\neQ5T/UzR6kHu3MYx6xOiUNSSRpmg22Tbt7aVY3nE8z3FMSqtOuRTDJHCQDwP\n6yK9i4UeXYOTARaRWmJfUnkd4lbI5HkuucXUwj8kbL/uMsGq1us0dNj4QkSA\n/6QUzwg9drQSBLWEWMttpkGT4PFldzsjNP+Q1T9mS6O9PmVWF5bpNos/rz3/\nocKlpSBYEW5m2zRMp9lOYQhCN9PUyp6hvJb/2tj1H0i9WyKuenXIq3nEgNwp\nabExNCd1cL9UJkUSJXLigJ+0T+8GtB+YOuAH5cJCipKNY5graKongYZdpIie\nvW5hJkS/Lx8V0Zd1KjFQ1lXawg0xl9AsTkXMXkDEBqvPBBcWQVka12kFzJ2S\nJG1b\r\n=qsTy\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"1d88a726d331a878c9a8721e3237e8cf6df49f1a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_13.0.0-canary.818f4ee93.0_1631728153809_0.2626506626723397","host":"s3://npm-registry-packages"}},"13.0.0-canary.8355e14dc.0":{"name":"@material/density","version":"13.0.0-canary.8355e14dc.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@13.0.0-canary.8355e14dc.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"75ec648e08555852e62286ccdf5629f1f9862d53","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-13.0.0-canary.8355e14dc.0.tgz","fileCount":10,"integrity":"sha512-v4HOLsQCN1c+TILHS0heT1SMfuNH/lEEZ2eVCL4wwefT/j5fA8d54nruS5tlkZZ6U+y3BMd000Y6B1rjCRoWkg==","signatures":[{"sig":"MEYCIQClF1lh/VuU5sxm0VBKyATS7KxC2YQez25vjuEf4zTCpQIhAK3AvmBZ+2fafKkf7kJXm6Tdcvf2RzAO5GWtWiKPmCZq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13895,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQkVPCRA9TVsSAnZWagAAKTAQAIRQIVfo75yc3xUVlIn/\nxtxKGt7uP7iu2TXwgVAy5SZD/9emCZbLD1pjB9bPaBVpP8CANbIaIt5mhEU6\n0Zc64XhFeWkoMhTvwb12TiD0AJUoSte/KGt1vfHPR5r/b2a4k9hxAiLNt4XP\n7rAKeKc1aq8/A5GIAfhVEko6QXtmI42fWJpm8phGnFJ3Tl3mmMvGDez0OhFh\nv1NeeEEEAokWoPA0A9P0uHolXpTCxiIwY3/i/MD/3uvIaYSy8DUn/SD434L6\nRKcQGC4uDWLWOFsEY7aZXVpfpUdJIAkRFkr25JRXC5FjVFsq4c02eCk9ZfXx\n66xeSdFk8hh7KhhU5GzjsNCuiqzcb1FJ03ler84g2X8Y+GeKPdPRq0gkmuOw\nnnBxNhy40jHi4rwbJWFIE0+G2sDU347GQ5FSqBgkFWPTEyoVzX+i8Un8Cxs0\nrJ/1IlY7X290pYex2spOjkS5cIaEX3kgwsQEQo8pHnxx+qUQepLUIvUqbCaT\nXVnXGew6MjB0pZj2NjXgftxM2YSmEoOfalP5MxuS6vbJ+/rQh//uUsvIe4yj\nQGZnMbb0YzghDw35uRJB3XJWv492/gLxX1ZlfN9scV0fY4N3l6bG6jwnuzTY\n8BObz/wwjEkBNzucVBgeH1SwI5BTwFlOkddaJR1Tn2F4suQTgwdkeUsbBX0I\neD7y\r\n=j2lu\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"065f64e5cbd54d86f092d8d1406bbd0852b2a6a7","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_13.0.0-canary.8355e14dc.0_1631733070979_0.7317456724517974","host":"s3://npm-registry-packages"}},"13.0.0-canary.d4e16a6c4.0":{"name":"@material/density","version":"13.0.0-canary.d4e16a6c4.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@13.0.0-canary.d4e16a6c4.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f6ca8d7905ff823e35847af1857da162ccd90db4","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-13.0.0-canary.d4e16a6c4.0.tgz","fileCount":10,"integrity":"sha512-IQ/9sVCaRcsWXh8yUBDZkx/RwaWaTp19K3co4b0HKtkuVgiNREVqnvlw/kNzPV8zChmPuYXq/LU1l9LKEpk1+A==","signatures":[{"sig":"MEUCIGAK3/wfLWyYSgaTKleCRXyQ8FsWJzE5NjupB6oT/xZzAiEAqlNBqgzHffmmvonyOa5+n17w1E/TPIoemU0WydyYHtk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13895,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQmxoCRA9TVsSAnZWagAA630P/1eCfqL9cze74b3VNRS+\n2Hi8tvYUaHwHCegy4KBeX/58WYAHpaSap6yvbiOkJ7ZbU+Xn5p/PAsrZyhy/\nWil/RpsoJ9N6aJ274nTr00hehjBnyXzGVEIZ/I/9I1BDM7lDiy2CyqQMd47l\ndLRkGY9r4DvZy9u2jYeykQ3qqNoKy8rmCN75LkDmgk3a8rnvmBcE10THZNXL\n+OmCfD7R+BnkIDlGWutrPCE2zj272auoZSzlFHqs6b1lr2dDBJlPByMY8Yut\ncLFHoXELelVHLH9dktGmrBerJQV+FiIGJn+klFGLM9baLzGsIyZ+M9ieLrpM\n2wZORP18lV8R6/AAIRIypYFkTk2+je6AAJ0D9dCmyya7eEjyShvDVyOb+hFw\nDLGHZal33JLXdMUfxoNks7ebwRYbNpSnOjLIMDBYtgNoIQ4XG+jHomAj+bTQ\noiXcrhxXUJVtZbiCG3inPV5B61cnyCexhwdJsaX8BDXy5RBeDPhN8Pwam4VE\n1dWq0XiwDjnID+22KLUVJwI0d/9IC72j3bsWU3G1HUib3h56pGiUBJTay5Bo\nFgjH8bp8SKZlt1zk5t4w3Psr/3Mnla2PdMGqsdpOpzA2cSmJ9mCqLHLnMUjr\nNVHciFss9vYGV6GeqA2aQ7r+yPcnq+UnP/wYSmzWag3Ub7g3DVfWC16eGQVK\nJSh4\r\n=0cfu\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"2c2d0c3f7c18e3a2b581679df71df5e7a0e2fcb3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_13.0.0-canary.d4e16a6c4.0_1631743080172_0.8690197023895732","host":"s3://npm-registry-packages"}},"13.0.0-canary.65125b3a6.0":{"name":"@material/density","version":"13.0.0-canary.65125b3a6.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@13.0.0-canary.65125b3a6.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9461a3438352a8dc872d0005fdb379997310a8af","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-13.0.0-canary.65125b3a6.0.tgz","fileCount":10,"integrity":"sha512-W8Y2zJ/tjXPEl0JHWFxSpUNBqd6zUitzGXoR9I4yfjNY7t5TBkBNbexyPqtz3TWdLqM1xJrIdczDHsFKXLVN+w==","signatures":[{"sig":"MEQCIAWco9mQRiBAirFvBLovoDzRYepfTZlKmntHCfzynQ9FAiBq6sCNamC2xBKviYCcFsjTO9q96aFDrKNHwENQNqD/rA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13895,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQ7QhCRA9TVsSAnZWagAA4OIP/jayicb5JHdiMUVu/rpM\nzamYHKYJiTvJL9iJva/M9VSWM8gkW2YCKRYkGQk3nxM9t32vQhf+gJDkgajg\nF5sWqp44wvWE1DVrfcDdz456UDVNlNRFydLPh1A5vbQExSKI+w3FdrJOdOd0\nX6wmsAxZW9W/yCBlC4wENfIb1HfwbfmiUwFGMSaXojpIAif/8IQv2ncSGYtn\nwvsU/4bEhqo104n78G8cJjsOJ8OZDcLBW2wY8gqe1SCe8KArx8q7LhAlbWWn\nobXxqnZWhG3yg2HbpfNa5kgK+rq1s2nKNcXw/C2aGzPoYHFe+lHY/cfeksqV\nuJk36F8zl9L54aL2VEN0oUy5Rq4vRwXX3wyjmn5+U+5WDR6itxw4LS+El4Ad\nrJ63/R8s4tFmu4Z2qj0M7vO1rxS+8BI+Gy1uz5tWYg4upFWyr8hlPOJOPM/0\nB0Rsf0NWC8noet0D3WQEkIXvLvhgu1q2GqGG0+iHhj3slP8htgWIeEfO7ihO\nknEBIOZEfkK8AszN5SiueqXOkpDas695gBroZiRV9G3pzMz2REWsgGZXoPnw\nUUal5bNOTu4NuKupm/D5QRHv3y494AqhhPFRnV/2C3uDmalACjbSEAKXq06X\ndizR5UKxo2krzkiK9Xqle4FT67gng2QrD/yKFHo2Nq+0S8/ahN8mRvCMZxg0\nQUjJ\r\n=Bw9E\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"7f141fcd82e6061ac62fb457dad40c0ad70e52d5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_13.0.0-canary.65125b3a6.0_1631826977296_0.6183114523721391","host":"s3://npm-registry-packages"}},"13.0.0-canary.80a583365.0":{"name":"@material/density","version":"13.0.0-canary.80a583365.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@13.0.0-canary.80a583365.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cd06cf959ddf08644bd9334550829b6e09b06cb7","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-13.0.0-canary.80a583365.0.tgz","fileCount":10,"integrity":"sha512-f7j0FMZmw3jSfvJTZYhUE54v4Kr8XNQwP0r8W9fd5AR6nf6Ee2N9Um0fA03Rc3gLkfPyibqNK28Q4htRlZ5FHQ==","signatures":[{"sig":"MEUCIQCezORrW52AhsFIWUwMs34BHfNu/S7WEBpF0haCLwGYbQIgWym6KMhygBrKCEoUJ/47loETKoSMwmaLRXVmSeKBDJk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13895},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"c174baf193216601da7fe07831dd2152585c6beb","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_13.0.0-canary.80a583365.0_1631910893032_0.7899387152649906","host":"s3://npm-registry-packages"}},"13.0.0-canary.83900936a.0":{"name":"@material/density","version":"13.0.0-canary.83900936a.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@13.0.0-canary.83900936a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5d18c95a0ac1ac5e49ea4b743fbc4e95448314a4","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-13.0.0-canary.83900936a.0.tgz","fileCount":10,"integrity":"sha512-W+eg0WsCFOhgyw+M9bwUY5kIC08vdGXpwL4wfsjMYr4R0b8IzNBCIvhBOOjwRWoFzyJ5Q9vWRd5p1Tv6G9gE8g==","signatures":[{"sig":"MEQCICd94LruTJ+QnJan5NdPlu/Ov8VuluOtXIFGaABUBH+/AiB5yi3GMdYnkwSZbCNw7xaRgjJdijRx2okTpj7Kq4NFSA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13895},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"ca6026fb6b378ac9a4f14997612369fe29f31093","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_13.0.0-canary.83900936a.0_1631921006265_0.4767850041723236","host":"s3://npm-registry-packages"}},"13.0.0-canary.860ad06a1.0":{"name":"@material/density","version":"13.0.0-canary.860ad06a1.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@13.0.0-canary.860ad06a1.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8660b01cc73c047549fd212ace4bb1d4f4892f3a","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-13.0.0-canary.860ad06a1.0.tgz","fileCount":10,"integrity":"sha512-qb/S27XLnqyf/MbP859zyoDw38Rk1CS6Ykr8cXzaKQI1JbQsbnkGW6mPboDwhFC2qWvkU6AMWHv+bn1bmpyXgg==","signatures":[{"sig":"MEQCIH7psyWaT/rzFPfYlKbUSaXkH4xNLmyppkai3zi3tDUKAiA+26zuQYsvJDNwN82A7i7y7eMXDJ8MpeM8HckcC8yTbA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13895},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"8f156ac018a526d53d5f5077762518483bfa7dc7","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_13.0.0-canary.860ad06a1.0_1631921705460_0.025963078638256087","host":"s3://npm-registry-packages"}},"13.0.0-canary.3b8d4429e.0":{"name":"@material/density","version":"13.0.0-canary.3b8d4429e.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@13.0.0-canary.3b8d4429e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"66863afb53575204eb639d83de19e7101e7507df","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-13.0.0-canary.3b8d4429e.0.tgz","fileCount":10,"integrity":"sha512-i/5yp5nEcrCIoJqSxPfl2x0JyzpjEs18XkVDZUIT9+fHBQpwISwPp9nE0ELCVbl0IQQJ6yNpzwsnwowDRz4keQ==","signatures":[{"sig":"MEUCIBPWI1BTaKYMcajC7ILX4aQ1LFXwJanmLzetqlGXIlnOAiEAh9ykBcZDBdtE6ruw6THqtI79Glr++6dxdcWE2LBzREE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13895},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"c548d2fdb2731631683bc92955d6701cd0c2bd14","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_13.0.0-canary.3b8d4429e.0_1632159997029_0.10509187834566891","host":"s3://npm-registry-packages"}},"13.0.0-canary.2da3606b9.0":{"name":"@material/density","version":"13.0.0-canary.2da3606b9.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@13.0.0-canary.2da3606b9.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c7e230cd21bb7de12813d99ed761bec3815d4ebc","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-13.0.0-canary.2da3606b9.0.tgz","fileCount":10,"integrity":"sha512-YZFBL+EeWescM1TKlwFPWrfA314u5Fpw3VtQm1AY4F6ZllQZWEEMLo0XApMsOwR3f6DZlE1mnG1sUgIuYWi5RA==","signatures":[{"sig":"MEQCIDcqT5VVwLr6ie6RRfsTNqulpTycLaSI4daqwsd0FvfCAiBT/j5tyd2jPCH3I4I+Gch3dPQgzHMqIHQWEPGAUugqnQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13895},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"c452408cf52d900869313ad573c1b84c9d6a3105","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_13.0.0-canary.2da3606b9.0_1632166609835_0.3174778255459756","host":"s3://npm-registry-packages"}},"13.0.0-canary.e8c598d1e.0":{"name":"@material/density","version":"13.0.0-canary.e8c598d1e.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@13.0.0-canary.e8c598d1e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9192becb251706fa4cff9e097ee6b04ba21a597f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-13.0.0-canary.e8c598d1e.0.tgz","fileCount":10,"integrity":"sha512-3WzDBBk3H2D773178KQ2o8p0v5MSk6smlKKnXhJIcwhjiAWfiTjeT+0OLu6CtxjdpZg8gb51hgdln89N5p+ZSw==","signatures":[{"sig":"MEQCID/1Tt/F5VBJWJU23RP0vNNNBFH5inMcAP3gDfP5+dSLAiAS3VSYonpCPxvN5lHUOz8YM54sw/RDasPBzw6deg7mmw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13895},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"11ab5557b275cc7f950ff2123684083e6245eafe","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_13.0.0-canary.e8c598d1e.0_1632172258484_0.3884992198786108","host":"s3://npm-registry-packages"}},"13.0.0-canary.1340ee9f7.0":{"name":"@material/density","version":"13.0.0-canary.1340ee9f7.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@13.0.0-canary.1340ee9f7.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9b0eb1d2854e67a59ddf3d2a0cda8cce33c91b3a","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-13.0.0-canary.1340ee9f7.0.tgz","fileCount":10,"integrity":"sha512-g3xFO902zawbuBfYbwJ50PPj1JgiXsnu5CknprysLe69L2LJBXdQlRhVXSS8C2krZkcTKkVoyVnCu2jZP0AUwQ==","signatures":[{"sig":"MEYCIQCs1WGeowzPA2YaApRKENinIngARO7q241P3axyQBHHvAIhAPKKwj+JmMNCXfTTJX/fQB1E4wTSY30JvMYgMt0zmCVZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13895},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"c9cbdc93fd9954f12cb74ebaf2cfa5806d078879","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_13.0.0-canary.1340ee9f7.0_1632333419571_0.19174242752218906","host":"s3://npm-registry-packages"}},"13.0.0-canary.65084baff.0":{"name":"@material/density","version":"13.0.0-canary.65084baff.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@13.0.0-canary.65084baff.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"042e817a4e41603bd950dea4a3f9a24d9671d139","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-13.0.0-canary.65084baff.0.tgz","fileCount":10,"integrity":"sha512-2g7lKay2gGw6WxLutcEAYILmPVv7YGBW4gQ4hPEZHQfKf3b/62PNYM86oWae78HW9D9PE1tmH+UTOVFm1Q5TDw==","signatures":[{"sig":"MEUCIDYEseYAjXFenVZPqm0LXztMdWDel9Qy4ehCO1WjDAqZAiEAj/Wa5b3d08tFoR5ZY+M8W7lIgMyB1DmVxzayrFJclZo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13895},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"afe4cce0d8c7e5038058ea8198ffd72e99e1c941","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_13.0.0-canary.65084baff.0_1632432268998_0.028397135376193372","host":"s3://npm-registry-packages"}},"13.0.0-canary.c79aa0cdd.0":{"name":"@material/density","version":"13.0.0-canary.c79aa0cdd.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@13.0.0-canary.c79aa0cdd.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8bad6592cbbd10643470263b89fdbab86633dddf","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-13.0.0-canary.c79aa0cdd.0.tgz","fileCount":10,"integrity":"sha512-igUo/XetgQMcEOcpn5oV5XVbc1huq9raTikYbxTnZOKiJr8WECguN3CaqO6Uj9oYCTvwc+OFckTRpyvqnaiE/g==","signatures":[{"sig":"MEUCIQDwlnRCnLq+aFpEE1HOAOxMkNq0qz8bxjSUgaPsJ4X00wIgWna7REg/83PZ8I+VlnxIVFn0ANvLD4Aptulg1Gp2h5I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13895},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"2caa02d38f883966fd5f78948743dabdced9b689","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_13.0.0-canary.c79aa0cdd.0_1632490842686_0.741205993197358","host":"s3://npm-registry-packages"}},"13.0.0":{"name":"@material/density","version":"13.0.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@13.0.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5ae2fdec0418775014fed24e7ccdd5ba5d005d54","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-13.0.0.tgz","fileCount":9,"integrity":"sha512-ppJTzOsuhjQam5GvHaq/XZocZNUr+41XQ2sd5nONAmQ0wwzXgqG0FaxtF1EXqK3uZFadz+vAu6enagre9DXhTA==","signatures":[{"sig":"MEUCIFgMUOGdbv+ZOF0Io8m/CETrv5ybmCosArLZw48JlSXPAiEApPOcuyYCxwrsWZNDfX7q3KLBrwatP92wjEuWqMaKoEU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13376},"gitHead":"198431fcd8ff3028934d2cf3a5b292f8482a4570","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/density_13.0.0_1632512697700_0.9792780217561186","host":"s3://npm-registry-packages"}},"14.0.0-canary.198431fcd.0":{"name":"@material/density","version":"14.0.0-canary.198431fcd.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@14.0.0-canary.198431fcd.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7eaa2f67e0010dc89a8bbd4b0183bb3bb29dee78","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-14.0.0-canary.198431fcd.0.tgz","fileCount":10,"integrity":"sha512-hpm3VQrWFUjYmB4Xim1bNxFZhh/Xk+mZVaWPaGLeDKrzhBzxi7h46mxRyxTpmXwZifjaWigqFwgSGRyj24QkRg==","signatures":[{"sig":"MEUCIAFTZEbTu/PMgAEhtculfjfAK+kl1mrX6cNcOgP/qxN7AiEA9/VfFi0OO31afUovNEGsIYAFpgKR+B032QRsBSuL1pU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13895},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"34242e3354729334618dc12d6bc959e0a8f14dd4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_14.0.0-canary.198431fcd.0_1632512740258_0.39799682716270834","host":"s3://npm-registry-packages"}},"14.0.0-canary.9a02b6ef8.0":{"name":"@material/density","version":"14.0.0-canary.9a02b6ef8.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@14.0.0-canary.9a02b6ef8.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"340293c67a84b92746330c79341524ba64e00f1b","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-14.0.0-canary.9a02b6ef8.0.tgz","fileCount":10,"integrity":"sha512-0PCvoZGzyrj9i1OdMRVckf5BcNx0cTK3otl1EnateOgTgXxzOPozX+7A1fr/OqJrvU+SKgoZP1TLUwFR3jkT7A==","signatures":[{"sig":"MEYCIQCrREDSDCl0MAEENri3J+fhkF4cN1T4qDr61VryCr5POAIhAN7Ku16gjhUUZp3osnNBKjRHKREF2JK5bnMPDsYgbbVA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"13e91b1150d6339b15d71c44c8743eb9e2026eaf","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_14.0.0-canary.9a02b6ef8.0_1632575409716_0.3903198529401022","host":"s3://npm-registry-packages"}},"14.0.0-canary.758ce31d9.0":{"name":"@material/density","version":"14.0.0-canary.758ce31d9.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@14.0.0-canary.758ce31d9.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e682b6c8c1cbf027650f73b1a2b82a52d927808c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-14.0.0-canary.758ce31d9.0.tgz","fileCount":10,"integrity":"sha512-CNB0trRWs5HjvGzp9Ol74Y9ipU7YVbvNLm47xayefmgGRB0dFHzZfeSzXc8aWliUWfOSzkmFuj3aNnzSgrjJUg==","signatures":[{"sig":"MEUCIDzxRHMZFSxJiVl7wFsuZyfaVebsYOzHDi/2MU8MXjaMAiEAgY9MqZPj+ceoxuUgi2yNyfjtamEs0hbjUahzwb2we1U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"09083795b738aece76a37f8a1dcc8daf958204b1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_14.0.0-canary.758ce31d9.0_1632763702512_0.2864739366551601","host":"s3://npm-registry-packages"}},"14.0.0-canary.86b50ef74.0":{"name":"@material/density","version":"14.0.0-canary.86b50ef74.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@14.0.0-canary.86b50ef74.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dda03c062e72b67e65937a5da5a46cc503ec08cf","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-14.0.0-canary.86b50ef74.0.tgz","fileCount":10,"integrity":"sha512-mJReftR8XTblXJiUZZWlG+iL/NIF1qf/Mr+94aWNeQq1Nn8wO+LFJ5gL3Oozf6HK936niYIveWp5cb8dI6Md7Q==","signatures":[{"sig":"MEYCIQD6GjvpRcks6cSVu8wzvgmjelI0fJ7jaxHhSJ6Jki9TGgIhAIGmTHa1580PbV4/Rx5bl2fEaFnfGuwkkzOUD6+GAPa2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"5941ece7c1e494e720865be940d098a5556de149","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_14.0.0-canary.86b50ef74.0_1632850924182_0.6881937564665033","host":"s3://npm-registry-packages"}},"14.0.0-canary.b2fe3528b.0":{"name":"@material/density","version":"14.0.0-canary.b2fe3528b.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@14.0.0-canary.b2fe3528b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"63aac476773f23eb66a4cb1404a7e1937ae6e251","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-14.0.0-canary.b2fe3528b.0.tgz","fileCount":10,"integrity":"sha512-h/QcXHllqzUsF7bHp45855sCHtVhqu8zGLbvOmZHaIcw7gaG+LhyldFMDjHobkxjmDfBkNrufZISH93PIUEfZQ==","signatures":[{"sig":"MEUCIFs1ON3t7c4ssa8so6nRqQqLSMARum3WFCzGc5NYGPRvAiEA7y+WDh5O0BB+GPAEoOZhZMPVum8BvOgdXpSdtTJRw7I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"cce11b1c181ea84c0bfdbef26112377518afa98b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_14.0.0-canary.b2fe3528b.0_1632956156558_0.751866971189775","host":"s3://npm-registry-packages"}},"14.0.0-canary.586e740dd.0":{"name":"@material/density","version":"14.0.0-canary.586e740dd.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@14.0.0-canary.586e740dd.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"25d202eac03c6571d9ee34fcf4f83f93f82f8944","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-14.0.0-canary.586e740dd.0.tgz","fileCount":10,"integrity":"sha512-Ib03XjMJmzkd7UMwU3Tfwid1KW8V1g60Ok93YONp87GJ2oXj5XZnLsptXbynr9WwUuCqtbACw2Zuk0G2zqa28A==","signatures":[{"sig":"MEUCIQDRzR4V9sMdtURO7B1/0l27fgmF2IZW0PRb2x2R1FZEWAIge3lN3I8PMD5W//kwOiU5gSPcQMT7Aw7DXuyJ/sgFyC0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"6c765889db11456de00c45d7bb289b6c7cf3ec27","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.18.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_14.0.0-canary.586e740dd.0_1633019420509_0.4848254524191966","host":"s3://npm-registry-packages"}},"14.0.0-canary.2ac92d766.0":{"name":"@material/density","version":"14.0.0-canary.2ac92d766.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@14.0.0-canary.2ac92d766.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9233e52057e1719ab77f970af724a76f49c00882","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-14.0.0-canary.2ac92d766.0.tgz","fileCount":10,"integrity":"sha512-0ktwvmODpE/lPAi5WtrmPJFLvrPbgwpVxER7iOD3zM/YpzVQwsTvpo+Qw7chEe2IZaDZW2vP5z2WvIo5dflADg==","signatures":[{"sig":"MEYCIQCjWM1jifmwnLUsZb58NzjtB1NDJQtsqlF28qoB3xdlwgIhAOhPG6DM1ll+URUyBpRoC8tF2vQXvhAUXpKFIBe4uB6l","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"3a797e3a01110aeaf8270a13c2cc32d0871a8bd2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.18.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_14.0.0-canary.2ac92d766.0_1633462052063_0.5646586633112485","host":"s3://npm-registry-packages"}},"14.0.0-canary.353ca7e9f.0":{"name":"@material/density","version":"14.0.0-canary.353ca7e9f.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@14.0.0-canary.353ca7e9f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c198623aafb82fcb3bbe92ae69967b57cebc4d57","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-14.0.0-canary.353ca7e9f.0.tgz","fileCount":10,"integrity":"sha512-sDDryeQXz8vQ5Uv6Q++tPJ6/Sw8TzY3sT1oLq4jRJHlshJKrqbmAycyRcTEx6vSW2AmBMse2RdPvFgcd5j8Ccg==","signatures":[{"sig":"MEUCIF4I5kJB8rZVjGnajboXj7HbAfAe2G9vUuruHvde0zhyAiEA5nPLeghbRu6YFXoOF298iLSiM71K70gduxVcBn+/M/o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"4f091efbfcb52d523712f9b99808d737b06a60af","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.18.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_14.0.0-canary.353ca7e9f.0_1633718761122_0.0015155688736543382","host":"s3://npm-registry-packages"}},"14.0.0-canary.c78ff0429.0":{"name":"@material/density","version":"14.0.0-canary.c78ff0429.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@14.0.0-canary.c78ff0429.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f8e9e1e6cdfef479fce71de7c1072356311966ba","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-14.0.0-canary.c78ff0429.0.tgz","fileCount":10,"integrity":"sha512-PkEtiDu8DP9D46Z2e9REDFi+LUOc7UftHindrsJRWWx/GtFzbVp1paX6E4hFeb/liDp5tJMw4Fd6EKUGxih8Cg==","signatures":[{"sig":"MEYCIQCfj+TvNKJIpZhB97KLCqYArNoG7M5iV9IvWXwxtmA04AIhAPN/YNY4ntT+CtGVB9yEH1XeL5lbdh9x8e780QDBDS38","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"55d918ee5ce9842b93075fa0d0ffd2b64b5f3ed3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.18.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_14.0.0-canary.c78ff0429.0_1633972868159_0.7294591057336772","host":"s3://npm-registry-packages"}},"14.0.0-canary.261f2db59.0":{"name":"@material/density","version":"14.0.0-canary.261f2db59.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@14.0.0-canary.261f2db59.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e34683ef5d68c661b0e2adaed1cd68668f35c18d","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-14.0.0-canary.261f2db59.0.tgz","fileCount":10,"integrity":"sha512-zOR5wISqPVr8KS/ERNC1jdRV9O832lzclyS9Ea20rDrWfuOiYsQ9bbIk12xWlxpgsn7r9fxQJyd1O2SURoHdRA==","signatures":[{"sig":"MEUCIQCx81lw5tVK2YpBYnMDkVvaBtS2u0gYfP9B4ZQeFLQxRQIgMZjn/eoGkS0rTeyJMih1Rv2VfwPhkJI6K09pMS4Homo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"22c1cb4091a589b9a53b844da4e8d98309c75acd","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.18.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_14.0.0-canary.261f2db59.0_1634749124433_0.08962755004339784","host":"s3://npm-registry-packages"}},"14.0.0-canary.9803d2dc1.0":{"name":"@material/density","version":"14.0.0-canary.9803d2dc1.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@14.0.0-canary.9803d2dc1.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"05cb319e68751af0f05eabecb478b1e703a7a180","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-14.0.0-canary.9803d2dc1.0.tgz","fileCount":10,"integrity":"sha512-roRgN/e6JDQ5qAYmzlghUmz7/JhIBkw3appxoioDW3cxPVPFui6KVOm54L8vaxD1ur4A+OWdc3wOd+RTKRsMNQ==","signatures":[{"sig":"MEQCIBCg2/dp3Bz7M1pL2rkc52kx2f/bGIpm64dly45qLjhPAiB1O61rZ4lueV7pBol9OsbVMHxgqMW0hkrADT354xOvhA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"4ef0574fd4b362b2609f5dc9bc002ef96f07fcc9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.18.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_14.0.0-canary.9803d2dc1.0_1634757656996_0.5483746370910385","host":"s3://npm-registry-packages"}},"14.0.0-canary.348665978.0":{"name":"@material/density","version":"14.0.0-canary.348665978.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@14.0.0-canary.348665978.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"67b51f842f037f0308afc85857ba7172d2b448a0","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-14.0.0-canary.348665978.0.tgz","fileCount":10,"integrity":"sha512-lDNi/3SviU4TPnYW0Fh5fqGLaISc8YZzrXX7RoSil8ceG2qImi+TOADWHiyl/Wt+0yhNsSaS8k8QiK6YltBlgw==","signatures":[{"sig":"MEQCIFyti4IFAMpZViWYqxBNlV3L2oQ4Ma1K5EQEWHbdcns3AiA1IcjSiTIcK9QQdpK1W0pvYm1X+06rJwOAAIe1BU7bpQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"bf16d95c07dcfc371fc864fe30028299a2d5d0d2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_14.0.0-canary.348665978.0_1634827781419_0.504872403925775","host":"s3://npm-registry-packages"}},"14.0.0-canary.b2b979a8a.0":{"name":"@material/density","version":"14.0.0-canary.b2b979a8a.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@14.0.0-canary.b2b979a8a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"896453a939f6b5c3c8580b98430b83b155478a60","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-14.0.0-canary.b2b979a8a.0.tgz","fileCount":10,"integrity":"sha512-7wjDUCZlrD4NgkqAlBi04JB+9OrIl6b+xaCEQ3LG8O7zDu+90vHc3l+06Psp3hNhvdqJZt25gqN/LxBReLLZiQ==","signatures":[{"sig":"MEQCIBn7teRwqS87rzfxxRYuWP1PTjGURoKgqO2B8QBepBANAiBzKEAE8P0nIjUQVmuQIyeMJJifn0Pqkx11LdHktbskkg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"08377359fe2dfa41ac960f776df2ba00e50e9819","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_14.0.0-canary.b2b979a8a.0_1635433874950_0.8273472221280309","host":"s3://npm-registry-packages"}},"14.0.0-canary.1af7c1c4a.0":{"name":"@material/density","version":"14.0.0-canary.1af7c1c4a.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@14.0.0-canary.1af7c1c4a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2155cc7358a0350acfa734957c73ec4b935d1baa","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-14.0.0-canary.1af7c1c4a.0.tgz","fileCount":10,"integrity":"sha512-OHtoQygsCW09FLPp2RcW+vqv2fqonJlbswQnfbLJ2lBEv68bcIviG5yWT5eKowhUHesH86kfqajdYJecMRSx0w==","signatures":[{"sig":"MEUCICgb5S3uRINFuIRN1zMvdaF2J4tshfuks42IjMLQSVtiAiEAk2wLFQRE2oj+8KyIE0xanDnAKaVQTbQYdXBDl/W/ulQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"3673ef3144cd47c5faba873a239454e11e3d72eb","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_14.0.0-canary.1af7c1c4a.0_1635443512523_0.6899212949330948","host":"s3://npm-registry-packages"}},"14.0.0-canary.4afd353cd.0":{"name":"@material/density","version":"14.0.0-canary.4afd353cd.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@14.0.0-canary.4afd353cd.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e357547c6a892f615d7dca2cbe7f3af3c6ba3bb3","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-14.0.0-canary.4afd353cd.0.tgz","fileCount":10,"integrity":"sha512-y/UuqQ5QGH1XJ4bke8HBUaqSJdwQnY86kqZQcAvBeqDAcmZBCT9Acxg7kjch1NwYentYsIajrSo1VRo/7hqdkw==","signatures":[{"sig":"MEYCIQCz5vTcwp8gh3at50ZhocTID/BWOyThOyu9HDZpZiQl5gIhAMRa93E4ZXIbFMxKWJh/rY8+Gv7QC3R0LcJFGPtyakQv","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"491d940b4e97c65f274b1b4d42b3842e9bd3a4f9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_14.0.0-canary.4afd353cd.0_1635519640067_0.8680874303009369","host":"s3://npm-registry-packages"}},"14.0.0-canary.a986df922.0":{"name":"@material/density","version":"14.0.0-canary.a986df922.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@14.0.0-canary.a986df922.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fed37e9e82d9e08a45688fe56b9d5ecb5a130038","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-14.0.0-canary.a986df922.0.tgz","fileCount":10,"integrity":"sha512-Daf5czoI6vUSlR/IfKLR3BLAxLmZMPuj7XKXC4TOfe4RBU+kfbbJ1jydxg3d5+NlmXjsdjEOI4UYi2s++DABQA==","signatures":[{"sig":"MEYCIQCpzrVNHAbiCCCnpe2PqJJS3wIYQLVDDt1lw7VDKRfdrgIhAKYOWliUNuun3FbnW6YechsLqylbS585SMM44hLL0Ykd","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"6fd5c666012fea37f8a5a820b4979cc66e59fe9f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_14.0.0-canary.a986df922.0_1635543249918_0.20020116017791212","host":"s3://npm-registry-packages"}},"14.0.0-canary.c3cdff07b.0":{"name":"@material/density","version":"14.0.0-canary.c3cdff07b.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@14.0.0-canary.c3cdff07b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dc5370910c084accecbfc5d84fa2ebc5c05f4d8c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-14.0.0-canary.c3cdff07b.0.tgz","fileCount":10,"integrity":"sha512-e8Cgtq5H8KQXPZBW5i/RYAnaRUT1l14KneX1DWFO9dwSWImRq9zuoeZDr8f0Q/TwEp9lanfZEz0A5ADWnpBSnw==","signatures":[{"sig":"MEUCIGZqZaAlFO3t8QyZH0LKMFfVDAyZhE0PotD1hRkYZtAaAiEAmTrvAtcI2Y9xOIOf3sioEtmrBjr/rvwAfqSkMVAL8cU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"078c19c333e3161ad6b51a3fdc993d883bdc19c8","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_14.0.0-canary.c3cdff07b.0_1636484700641_0.591849823253592","host":"s3://npm-registry-packages"}},"14.0.0-canary.468392606.0":{"name":"@material/density","version":"14.0.0-canary.468392606.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@14.0.0-canary.468392606.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7551d92c4695a891b13c8a92bcd24b30fdfd2c3d","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-14.0.0-canary.468392606.0.tgz","fileCount":10,"integrity":"sha512-lUABJTwzMnMddXf+E5GGqdbO/r84C5SoNjsx26513ZizBRlgIpq9rvAGl7KinWcGxou9EqrxRpD1rNJecgUxfw==","signatures":[{"sig":"MEYCIQDrnwqI7BITm97RggH9Z8eACUksak5ASwViLjKaPRbVJAIhAIaplMBqIxMw6uc/xWWxCWyU60qlyO8iqQciMb2QdUZa","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"ac451ce035a924184caaae0df5252896a7392e33","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_14.0.0-canary.468392606.0_1636659553504_0.33519502975573756","host":"s3://npm-registry-packages"}},"14.0.0-canary.828f9803b.0":{"name":"@material/density","version":"14.0.0-canary.828f9803b.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@14.0.0-canary.828f9803b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7071963a2483873b06953cced30be58373e2f093","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-14.0.0-canary.828f9803b.0.tgz","fileCount":10,"integrity":"sha512-lTIM9R83e2eCypw1IPHIvUGh3T1hB2/6FjmHSSEx63F6XuakGUj8ffFkn+gF0EIqChdUl8YpvhZvuYPpCBw3gQ==","signatures":[{"sig":"MEUCIGa9b111B8c41wdLj0I+hM1y33d597Bny1nx1Rq7p0blAiEAhnX+5Qhj0JRDSklEG5RwCLONAGtgrFzQMtFYDs3cdp8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"c64e9f941d45dc823621c068481be90a0eaa0f39","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_14.0.0-canary.828f9803b.0_1636660198116_0.0664120640464887","host":"s3://npm-registry-packages"}},"14.0.0-canary.8795cba87.0":{"name":"@material/density","version":"14.0.0-canary.8795cba87.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@14.0.0-canary.8795cba87.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"715307a32cdcdd204479714de354c81705695e3c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-14.0.0-canary.8795cba87.0.tgz","fileCount":10,"integrity":"sha512-WzvY4PBdaG0MZJy9GR2fRsNqfg3v302DDfuLszK2c3Q+41Ow2DoXjGm8aWBpcXc/x15yXt0JkiQOu34pOpdJOw==","signatures":[{"sig":"MEUCIQCNgTVMOXRbkchj7u5227doUrIOFVlQ/ufSN0jmSmly+AIgDuMDJAsZtQrz8nyfo7wFNtitDwi/3JEwuQdDmdsjIYs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"12c2e8ee797434819828bade998610af66a528ac","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_14.0.0-canary.8795cba87.0_1636660554195_0.26209917062498844","host":"s3://npm-registry-packages"}},"14.0.0-canary.cd7f8cace.0":{"name":"@material/density","version":"14.0.0-canary.cd7f8cace.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@14.0.0-canary.cd7f8cace.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d3bd58036525846d46c4f7d3f0f52cb8b593a04f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-14.0.0-canary.cd7f8cace.0.tgz","fileCount":10,"integrity":"sha512-hCQeS205IB1yJzoXstK133CSnoxc7KQo3PdGGFOBQYFWBhPoYG/NtkftVUfCmakHEDrAPhAbZxdTns6yj6LLNQ==","signatures":[{"sig":"MEUCIQC1MTM45CC7Df6JqAgjhtmWrZMuI6M7RFhyMqFfzrqomgIgKiau8N5ihxyLxJstk0JPtG5vAHQNxfkyxXlz5V26J+E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"6f1e9f39fe9a43e01e67b849cc2a96a5a31be67c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_14.0.0-canary.cd7f8cace.0_1636660651446_0.5975327535134711","host":"s3://npm-registry-packages"}},"14.0.0-canary.207230eb8.0":{"name":"@material/density","version":"14.0.0-canary.207230eb8.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@14.0.0-canary.207230eb8.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"69bac3bbd2265781742d0211ba2eac9d0fccd62f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-14.0.0-canary.207230eb8.0.tgz","fileCount":10,"integrity":"sha512-HBjsp7/cgHPUt+1ZFl7LjJPMHVCe3C5RdHJMTHajvmcOVCgtARxKSJQntS3xWSh6TntHTZQ5Hadq7NG8q/nrLA==","signatures":[{"sig":"MEUCIDzrqz7z0J6ZOLYIbxxNuPlCN5ZhloK7w6ruWNKG/SqiAiEAnVlKSNU9t/hJH91ZYGyJfIWPP9GglI64FUshvUTdT+s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"de1b12d24234ecfbfbf5a665f46c26b71016be2e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_14.0.0-canary.207230eb8.0_1636669405862_0.43414255875560803","host":"s3://npm-registry-packages"}},"14.0.0-canary.991fb99f7.0":{"name":"@material/density","version":"14.0.0-canary.991fb99f7.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@14.0.0-canary.991fb99f7.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"48e5079c24d1b3f495905d6ed9ff0a3c1e48610c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-14.0.0-canary.991fb99f7.0.tgz","fileCount":10,"integrity":"sha512-oudpss4mA4KtvaQ4JlmJXBb3KZGY+aJUJgr0NmrzyonrX7p5yHDytSzcjxthlNsTV2bP9vJy+sgXTkuioZmpUQ==","signatures":[{"sig":"MEUCIEfcI7f5u0zs5FkiCJZax5tGb8CaAsmy1zrzovhHO0A3AiEAsd74oL+LzOZrrG2budhcTA7wlzID+jczSmFb5YZBTIE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"d13dee60c11cfef5bdcac33da4fff6f13626c05b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_14.0.0-canary.991fb99f7.0_1636670131785_0.18647433975886907","host":"s3://npm-registry-packages"}},"14.0.0-canary.15db4f164.0":{"name":"@material/density","version":"14.0.0-canary.15db4f164.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@14.0.0-canary.15db4f164.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"773e9b43d57a58f0636aa015eb0b327f481a307c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-14.0.0-canary.15db4f164.0.tgz","fileCount":10,"integrity":"sha512-miCiQkTazHfn2XTL5ECPgemVHjXHpYbDih/H2/+zNXJSR6wUpc5qjO+ga524FjbLWN+Klw+QyYSVxqIzMoT8Gw==","signatures":[{"sig":"MEQCIGzq4gy1+EzEpfzvfB02EqrxrhyT49YCFljH704UVwmJAiBFAVwvJMrHmWB9FpePLNBQAlpXDnjNh5KDW9xo9aeOGw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"562e11bb445a0e51783e848adc61b690a7a1ba3a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_14.0.0-canary.15db4f164.0_1636738135620_0.016690522269991348","host":"s3://npm-registry-packages"}},"14.0.0-canary.8fcad5a3c.0":{"name":"@material/density","version":"14.0.0-canary.8fcad5a3c.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@14.0.0-canary.8fcad5a3c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d05dfd2565375775abdb931ec94350ef29e006f6","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-14.0.0-canary.8fcad5a3c.0.tgz","fileCount":10,"integrity":"sha512-5PZaIe5LbRQNCYrZfpqbbnEQhJ8C5WWyCK2VqWmCI7PanjcfLDy4PhYo5tE49Ykf5YYFlYh597Uf2K9RJsfTsA==","signatures":[{"sig":"MEUCIQCIbzMxrzsyqDEfHXgLcDY6bEkESWZvaPzemRsR28fr/wIgaFkO+jcEC3nRYEjTEaQ2AkOOGa1uMNp1HPQtekJZkv0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"14b654013dacdda833d34b73c1a94811202298d0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_14.0.0-canary.8fcad5a3c.0_1636744375911_0.98744787897562","host":"s3://npm-registry-packages"}},"14.0.0-canary.f81fb1d23.0":{"name":"@material/density","version":"14.0.0-canary.f81fb1d23.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@14.0.0-canary.f81fb1d23.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8575a433e41ff786acde632ca78b895714899a89","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-14.0.0-canary.f81fb1d23.0.tgz","fileCount":10,"integrity":"sha512-HOTpriYNe3pE138HRrURT2nej3ASQKCtOENE2gkyFFkgS5iMz7hQebaiPDAoUQUaq4m+f1WxMiFpcc6gNjHFZA==","signatures":[{"sig":"MEYCIQC+9UUATJnHarDq9e6WkFHgABte7mhgRmD3LjL9Pfz0QgIhAOfHusEtzK7zyWVsmERvCMLeorl6xyWLv99LHL1ICMQJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"60600a1b8cf651dddedd6881a54b20db7b75cdc6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_14.0.0-canary.f81fb1d23.0_1636756761975_0.2567625259646129","host":"s3://npm-registry-packages"}},"14.0.0-canary.783f6fd5a.0":{"name":"@material/density","version":"14.0.0-canary.783f6fd5a.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@14.0.0-canary.783f6fd5a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"31030b06dcb09eee77317c6cb0443aa848d61b58","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-14.0.0-canary.783f6fd5a.0.tgz","fileCount":10,"integrity":"sha512-gMVLidHFNCET1y5nHXNWVRoxNRqVJ8viVB+qC6H/6yDGpHwoBR0sR1/PGjjkpnfsXsRzjLVbVU2XWl+jaDydKg==","signatures":[{"sig":"MEUCIQDiOjLMBOmzmLAiegcFPxqJoqw7vgfl/IurAg3+WXeCbgIgXipudtHK0ANjCxIjGPJ3Qv5rH7/5O+99GcqrgvZ5hDE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhk0ZACRA9TVsSAnZWagAAmlMP/AzlkD2LmBu43eyY3yFG\nZFNvU0ZbSEXV4vFFp6USYCkL9C7C4ZXmu6LC29ynvqTQ6CRxXckgED7H7N/4\nlwoZ8bxhVag9ePvVb04sygpSu73zQnar/7Es6kCCMP2N9DyFJ0vgP0ogw2y+\nrKzKZ3fhFttEMgr0WGcYAdQqFJ77xfumo4zGjOGeFxIf4WEbAIw0ouAfXVGG\n6GuEFQ2EW0EM7ogg93D/9k7lMPp+UHFVvoPEdgZhAgR6Prr0J667hCbqJtFY\nNsmNfFQJCDu48wx9yc55BepcAWbzusFinnewoa53DcDmI0+BxAnM6qgYk4VL\ncBmogk5nGj1nv2+pu9f0B3/FDHgQREEJsOUQ1gtcq/S0GjhvMbESfNpz9G/R\nCwHIQ8ckl6pdGhCzXoSk5IlCbfoySByKX0TCG8Mr7qWJD7axt+6FNQTc9xAm\nLOuyPn4YwGoamfZrDTyq9YgyoRzlpunnK+Lb03Zoge73FCvDkP6r8sVzYXBH\nVASaCLDNwiSl3vF30A/3ts4Z3gR4BmpP4S60C25NcTJ4QRDfITXp0VRZSN0b\nxiUrNVDWQZ5UX8Cfs5hoHyaaOtzPPV8LolX9xi3+X4nV0zgsGoCpxa1A7M6h\n9FFRw//2kgAhwwpacijh4ZQjX6J1HW6+Oi42vq2zDOf0hNWPEni4JJ/4I8bg\nC5El\r\n=h+Dj\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"29ba9297d5424f35d235c8ff87e393874c1b0a25","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_14.0.0-canary.783f6fd5a.0_1637041728182_0.21452362166686578","host":"s3://npm-registry-packages"}},"14.0.0-canary.d57ec74c7.0":{"name":"@material/density","version":"14.0.0-canary.d57ec74c7.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@14.0.0-canary.d57ec74c7.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"23f4ffb8a2a4a2dd10b8193776c2f5e56ab32daf","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-14.0.0-canary.d57ec74c7.0.tgz","fileCount":10,"integrity":"sha512-VRpE0fV2wxbwLPNkZdniN7xxhbtfVqBMyYdLHKAsrjGEST9R8H9Dk0T0igrWiiiHcZA4uEc+vnicBVYJUx1k0w==","signatures":[{"sig":"MEUCIA+ET+kD8sVEMzz/5m0VpFkcKs6/WslsOyXjtpNl4o30AiEA3nXuyZUlxhVRBa81v0P/mnp3iKiaZhv2JFZdkORnrQc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhk9kOCRA9TVsSAnZWagAAYvoP/25yjvPMgecbMStt14eY\nzUZ3dlu3s0U9rurUcb2FLsUpHgQXuB+Nqud8jg3It6XGNuySmaUssGMgX7YA\n3MYIOCljTz2cR5BLGdzzhQG3KvZ0ylQ8r98O310WUAZbhHqEFN6VdvcvME3v\nGLStTmCYTac5vV5oHZsVjRdNmzkPobFqrKPI4UKjeLVOV73JdW0f6Lwwobce\nEjlQ8bs56OslKS8rV81n7WkQz6B6wHw3N/NV6spcJb0lXIyqHOrYxq+qGvju\n+eu1VgQj1Wh6WYKQUkUgf29tQuDk2vayWxQ0aZ/PBxaPseeJZ7lACanS7r00\nhu2MTxU13AIk0GqYWsQNmeYUMOJywdsY8wI/l4dDv66iPTVQEcliWyYXYZGm\nud8o6vMMMVCD9BdYTdftLCoJCAolE81UH9+1ABYaRerHYnCVrXcgpZ1TaIZE\nE+Rl7/vrYuGeOTzEp+eRnIZQbRIz3Df0q5s1rnGaK5fiQE5vX0C9IO039mue\n0GhmQJUlNcUsN68lQTqGzi1KPbx5T2tTGuYt0mIdHjtrGmOsE7fsjsRsdvRB\ng2olI6kKVlniGkih/LU1US4lFo/taNS1QJCPe+j0TXxcN9EY9dxGpethBuef\nS3Co5R1CwU5jw+pttTG5vv2GAMt45lbh3WFCSXIuGNJaenxytL2+v8SLgmYl\nsbHz\r\n=2Ly8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"dbbd8db21de66e88b3e713faa99419e6b2f53c68","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_14.0.0-canary.d57ec74c7.0_1637079310479_0.5049274990166313","host":"s3://npm-registry-packages"}},"14.0.0-canary.554c71829.0":{"name":"@material/density","version":"14.0.0-canary.554c71829.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@14.0.0-canary.554c71829.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fb76dba18585547ddbde5cf5bc022707e6f698c1","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-14.0.0-canary.554c71829.0.tgz","fileCount":10,"integrity":"sha512-cPzQgNrswuT85ISD0UVk2qHLSrHN7H2yBVyjHdiDnBZeaAU0hmN9xEeiCrmuK7IWdy9SeZSZEgR8acXksta5aw==","signatures":[{"sig":"MEQCIBgR4Pay8mz/bsNPf/Q0oeImVUrxjeN1ZMM6aEUrMcAgAiBZJOna9eYFJcNmSJJrgSo8EQg9qEX2jTkT5XewvUAa1A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhk9m0CRA9TVsSAnZWagAAElkP/Av6/+4tPs0uGGUJF6lV\nbShiwud+0GfYytExx5Vu/1ixKuI5wVqaVg7jw+ML/k0SnJ0AinW0lqArIYoc\n+DgsBH6E4dD1Hvs5Th9d2fN+l+iz9hkfrGjGFgFynAlqH61K3wzIY7dyyaQI\nbBK4/2De4jfzWOUOOH8QD/veIYGs5I5eNxBr5PIOqt5+sueATNHHcl2yYpN6\nndS9iLF0nouUT/an1k4D51lQxNcRZLgQC5ZDJPGLNX17YXt64WASyuWQVo5J\nlTwMdiyetFTy3oMA8aiYf+gc9uVw5QAXp+nX8n3EiVy6onyqtm819Q2vjnfP\nL7c3lpD1FGsBVbNTqNzXX+pu0ReGhzABiAlZu4vZPm477ECQWEsibwa4D9x5\nORK2SFXDEjl3oi1sKjTGTl+Hy9ER4PWf6t9IMRMvHdZ0sNHtOtcyqlWj0w25\nRl7vNXsk1x7AvjtnsesmNfwLTkpTbPlpdDmShzVYEUC0ZFTvoJMmZC+t7G6+\nmF4+AvOPSUSiBo4DXPpf7lc0PmqhVcTSUQ4Ecrl1ufupc73Sv7W0a4IuJwP6\n/1iYg/3X8CBYDPmijFna4ylVErTHilS81YtU4HrYDf8+gCGMkLYZl4tUGkhL\nLWmYG8TaQCjYmkBAktN9eGXvq677JfmSIGzEqnxpMO4/q9Vwp5trsOYt1vdo\niU2q\r\n=n428\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"be0799ddf10fc34b46ab20d754f7ef73d9efbefa","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_14.0.0-canary.554c71829.0_1637079476185_0.9002924184978551","host":"s3://npm-registry-packages"}},"14.0.0-canary.3ef470efe.0":{"name":"@material/density","version":"14.0.0-canary.3ef470efe.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@14.0.0-canary.3ef470efe.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"627585c82640e00845bb26b4cc2ceb265a6c371d","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-14.0.0-canary.3ef470efe.0.tgz","fileCount":10,"integrity":"sha512-Vkubc5vUSYiyy6jqB/bZNCGLNDwq3S5tFnwXmdqnOO9+6UOODfn1IQpnJbJcl5Zrqh/NoeIUmTVtvb+Yi50UKw==","signatures":[{"sig":"MEYCIQDQloBZFlSSxVmwZR1Se4GMX2+W/IGpisfQ3t0I+PFvHAIhALyqlS2y2Y1wQ00A3+bxIDZmhmqLwjz4x1dh1Dr+rNqd","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhk9rhCRA9TVsSAnZWagAANbEP/RcrCh3mNf0ErBTwimhH\nPIZ31eLK8PZfc1xmAqGAIUC2s9Xu9EMG8wRfntJ/AUnfFRx5uYuMgPgVo15Y\nfI3qoDz/PW78Isc8ZVg8k+ECLCMmmoeasWzq4Cqwvlh/JUWzjhONFsDq3MNm\nvvJ36hfNWO6HNlafpa4ykqkGGwNnAvmpuJzusMZd/Vb686KuHygLs0MNdyP6\nnX98rNjVIIzxVe/gWDN4YH8ts75R/rKLv2XVkB2r/UZhteuEe1UzScc4QRlI\nEo5EpJ6dMWigt8hFUKz+AG46s5559uQl0t9RFbF+9mVbLyMBGgEx7xBVUlmx\n7OXiVynmgz4BtjfnUB1Atmp8bFtQD2ldWZRgiFm4XcCKFNI3tCpgB8aDvKNs\nHtOLm3zFcDczYQbhqxdLegSglnirD3BZePE28FS5aKngm0dC4L2G4WbS9VXE\nJKTxPKbck/01++lkrHFr/y1uG7OpwF/SGnXNZwjIu38toYp5RRS6yuRSuimp\nNg0VxG/Ie7c11Nun5YYGhfwduih6r5BPipWtnFxorpSPzaoHHjDEMkDWl3LH\nXfRA/0MRnJusLrnj8h0166BDGsTBZ0RZf3UNmXQNl5TGRcLht2Al3wRXN/yY\ny03+ijGqvUlaq3Hg26z84VP85Anf0HSoIVDnd5oNXWA6T6DUqZUGxZT1WnSX\n0fEF\r\n=k95M\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"49429a109e0c13bb4f9d8fce0142cc5f142a6afd","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_14.0.0-canary.3ef470efe.0_1637079777196_0.2400451325371038","host":"s3://npm-registry-packages"}},"14.0.0-canary.61a28b2b5.0":{"name":"@material/density","version":"14.0.0-canary.61a28b2b5.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@14.0.0-canary.61a28b2b5.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"84d8887e0759502f078436e488f948e265255384","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-14.0.0-canary.61a28b2b5.0.tgz","fileCount":10,"integrity":"sha512-gBrADOzEvQ7h/6rEJFYBNCk5nScbMQfWxA3Ou0rVm7O1VBbxERk9NqlYS04JtznyprN6Qb1/F44l1OLZn6+FAg==","signatures":[{"sig":"MEUCIQDeFwJqdLiE4obGUlUVPzJdZJdcvuS8NADks6YhHrV/EQIgIc0e2wju/zJc7ulV0+ysSypWu4fs3QnlfGghkSeHrZU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhlVC9CRA9TVsSAnZWagAAEmMP/RZaqGoVQIG+gkt6owpz\nLfqvH2DmMgLhSTq/q5lSadA5mG2XqJMIzdxdLsSRnLva7C/Q/ojWNHluKwjW\nCZkqSJ0Ccb26i7I5dx5oEPwK3rJ7M+/YILCWt5JWRvfOH/qMq3hgRkvCnf42\n+Tpb5+183K6MGM4sOrw893AvKB01oM25xhCLHkLURRSFYZ0xS8D/VLWVvFOg\nzzqIfJPVKNQ4sqOXqb7JHCh5MZa//GVKRifMqckmKZ841xgqCqOS2DkzKp67\nPyUvesQCwbCMi8c3vGsdrADINS9InTuTndEZE0fx1nlyENTCQnlljM5BPynh\nmJVugtrwQpMswqBEfyv/BPVj9OeG0XFN5sEpHDbrsrZ1/J4kC5qYPlzSoTP4\nnJdSHHTTzkFoQ08QjRQsgMa67sxNFV/2AIQ5FaL+cNutX+Kp272au9XcRcVw\nIOd6URE7sLat2+lGFYkAOgenjHhcadtFh7uJv8CBsaTyH2KlHDdNcMF+ExM8\nnxBTBzn3ow620a7GnHaiUIRP3jtlLIb7FOFO6bzmCYd4ByalbqCJ069q9GTt\nmb0lFY26PDOvIdItw/N5TAuvartvd9h4EFKE4oJ5TGD3UNncIYaMq5vSaKt5\nF05iLoxR8EuxshAbOmAFwyKbrZPpPWdDWGgfOo9mpO8eAEGE9baMcHePbAGN\nEiih\r\n=mfQJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"314b98aa8ec5a35ba8a45706765f4cd7496dd803","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_14.0.0-canary.61a28b2b5.0_1637175485605_0.3373420184192586","host":"s3://npm-registry-packages"}},"14.0.0-canary.fae6c652d.0":{"name":"@material/density","version":"14.0.0-canary.fae6c652d.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@14.0.0-canary.fae6c652d.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"54c43e406adf0be1df7f5eefe5bc7f9e5a315183","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-14.0.0-canary.fae6c652d.0.tgz","fileCount":10,"integrity":"sha512-cJaqeDP6d2mNRlMzUEctAhA6ZQ1fl09Y7BAsc++RgfL7Inr1pRr+YNNOZFsbayAmng15XDjMd1bxZiRSlT4TOg==","signatures":[{"sig":"MEUCIHc6GvPIvBYGSRvxToJlyxZnNWuTwWfIi8fQzorXByp7AiEApo2ozxmC/YUz8DmeQxRvrsnC2RHBq0sWv9Rzg6Ykl1w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhln4VCRA9TVsSAnZWagAA4gsP/RuQl7X3tqD9fYVHOGr9\nWqdpunhdUrsABecizsNZ80iRH6Tl5kWpupyph28+bSuKEAMOUN2VUqemPfTP\n0Cv4TNbetW6SsqHkVpXE0yfcFsUL9lrpDMMlzRRQoBctKtgt2Enriuq/wvJp\nFf28oZbcGlmSUpmYARxxEm4ZGTi602IY2lrYRNqo6azhgQX2x7tsTIIzc+DM\n98XJS4mXVHEr688McndpM89SPBPr6wQgr3dXQCopgbO8AzW/xoj+pOZeOLow\nDO1k6DRuPCejgWEoMQNIGVhx8oi0IPvb2o18IpuEIhIzcwxSfhn0m/njhihT\nXU0XvbbvxJFthn3sR+RCHliVI9yBSEMLDk8URwx6qfUbAErr7r78R4BuDcvH\nJyzQE1qePQv7yXgWHu82VFRGe3NfbK+Ladp4oQdxA6oepQG1bbM5ie0FYdRF\nbeTDcx/kVr073x+REH4LD5bB7DbTMPiacJ9G6LfHP0Za5DoCeF8dBgqTTb8d\n8dvYt2x+xX2IFe+EDV4hL+PS+/CvQhi7iwFE1GZN+pDjs0/ZihBuYZjVEDQc\nkQYJkD75DgyGsx6/rTTvlvFCIBmoRpDGF8j3A1dUUgGBRN/LaDmDLd7JsMMp\n1atqfZVYu+kbuAnQzW466kPqrStnALX+ztZr+VAMbjSeRKmAB3NBvM2WSAU1\ntvUy\r\n=geNy\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"d27c4bc9db002b9009b70cb7437b393ce59b9992","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_14.0.0-canary.fae6c652d.0_1637252629741_0.6512118103536777","host":"s3://npm-registry-packages"}},"14.0.0-canary.978a3b5bb.0":{"name":"@material/density","version":"14.0.0-canary.978a3b5bb.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@14.0.0-canary.978a3b5bb.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"03153e35b4d5211e3f098ec82f9722b5c7243ece","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-14.0.0-canary.978a3b5bb.0.tgz","fileCount":10,"integrity":"sha512-lTnl8tA6wZpONySuHAftSJjea6IJXRp+JtBeHhISl7d7KMSTrLguMNQ9u/rzOCfizuXuIkLcqouNmwWQYBdVFw==","signatures":[{"sig":"MEUCIHT4ezPjKYjRSRMoJ0gsEvWnFMyWqRbRRdw/lS6/LmbJAiEAkM2uJYenGFTEw5rSi/uw6GaQ/PdBbYex0x/TSVFdXRU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhl/0OCRA9TVsSAnZWagAAc2cQAI2+T+G0pFsStvPVPXeF\nEM2Ekn0a+MgTnGsshTbyGfvOrkbU2baMVrKRm528Vv+lhNDaFBEQ2v5T3QSJ\n1MDmt0LB7Vs6Mg/d/Mm3WS+dTfthqN8qKplQpD2TqcLsjHwl1WEDc4IIK1D0\nevL6hKrINMpYa7aQBF+qRyc8DhkEeHmOVgqltuKn0BpKnKFkDiOYttclWvUG\n05Z6PuTMTyFixLPzihmX/cCwQmb7aK+oVKvEI2rZBYOTSp2rrbsEQt0XypHa\nadUOGKG/VNHTB7qoyvSPM+V/8kgeWLPFP8/dS8PT1OSe1DTIvOf9R+HflKwu\nhrxomjotxj7ORzrCtd+Fqix2cDl/ZpamTIPlW0MWRtb114gE/GOrZM92Rv0G\nNHt1DZgQm3ayK0R1N8JbvIU6rV5/TrAUOs9JqiKj/lFCjhNtZQ61WzxD+7Om\nkBSEh8y0wp+b2/ZeMbsEowlCih2E4R3eLvB3z6ZVHBk6m+0GImdSTj+k60AY\nD7Ok6F231PXdxp913e05yDdZTcXStCAQ3K9GG/Vddf24ZxZKZCM0MpReD9nZ\nspfwySMqwvX590p4bAyjnU1bR2ETGABYrAURmmvJ92aV5fcWrIbM+HqAHHBP\npRVFcpJUeAAA2xhIUNoMUEXljx0HsedAFNthS2u5pPB7orMD0PHQnEaU5Ro8\n15gM\r\n=O0XX\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"0d21a3472967f5ff791662e03961fb034a9227d5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_14.0.0-canary.978a3b5bb.0_1637350670600_0.04446327895788582","host":"s3://npm-registry-packages"}},"14.0.0-canary.e6f43cf44.0":{"name":"@material/density","version":"14.0.0-canary.e6f43cf44.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@14.0.0-canary.e6f43cf44.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d301de907230d1dd9aab8b70ae1a587c049a765e","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-14.0.0-canary.e6f43cf44.0.tgz","fileCount":10,"integrity":"sha512-w8BhWSx5923k259g1JniHuPxpb54CYaQ3yoDds2fpZOH/431uXmIM9D1CUzidYOpu0jXZ5epXWFKRzCjauYpDw==","signatures":[{"sig":"MEYCIQCNOk2hAtxKVDfjyAWIr+3ABCQfybdNKMidmkjL0ynG3AIhAKZwhrOiNn08pjRXulTrHNTU3cW2UY/EEaZfvc0bPJBc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhm9SGCRA9TVsSAnZWagAAaqwP/RzCv2Gh3QH5PsYxoPte\nTSJUvLHXws6Qgkv7OBBVZE34Zy9MqdSL5HeAyaSF8lYniMxh7Lz6zI6PsPd7\nKhQ39fyaMOQylczJQoEJ2QeAhQ1tP08ghRtx/F1/4/q694KWaixL1GJC9drt\nNWfP4zgRVErAag6JJnB4N0dcdcJJJP7liBuKa1dobVgsGCgZF3gNdWMeIS3+\n6867LOo3lgzstoQWOHk7O8KUYwBuZtRvdbYWGtOoXXzUes1P6K2fgJKa0vgU\nSE29uj9GLtNVe9fbVBwZpHwQbHNgZmKu24R33sOywmjwlnzGQ0ExT5KtoOwA\n2EZnuOrgAx7YRM355pBNkKflip1JZewJnknztTna4x+CoC+r/o18hw4bpccT\nu0uCU8yMCmTaWLZU2QQUU/0ohJLn+B4TMMjQc0ZmgDv5v6xEbjC3AHPA9+r4\nlO4RZ7D9jKMoSJvC5J7FIzK8AF4TjWdJZSh+sYjOffQMIPqCCwXxgt60nfTk\nA8vlmRPJ2ga2WLHh1sXQBxcoyXOabIiImcPVlEpVsjIhAsmlj0gjxhADPIa7\njZOwX0FAZvvhpVX94Jc2sSt65X4YoBzBqUOGl8lEeAcpRZsrW/lOnCqQF6RA\nBBUAWyrVXAhZM5vA4TfnK4z3NCcLDnIFkuk3SvDe9dvDD9Fy4Vo994ZeW9i5\nbyzo\r\n=Tghu\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"36200e7acad50905888cd5fbe17075663a96ef91","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_14.0.0-canary.e6f43cf44.0_1637602438560_0.4920641207651597","host":"s3://npm-registry-packages"}},"14.0.0-canary.39cf14bc3.0":{"name":"@material/density","version":"14.0.0-canary.39cf14bc3.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@14.0.0-canary.39cf14bc3.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c03728878f7ee4b718cb2e613cf478f0c5f75eac","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-14.0.0-canary.39cf14bc3.0.tgz","fileCount":10,"integrity":"sha512-f6nzgFs3Jv3Tgh92S6njIr8o7sfW8SD1rSxT38wNGv8vUR0K4Y7OGQ5Q0CIGWxY/FiE+TB5F6lm25/0I+/D42w==","signatures":[{"sig":"MEQCIHbeDEaRbj/LJMZB9XbXSzLqk4X5sGFUebTO1bkgRwxTAiAkrI6H/zJj9dC5hX1fuGV9JarZDiMLlTscttpDYJYI2Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnCG0CRA9TVsSAnZWagAAB2cP/0tnTqPa5nzFC8rkdzSk\ntEN8dVmTRUOl1WO4Flrt9EjYEimH0XfE2F4pqRUX55quv7Ngz7vvf2+6XsFs\na4cKzeb1o+r2rIo6F2boPP5FY06cJTEUQQfonnRFQqMmRBPfwO1hZOnotaOJ\ncWI9QyDSW+p2bmL4wNTRLBrabWBUbMEs+XpqCe6K6+HZ9DEvXcMf2zmpG2Ax\nmsuS+bc5hU3Z9e9F8G0spK7EysuXCBSVkoUq1YW630REAJURNAHtlQztmHwE\nHtQm8ANQzP1Osc0r5gGV0BrueDaVb0Buz06PueKEf+gTKZ9w6dsVVNfJ5vNR\ny5une0r2QldZF/VPfwmH+k6L//2EIXCjWDRODGB2mrXhprqLkaG+1x3wp7I8\nje2Z5Tq4mI9spOUwrdIAGjj+N8cVW7suK3VN8YEtquyMqPBNNPTExul5Xsu6\nb6T1u9ny0HjDbIqEhSpboJPj8n8RA65XnY/FGTjLmcWvvfANv0+KHseDirTZ\nHDjYitermu+We/PO2pP/YiDeiCpZab7lWn3eqbNgG5JaiOcnsw8wRTliiL6D\nY/PPBHuNnwd6CgpgNfIkJTAuKv4jfpkpI1hLVkZbnk/DrcjfNsujic406cTT\nsVWUANaPtBdEC4OUFpl3x0Bdf/l+JZJ2MHGyGE4j2DoK75kNrE8lvme6f3ys\nVZmn\r\n=XgGk\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"7a4dadfef1095fc344517a394b0286ecb59751dc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_14.0.0-canary.39cf14bc3.0_1637622196536_0.3246304401975988","host":"s3://npm-registry-packages"}},"14.0.0-canary.93134d453.0":{"name":"@material/density","version":"14.0.0-canary.93134d453.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@14.0.0-canary.93134d453.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ed6a4de2f991f2b0bc9379e46644444d78890cfa","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-14.0.0-canary.93134d453.0.tgz","fileCount":10,"integrity":"sha512-pPfcD0I5+sFMRAosErdHj1dK/9C4zFcvYEfSU0yDGRNjiV1AfNb0dfQDmD7UazMl5LsEZBsJN+dudJzQh/iUGw==","signatures":[{"sig":"MEQCIDZKSZ6dLIGj4xZvn9vgdDwiqztHvETOIYVntdngMdIBAiAbmFD7UU29cKIKvlS6B875s08t08iYCin5sssyHnPnuw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnQq7CRA9TVsSAnZWagAAN90P/3HjH/o8/iWeA0pfHKLq\n1qhEivGGUUukf2izKe0xLySjS6TQRSqDiBsdE9/1aZntiiFts9RzvYbCmN2m\n8gshTpC89VdPwopsaQl1bDeZHvj4K55kRdBSfIM6ZVYaf54BB6PvmIKkpqxY\nAW5LyYpx6Jei16JrrH3Nf51Y/A7uyOLeHV9qt4mrKfhJqM0ftHsDkwgMSKR/\ngH4WrYXR6F+ctXrx25N9RIk8ze7m8QgLTgZs37aDpQEIMrJ0e8jxkp/IiI7P\nzEc3GwQxK12lkEj3M/01ZpS3Ze0RjvmMCWfFmbEcoTre+6unkkpCTyERIhyx\nas7g6Z3fWE6NrMwiaR4S3QPVWxCOe7eZFoR0ZAMt60wq5sEYDHt+wkzGvRBK\n311kvqbgVoaJClVdNkce3o53ZQciORjV1lPNPhch7GfQmPEKG4dVwWNydD4r\nouqLj3DdBoXQZUXfQ6okXgepSlTDM1Vl7SvEkjqcOweeszwH6eerRskvhCoj\nwmhwvmG8u82NKtQQbcCUGyJDi9px7xIQypK0MTtyBODY/m1fTunymVt+I/eH\nsBO/ietvUjALCobJnzwfkmnDewRnKZ4qTdlZLkWto1SL+Crylghm0HOdCwXW\nmd4y65tfMkbCJP8djiz8ys0Iu48eu8iKx1PP1Rs9uJTFEHY+PuaanEbE7ymE\nS32S\r\n=27ZM\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"f37d4e46e027a3258621f6950e12796013661afc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_14.0.0-canary.93134d453.0_1637681851144_0.20948243192337235","host":"s3://npm-registry-packages"}},"14.0.0-canary.bbd11268f.0":{"name":"@material/density","version":"14.0.0-canary.bbd11268f.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@14.0.0-canary.bbd11268f.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4234aaeed107ffc7f2a9dd5913db860b9da2837e","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-14.0.0-canary.bbd11268f.0.tgz","fileCount":10,"integrity":"sha512-OFRhLsnKvQyTxFwk2G4S+2ftBXv5By6kofqIOEKZ4A2JlU7r2tjSMq2FfgAm1RYoJny7gr4PGRQp7RMFOEL9lw==","signatures":[{"sig":"MEUCIC/2ZOR8MYioXdBW7EZPUtDnG9LNZlGNqXHS/jFZNJg2AiEAjbKPHphzOpuq32npkubTJm79wIPj6PwmEiGg8zKw0/g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnWumCRA9TVsSAnZWagAADXcP/jlqU0q/6pLRwWaMA4xq\nBMHdglR7IAY1Pkikf1Jy+o3FuJXOqiiJCWk1D8vcNNJSInG4vgxV2rwJChxv\nU9C8AaYz6Vh+r3CpBDlSH0pQOBc8QIFx1Cpr14YiGPi/K0u4bAQbEb9jcsbo\ndzywcq4R7cKva07gszQ+NAh4qGUP2j75RpVL0XSobYxM8EfKpo1Wq6DLXdsG\nXaOv2Ia0KSQFYaXupVWvIuVIpfa/8CcfK9Y0jYKGQYfHCMvPADAhRJPBs4y1\nmkKMX+Zsw/0j9w3JOiW4qkQWu9c3jsBwGYRjqanyhAi/Yz/byp6LrjaC6HtP\npTtpnp2N/AJ8Vy1yqBx/F+KyoS54dtuUMYueN0emxBCbeX90M+dvfCnCkYOz\nE2gbJWdY7ZpPkbZPEMAVeRJcXnmsPMqfjvzHVWHUVoWtu5ZqBjdfa+cEAKJw\nsSOcsg/DxcOOB+qyApXFZpKYIKtX7rAUCl7K7hZfctC4QlbSaRXYhxFByLJ2\nLdGWx0RbhId+BuIlFMArJQ7IDzqsEQQDLW0Dif+M/mwigYHwz1Bcklh6mj7f\n0Qr0QokkYNwIhmCew/k17rcd+1TrcPXUda9DdG/u57YVQzU5DN+akPaTB1KV\n1snQbVur1o/0Eoz8b4XkmcJSAW+Q4CabsL+0sfJozvjfFoJC2jEGc+vQ6k70\nhDbi\r\n=zIjG\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"46484a77ecd0c6d7b548301f4e92325ffc4f8010","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_14.0.0-canary.bbd11268f.0_1637706662384_0.37312963980748814","host":"s3://npm-registry-packages"}},"14.0.0-canary.3db9c4d3d.0":{"name":"@material/density","version":"14.0.0-canary.3db9c4d3d.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@14.0.0-canary.3db9c4d3d.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8314a95ac10788d9bd5dea2e4ca24194bd52391e","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-14.0.0-canary.3db9c4d3d.0.tgz","fileCount":10,"integrity":"sha512-Tfmn4jVuiuzkEj7ndiMKE54/ZQcWW0lEJGH62sS8ApdTkzkzn8zDLA8IEyen7OyfzVCAwh7O5P4My9yk0V5Hfg==","signatures":[{"sig":"MEYCIQD+5kvcr3U4DRH0cuSFORwPTLQI/dDcO/NYq9zpFKEHugIhAMGaxVH58GMfLtYtfyCIjRcNgmdmvx7g9lT1cL9FF3Zw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnlvpCRA9TVsSAnZWagAAzBAP/Ans3Ow4akLZEssNKVxC\nagfKtMsr3P6zGXYvTVaco3jsgIBX9A9iabECDNpfl7fv4s1N5MCdB1yRfxF8\nSSzllx5yUBWxwwLRg7488dnmXiG3j0OHSmiQxIFnE2A7qoU0UMQNgfPz3ODD\nxsNsMIZPBkQEGFyt0scorv5XSH9XrmvRHXcsbZYQysTIgJF73IGqv3RMso/+\nUZyqtAVG09Sf7hmRfCSm4/is7cKXFMlCfhZ34G0KUF3kJ38RmYxqn6cho4sJ\nJx1oJcrZbBdnL1mSpVqWaOOwkQjgi/J47vlJ+Yg0r4W5Bwc2XBlLTXGWIb6A\nnkVTyl0cuDZgHZ/SOwy6PYRNJhkStDU55AS/w88euqrBSJceitBDetvblVgu\nWo0hylBZ+wmiK04EfxRa6C++iRM6Je8F41qqWS1kPMjDiz5iIl/+EMbmiWxW\nO4vIxmhaEj5BzKYa4t1SYae8uOzyUFjamBJ7O/dEx74X9tfeUhRwCRdCwRRf\n5iDOFyGY7L8ixtHQ/Mq4DN/ABPxkoLn3u7kIYodlOCr48hjubH4e2ypUqdmT\nH5DyU3oK3+vePXpnhZ57IOTJQX0c6PFX9h0FXdCpTn41fcoDZqKHBjEm2azJ\n1UvmUy7xXsjXxXdmnjfX3m22UTHLCWV/4yFzusVXWm5yYmiNnFs2i/YaSKJB\nacx2\r\n=84cC\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"61e9de8c9bd6ef83a5f0949cf53ce4a8b689f158","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_14.0.0-canary.3db9c4d3d.0_1637768168889_0.6504270547200754","host":"s3://npm-registry-packages"}},"14.0.0-canary.78305b6d5.0":{"name":"@material/density","version":"14.0.0-canary.78305b6d5.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@14.0.0-canary.78305b6d5.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"31759c078f05076915e2ec202dc412822fe22fcb","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-14.0.0-canary.78305b6d5.0.tgz","fileCount":10,"integrity":"sha512-XmiI2BZQ15x4YHl+92KdOh9gd3NsScqm5KsFlYLG63IKNzl5oecCju3mwA+ZLMree12pkuI2z2Vmh9IDQQCJWA==","signatures":[{"sig":"MEUCICYvPVSSKdjNPRZ2BATI3wLq5uAN2u5gVjW73BhYAl3YAiEAq6iBiZgdW+jR/z69oypi9z1lct5fhhm5MT7LEtjWP8U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnpdJCRA9TVsSAnZWagAAJqoP/1YHafWkYJKgXfNxWILi\nqi0HWw/tohDkZ3GW4CqetAYRhQooUH/n9eMmP8yzZw/uacvi5rjJBLMO6Ogx\nA6OdL08c2UlZVxp20X9rPZJnoE4UbsIAa3Hbo9JQPnvGhrBkD5q4qBqjB476\nBJ0y4100Ze0FSwiMwPqvO0S7d8QrQQiQT1HfUh6ji8lJkhLGWIpOq6HQwCiz\n8PgS9MheNzgp9G3nYO2u1H7Q1FsvtmTV+WLyj5jGIB9FzvCvNVU1K4QNg5L9\njV8TgXtyUOfQJfOitAQnvTcuWp1nXmrCNcL5LdCcj8QigcjheGGvHQbIYnqd\nn3UjTlnQ+LpaftSiaZ0R+C53iCnwyjzkPo+YU2enynqBQEWfzCzqm+Lf33jF\nHwdq1CZqZ/B4sW/iMwPziXO+rvNTDbsSGoLzndyYsHT8mWzCyzsX/0TtktIT\nX9io+ZZWfUTC+0yLpwU104MYm9WrXmfcdYLvXG2g49LPetrBBjheqXJJH+vK\neasj+6uHdGWinJ+5Jn82n0stLDK22XkUFVglo3Ns5WsV66F5V/ibH8lpdIn+\n+QZbI2vQiSAbVrU+97bXwCtMYIkYY7Hg4slYGgq9HS33JyXCNWuyjJBid6KT\nIaGzMgOy2pUuuHLNi1SyfWW/5O1H6tsWhkVLLMqaXj73K1E/UUhNkE2HMAFP\nwkz/\r\n=qVL7\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"2885de69eab36903fec52b85e7001eb561624eff","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_14.0.0-canary.78305b6d5.0_1637783369422_0.5462733575481933","host":"s3://npm-registry-packages"}},"14.0.0-canary.43d08ba77.0":{"name":"@material/density","version":"14.0.0-canary.43d08ba77.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@14.0.0-canary.43d08ba77.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c7252322701657fbd72f80bf93ab8c78c659a977","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-14.0.0-canary.43d08ba77.0.tgz","fileCount":10,"integrity":"sha512-G5kH6NNjVqVLuJDKEdlHvYhID7CFv1nR1o+OGVgpeQsIme9StzyNEispqWZ2XIap51Xfe2unHRFnP1zg925Xow==","signatures":[{"sig":"MEUCIQCvjeR9TRnLbO/e0NZpimMhuUb5G0vBHPb10CJrd2bKvwIgIXKjOW7Wr+6Y/l2uLysnnqiKCrK79Rvrm+3imVTO1aA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhpqu+CRA9TVsSAnZWagAAJs8QAIhJ162AkKnBkm/iv/9y\ni8sYmBEJXmVhJZWaC2JKlcFu7KRsGSk68Lug54B+SR77yN3AIQdZEPbnufy6\nKKpU9U2HuuF3dUWT9Df+Ax2FyPhyUY34ruQ+s0uY34UrpqZeFWZ2ofla7OsF\nJmDaRS8XTFu67TgPt5I/hSh9OoThcjlk7LpnMgot33S0L+i+z7BoGvGzVRKl\nT7dMjj34RYHEuqTfOMc+GM5vqHu+30J3aQCQZ5pFzpgDcrI6TLo45jtG0Fuu\nlEhQE04Z3zW5QXqe5Fb/JHwoAyympfH3G+qFAmf96EtOcApmQAceYNMkMT9A\n6N4yrLjnDq3/amax1zN/j8VXTDIXY4zlGLLjuX/MWctNja7PVaJH/zPMvqbs\np/LjGvUhoLPDbCigdYO0jhNVLX+6wjIiBzL3RqsMG/emMARKB7UrwOK5+uGZ\nLzMEHnY+OCdNy2X9TN4iN3Yb50JjiXD7XfzKGYR1LyZusevnusQrTqo6azAk\nSGP5IW5AorlCcBFSyoTUltmb0F3N9Lyo2b4LKddSpo/1YdX8d5J9dA7YRkuY\nttctENni7amWSgJD4xbunLA+iVnLIXuRgeBjrXPF1cYsCQ0HpuJmP0m9uwnb\nyz7f5TpqK410zdyeRYfPkwq5YnmyUZuHLGxVoOZ8TG2RqtEWbRiYab+GOiBJ\nNmnv\r\n=U58E\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"d1929fe60ad2c7ba249562f1c1702898df8f04d2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_14.0.0-canary.43d08ba77.0_1638312894109_0.9568089019884405","host":"s3://npm-registry-packages"}},"14.0.0-canary.17a072535.0":{"name":"@material/density","version":"14.0.0-canary.17a072535.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@14.0.0-canary.17a072535.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"baa16b53c5c07c3b897510cebc479555044791ee","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-14.0.0-canary.17a072535.0.tgz","fileCount":10,"integrity":"sha512-R5zVn6Je3OJG1eDztTeiArEr+StBeAZjxk08ND24zHjHUzuntT9Cyd1b6peXsS+U/8Rf2ARga4ftiftl+uG5VQ==","signatures":[{"sig":"MEQCIFDnHvSSt/g7ekE3+iZQ6Pn+YY2r15rad+oDbDl42U9lAiAycEaou+8ugLwLpZG8b3PAiBYwBlRMG4z/LsDPm4WTjA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhqQqUCRA9TVsSAnZWagAAUxgP/ivL57XbmOd6EoLqPhnV\nA4L8ILhURE8vF0p3rLKb7eBfOGOVNkS7kUFmdMBY1tl6pV+yN/OcSfB6oWla\n8ujE0vWGbSd7qafJx/B9Olc5hOArxQXwXdnFtMQEWbfYKj9bsM5TodkQYIqS\nSxJSgF0I0TNea730uwjZhhPsfzHTyxiNiv2iMeb7W4m11mL+4G05cO82XQ7k\nbDG4MifqXILfy5R4VnvAwmgTm9Ozl3sVW+Sdi42FnYgFPj1ItXwmeLgfihG0\n9IIaP3UwyIafE4Bt19pXg539VGro3P60rJdCyLiVtu7xKjsrnm+qjarFFvCL\nDJWjsu0/UBt6bRfvXNTwHyWMn9QsAFD+YJYYrplOtlis7f7V2bDDp/Kr60Rx\ntA6Q3UBMzGGkXVC3/WUHCR1uPV9S6RMNqAmnJsO9bZ+p6sWZaVXFVwXwcNg7\nGxPEcEfPGJ34ZLbEkCzokPed5HRp6wiBHBiMYaYTuxWAa/4TRY2kfQUnejhr\nMwoxRH9NDBrK0Pyy3ySygAeiTDa6u3S0vhScSvDw0JjZvcd4JSgL47DxbtgM\nmyHF5dnehBqEaeS6/oBomqbsySgBhysmmnFoh5eIPF6LakU7ikkVOI9wYJH8\nWIZcK6TmX4si5jp07IXv3g3nLmkJZS13TSj+AYPAKtA4VoCjceh+z/9nAvho\nKW1V\r\n=fVz4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"317cda93b55159038a12575fec5c35e9ff5460a6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_14.0.0-canary.17a072535.0_1638468244203_0.3771555181895361","host":"s3://npm-registry-packages"}},"14.0.0-canary.5d809696c.0":{"name":"@material/density","version":"14.0.0-canary.5d809696c.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@14.0.0-canary.5d809696c.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f6a7dcbac1208dbe2c65cd3129d0c95de2ef63c6","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-14.0.0-canary.5d809696c.0.tgz","fileCount":10,"integrity":"sha512-4uORczwgjJccV0ouHd01R3CgyHLXYhn9HdzY2n0AumCRWUAe+KfcKyrzPaw663O+TJQv65490eakkGOB0HsnjQ==","signatures":[{"sig":"MEUCIQDrD68jn27FL3EFFC0A6mSK0IZJHin3x8AGWFR9U1b7TwIgUgbauNZNK1+jgrNyoqNloXIuVx6p5oKDMyG6ReoFoa4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhsO6rCRA9TVsSAnZWagAAqQUP/AiQNbk9IUDO9IsGzqqc\nbJiHTjewo695Yq40PQirmdtWlSscg03hvb0+U+IwH4IeYawMNh8Oa1NdlO3t\ncPwXKepzF/p9yNajBjzuPwYYBQwUA4QQCl7fdzwROtL2k1uvPuxmTqINMEjh\n75NmMUw2s2YltzlwA2cj/2rOafmCDs/adBwQkPGzkfvwwxCICqbdhMLKrB8z\nMdImTGCJEXZHs5zTvmC55m+zwxxGrUDI88RGDWIGdqi6EYaC4fkqwEW7JvAu\nUizzsE237QtiOn0EGXS2pR8A7a8+SuFAb6q/k3Uel8nIBtXxPNIonkYXTzdm\n1QdqyWdS7hh1m3wJMplbNLjENHJBhukjgGYeCFoMT5FzzYJwaxkGFFOGcLQo\nC6ijhTHltI0WEqk9xSIGgy9723AEcYk0Dr8I7Rb2zSa4FmVz9K+ZK8uU0X8i\ng+dqM6s2lDm82U4c9KZTwm42STAhTX8CwvtDj66GpJ7gR4S3mwjLKVq/kaPz\nHeTAPEX+819hIorH5pBClyNGPIiNuvCDoT+3//igN9qQGRHmdxjRJU3s8u99\nqLOmQ7cWChElozsZexARuu2rLDrgO/zbi+hyP1C3CT7f/WDNEVB8JW3Z1eTS\n+eq4xe8V+hWSJ/bkvCnI1aW1odWEcYX39f4UsiUprAUrwd94VXDMh7Xs3q5q\najuY\r\n=5qNy\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"955aa3e4252f722f096ceef387b285a197760b82","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_14.0.0-canary.5d809696c.0_1638985387820_0.38642843801462523","host":"s3://npm-registry-packages"}},"14.0.0-canary.b6510c8c1.0":{"name":"@material/density","version":"14.0.0-canary.b6510c8c1.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@14.0.0-canary.b6510c8c1.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"50190e2fa4d50c85d5cd89201693ff94599b3c20","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-14.0.0-canary.b6510c8c1.0.tgz","fileCount":10,"integrity":"sha512-j9rNFfY3m6VNbWsVOE6aDR6yXFUZ4qmAsAzNAwQYky24rhCzuTpxtOmdx/QI9tZyyBWAGGFh+FQ/XE34iYODfw==","signatures":[{"sig":"MEUCIGTVVd5CcCHCqSYYMr0UZKKoejSY9EI/1gVs5a+cD13MAiEAssmqReGcjHRZ+cJw2LvwlUFg7lHabQRVJmJMsgckeiY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhsPPTCRA9TVsSAnZWagAAWnUP/0AGEtUefWjh4vYA8qVG\nkWjCBDwcEBQp7k/nAYRqFMtKpXL/pClZJZD3Lue62XGWB7swGoczndpfrTTj\n9kX+GGkgcbRXJCzDL3pGIFaTcX4amsmS5Vdb2a/6KxBa0PT18cK/96fg/C5e\n8byfMRN6aIwFwiFvaCsyDnE4Sm6JjmAZRzTaNsnFA75FSv1Lvg+iyF5dkfiq\ny3QiZ1WB9O+DXFedx6x8Mzaj9lpCf+/jJKgGc12zpJgfpFItNzaOhfhOXOTd\nO0+1NktvEIo+nBLofCOoOyQluQOYm8uZ83dX8qtiQvtXjwIFUcFVd9TXe/xR\nh8AEb5u9gJm7qLhpl2ZGQMapTekyKojfgQ4+xgCFmBOp9vp+29hZ7XY0U1E4\nJpeqz6QljYRx2dFPh1L6zKakLfPXIHwCaB6n7jtGBTfu9QN995RaC8uqaE/J\ndGLFs4FuendFW6W2WLpVhIocYamAsNeJDVyTtFFrA2R5t0ANNaijcmkZ/slL\nhefkjwApBn00SqR5QdHFiPLeOVeNWF0UVdTZYF+q2pb+LVcxQkMqtut6b6lX\nixeYp61hI1k5D0BBKzfZWKxiebeLHNt7UigjeuXTki540jMChdQQwGGGXc0e\niu/q54DiueAU5jQgcdPUmF3NzEuI6PFn2Yajf7uEXZyNeq8wmIz0L6gtyXwz\n/wps\r\n=hOGJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"7b9b6695d55be857206c67de94ea9741aa48bb38","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_14.0.0-canary.b6510c8c1.0_1638986706926_0.7052819308947589","host":"s3://npm-registry-packages"}},"14.0.0-canary.f460e23da.0":{"name":"@material/density","version":"14.0.0-canary.f460e23da.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@14.0.0-canary.f460e23da.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c80392242323512deb85e6906aa7ce1962026a95","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-14.0.0-canary.f460e23da.0.tgz","fileCount":10,"integrity":"sha512-dqnXnZQBq1Bgb7+jVA6HjYiLa7a7BaC7fbqXq3M2oY62VxZHW6YrifvdqeJo+3zF1qm44VJXJ5d/7kObbeb1/g==","signatures":[{"sig":"MEYCIQCrddN87WRep0B42Af5Ee1h/lrtfDDudGcXRli9Uj/BvQIhAK/zxObMGe3SY40RubmoO7ocabds8JcAfwLC96r6eCCb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhs3EXCRA9TVsSAnZWagAAiGkP/2+e8BWnOuxlQGt+B54Y\nwOBLqB1PdoFY2wCP3Rg8FVALjvzqtBy218+Ph+aA0QbSgjGiglk0iUdrZ7kt\n50mB6XwDyS9k3WlI/hLX6gpc966sdZEkhDsnarmMEc2bA8WaBkjcxVXHd4XX\nkcwJcde6fz9roFW8GWX5dTNyGBGycwxBywOAhrIgXuN+9fh/8DSvuuQ+vg3M\nY9rLWX93IlOax56aBDGaefncRvrlOKvP+sN6V20ngrUXfSv+/RbKrUJFIG1l\nZq0ZBRg62CYeSAMo5u7vGrYWNRGIQDFXn3+jDIZ6K/QlB8e+nsH3Woj0xpkD\ncJt6M9pl6AwWWlNZ5QZJPJz3ZIa+jwaGMOl0ba6E4goHlkiKCYhZNyt2Uxij\ndQ03SKbFVami7sE2r9tuQQ6E2Nni5LIlo2tco8/Qr+lcSJx0KnXzj2SIyZx3\np8T3b71qPofm8cAjYTKDyjyDHmUEqjeyTr9xTGKH4/3qV9jZyvQ+5bIxU77d\nJzDn86nA4yYovQsj+jopKvePnp2IpYMhZpHJvj/dKLOKAzJWKLsbm+T/71rm\nqBiycLiY/PjY+2wckS3SA1ixwViV/IAE2knwAdDVVaToQQO3eWJEHJl+RPcM\naO1U++gTrRuTW20R2n8LaGene5+LFPuJrn2feXAQ2yyvJLQ0VtcG2xYDsMc6\noH72\r\n=sxgF\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"6d994090cf732fc4f1fb93f91d64e265cada1b1c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_14.0.0-canary.f460e23da.0_1639149847363_0.04726563054042732","host":"s3://npm-registry-packages"}},"14.0.0-canary.7d8ea4624.0":{"name":"@material/density","version":"14.0.0-canary.7d8ea4624.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@14.0.0-canary.7d8ea4624.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"41fd6bd1a099355f7a0cc90cf71c23c145de36a2","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-14.0.0-canary.7d8ea4624.0.tgz","fileCount":10,"integrity":"sha512-OVFAU4CMj5pRTG/9zdJ//qFIwSx01yyh0pf+zOxVDPRgyGw2Ve2mFiQlEGNEUw7X8IfOQ95hiU+7vflSAgq6vw==","signatures":[{"sig":"MEQCIEZ8SahvQTQ7p8Y0HseYbhW1mnuwyvbitnDKY7JsUY75AiAqsTl5WehYwDEyYje02SnFRiHfNBstbMzFY8Ctw4e7sQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhs6pCCRA9TVsSAnZWagAACfMP/iieWrCu9Oj1aypl3UTg\nABmENZQfC4bTGDK6F+fvLs7ufImT7wWKzj1uwi9pVU1/v+bpaLtH+fj2As4Q\nIFi6KXyBkUqMxQIZV2k0uzamJaV1rrK3PWdRnnNkOenQGm4CK6H0xroTP6t0\nEYA6mhDLRFz3OvDQFx3vNwL8wiCjwxzlxOkcwCEkl+EXDyMux6l9ibfygxJw\nksX0hjI5cP6nxy8QcAfQnlanB7/5p5gOtnFZBMK38Cj9rHTJ/xDE7LMv6m91\nOCVa9sjs5a/a0SjcqsLUMdF7MRdJH07fTrUMRrNiNCgPQ5ZX2/HS0WIpA0jh\nMoeX+OmN49YFV3ADYFNzM+fABpm5FxOtA2rkh+DflRPBBfrDSfDVVEcLwx92\nY+STxQ+a9aRkCVVdfTGh0e8Jfo3Kl5IJLjGEdV7nxYNltYxNnGumqIP+teHY\ndyoGv5UtFkZLTchjQRhkQgpaTgDZNrSz7W6X9NZolMKB83E0Nk1hneOKcbcD\ncXauX6cFG4YiCdaSlBeiNjsPZD0XpkcThYufnbC3N0S1Eyp0h78PI66ADPi0\n65quVtVzm8P9qgVjrHh586kQkNOU8OLndy0xa5l/kRs165y6TA1PgG2Ol+jV\nFtljoowG/hLCWQzM+MQQ2j4tXLp51oXdTQp+MKnVnO+2Ch/KvgsZpi9E97+8\nHEhV\r\n=HKKI\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"c5733baaefa11aaca3bd6f32fb2ac29c20894738","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_14.0.0-canary.7d8ea4624.0_1639164482083_0.8482977807541352","host":"s3://npm-registry-packages"}},"14.0.0-canary.8fffcb5dd.0":{"name":"@material/density","version":"14.0.0-canary.8fffcb5dd.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@14.0.0-canary.8fffcb5dd.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1920371b1239f72f36d1d59e301b7a43e80330cb","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-14.0.0-canary.8fffcb5dd.0.tgz","fileCount":10,"integrity":"sha512-rAeWWzklM2Np/6MjupZIXmjwzSDqjLcY+yRO9N6k4TjRObm9bxHiz5hF5f1vYsYx/SB48EQiOoDmk70j0A1HPA==","signatures":[{"sig":"MEQCIHh1fXsuyoeGzbiY/nhadZVqwbItD9H4RQGS2s5j05ZLAiAH9KMifGac9drwP7rqPelIySLoOntvHhrr7TI3OrUbHA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhuFuWCRA9TVsSAnZWagAAFVoP/3FNT4QqkSrbQ+ZCgTRT\nZRAdL50VW5DXAlnoD46Dwi5YPQIKWCHgOZIczsEZzh9IURjTIyQG1a4loebr\nsWYFOobrAkj8BjR0H3zYRmri+ueRQe44Jn8QtqRJxOFcLMhaWO4BPg+5nMf1\n1Aoj76PlrN4H5sdT1A/73wMAKu8aMZwBNZFqcayT2Mr4BgMKPMg8uux1PuSX\nsLCWRCjpHAoWlEBeLWbFaQbFIntLM6ljcOMXhNYKOSQJHapewlJxF/GdmuV2\nK4AXBsdEVALaCLe7ja4ccXUp3UU67lIh1bNlLUPXptu7Ib/jrhB4T3rGpgdZ\n19J+W4pcllJPbS6hWz8jMiYOBs8tmrsu9xsn787OhrCwiqskHUjuN0tU21TP\nusLsHWi0XnYbwkmDHGnz83qdXukFp4iIbl2AwdRzho7bArlAohaVfrUZaWgP\nbvrhAKJI0AKdolTVuR1a8obGsK6yZ79xQTuVbtRtmzbJzswxNPmkUXKJKnIa\nRBCx16pe02ilbnPd91IsTDA35kQSTpsan7Qlhpq7uR1nAFkgiUUpgXyTRU4e\nW2KGiKdQ3uxOMYLiatCPgAsMDNlsSuv/1gx4/TynEzpFkcaR4Ju8mtygFN39\ns5U51cXlPNYIgzp3N08ySmTG3D5dCHQPig1OxZ2u9eu+e2uYSWO2AJqOKh/X\nx+bs\r\n=74rZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"ed22e4daefd7bb5e95668ab484a3a4a65793437f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_14.0.0-canary.8fffcb5dd.0_1639472022139_0.7107778995111422","host":"s3://npm-registry-packages"}},"14.0.0-canary.21e1cb9be.0":{"name":"@material/density","version":"14.0.0-canary.21e1cb9be.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@14.0.0-canary.21e1cb9be.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"123b256323a0e45d77c222ce7173e3dc91664ec1","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-14.0.0-canary.21e1cb9be.0.tgz","fileCount":10,"integrity":"sha512-m8MnPJ0A84PMObqLfTAizxkhYnyWZQilj9t/FdiFvltaFmdq1khXTFPPoyJVqzyhxqrDeMeHflnQ2YE8xfwokQ==","signatures":[{"sig":"MEUCIQCcp9b7CZIWtQpRUFiubiyftjGfLcOaAPZwxTTq2eBU/gIgXlHC2rGrSbcg/2Sg2ang3y9Co9jvj6WWp/Y8NYrpEy4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhuPK/CRA9TVsSAnZWagAApwcQAJOR1FGQvGXdDB+E+j9U\niDDBzILaD79J1X7EnL5pTS5bqV2b3UJqTKKELBiTVagQN0lxcmRWEXRUTw/V\nT6UQDy2GPFzM+p+YFVkA8sqhHJBU44IGZ6Mkh9iOaby0C7aBWdaOyO28kJU7\nX1sWGM+P5njKwoz4cg3viXpwDUwi8LJ/YGrqmcYzdGXDwjuc/Yi2Z5CfKWyY\nl8brhSvT7iXwiSAuOl9jKZ+PYQeuevPCirKpERaTdUXOrQwP1JaaEwJXcWMg\n8XEAnIS5b9kDHO7BpJu9OWwFY+8kDlNf3nuD1yCCYuKefg87UvQ+1AmWmfRa\nSfci0UdsIU1B8kFI3MXALfJ6/NfCY0nF7QKndUyTAZxUA4stijERaJJxS27o\nYWhyY7GAuAJVyio+/avvl63bd/iNKf3zZLKHBUoz/95OacAYVNszNtrTMMXz\nS69WzKZNPB4bjdJRS2Uq1blyp3A5tKmP5G8Z880yNrR97+qjI61lvZCnxdF4\n60q2ugTzPrCzguStAB5wAg4KVKSHRkSYLz7rpQoO4RnhDVxbLvxSKNqJMtzK\nWXx9a0Wgpa9q6q3jW3qJrdIOjHwb2CQbWBrmEyNsxQ0MuxZkKEhz/s80hf7M\nRKyCmWMZvk7Vsii37td2CGs/KsyEwV2gV8TugWuE9AcJaom9KUGVyfym+L2B\n9HF/\r\n=Bu97\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"091bafb203d13305d394af0cb6817b1bf05c64af","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_14.0.0-canary.21e1cb9be.0_1639510719737_0.2660421351869069","host":"s3://npm-registry-packages"}},"14.0.0-canary.ba78e8724.0":{"name":"@material/density","version":"14.0.0-canary.ba78e8724.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@14.0.0-canary.ba78e8724.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"db7f9b5678e3b4446a0e93e57af5d76aa3b051b7","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-14.0.0-canary.ba78e8724.0.tgz","fileCount":10,"integrity":"sha512-JIauoH6QvZ445X3U27NyppAVI+nwX2rYKrxQ+Ef/ahS5Mg2w5dgkcdnTXDeZHIoggXNEdlU7u6kyqYLgEppY5g==","signatures":[{"sig":"MEYCIQCHZK62UfdTqfNl5kMBww2t6jmE7ho6yHYD+LTZVpvhdAIhAJZLZuoyMJkcIankkC33fVLovz4LlCRY44YnUd4x2GKn","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhumgeCRA9TVsSAnZWagAAp1cP/1DQ/7ioHUPIirs5DNbJ\nAUl8JUn+68fyydiK00YQ1KUcHp9aCKMx3UBmBfiEq2xl7Yipdpp3ZXxt5/rw\n+SAAn7POzdt+cLDAZB1AUraHGcB5kPl4QWcsXWo6+NoFkvlMZuoUkReEIqAI\nZvLl13c7sQlyagCJueGJw4W3i0EDrzzvdXKuoaMAUj5Mj1wWAAaqGQY7aMVA\nMGl0sXDfZmXi/n3Hvl11QiaAhQspucq8re9yuGQE4xzZmHP3QZ+TjIvIxtPG\nI3wWTcogJWXsx8/5PxKmO+OVxs+pMYSHAK0vDeGnusqXuesj3TtZjWQ4V1mj\nEXwMCyH5FSx6F6DE89nR5olS9vQd6ZQo5JnkCf/tqjL1XNugfNLVAKYmcYCS\nunfd0PZy30bugfqSB+gvV8FpXlo02ag92XO9q0TnwxoL5jbh4mVdqWO55nyj\nSV2L2CRysb27P7GtYkU1QmfBfawIkjYTtDPoMoaxUFIUcIW47cZSiS91ff3j\n2FtLXYI614WlL/jBkfe6QwTMChsQXUNRpAfIklc1vB9vWHN4K+cQcgO+tDr5\njBW3LF3oqlDs/1uwgU09GvYMMs3JreLPXLE8okzfTAL398W6kxIbE2QVRebj\n9fz//iHjKDToW+ym+ZHCBwEf9OYrsimHmAph9QuoEjJ4QOcvVHw8gI/Sx16y\n5A/6\r\n=68rJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"396b66ccff73478ac662f95bc36087e71ae8d980","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_14.0.0-canary.ba78e8724.0_1639606302043_0.5410867615189794","host":"s3://npm-registry-packages"}},"14.0.0-canary.e3e073c00.0":{"name":"@material/density","version":"14.0.0-canary.e3e073c00.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@14.0.0-canary.e3e073c00.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"592e331fab64cfbe99e38662ad2a6dfac216717d","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-14.0.0-canary.e3e073c00.0.tgz","fileCount":10,"integrity":"sha512-J14VKhpFzbNgjRLeuIi9Xj4Yj+RoenqXhTEN0/qa+6+dty/muNWNykU0PI3UM4lCxC+KUxEgdI5wpaoH9hBaSw==","signatures":[{"sig":"MEUCIBeuBFa19YPDZGYDYef/Qm3TDZVJQfHRWMCrc3q8QCTiAiEAs4FlJ3jY28Vgf91Q8CO9M1dCRMXryqJmLYVVUFLz5Ys=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhwPDSCRA9TVsSAnZWagAAwrUP/jPzugivsuUnv9ZZ8DGd\nRHyARiS5DO7b0gseNAjUt8BwDPHNN/lojjRLn5RVtXD6HlRSoi/UzK+hrJLa\nBtZ6g22+S1Ae+gZnBqKWNvn+5RRbvsMkPJFKLO3WoI7GzSE0r3YtccBsppSn\nXFBezXp/8rao+qc12ZcFHac7+2eab2g2ncUhgBxd3ez+PAunAkS+csZdsU0N\n9pC62yUlMcWxGbo7RUUK61UNG0qsRwJDyTszUnV69eBiGm7zuZqgL4bvpmqG\nY9Y4iYeOsKZ5c/iMZUYM2GugmpDETdJo3aVGK5KBXg3kBqazGnzPd3CW8DMH\nQzRl92BDZSQ6KyNRapt95MS4gd+8YfVdCM6Zu5CDZfb8hCIeePdEZVLXCMRT\n5pXYXyPKeHIX6XvFxg0OPOabqp1lghnSzylsHI6VGWNkZcIHQsJUnJlhWhk/\nXeTeyYZZYcdaawRJcJw5UqLa9509KFDb30JcV75nTEbdVrl+csJkP48KIgrf\nrdqSjobwR/HUdO+GPPNxPmc2+w/zgl7gd6dow8eSAnqr+UWpHesYodZjEgFe\nPI2T1WzOzFNuVHr02vuPvpshMI1Z1L3QSYFno2gASwZPKQlxTpQotNsDf9Gp\ncRKS2N3rT+26WY8b326DMcpU1iMUmgKMRobOZ1mR6lW/zFXGGZMOvQaCFk5Z\nHCIR\r\n=bG5F\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"6ed0d4833cc10e9b5406989bcd66b072aaa259d3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_14.0.0-canary.e3e073c00.0_1640034513517_0.6834854690479402","host":"s3://npm-registry-packages"}},"14.0.0-canary.3366a71d7.0":{"name":"@material/density","version":"14.0.0-canary.3366a71d7.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@14.0.0-canary.3366a71d7.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9379c50c3cf25c03f0a4852132f324e92d35ddc4","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-14.0.0-canary.3366a71d7.0.tgz","fileCount":10,"integrity":"sha512-XMAcx//yLusSHEeZS8K0bGFXIV0+N5xvTPvZ6lnKLvQmWLPtbrHkNezqAktQhJXnK3NHIMFgxgcKb63gxw/b8Q==","signatures":[{"sig":"MEYCIQDeJn+5oTEOiaG4Km+0ky2umiFLt4WKa48sJGpnQR1c7QIhAOHDJO1cnOYemd/mF6uo8eU+MhRNYTP1jlrwX2c6kWH0","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhwxqMCRA9TVsSAnZWagAAuN0QAJLPFl4cTKIxKrUr5/Gn\n8LEym3nFwtrgYKAAuxEbfGM14KTKkXKqfxfBWt3ohR/7+0BkVcbN0qDmLJKL\n39RAunnZZTP7KotaASs4rA0MJUZLHVc3I3ykjbvCPRC0rvToSspStc2oum7e\n+9K7b0XqNIfcmZ0EQQ+7vZMlMwTPYtsKbbcGWYPC9VWYMOQwsR6Xy++nzNA3\nLXivYuThYeXoig5ffM9FF2f3Otj9JioaZYtBr3ElqOkJveFXRj9Kd6xniSmj\nPBqhRwcYQWubTlOyGv2PNLE4u5i9rLAaRObwa0QQFsbygVTTgk05WUe8efUk\ncstdW+iNgc+x2MKcB6WXmW3dAhMHRi+4vdslMyZSsSu6tliL/eCir+odSDQn\nA4ZZF4gB9EcxoxbHDT46bvxMCSIebx8uuv3lsVEamU2Yn1Xk3xoFXxLZaOL6\nVz6BotPMaMQasZEPV1nMI+4sphsaTh76uYrp2ggDSnF5xh5ZpDYK6tKD2yO9\n6zZr4mECKNVJ62h+VFrh6ntpPoVwQZdNOc+OdiLBtgNgMr8UfcGxfcpZH2Bw\nDuDq5EeZSuWUCh1+c94fINxWdDwJYQXz3SGSdvNfZI1iSX7jFXt5G3Qc1eCS\nQF19GzbUBow4HrWLubin51Np4N6NDRheAJpUfPxaLFuO+JqgdHDEymsOPgpk\nyE6O\r\n=qVYB\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"36f8040c2829cecee06f5c8f52e08e9cabc9004c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_14.0.0-canary.3366a71d7.0_1640176267924_0.15274572981056056","host":"s3://npm-registry-packages"}},"14.0.0-canary.c047f7c19.0":{"name":"@material/density","version":"14.0.0-canary.c047f7c19.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@14.0.0-canary.c047f7c19.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"38aa1c803133d54e636fc9c58062af0b533d696a","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-14.0.0-canary.c047f7c19.0.tgz","fileCount":10,"integrity":"sha512-hH9rHn8oLi2/A/PSfDwR2x6HvJEc3NWQahWaM8RVRllRB5QsJHasLqhdyySR0CEpe685fhvaQ4/IyxGs9Eun8g==","signatures":[{"sig":"MEQCIA37wXCjgMhvYZJ1X3t9AYbdbYKGh8bq8RK7uraojQmmAiBNodN2+2nuLpP9rD3uLmAbsBc9qxpgOIBWFHqlF4R/qg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh1crvCRA9TVsSAnZWagAAEM0P/ji3yK6tCPYKem3VgqH9\nCWqvxJgcKR2Dyek8RtMXuhEGjdDz4aG/jeeDsQZSSdfoxXH+lB98cgUA0Xxc\n0cOibBy25GrbTy8XX/asxEq+zXuWBfYEyI0LkqudBRDe2uTaGIvED1Mj/lbq\n6Vm/ssSKe/i7/za0EdtDVEd4ZW6gytvNsPVumlkidE3wjcwj56ED/jDqKYul\nox/W/86jMJ04xWqkeXq1k2Dfk1FsVfsvTYd4Q8CCXDdGhYIyckPJn/G26jqh\nR/c0r1MBXQr1I6QmyGabIXMrpcwBJ68f1hkm7TvHD1iDFZkN3GmvqMOzY2W1\n/h0ykqH0yTppp1RWC42ssrjByfJtdYLGKbIl61KQRQi9e/G9vueJQvaqPo1d\nOlqPJEp72JWnGw4dz2isaOPJsRIiVouDSL0178g0FjUmXxTYuSjZ6b6uw42Z\n5bkJAQ4U9tBeWdQujCUaAiLcBFBoOkkm5DBR0YSYawYWUNF0rgsSKD/enj5m\nvQnnklnnhowANC81ZL0EASURvX593cfOlDr68dYB0wMO19waqFrC9vUpEWUR\n9mdzwHN1WwYv5hBx2UVrKukeb65tUX4gB3GFwojEZaEIkuncSuJ6uI6woyE6\n4f2MZdlGgktN/mj2WLquB8HVHnzKsdQ45HlLV0Z+Lt2Sx3UcJg8hfxg1kvdx\nQpPs\r\n=3Zv0\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"f89c0e152ba1bb64d7b262b279d38cf5d93dd788","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_14.0.0-canary.c047f7c19.0_1641401071286_0.7887701875846731","host":"s3://npm-registry-packages"}},"14.0.0-canary.05db65ec0.0":{"name":"@material/density","version":"14.0.0-canary.05db65ec0.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@14.0.0-canary.05db65ec0.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9c1a9497a27ee48c0106aa51ddf476a1ea57e56f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-14.0.0-canary.05db65ec0.0.tgz","fileCount":10,"integrity":"sha512-Y62sab9UQXXD24+UK4z2gHnC2iB71qqidwkVMdyc/7QumKVk/EFFqkWMBVyoH0UihsDcXWR2uXoxkVjnQJN+CQ==","signatures":[{"sig":"MEYCIQDfAVrjmqIb0NZEFXfRrvx4uMvU3oHntK7+HPJICOv6CwIhAMK1gyWT8/clGJ3UN47kfpS+Bhgc8OOWIyA5VNLx6E6I","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh1yMaCRA9TVsSAnZWagAAoYoP/RgMPbM8Cq8+hGhpmvL7\notDXLx1+sqmMeCsFgyPvWLEyKJ9aNOBw740qIfeodzaRxc2jsmi8Fe3CEZ2J\nbOHFUK50douUYZ+f1JcMip2ku0dAHTn5MkhI/ftGYwpqZ0eBgRRBv1vJ8ilp\nNa6arUIWzV/EPSXMgulcx/mxefZypxsEkm5vM0kO47oQaWl9xbTdvnDPGZt1\nnZJDggtZSSDiIyROkcfZZlx5LrG/C/Lho3PfR8LspgCmDWcap59l5hucKFyc\ngzp/kPTN/xzP4BfCDqE19bK+dBfFuNWOurjywKQbWh3ZKnOLpDQavtc+O9JH\nkn5WPKZ3PBkVnCwPbTzwQQGU8VY47ddDq9yHsDlJPCCL62Qh5450CVwCzjvH\nvje8lxTPUMCIoGGrWj0KsR4PErkIojvX0jZFF2KstUlxC/QTEJN754Y2DsIe\ny0+G49f9sPvMZy2Clew+B8CTDnSOcVYIgbQbgFIKbGM8lcpieycKow/1lxUk\n1wYdq1tVD4wpRXVNSlEgC+lsDZGWz+VoC0Wz4kJmUS8dySxvN3oMKc7kwNyg\n54R/YKbAIu9t38M77eDwBUEHqF/PqoJBOHb6tb2fjDkftbdmWkpJVUEt3Irw\n/PgEWXWHRPI8mdkIwyNvWFpl2zbruMCot7k1390mhNjAQzlpKmboh6mwjgz0\n0/FM\r\n=tHGC\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"4ee3c4fadb795ccabc127e2a968744c5bed23d38","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_14.0.0-canary.05db65ec0.0_1641489178618_0.9584867359623557","host":"s3://npm-registry-packages"}},"14.0.0-canary.6ca8b8f85.0":{"name":"@material/density","version":"14.0.0-canary.6ca8b8f85.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@14.0.0-canary.6ca8b8f85.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ac2c297092ca3db8aa9aafc4e10d85e4eb899b11","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-14.0.0-canary.6ca8b8f85.0.tgz","fileCount":10,"integrity":"sha512-9eX6y8irfqKPyxmLCs8VGZiPVdrwzF1qwqasoJVPanWaNLObnecnHPHpwzRL4jsIkBkkLSpHmHLZkNuGqlCAnw==","signatures":[{"sig":"MEYCIQCdmc6QBGIJtXb/A4RjDRf02xqnLTwUn7tFyJZlXAqeQgIhAKvdwMuHznJv0wa0x1Ry99qpxJbPSJ/hh7aKy845ovkg","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh2GNnCRA9TVsSAnZWagAAmgwP/ieG+mja/yJxc5t0ej7z\nFmPvIKndUnpo+SSeifD3vXwxLyzShAFmnxTn1qQ4Yy6/vw6AUMZPm0nPvX54\nnyg/5cVedg9kfqOVeEJOv+Sw8fNAQDdKzVl+JuuKyG2QxrKpHF0kXM9leNIW\nq/XSW5DbTdQf68ztRPhuFGfB8gS0gE+lfqnxNnUp0ni7eQVtJrJvQ8Vr7YYH\n+T2ZUtqv/H3mrF9QwKFERVmbqGXgqbKxQ8qe0jG1YTxAoxDt29xxfqltTsUm\nfkJ5SVDDWolyiTWFUbWFSjax4PxE8M13eJsYiaPwrdswr7HZoPqU3LRma2uA\nZNXatBICbMGRdQQEnkW60nrKGUAWeo45377d475IN7SeN8fx0iWxr8KUVpNK\neDMIw0to/z4itCzE20C6jT8eDWIgceJjusijsdPlw4qvGKXF1VQG8/zHV7Ug\nN5uh1WQVe6wmRY0Re2R3hk48dKiIz2R/Pg5Ex8D46AZsmG5FAlMpsEPWN20i\nCGeYuKuL/Kt0jigJ9F0lTd44I595C2joPD944aK7NOiq0R2TTgx0ixF87Wq+\n/l8Rs/ROKnjexpfP69EvKwn36MzngCYaeSZlVqPpHdAb/uEgfyq9wIZs+RWK\nPI3p7f74+FJS1kGCvHgayqpkrR+W3WnNUlIiyYySwKSuTJV202mC/wXh3Njf\nJz6j\r\n=kM5z\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"b3237bcea052016fff824f201904a358e2cbeeaa","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_14.0.0-canary.6ca8b8f85.0_1641571175172_0.49687428224499164","host":"s3://npm-registry-packages"}},"14.0.0-canary.173ee7a7a.0":{"name":"@material/density","version":"14.0.0-canary.173ee7a7a.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@14.0.0-canary.173ee7a7a.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5cfbe7a52ea32e5f988c7fb52cc9dec85d7e26f8","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-14.0.0-canary.173ee7a7a.0.tgz","fileCount":10,"integrity":"sha512-zlv9kceUDx4jm/4afKg6P7j65N35TmMtlOfDE6FsI5RSa/pjpDXXZ5ZMw/bcPQXXUOrt9q/UCm9Wkh+ShoFPxA==","signatures":[{"sig":"MEUCICG0ufdUm7AYBNPnwp42cpESJZyDireoHa+B7PdTRR/FAiEA33Ff0EvkBLMrgbipFIvqRPaEBDKfwyeDwcuYszIyNnU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3GRoCRA9TVsSAnZWagAADQIP/jK1NcVZc4wzmQO3zKhC\n/6ZKjvbmk0ryqtcMvTQHmFRoZWl6J1ZTqtU+F/Xy1wFO/qHkgULW4IDvGD65\nXyBL0cxyaOmVA7RHyDd4I1+rGcdZuDAs8JNT38xSDhlXvWL7aSlymDyZM0sm\n68HxMRu7nm8i/2BqfHhZ87OH7246mlR0w8Qo4lHfeVlzh8tDDTg/XXtN6H61\njIs6GAHX1tA7taPjTaQACaJu13RcpmSYYTLRcQAagK5CgC49RY8gZd1yfkBU\nguj1S5QAeE8BUGmAMgRExjg8cDyZNLSiXBpYI+jsKOjGqjrfp+SUMzhZH1fC\niM0oy/vfFbMovfFOZiI3BOfvTfyDtE1m6FXQ0xWP/Dnvc5tcuS/8P37iT/3o\n+VoAYSJe1ZWGwZDYFHVfbtg0wWxRGGUVgr+miKsEjzh7zS2Ri8JFjZm+AJvo\nlVbl1JTqs6oWvjJMNJdYR5nhh4p2YIOH0skaZ1C6MSTnv+ucDUyz5cfjNq+B\n59KBqiob6Rz88sXsmYVJc8FkZRaoPc5JzCQ70pfFtW1SHY8ENNOFySLlG72a\nDOmRjoLtK4ltjo0jVuVmYkY7ekwiGMLypDsABeZ7ypIQYxQFEX8NqJYZ0+IJ\nPa9YOZu0rpQa5/yIrA6MJ+qdcuU3UAivwwudW4wzwVFyT0c/P73wfqe9ZxNZ\nYaHp\r\n=XJPr\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"f034f9d63d29784b9608c7c25ea586070efbd27a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_14.0.0-canary.173ee7a7a.0_1641833576770_0.9950699150672806","host":"s3://npm-registry-packages"}},"14.0.0-canary.b704e4dfc.0":{"name":"@material/density","version":"14.0.0-canary.b704e4dfc.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@14.0.0-canary.b704e4dfc.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"564a7d0e239c692a4260937833da23080e50fbe9","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-14.0.0-canary.b704e4dfc.0.tgz","fileCount":10,"integrity":"sha512-sf/vl4wg8+64V96FRatbqG26lB3FO3WXWq5sDhPpSJ/sDIZ8NfSTFaLCPkWbMRChWL5Vos3mwCiImU+s5/7xTA==","signatures":[{"sig":"MEUCIQCSpU5fA4lthYk/iIQxk0J0sAn0bsLe+GGRlCMHnk1UBQIgJ1vrNespR18VxV4d2dniXWwck0Sh7qSFLE/97K3t6V0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3HuMCRA9TVsSAnZWagAAe9IP/1UWYfJHx/NezIWV98xe\npfYhvGPnPJtBQsU5Ai2dEpbDfhJPXlpB/tQtw7hhHXiNbMgZ1CxgT+JgXvpy\nba8aTEjetxMCMxscXK04SMI1YFgtF6eJvig4sH56Alvxqa3SJf4JL2bViLXv\nwlA8Q2RMxC9O1cAFfLJ4T52IBJ3PuND/OeAzxfBK3J+Q7BoSVIjuMdwjXYyO\nlDw3S+138u63032d7exWYxUFgjkLbd0hXdCEvGLCWfj81qRomtCgTO6qd6Rf\nCm54h3XPxsYzrYdRbkr9BdB4FJfg77wRtgRVOBa6Krq/Pq0XqsWNKrdR23dR\nfUV3Z76XYFuGtQp/ZkBLtjJY8JIW3tsfqpDsMOx17aWTmeMhh/AkJuFDPu7M\n1hSGHWwI8hCzkgRkafQpdYsIrKNxv/pDspdqnmC95zN9z2A2F8+zoOHWjKGs\nrIH3eThFtAd4750whYlws36jd4so78U0MKFD7zqU8ARJa/MODyW3t4wljArN\nCIZ0e97W6dgzHRmVROVzhBjcyNaa2bQnvh6KjBdM2qmeAtL9QbeEK8DJi+Ep\nKA/C25O4Z7EkCvvBj8tjXpb0tjj2l4rFbwJBqLDKGwiyXrcMKTg++re9qd9c\nd0qCcWRdaDMeZybrsPwCxhsIMmkRYeK5ILKeplUNZbv+gj5GpSkuo7gXk7yT\nu6dC\r\n=gwrY\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"7aa8626c10b7e0fe9826c55e7f08c4ab0aa493bd","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_14.0.0-canary.b704e4dfc.0_1641839500406_0.09754483598823716","host":"s3://npm-registry-packages"}},"14.0.0-canary.c14e977ee.0":{"name":"@material/density","version":"14.0.0-canary.c14e977ee.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@14.0.0-canary.c14e977ee.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"81a0002d097e5073be20a54eeb1d15ab6c7a1b39","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-14.0.0-canary.c14e977ee.0.tgz","fileCount":10,"integrity":"sha512-OSWc6vv3fuDLEMB6IpFWhjZ2QmHM6uPNipqND9bcZaKo29biNt1aZUoR4duYrLNuwPuU1RwTmGpBuSeQVmCqRg==","signatures":[{"sig":"MEYCIQDMrlcYIBG3WO/cg/k5knAEBzpTpVQAbK2du92PtSA8swIhAPReNbRKjKGB3dheTF51trsIO4W4Oov2DfOI/S4eQxrr","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3aazCRA9TVsSAnZWagAAB5sQAInRT7X7gC2EJlr0NBVk\nNb0fdHS7gMQ/LO83pJMBgCOmVoGEf/K2yHLZRQODTDzZKqb7SMygNTPTBmlr\ndyXCBySPES3ssOdpbuLYDIniHr2NsNgmKAOQF8iB6uKt9vKk1M7v2nmif+4+\nSUeTP+NKe57WCIcFTgCvBleFyiW4zRHWEWFmcJVywqY+pw4D0q2HdE7wW63Q\nMeBnKJ1N//Q/ItLUzSgJObJDPXOFi/SnBMMuMaMztSKWkRK9NyJJYk0v6dDn\ngoCNVU9hFcHafKGMO8FDEWcOl5vma4e2/seoppJgXJcL3RgvHlYXIy7Tcjjr\n08er7EVWKZf2unu0vS5u/d2Sh0QJ+nbHi2bRuWzfxSrSYWaYXpLdk5VvKbZc\nWt2HxA3uXvJqMXHDZb07ZN2lR/babnjXR+pgHTKcnaBG3U+ciOFMSHROD/YA\ndNOCoaRklg6pkJPxi2fJVpXtOuv7t4ydzRLZwQEpkbZIYVvaZ9qqDu0OmfqC\nH19yIEM3Mh8eYg8hDbmJUQC4nSUSWunSoHEnh7QJbOkx5tkZs/VpV9ITnZkN\nY0ks0/hyUiP2EhsARqd7ROZ1EMvTLMxsPLh93YcLFv7HdMram7L0r7VerWUV\njQXzpFiyDBgZyiUPFpm9/3eqR2igc6ua5H992pKlHFCzNl1FCPDpGH9ORAHc\njogm\r\n=Hz9o\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"9f7e1b7371c604a5d4692bdbe25aecc578fb16f5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_14.0.0-canary.c14e977ee.0_1641916082871_0.26520338145755384","host":"s3://npm-registry-packages"}},"14.0.0-canary.b094eaa4e.0":{"name":"@material/density","version":"14.0.0-canary.b094eaa4e.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@14.0.0-canary.b094eaa4e.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2debf30a98658d5c1e2c05bb33556b52867baa6a","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-14.0.0-canary.b094eaa4e.0.tgz","fileCount":10,"integrity":"sha512-1RgpNwQYBOzrr7BQrmd53ug31A7xBXsL2UK9AAlZnWPehD+LGadNgGb6Ba9Id5lWc00oqZxldlNpjuuG20rMFw==","signatures":[{"sig":"MEYCIQCZ11NtDG7V7+bfY1EVM130VWA3Ocyh9w+UOcM40pL3SAIhAMGn0D61wBa/TJ4za6Voc2HJieR1yPFVhzyZTRWvVgA5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh4cPECRA9TVsSAnZWagAAiBsP/0tH+4A1I+PuXPb0ICHC\nabs9keJ0Q16/NLH320WGd4JS6krSYT6aIu3S3mFbJtZislrl9HAV5nKG1JI4\nHAZ4Pirew8phQmsi6ED/cfxcQj/GsYAq11VduoHT7XdAMpFRM/aGGRFOWZok\nRy47TFPnmIoUUkkBDHlnhbnDHAYyK198HWl4GTtuX4DoMYdQ72PeRrSgJIGR\naSX4/Er4mETXezELzPpU0CMaZ3fAvy5ZbghCQrx3q/KgF9SDNTf8biPvD2xG\n916As4PHvrnPqm+ecCMEawl71kvrMzra8C+ncOHc/3hc9TAW3zJELQNsOkFO\ncG0Qvm0ZihUJmiOeqlQXeP67KlfVg1/hl6xfGgBVHrzvxuf6UiAVnMM/4lOd\nhm+wUYcRrjmboWxbABaMs2DjPcf9XnN2++7m05IP8FEFmmkpqlPzomMLW6cX\ncn8VAsxz1uk6wIdKqkFpgBS+UxD0opJK7OF879zETx5ukHVNxUvH4M6QfPaW\no3PDsWTTxXHwz5E9tCCGiGKd9Szfzg3Qsqz8GLOYWZu/hJe/kLX2wDLK74aF\nUqfroBix4tA7aRjRrnpXLAq32g2kEraPnK33mzMQNBL+EpX3tg0JlwcyQ7yV\nZdUvdWsjk+1vfkmoSnyzBCUCwe+/KHhur0gKyVGn8c+q2H/5ibLjqbWE9ndp\nraVi\r\n=Ldts\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"6b11b48b933746de14be90d79974d10e1fd48289","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_14.0.0-canary.b094eaa4e.0_1642185667838_0.7784743424027094","host":"s3://npm-registry-packages"}},"14.0.0-canary.390220e42.0":{"name":"@material/density","version":"14.0.0-canary.390220e42.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@14.0.0-canary.390220e42.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"507d9ce3e9ffc4e96ca345df2dab2cbbf04c17eb","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-14.0.0-canary.390220e42.0.tgz","fileCount":10,"integrity":"sha512-ADBEGyV2gXsZ7K1dnP7YZ/9rbe4Q1SRmNamF9PAJU5N+eMsUgyw6dfpFkEBV2hJAIovMK35VuFyeDomm93RA1Q==","signatures":[{"sig":"MEYCIQDhVhFhso0RiFyDHPjOdDb2RyuKPCtLY+ORS5RpCuT0WwIhAI/FMdmXRn9nwksbA162+dlRjTTp8gqnVG7nHi3NJ3zM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh5Zz9CRA9TVsSAnZWagAAHsoQAI+hh795MnvXP4J5uokN\nm2E9rz/h60Uv5boW4l51LntF6uEP+ZAoEjzSIQn0dXd/ccATZw1BbYMZN9bt\nLApmz2Dg6FRjjJD7ey6zgGctRMz3gJ/jXW7kOtK5DrdikCOtqD0uEaTRQo0c\n5E4BdCLxIRVdXPTyPrU6Vur2nNvcuB+HC8PaEPAawOsAkQ4dvIzbdxgqzBZA\nEFRYGNT31g6cicHne/TPpekXDzkzB9uAZUXxetJrzD6n5GsiSCjhh2r/UodJ\n+xVf6LEHexFVGVMDFDb/RxOgQOt1XwKIQfeLcFHSTBo9EqG9gvqfbgdCmMsM\niTjwoClaQwDJNP3yfnm+RFti0+Cson5gFbRk+sqg+AZFgGYkQl26NMU+gQFY\nDpo5+tKtFEqcGfaQWKAK8hTGDOgS54ijlgnUM+Ryps6EyXajMEX14fryxOoK\nG4z97k7tAjlvtRNo1rZGVI/rjswQK17cy1fOLDg0RJMqUX/PSnez90Py776z\nNr7hRaXehVSqVlDofm2rw8nyFx4LLlOCUwolTVmXJtSsCVO29EHUMy3Cf1eK\n8M3xdCnFG5vRR4oLY4d7vlRa9y4YxD1KjpdtyAJe42PNvt5VZjaVl0i5c1v8\nlubscAVXkdZ8ludaB8VTafBs8RhEK4pJ9Ie3ivyLgEj+u22dkqMmboDJNXUg\n/PLf\r\n=HrA3\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"dd9f4e499bf257838f40df3957ee3c321500fe37","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_14.0.0-canary.390220e42.0_1642437885499_0.5070552925759666","host":"s3://npm-registry-packages"}},"14.0.0-canary.4b5391f8b.0":{"name":"@material/density","version":"14.0.0-canary.4b5391f8b.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@14.0.0-canary.4b5391f8b.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cb29e2a711d9c3b82827749658a6a1b0d2c0339b","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-14.0.0-canary.4b5391f8b.0.tgz","fileCount":10,"integrity":"sha512-XYFCrJHCNiISEEDt33JQ5d1fA6hWLF4t92/y3CITQV+Z0ZM6PRHJsIa8wfp9zoYHV2iKGJBfaToueUOXsdE4hQ==","signatures":[{"sig":"MEQCICaOkdurIi+ugqQn6ex9RGAUbW0u3+Z4DEvcpEXiIz89AiAdhCN9sjESwPK1EmuslA8HkCHb/uVksMmCytoiaUudhw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6KQFCRA9TVsSAnZWagAA7FcQAJYJhdXL/qbGQxrHKLmW\nY10KHymSH5+ZNLJD53xURCXXkhULlx5DptdmLq+cih3qSaCOx6DRfHlAQWhw\nznp3OpFTbFf9vb93xvMSUgS2Yab2IXT+QYctna5JcDjhHgTUTErZRVCNMPjS\nP4kizp99hIcOs9DsvrZ3+O8prkmKYlyGZPoJHYVB0v3aIR5gbzdvm70zt349\nJUm56GFGo2GuGhBai3uryIleATLn49Hi83Kjwig/FlNOtEqOffknxd2ie5xZ\nbZpRpwFRWuyPt5CaxWvSwDcybH9osdHbGTCAxmffZmOLB7OIBC6h+9YgSuCk\n3OIHyydvp9QUxdOUMJqGJBMtLIp/7Kp33d3GhyB1WDdJIJTHUBPjDjs1ss+j\n/z8hVNX68PzBUuflJbV2jfQxmRvbnorBO2ySL+ngArFtTHWJLiCytMDHwcky\n0FK885cP6lhNj9iFe894rgjzFfKhMVYd1VacBW5Ya1lnqHUJsbMV8bFph/WW\nABiLYkPJf4BA54mCGnoAXo+GMwvLBA+W3bxsB7qRFMmeF4wc2k9Mvr+A0NC+\nqSczjF85il6d6POSwI3jTvS2tABFUzpp7NR5Q1jkakgEH6efSQvXXN4UM1hp\nKTO8+ODBcR7iDf4hLhFJWmTzjWmu6bspQJS7fqO+pYDs2cnSwF9E8AkVPG2q\nP2hm\r\n=RN27\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"09410b4524a4005be30dd18c47d4214d6eeffca0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_14.0.0-canary.4b5391f8b.0_1642636293562_0.8863571046255339","host":"s3://npm-registry-packages"}},"14.0.0-canary.cef6bc623.0":{"name":"@material/density","version":"14.0.0-canary.cef6bc623.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@14.0.0-canary.cef6bc623.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5447b7742134ab597e442af0ec8bcdb63b5263d1","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-14.0.0-canary.cef6bc623.0.tgz","fileCount":10,"integrity":"sha512-kSs6q6+GeRPE0wdX0LNZp+Inmc/NUQbLX4oe0KZhvmrJFqbnhBE3UAPW51LsuAWb2oEDPKw69dcI0LcS6Sg7nA==","signatures":[{"sig":"MEUCIQCc+HdRHOHX7Rt7qFRmbrlCMH0CCJfJ0uwaPqPtG+qHjQIgRBb5ftyVGj5q1e54mg5O9kL8S10Z5H/v5NSsQWT1soY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6KnLCRA9TVsSAnZWagAAwnQP/2G8cEuXTS7BXpkMdePW\nCmHYkhidZJxQ2idTJ5jMrYIjJOcWoBN8xhp0ECK/QPBChVnkWgNSL4MyITgU\n4SwXUsvQx6lbr1coEIPlGO+G+vcis2T8cVrrYOzL4uC+UWuErGcqC2XqdW+b\nl9D4QxFN/4cBbfbJ20zP5TRfAO0ksS4A1yvOY0j7DHopf8dP+zeSf151Qgnn\n/GFbUAJuefv4PWIaOPk/bvP6eMMoVBHDoN7vQSMobsfaUmp+dEZ+lxou0W7q\ndKsibDDTz1OI9kzgOWTGL5H9RhwUMn+89YcsdnqZzn7JmfRwurCSLq7LFM9h\nzgNrrcT8Is6fTHBcM4FTNUlyfzuUknfee00WbJogYEczp6HTP4wCR7Go5xA8\nXH+qDeNwWXaU4OoFpUKFldtC8xFFVv7GgftnV69dg7a4VTxeC4f/nV1cyhkk\nw3PZYK8pA7IGyDG/SWKxML6a8q7Wbv/q5NEQymebxMAutduxxOJeMGvZV0De\nS+NMFstXruC20/nX9nYx2sLBumQWVS3e7DUZcDetLcLgVI3dO8XnkZA6kTEb\n8KTU7PgNAS3B7eqO2nllv2u+sblISUgGJtaCLBkVGCMM+t2ofWrU6aG0ZkLy\negjCH5fr7OamdJWBJnRT+HjuqjLIXla6nH4R5rC1WsjOdjX5r/GkmF0Edn/l\nXDOe\r\n=YMMY\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"6bfb214d1f6768cd968026313c7de32009b2da1c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_14.0.0-canary.cef6bc623.0_1642637770591_0.8508531106589441","host":"s3://npm-registry-packages"}},"14.0.0-canary.0379179c4.0":{"name":"@material/density","version":"14.0.0-canary.0379179c4.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@14.0.0-canary.0379179c4.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4bf9ba22e7093bac803b50b501432696ac8ec784","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-14.0.0-canary.0379179c4.0.tgz","fileCount":10,"integrity":"sha512-YBk7yg0FgE+4CbruZd7tS7mYijWLbWdamJhF1k2joGk7bu874ry0VIDZwaueXI70ojDEVrjRuInZfoSyWXd2sg==","signatures":[{"sig":"MEUCIFvRvuvk/8wWdceP1khl73gfqKfj7GkoSutlTbK1GDVSAiEAkibl5miULWiQRrcqRD61kbVTH5GKxWSm0nnghZO3ydI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6a+XCRA9TVsSAnZWagAAdZMP+QCLrGMnvAk0ukr8YVHz\ndA3jmhotOamp6mKcO76qDFqwY7FKuW5JLCYNr3OwGmhlvI7DZ6GycXa8NpvD\nYNO9vImOn49aTokvbT5fTcZVTo8oStRFfpdOLTQA0wPE5EcedidB6b4Ww45M\nMvCkv7FJFPdTaStCJDhst7tOE8A24IRMLHP1a5I3hYcnOQ6AM9w4z0u0wlwT\n5n62mhwt34DHW8Lm9jHo2jim5eM6hODFrel2I0ZIdZRq8l+TgF2teuD35Zu9\niy7h/Wgk77NZd3LfXpOPpMg8HMc05UeBBoZ6tolOPDQ8v19w3iMh4tia1KNb\n2569f9u4JOOnr7F9uEtq/b9QvI63/itM13dKDHOF4kLYJ51uKhOBWLFbos6R\nC40tjcGQ5fDYUrGztl/Ptof/i39BDd2cPFmY6o9ScWkBqvN8sK0G9QVa2l5j\nFvQFqvILG68OoRAWjY4qa5dWR6bFl/MVXC3ROceFzUogoKiDHdm9A2iErj+6\nCOLEz6gexezw/gX/asHqVs/Oa5G7CnYqBqjiN/7bVVlN/jb49K+m+Hsp+/Vn\nbLsIgV0wjlaGAyn1YwxwJGEHjKXwtTXPVgKSOem/y1Ga9PWPlMuVPRM5Fwge\nZnGIomONqaAfNnWSIFij77GIOdt1wudMKH8k3FLM90AmdgpzNAOuYV+pBqn9\nynKa\r\n=g/uZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"fd62b4e352900f807c8308b282906b51227baeac","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_14.0.0-canary.0379179c4.0_1642704791488_0.7917535145940562","host":"s3://npm-registry-packages"}},"14.0.0-canary.e62f3dabf.0":{"name":"@material/density","version":"14.0.0-canary.e62f3dabf.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@14.0.0-canary.e62f3dabf.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a4b634f737739fa935a0a32f8eff07e8526e99fd","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-14.0.0-canary.e62f3dabf.0.tgz","fileCount":10,"integrity":"sha512-1oRtVWHCqbDmn+XqYRltqY3SKdq34RlwciEBTHzyTol5vaF3ggoViswryZlJsSWpwakk/0Ij5BJNpbBSIRyFYw==","signatures":[{"sig":"MEUCIQCuE/JJPqkNoRbwtkhqnJraCFbBxkucRbpsvojYpFxUsgIgfxxv1IQ+wf2RiUM4wjz3GdzJqYH8iMNvN1aGHyYgoxk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6ztzCRA9TVsSAnZWagAAQqgP/3fEgDmc51CIgZztgTQv\nbUMYwmb/I7N9PcGKZhqq1U15KLI7ZsDYBktyxkh38VzzBuMQwotBlsc1M3s4\nF+g28EMxq/UGUvbK4xCGsVgKU/AxxhCv9mQElMrjvpyEmAmQoc90S2+n91kk\ny3J/ZxRf+OhjEVl8OqDKKC9Ef4kA/kzZQQ5qNk6ZtVa6q2EbKqizlL68KVpu\ndUs8JNjhWndMF8uzSHcYTA8MK1P+eDo0Xyg2lkizy7Vi9+ZNyIXCNb/Dn6IQ\nHNOx6EpoxI+L74e+jxPF/ayVeoiUaTF2aJ8tTDtyXTRqKaTmo0onSsz9xIn6\nTDoh8aTJcReOWKqdZqeWPSFlaPKuho0vBQTbXz7m1SOnrQ5VyiWIAlcsPGXo\n6IHAWYmsWdVL8J5gK8jV70WYfRp/Pc6H6mX3etNx20JgxdstNlZvgGJtawep\nkE3cnXhlWrsxSAzP6WDLVq2Dtk+ChplLFGv2XJ4jCn0VDQI/CtBdzjAsddHf\nOL+fDGLZ0lMWXlQr5DvI8Gri6Z9BMZ8xElTRnKpiSFTYXNbOOu188rWA8UQ5\nOCt9FOCFl3D4phR1Dw4H9XoRhb5UXLd8ltoZJp+d5NueN67qXnX19wZqJzyy\nLTEQCJ/MQp31rT7TEaV25RO3r1sZfIPJtqy9IwhGps5VadxFXc/WthRvspog\nGt2P\r\n=JN7e\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"7f7d12458af5eaac6bd913db605b5afc3753906d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_14.0.0-canary.e62f3dabf.0_1642806130859_0.5528961872832039","host":"s3://npm-registry-packages"}},"14.0.0-canary.3e20c1de8.0":{"name":"@material/density","version":"14.0.0-canary.3e20c1de8.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@14.0.0-canary.3e20c1de8.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0cd34e5507633c1eef8886a02e4062f734728382","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-14.0.0-canary.3e20c1de8.0.tgz","fileCount":10,"integrity":"sha512-d5+AzlD3wlEDp4T//HWWA5lAOKddjukJekjMFFh+HFm+DtdM477wizxyZ2hpQPWUxCljXf1YXBKjfSfW+rgarw==","signatures":[{"sig":"MEQCIDtpdByMiRVjwqNKj7cSa5c7t8nLA+KDlgYwSIrPSbqZAiAZe9NYt0+009INaWDjViUhOTW5ue2uj4heUVuHT5T4sQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh8BeNCRA9TVsSAnZWagAA63EQAJbvnlayzKIByufz6v4J\nPx131m/u61RJEI2FSFxUONSTwjbtkJdgLOdb9DzCLivovfG98XixdkhscGD3\nNMnxg68ech1/idddoAVcPC871mlyvVev6nVF2Rp1CsW64Jpdt7Nrh3tFwF8u\nx3l6TYTxaVZdHU9LbEcIDUONBlAWGk3SVVW0TdZDzyqmD00KzW15MFbFH30p\ncTu0gwkURRkr10WCHMGoeBMjek/ujqfb3hAP4cBFS9JnXX/00mQwNniKBX9N\nAocmYIIZyyFL491cfJvTdSETvrFon9Xk80KZoSJ2Oy9qStkEAchBo+c09TMP\nA/ZBHVITDSRjvRb6cmbstG6VtWYqO19S16Lw2dwF1bhrnGJahgxoLeTPdMmA\n2GQt49O+EK62jjvfLOEiTnkB5PPQEDatDQbkpgzNeY9XNgxnjsp1CWZCzesi\nX2WLpmb5xpoci8hs232AHMSfXTy8Bq3Qv7z+mHW/wlGuBSxMPrzV4aLz91xJ\nDehZqqk+MRFkGpQGYFYvL99Oc/VrcsYTMILpRJkTWETjJg1/AXk5FbW3x6rq\nJcMYODYFSnSUHrPqxITKo1FTDcVUQkXs8WYlJZoFiadbS1CChuJPEdA1Jse7\nQcy1QLdT8wftXWx4VGR/7qcG0zIqHL9kZEGg0/e4qw3qWeXoKFNiGAU2ln33\nljmi\r\n=MZPR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"29fe61f3aef5a85c7a462638b6c2b809a3be57c3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_14.0.0-canary.3e20c1de8.0_1643124621257_0.7596486733035368","host":"s3://npm-registry-packages"}},"14.0.0-canary.9f9d928b2.0":{"name":"@material/density","version":"14.0.0-canary.9f9d928b2.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@14.0.0-canary.9f9d928b2.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fb826ffe97106ddc826b86bac6cbb92b0678a794","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-14.0.0-canary.9f9d928b2.0.tgz","fileCount":10,"integrity":"sha512-oYIitDFO6e7KNwB2Ku7Hd4H16plgHoh9+KkoZJdGX5psnLuZzWAmjvSsa6ifU/xn/lNoOHQOGJMvZZ3cYizxhw==","signatures":[{"sig":"MEUCIQC5D6Yp4zddtDgRdBJPF1pH8O0Glkr1w3Zpxidov/8orQIgYK/BABMmFfjNi/MkUNH5wzm6si7cg2ba0YggfxBR4Ic=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh8uBsCRA9TVsSAnZWagAA/yAP/2svswM2LwvT6Ml6MplE\nrowiRlJIeBQ7fauJ2I7hSbNnpSzeu4JfZxm5B2lXpbef0lwgBHLXATXKAWQQ\nvoUEXG9cSlJk3JPNOOMNgghitVgirSoqXRIU4CnJmn9nmxCMUP/APhf8gknQ\nfAma4XrPoCiZOjTX8668CfzbBXqhrlk0fZMJA+g/lXI+BcHpwR7BGSSmvZpM\nal0mYhwf5kVv+7g3dFnhdOKPl+pynqVf9aTFuvjmFNUbC2TqlMUhe7YtMiCm\neCu7GZSYs8M8HFDUOjFYWS/6lvVaMTkuQTL4kAsl4fcPHE3F1oS7815OQE8+\n7Ph/m0+kcAYdB5kc9NvNEsNV1Ga2SPDv1gpSGAOhZjdGWmCaZE+PETeb4P7r\nWv7KtPJmg6RNM5cX4oFaBW4viqA/km6YsNeUArI1aVGXpSVuCooeG2eaTny0\nUT1sD4h9orLHi+DOPAN9aaMx370fkLmcRIYt7ACZkN0pizEPJ9NM+WwWV5ee\nsTikRn/WmxKpK3acWjE5x6qfcD2ebzrVAUmzI/cAW4fB3yMbkoxTC0h0ScF6\nI8ACjXX1R6N+6WpxxW1CArcICj8Phmh4M0+Cb8ETs53TfBumjmsNZjj4LqQ2\n37iemVPOCK4Fhg+gyXklBFT4HrKkZbYvqtGMjhfh0x8O5+QIe3xxjTLwW/q+\nOspt\r\n=i8di\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"2983c7f2f01e1912809d6004e47ff0c7c27de38b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_14.0.0-canary.9f9d928b2.0_1643307115928_0.8397083993948762","host":"s3://npm-registry-packages"}},"14.0.0-canary.a2bcb065c.0":{"name":"@material/density","version":"14.0.0-canary.a2bcb065c.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@14.0.0-canary.a2bcb065c.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d3ed2b5660779fd2c01a243752539eacda6ab05e","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-14.0.0-canary.a2bcb065c.0.tgz","fileCount":10,"integrity":"sha512-EyiZtkhraX7CIcnNQ2Zlm6uKvOXXXyEeU1NSoalGAHTaqGtX06qh5+vUIdCCC7HKfBiPP9EF5DwHlGujss4wag==","signatures":[{"sig":"MEUCIQDgOvOgmcvEeU8n5CeJ8jKeTsstKqHzucI7WbRn5CiXvAIgI4fe6ZsCaiZJxnwLvyItZ92LBU9twhJUm2qefyto8Vg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh9EWZCRA9TVsSAnZWagAA+goP/0szumP78tpCQJ+aMwzj\nGzZWDezQrvHUU/77FvlUFTIZ+o8EBMbZE73grMKOolOLmsFkLgkKEepDWf8O\nHVTxZkgAGO7WYKD8AD97s3IHoyeB7S12+ugMS2tY7vu+/QtX32QGyxWhwiyu\nkzB4uwlkYjCNpbufaVfgNCqAQ8NiYT0+nH+L+IKV3CNXt+IbvrldrwPI5Bc3\n0/kUo6bgB7mBlFnaGBU8jOVBIjQ9uoWW4/Rzw1AIC8frDxiXQyYhWP9o7dJX\nAuVBprxdKPLY+SUDrOK71M6c1oSra5SKU7NJ+s/ZBchua+m5Wt5ny+xlRBor\nRYgsu+Py9h+5VWURSq06uVnf4nGexJolLWEfmaSD2ST6zb807IQaD1qsjyYA\naySkKg0Ib7NJpDa9/bKUgdDoOcTXU1L2Whj/yUB/gcEBRLXx1pVp9Dt7tTER\n1lI8mTKx8PV8hJcYPp7xJG2pbRFtCbF81J3krY9rYPw72j4u7sKk8qKom5Ts\nanmR6vUHgDwhjVkl2wF3NHrv/tcq0LnqS2nKdpy4AKIj6GOJZxjrT+4MBZK5\nU2Pa8S3czJi0helfdZW8gP+8VOr4J8ONdF3CI6dG2EJjbiJsBVtdMkz68o9G\n1T4+f0u5Vqb7yXfM1FFVeNB3OwgvviACNCB1sbu6KI7FRbblgKwkwAC6cZjl\nFSEH\r\n=OV0v\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"7f175ca37545bf0bacc2b94f7a18a2a3fbd5eec5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_14.0.0-canary.a2bcb065c.0_1643398553026_0.029000699406460884","host":"s3://npm-registry-packages"}},"14.0.0-canary.4e66fb2e1.0":{"name":"@material/density","version":"14.0.0-canary.4e66fb2e1.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@14.0.0-canary.4e66fb2e1.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b7d5db1ea4c6b1671fc047bb383247d8ddbbf597","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-14.0.0-canary.4e66fb2e1.0.tgz","fileCount":10,"integrity":"sha512-jecUc/Z78pblom7YZA0qDYEbGXDhHHDJVfh4mFfiyzUtAL+b8Rc5XSVjVXJPIR5zZ7txWgpd9dJtDHAcPefxgA==","signatures":[{"sig":"MEUCIQDsIwgc+wkpnJ5YLoPykBSVTqEcnKITa/mgN+WJpsKrmwIgRijBWLaVMw6DiLyJ/0SKz0YEtacuVwvGVH3X/Q0arlA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh9EaZCRA9TVsSAnZWagAA/mMP/3s9C/6Oat0NEyXzZDYy\nlXsYVEnMFpeZGb2OyycYgFBUEd2gN1zX1VRD2pEsxSjUWcA4+6lwu5RTAWAB\nvP0LjfDhuARrqLbSlsq9bDhFtBOzDo2NAQsJ+vrWaZLmxiUJj0h5NLOCH2hm\n11KXJx4+lc1Rzyp+Uc3Jdu0vb44d+5qGjCjDhQHR3M3JLkbsl/E0hBmkQ8f1\nEiKqyjl9y8bmyxguIVybKGoXebFO407imzFAbSr4PeBgnm9PpPxqX3MSQXB0\nKtjbmEQtgYh0PBUcV5gG8/wChf77iPlxncON3BTviNG/p4JXsWzMJbaT/iQ5\nPtsF3TkYl6qhCAy7r8HnR+UiBJUJHQKXVe6ORVGlFwrMS8GK5caII6/G1PPR\nGgRHE2ccqyETx0C0dfcjHGDUMteSQB4520u2RU4NgTAQPTI+QYYRy758vdOx\npBZjKZBO0x8QqSNZ7EWinmUt2LeE/S6raElermASLT0CUQtZ+Oe1J75qpCfT\nIdw6xrpKLbbgPY7rOXeZv904C97bwlzp4y/Bc7G9poCEb76SVAwXDDcNT/ZY\nykSJqYgQxSPxWijiSxe9LA20syAQLNLTk7gkvG8lNog5Zaaljwx++QBzx7m9\nHKh2z1AnqnoM3kekQqjnY/mi1+R82axDw8P8+hH3MF08I9glRAXIln022We0\nwVeS\r\n=vlQl\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"edee6a64c210815507bd8460fea3df2591cf0d65","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_14.0.0-canary.4e66fb2e1.0_1643398808969_0.05111826955775034","host":"s3://npm-registry-packages"}},"14.0.0-canary.9736ddce9.0":{"name":"@material/density","version":"14.0.0-canary.9736ddce9.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@14.0.0-canary.9736ddce9.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"720cd346720329b798f554cb4a8cbf233fc764bf","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-14.0.0-canary.9736ddce9.0.tgz","fileCount":10,"integrity":"sha512-odh31BIWBagfGTwYOFMGwN+fvlV1d5VdZXauMK+kHbczMFSQXbZedI1mJP23YtYolKh0x+/iJUpT7VI2RG9VWw==","signatures":[{"sig":"MEUCIQDQGbRipCFB3KKTznl5fo0ncgAYtJi5NnlvUJ+PvJgVswIgWXPgawz4EvSfZhj8B6tysW9CgjQJlBpp68mNsoj9/Fs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh9Q16CRA9TVsSAnZWagAANKUP/0VylxO5ddM4hNr99yQs\nxMErztFtJFJh2oyPkQC4qlKmHNZvqBlWSTkjYZ3uHEGgDdIEkcKz8VlK8ZvH\n+Lsw61CYKsFtUVmJkKBt+9hm6QNYuEnOqafQIedTT64Y2waDyNZQGdpW3jj6\nVKyJIjgYDRE0mtGOO0C1U3cKVUMdsohmPBpsH7ktYNa3y8HBVJ4cuzueEESq\nyUhi+lUGN4D7Jc3kZ7YPn6MflY7w2+NHLfHJWXDJKo05ctUx0r5FA7UmanA5\njZUCXx8dZJTsrR+qNrZHAefShoU8RJTGP0aggFmLtQNH6sqONohUjuAwCZeQ\nqb6S1XCTw3UkI9yC7Kw0haglZtqaw8312KpZbYsNsXxv0CrLHplbLtDbJ8LL\nxxbWi9OYgHCy5bJ9Z83MmSfK9rV9syVBoe3Q0ehpWWAJ8yWggYY0sgrOLicj\nuLu4RSGl3qv8ilnvIH/5+vNslkNC0//JFIXBZvxUdwhnmz1BwbF4DUXoPznE\niC9CAO7mxNv8sOyTbKo1oQgbAA0lMglj/YrIOfQDnmhE+HS9fyV/7ySAHUo1\n4De0pNipK7S52YHiDKrIBouBKq4QFYFs4Ym/eq/6y04WHoEi0PgKWPSsN5FJ\nz/VdXZ1VAORbLxZ5sINlnJl1eG03SDpBaMhHsO3vH7PzuyQnk5H04K3lihyB\nfGAg\r\n=GgFu\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"d76de36ce796a981bf5e48388104bdb581d17529","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_14.0.0-canary.9736ddce9.0_1643449722622_0.45557515472765164","host":"s3://npm-registry-packages"}},"14.0.0-canary.cc4ed13cc.0":{"name":"@material/density","version":"14.0.0-canary.cc4ed13cc.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@14.0.0-canary.cc4ed13cc.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f7f0044943135068b79cd6a52f887d7ec2cc98fe","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-14.0.0-canary.cc4ed13cc.0.tgz","fileCount":10,"integrity":"sha512-VbgEHnd20+rQEF0EbN/NlYjy7B8NKyCke7iOT3Gi+Sun1lMydoGLJNKZZQlYrXdFcHN9sVxlZzPiIze5SGt8zw==","signatures":[{"sig":"MEYCIQCFOI3EIKvm/uenEcFwpDaP5COWxIeYW05qV6a7HNqn4AIhAIjezy12HBXKkAB7dOQIGjbcJ57/CHTM9VUddjh76i0M","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/W6oCRA9TVsSAnZWagAANkIP/0SwmZ8GhCy4cp0pJUt8\nKIM1YC/ZYn62hKZYfG0YlzUARkFUhG9o3kAeffJvAZWIVPoCw1RfNi4nC3fu\n2+DLV5zJUvUYVpGxGj8FjAuf5Vgj6BUHtyh4+oDxim75/ZOpGssC4B1AoUzC\nsaPR95P9EObD0oMmsGx4MRH2OpgGUY/yHxWCOzCHXIrKXYwMHnjeYt8HFj+u\ndQO2S859ToQfaxmS2kH3B2Le/Mm4esr4gnYlPcxpsNJX7ko9W+t1h9E3ZRSV\nUvE1hZTuihBAcZtnad4oqVMCERnMScdg5PcIjZd8on4m/+xuf03NQHleVA/m\np1nYgRQ82Fxpojv2XWJWBefZ9/ByHEnxI2IYne+NHiUT3gb70HMKhPa2uPiL\n8ogeXyWzl6kjf1bW6vQKYYY3nZC3+tzgZAvS1Udf/y8zA0fQB5Mn0psrAyya\njX7TFYD7jVq7Q2mP/1XxDdePtocyvFBal63vKUF3qotZi64VBHe4/wy97NOh\n8KXyt2qIy2b+qQhYrEIoRuKjQXCvQpgbk1OUNHWaDV3VoK3WuacblfjLtpVd\nfebxRq8Lx9pxQMKJB+4CvMsBQr9iX9M/hcQLdGi7Yu7nUE/T1TQiyzQb4TZA\nqnCqJuXUoybb/aj8z/McHHX7X9eGncWLsuEGSt0OveP/ctAOoAXOCH5RmEq6\nVCS/\r\n=kbe6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"15c769412cb0230363c372a7d45bc6bc10eff8e7","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_14.0.0-canary.cc4ed13cc.0_1643998888358_0.09109749731222272","host":"s3://npm-registry-packages"}},"14.0.0-canary.dcba26fe1.0":{"name":"@material/density","version":"14.0.0-canary.dcba26fe1.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@14.0.0-canary.dcba26fe1.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"23eaf36f871a28817d985f0233882ae66b3ae189","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-14.0.0-canary.dcba26fe1.0.tgz","fileCount":10,"integrity":"sha512-Z0cYMuFTzFp0ABiDhsVIfe1VQegu3pULztujtna2g5wlNLU1YGW8tKWpNGz6NECjgsb9zlBBiw60jPi8p6PDBw==","signatures":[{"sig":"MEYCIQCPKWr3bZ6V3+VfdoaHfgGi6AHLNw/rbKDJmhY2Lh04mAIhAPAkNaHtlSzP3PB4TlffvPnkFzFu2Zs8ZmNuj+QwxOh5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/aDqCRA9TVsSAnZWagAA2AgP/2HtywCBLlobraZPjfNM\nk3J4wglyrcFfeTM+bTmZjMPUcN/vaAbPIxbfam4fy3UjOmRybe/x+IBKviQ9\naffXLIvLtGsPiXaBW0AalqXey2JHtGkDuwa9TDZiUDD44V+qXTsJ42bQy4aH\nt40G4GXqdjTd3NAlwyBpqccTC5s3x3K0B49VZBcMP+0zSDvmXeQmXSaemCX+\n8VK788BfhwX60y2xbmAT1WsLtQuMNoKjyJ0LpKfUiDMF2Sd+sgcB93OThK9K\nwcG1Iu2r3rWXvsF2whsJ6gYyP+lxK8zWbGZ+Z2PmAg4ZY34AzAz47ECy5T61\nK1QuAY1P4aNkvpzKpFaNf8aEHaKc2+lZamcNTGbu2yNXDequEuMvpb39RfJT\n90gVldQH0i8xHpgnUaQck4JFSlHttJEejBquG01FitVT2CaYB0t7Kz/z4nOX\nTTvpTZDtn3nKEDtmuLj7jhg5v2p3EV/fnmzao/n+qU900FNLQAkoPE6AQatP\nqFBGqh9FsbuyxVUT1CHVwA9U2D4B/IGEysfXJWzzW4ZpmPcGdIXpLmY75yDN\ngQA1rUAdM6FG6YFAuS/lxDe5j8T66dShc3yVBMSbEQ1TVNorABfvYXFsJfaY\niFttiZlkGKa+b0jR+klwkBkgAFY3YlQhi+bHaweidstVcdiA7S4BYfNKqLgy\nu0fE\r\n=/zL1\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"ced7dd56d5d3b017288f0575d6e773c03f01d0ef","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_14.0.0-canary.dcba26fe1.0_1644011754306_0.18029046012050642","host":"s3://npm-registry-packages"}},"14.0.0-canary.ec54d9046.0":{"name":"@material/density","version":"14.0.0-canary.ec54d9046.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@14.0.0-canary.ec54d9046.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"410ca00b65e7407b89b159c6eb28046e188b0f38","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-14.0.0-canary.ec54d9046.0.tgz","fileCount":10,"integrity":"sha512-n2ccfwAP+CRzf6rAV7wddqnAovIVYcy9EtfpeQBucz2ZW6WuzKxBYgF3BIpJ1RPMnY1idyVu6nF0HkDjIAr0Hw==","signatures":[{"sig":"MEUCIQC9s+7h948aWh8GBdJDE/jPvlIaKuclORwdfovSYO/iyQIgNTZ5kG6mXLpafVpk3GP+c80MYFrnUZb3Zh/dlmNnSGs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiAT6FCRA9TVsSAnZWagAAEi4P/1wzUBW77mJBRqk9vcvu\nCRKnE86NzaEY+y3lBK1Gen+ea0ns0azc9AvQZyPQLFs4g1OItTb42pxWDA7V\niZfh+yFVQBXkLDJ2a/QHzdt2R/YpX+fA5BBwxcrsJzH7ltSEZOuKXvJ9JU7H\n7jBpxutW3y/6w4NwY4Jwn0hcGMD8cDWRLTEWN41Lh8qdLaVHXnwBZkCWzXCN\nPTtPgqo1k+JXFjPDGsh5pLrBzv6hYKWMW2GhpgwuiIlRipEPivD67H7B1EOH\n4TudyC/pUwxSfT8g2aqfMJZR15D8nV4yWtGYhDTtogsF7u+NCy3EKdB7uWzE\nJ9XYAXcCllzwuApl26ObNLGFYONZzGBh5lzYKStxKYvrTrwlg1pd6dMDlIMM\n8QvlVHnxrfmT5ysmtTuGDDKnLGrFcNjnv4aaRabzpxKKz6qpcU5piqc1fRtI\ndaDUDO7/pGq19wE1KDO8mFwpTutds8aWXz4pGUfdWWKtUiGid6MJWnEXwupP\n81vOYuyQWrOafX7BDgtJLiVVgBsArNOvf0Fpdi9Ne09Nsl8yZC5mxfgdv4pB\noCIrRTMBcw9nGiwWr7yZo/yqUNf+gVKy/2gWnqs1++u80uoQhwZEQs4sh88s\nxR2dkjb6224RIOfLHbp5+ZEEEw9Lo0KH57Ya+exal1xMZQPECx6K+0W9mclA\n98m5\r\n=W1pI\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"68f6bb151595e8790d7092842d6c137ef93ed770","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_14.0.0-canary.ec54d9046.0_1644248709043_0.2451332317765751","host":"s3://npm-registry-packages"}},"14.0.0-canary.ea9b5b463.0":{"name":"@material/density","version":"14.0.0-canary.ea9b5b463.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@14.0.0-canary.ea9b5b463.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d4f31d7f0038ea1afee7ad2a36444149b008aab7","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-14.0.0-canary.ea9b5b463.0.tgz","fileCount":10,"integrity":"sha512-YopjwYULjhdr7DZWNS+eHm47rFxI0pNuUehlROICGbPjLsRmkKEdT4uGemx+oVfMukzrZonOoYILNQBW7FXWzQ==","signatures":[{"sig":"MEUCIG3CUWlptOvI6Mp/7JRXe3VLulpyrxApLG+9XpDqh8i+AiEAv3uRYNSzEWGHpSERGlpIJKxMu37r2td8K+uA51t0afo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiA/9UCRA9TVsSAnZWagAAq5YP/1O4P4JtDM4smQw+4nMW\nm1RpE4yvVUoD26R43BMAwzd0YpIGHL2t2DWnMNiZQqglsN36xR4BkYFcgbxv\nZ8QzBuD94JVJ3LGslEKt5JRzWk0rM9W4sT3grAv+dZtQN+HzSeQgyPn8TTvc\ndgfH38YzuYYN7V5arcCkaBiywW+otZKVm+J3O+a7iYcrQTkavNeEKakNq0Os\nS78qAT11qd6KQIMaWIe7vSP2xzpBlIyFcpI8mdw7Y15zbwkovXnP17y7s/7i\nuwLL4w7UrilBKjPXCNdflSXxHrXomBziSkr1OK9AO+F46WTHbgEkI9qH++oK\nDalcBI3jn2RZyjJhmv8esJ5GD9GQFnJsTb+3pV+drnawRrWiWQkhYRGDWeRl\n6xkz7/+X/ynT5uiOHXjSxvV4rG4DuRGXbLDtEaMAWFu4EnrM2w1dJE5NdUWJ\nsLo6pQJ7fUYuPAOVzB6bmneiwSthzDR8IVHq3lkXX5vtWcsVZN8uLtxFz2AL\nEAJ2cNP1KcvBceLz0aIpRmjvUq3KRU8aeuKN8/KvbPiQCOlFZO54/ef8rFE2\nqOHSI3lsDFZSuKx2zgaSmoOxQEQ4ueAoVglkpZAptJpFh6UOhtTKyHxFLy9k\n/0yGVVITomtPuN/cbeumSKWkRF5H3KZiPm07Qhjrx3BtP4aemCNWcWLayiwR\nOWX9\r\n=yfZc\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"ee827dceb9fd1c47516461b8ddc28b66702f2c04","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_14.0.0-canary.ea9b5b463.0_1644429139872_0.40882755913539004","host":"s3://npm-registry-packages"}},"14.0.0-canary.96ea061c1.0":{"name":"@material/density","version":"14.0.0-canary.96ea061c1.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@14.0.0-canary.96ea061c1.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"36274226e1b81a2ca004da5566fade297f8654da","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-14.0.0-canary.96ea061c1.0.tgz","fileCount":10,"integrity":"sha512-BabGcqp0SBn3UBnlN+hAkACRNF/9Ox1ooOTh+06K6j1a4k4l/S8sNXdjFpPKxrWpWOe/5Kirv30kvz7bbbs0IQ==","signatures":[{"sig":"MEUCIQDSNOibU2xW4RuaBbyd5xCLypmSpfqKS4lYZy+t3qHe+gIgbLp6pDSZjB0RIpxQkVwSveXU0sRaQzSD1m6acyRYInw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiBA69CRA9TVsSAnZWagAAqBkP+weqNc0itZ6Klb/IWRIJ\nJPOYI9lJqB9Z5LJ4amjmZ1jp+Fpp6kxMb4HOg9K0V82FWNoM5Lc1G+iYiaGt\n4c7RBt35kOgJwe46bsxRg5oIuQ9xBnpzhxiRmVdFbnUx5dbqobcfbNv5meoz\n8DJmppuK52OPLmXzoDVBv7AaHZUSiYbQNEfmHS+hMIoCz1mJs4mRZ1l0B10Q\ndz75aM2ssvTrtzzOYvFE4Or/Ae1nGECJYMJmjDMl9vEosRQYq+mAFSid9VoT\n12oDY/1fCZMdX1zjNUBNz9OtJz5a5kQaMyVO9orpn+nQ3jKWmL1syTF7knvl\nj+g0+QVPlr1K3HZjKTI7i8dZLMeYwlr58mj6w1oemxmyxdqReihBWbkcxUtF\nEVPeDgrW/Gct6lxF9c4NRFVwyzDaegUuXr8mHYm2qJFd6RY32WByba07E+iG\nlzB92m3buWFDwtoz/RKYQg7vm/2UUpLpxMrb72g6bGqi0a0/nDBhWBbXO7+v\naHwMI3TmPH48YgalhDpvjMHQ/iD7HyJFWN9/3MrsMOdm40tfbppurRMxc7B3\nhwnss9QwDd83QLv1NaQB13Wu93WUP3+fxn311sCWogxrmkXsc9UjgFgoDtXH\no+HcFyKSmi4CnM6lTTsu5JWz6BH7cCUftcRrLnbvqx4oiV0QcMnMkZnCCO8Y\nDSC7\r\n=LMZc\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"b1a410c21f8ac6405b364e437b5af7eec06a2020","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_14.0.0-canary.96ea061c1.0_1644433085292_0.648167002783917","host":"s3://npm-registry-packages"}},"14.0.0-canary.e00181e59.0":{"name":"@material/density","version":"14.0.0-canary.e00181e59.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@14.0.0-canary.e00181e59.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"433cf7b01c917b595489d9ca82395dab83d2022a","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-14.0.0-canary.e00181e59.0.tgz","fileCount":10,"integrity":"sha512-AbabhLUJiszXgUOk1raOgU+RHgvvAe1aqyYcarS1IxBcv6Mmz9t7eEG5s6Y6iBAswI9Ea7lJW34t77dS18H/ug==","signatures":[{"sig":"MEQCIDB2uNswgafO6AkQ4CKY/BondofZGujnNE3BzYAW9/YQAiAiI3fcArOtTkoZBUEhSQpcFP8jQ0DyECgCC6B7EIjLwA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiBXAECRA9TVsSAnZWagAAQ5AP/REdR6osF5Kqe7FZtXus\n8Mj+8lT8IpxK1vqDfn/KtRpg+/1ldUL6s2Zp7B5P467um1jgid/l6VjMBuEJ\nwGV+TzomRYiBztsWipAxZKgFQl2b3StpUx7dqj6oXwwbdYJEh7GTPYoeJqNP\n8KYv278cs6xeeAZ92U2TzEilzEzW8BAc3R7kAn+dLgC9qyD21wBC/LX0K2iL\ncXfKzpOO/xvBYPgcENNIR/dOsYfD3fcH/41eWTFwfOA71kW2LSW3pqU8wui5\n9TpH4JcbPlh+ndfDH7SJbOgJ8k3EIc17SNT5ra12cCwZXrfDiV6XbD8udmSl\n56MiuR0w66RG3sRFADNj9qvKKGCCT+UN9R1plAfYpJ1TlfmvCavnTj3Mw/mA\nq8XQ/2t18W3EQJgOKIUhEiva5MtXs5MgXcr59mKioxiP1/lDxY2LxEFjJRyL\nZpHvBjVx2ClMjf3Ypo+uxxFfiuPl0ZTQEEJfEvFjxZj4gVF5n8UNzPVIyxY9\ntBd9xhmNomhS0/kaD7GetAeeDdAQGHD4nocEz2Ub5u22uOn3LzB6FqyLpleQ\n00XsNWGEtV8ryGErf7Qo/02GW5y8NtRqmTWR3Ay88HtPBGuXmtarzoV3YQdo\nkBFvTL8pnsEY/OIdvcGW30jb5PvIpLvleB8LOfbCBVR5KQs0cv/+r/WeJ+dC\nKP3S\r\n=LpV0\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"7e9ce072e9ec1ce5820d347b59d99209542a2bfa","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_14.0.0-canary.e00181e59.0_1644523524113_0.965954871618163","host":"s3://npm-registry-packages"}},"14.0.0-canary.037285f9b.0":{"name":"@material/density","version":"14.0.0-canary.037285f9b.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@14.0.0-canary.037285f9b.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"504b7a71b6b7a59a29f9cf5b8a38f6eae2ffa178","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-14.0.0-canary.037285f9b.0.tgz","fileCount":10,"integrity":"sha512-fa2BAfvXMnsHzdAs1Bh5OTRXbs2Pu1PqOVCbRnK4vMdzGydi5f3iFxueKihMtVXUZaquBbr3Qjt/c1jSdgkNOA==","signatures":[{"sig":"MEQCIHdJjovaFmcMDI0zR0ivv79Hq82af4/AylRa0zzvE55nAiBj369alBrmxZ71PFXvSBRarwvPvsNTwaZDXF66U2z4mw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiBqq9CRA9TVsSAnZWagAAu3oP/iYDJBYwnyKmzSl/OAAK\nTYEH14UM1ENwFHfE8z1GXnKbGv4lVINc6jXFz/+ww+f8vnfP8+RuK5pboaxn\nG07kmNIjp/6CYADqj0BfyJRbmsvE0WV+8lYudW3QkuorOIxCB4wpe9JY4tRK\n8n4LsLxkf3kcFUen+mm2J/w3+CVIvsg1r2Uysjfl6sMVpPUkqYiaUI6OHL1E\nB6Jy4sqNCpzNscZB/y5lXzYGyNTtLkbnWAOM1xVqbLhg9yuC2oJQFL+F6Jx6\ndArpypcYEStkOKvwU2FeW3Wj/A65FRJgSwg0QEs7zzE6v/cfMBkX4M70/XKe\nojqpeYsXswwi0SS2dXYHIwKdjvyoYmAH1p5orvSs2ISCK1FffVDctgLEMUEE\nrtMj6WI1Q4A+OQHfysrqHBAWfCJgUxJh8IDnD0Dm5Pw1lxtcKQ/4B6lr4w+u\nMgcbCt8ZzhensRxbOLgdFZcDY1KSiFWGe27jF1F7AGedBhLbCKi2P4oUfRgh\no4NqHv45tOJibMx+7euifWvKrbnPI+pun5rPp5pPM1OHHYlccVwRtWXdyD6a\nnGwCRQHyS6yw2E0YQuBUvjzHIk++HWSGGilF165sw/5hkcfsovNd5NFVUYbI\n1FQrHL+3/q2/Qg2XHleQMQL8/Tlk0bJOEsiROn2AyUFlkaB6EzanQfqLY7AO\nTr7Z\r\n=ROv2\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"a9bca201560da3f96e435e6e070baee148bcabe2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_14.0.0-canary.037285f9b.0_1644604093336_0.9009177743533219","host":"s3://npm-registry-packages"}},"14.0.0-canary.1aaa68dda.0":{"name":"@material/density","version":"14.0.0-canary.1aaa68dda.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@14.0.0-canary.1aaa68dda.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"18a053b693c4b1a6946396217e6caa5fd8362d6f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-14.0.0-canary.1aaa68dda.0.tgz","fileCount":10,"integrity":"sha512-uzQKG7RLgqbnXYtDRR8rDnQVYvdnPA9b8uGneHY5qCMalsKHzn9BWTKfb6udjSLrxNSDpClEMq6Wkn51TxOBDA==","signatures":[{"sig":"MEYCIQD2KbYrH/dLSuV6zfx13GJa/pPuP2Es6MnC7nb9CJ5TKAIhAKWXWAC9X9SepiGN39VBFzbcMDJbF2BxOdx0CHHuKiIx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiDVThCRA9TVsSAnZWagAAVhcP/i5XEj2vY9ajapEbWA7G\nCf2QkW37SddECTh5LDmaoUwA4u8PC7BvZz3t41pYXUnSd/nnGXg1c9krra12\nVVfXtByWuSPXcESaNX9y8spLbjhuaqTgN8jkMCMTQsuUcaezUwTq0LYlJl96\nIjvhgB0QqRQrISDzgFrsjETmWz8Cux5aYjIrEKUKYieZcWw8tRekM9VjNWPZ\nIlAwhpf4RfPOBZIXNRnIWYIZ3vkVocyXz/qpAGw+qvGvcbqyNw3imO51chil\nnVUKGnpjPA/7wxDAjMUdgTn5ChqE6N4wsZ3Sze0BnrKvIYwOZvwYEKr8dd3y\nrxebWxY+Wwq3UZQdqlLQjYTQHqebAJiaKsMt23BzMQUdU8h/VkMknSAJecgK\n1hPiis/QNusVjy8iH9cFR8sOsn84RCt6/nfi72jekyFsYvPAvnWTGBwzplXM\nhBFwIuLcrc1P++w23QiFH7d3Lwi4jPREIvyn63ENMGRYyyo3Ozs8pLaKP9XH\nGlPukNLBRGsinL83lccbN44tQP6ZyHQ1/D3Og+bYwN+tuPnzr4NhKWRlXZwk\nkLZO6fbAAu6jBiqIKhw4YjxYmEL67T2Yw5HVdAm60j+0DdHaoPaMaQuy7t45\nVK5YbU7vEw/15oCaTEvf5NNWG7u1jvUdraJTsH2tXLZfn0EO7LnUe3bRaDsn\nLMGh\r\n=YlZg\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"49eaedc3ce6f1f8db6a6929143c077e8f65694f4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_14.0.0-canary.1aaa68dda.0_1645040865409_0.06418197892675415","host":"s3://npm-registry-packages"}},"14.0.0-canary.ab4aba1af.0":{"name":"@material/density","version":"14.0.0-canary.ab4aba1af.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@14.0.0-canary.ab4aba1af.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ed43e5d3555b8c74e7de680dbb2515595aa30f1a","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-14.0.0-canary.ab4aba1af.0.tgz","fileCount":10,"integrity":"sha512-7RpiuGnKbNKb1q7+3L4lL41nzmUpKGtyeprDUZ3rMK3yfHaF1GzCIntaE1W6Rt8jweQeU+IYoeeMnJmyYAXjlw==","signatures":[{"sig":"MEUCICQSfom1Kr86NkNgm7tWgJH1LYj0Rxnxs3XdfdEKNhchAiEA/mq7RcY4fmarWuNOAvRizfidkJ6dk5NvxqDzL4bWRlc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiDpC6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq6wA//Qv2oIr1EGq+4FRa916pYkST1HGjCiaeSDFE8/LzY5U8TB1Cv\r\nIKPrP6/0gmz+UWVm5/IbZpge7e6gpaS/bEey+k/Dcu/xAQK7gDAreQrW0KsF\r\ncz0SuWEm8Hu2Myb24vEHb9sEi5apxhYeyTaO13bEObB5Y6b6ZHs4xgYaFrLT\r\ni9EZ2D5Zi8yyipVLq/qabb2rNVSNWLvEwf7wDK0ktOUmsEvKqqibezLTaYH4\r\nHhAqPbmtczNSPZMNIq2Zl4fEX9w7cewq2cX0O/InoMSoBZOnZZkQHxWsXZV4\r\nPcqZQzVXc9iMvUx4lb5TrKZmRFi90EVb8VhCZvA7zwrkL1wze1Ys4aINQpAD\r\npoa82Q7/Vg9Rxz5CWtOPdXDS41xyXove8V3tA00CJENy+KB2rIuQPtCqZuTt\r\n6SPXWZ6UoMpEqIJD3woDr5PdPe429ZQqmtWbLdyv/v9sZ5YeNwK+0IpdZSM3\r\nrrkJeKnVh5YEaAXggb+J5AjxDybXODcOauo18eGh0j+itwNTGFcVRNOxT0FU\r\ne9oJB/WmyMf7yS/FoDhB474TQP0XMLPHPKAJWqUKj94zBFlbRGnr1RR3h3Q+\r\naKBeYSZUQIaKfCJH8Sg35Jp9sMkKubtITKoNJYnwDmTO2tpnRK2V10S03f93\r\nCt5V1jv/gyBO41TCut2ypLusEuyR6r0FdYg=\r\n=0ErV\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"89aa095a35d4a006012f1de893cf181c5725f676","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_14.0.0-canary.ab4aba1af.0_1645121722162_0.33300404953449747","host":"s3://npm-registry-packages"}},"14.0.0-canary.e58552c6e.0":{"name":"@material/density","version":"14.0.0-canary.e58552c6e.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@14.0.0-canary.e58552c6e.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"69cadd4386c9f49ea07eb0231f0d8965861cd8c3","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-14.0.0-canary.e58552c6e.0.tgz","fileCount":10,"integrity":"sha512-PMwSme6UkqSXiRFQFDv7w0pi1J3m9Ls9zvW/cThFgGGsloM3DLCR6JFiHHExg7xsd5TASP8Hp3xIfFeJBzwpXQ==","signatures":[{"sig":"MEUCIQDMdqeSgCMpTlbkjwskDT1XQczyC8pAi6vACrODV4u+AgIgewlG0brOQpFhOfaaqMF1YvJfVzPe+BmGJURHeedP9aE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiD99fACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp8dQ//RWWr7+o3tzSchnxIpezpvjapjdGp7LnHZD/15WZjWSboCtTc\r\ngxR8NQgBkVNhltGZmHD2Bgertm/yYa9CoBbDnw9fnpX+/Smp0r84lcxq6yNN\r\nOf00SQpiqHroZeX9any5dll185tGNnyLi9gv25L8a0Y+e6JaDXYoNGrYGJZ/\r\nKyiSqrBHIDkLtH3g7IZYQxvKRHG/yNjOlqZhCgT0blQBQX2l6F2xj4s8CZfx\r\nPC/Q/1hBDbW7gzPWYzKCTwt1O1hiTp+qnmScIMI9FFyRuehgHsXg/6Y5a6/a\r\nVi4R5pQPzMMkEsq3I2Cpykp6zH/8zigE+KQTyAGUYfNhl4NAU5+5fSkANA1M\r\nPE6AisNt2ThGllg7p3SPaPb/8ghWL++pDBoAF0l/JpIo2OxJoYT+G5NFt9D4\r\nfKhAZE3pRjfy2rQHvjQMGM098lzhvwbCjltxZEy86Skzi6hn0ZE4VJcSKaqQ\r\nlo80OvN1iPZrhuzCaotfjIkzFKFdzcDnXjtMpfVTiqn2OdN5RTeIiV5OWMrV\r\n9CQP0FCFIYXjxhrwLXFh6V0k/0FEDXJG0kLFxIJIANvKrzF8bFsoS5wSU4lv\r\n8y/2CzIt18ubo2DE1X/BGw5IZt4u2tk/Mdd9liTUchQX3455cZhR2ZJBXIqz\r\ngh5OjlTj4iBNXEM4bTzZq8O5LaCifwrl78o=\r\n=gBYn\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"6d5c1a026de93c3896f05529594e5b025f79a060","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_14.0.0-canary.e58552c6e.0_1645207391794_0.3578142489296756","host":"s3://npm-registry-packages"}},"14.0.0-canary.868793776.0":{"name":"@material/density","version":"14.0.0-canary.868793776.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@14.0.0-canary.868793776.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fa8b4d8aaf6527cb913c87248ed71096ea188575","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-14.0.0-canary.868793776.0.tgz","fileCount":10,"integrity":"sha512-p8IO4WFLRH4p0Np5tLfev4qS3jJzHg0yYZK3q03jBpfM0XY2i0jtIR1b2AQbf6S46SibVs4gYx69l5lJq2DwNw==","signatures":[{"sig":"MEYCIQDaWHCVoFBp2qENH+b2ZCqv+ycfhUcuu50oSHvyfln6VAIhAKKh0ylNlqEMZouxlaIIjmrIbGddESuqKYwq/5ZBLINh","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiFTq6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr9Yg//S5ccwwgggRO169iAbkgr5QaJ8Mcol13qvUKOqi6DelPK1Uty\r\nSK7ek1SPCM1fPQd/c+w3Y9y3isU9SpiqU7sC2UZR+VuH9BWYNrglUkPgQrkC\r\nv/AJl+cQYLYOVWgDaaWer6NrzsM0dPUcz+gtUQ8/TAd8txy0bY9gHqXOw9Xg\r\nTqZJ9sG1gBvYjU3yQhue1H0C8NvzCqbaHopDMDTTeKe/hkGbpsJ5Se5eLBPc\r\nXTD5d08gL+r6Nj7VydDKMx9drt2vFfuJFOg3eUSjfvsxTzHCANPP40xP8yC7\r\n7vjs6YaR07VFy7uJxxiIhts1KfZtBf2lFW3l+c92oVVWtOzyDiecpsNM44Ij\r\n48LOL7Xu0s/4lIWMJyggPqDNM8Bf4teLUCRPEC06bmiAz4i7hTbSIhVYRmze\r\nuCg4Ji2ZY+y7XLoXKB27wwcUYGVXalxSNQ+1KM+4AU6U4M2aye9//fBrVUXc\r\n8ps21BCP2yBZiOn3axfayir/LUjMX6b+tDPTU8FbHB0U5B3BH19pflqaXFu4\r\nJcBq57GOYvGxFOxPUgytv4IprZB9qWCrV1OXVlr4/Kuh8tHg7jdIxIvqGsIt\r\nbURTMFCbuKv59HWpLuaKARL0DV48AapU9Se2rVGDF8awUDXQYIMkoQmwWMcc\r\n5/Tgcg+A9nxVochFqwL9nYbhQWo48o0nTG8=\r\n=pua0\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"78272b55e375cfc80b8f288ad4bcd4bba3d8493c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_14.0.0-canary.868793776.0_1645558458274_0.2855198766550675","host":"s3://npm-registry-packages"}},"14.0.0-canary.fdc37a445.0":{"name":"@material/density","version":"14.0.0-canary.fdc37a445.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@14.0.0-canary.fdc37a445.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5f3ffd30b10d20557fefa170df29f760cdeb18f4","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-14.0.0-canary.fdc37a445.0.tgz","fileCount":10,"integrity":"sha512-wvchUrD1WTYzbk7wqF7ZQDg2hfJzWh2lOwxexCtWhsNTiwRkU+IanGVYJwYqMTOJZbdumfJV6RLCWUnljkUuHQ==","signatures":[{"sig":"MEUCIQDXZ/n/1sSlfy0dyDymgrIY2unhfOdCwFNUY0qRBNP50QIgNzgpP0F6y68I4189j7ssIlGMPuCveLnwfyZfA7lh6Vs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHRgzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpfPQ//dHulVB2YCJ4S2yCBwKTemhC2GGsAa41XLB+KeJPSZh+iE+Xr\r\n7XTnaJ8fUa6fkuMi98hWY7ge3dQ+UIixXBsXRNaYL64+BhO5JiXs0VBlBHQl\r\nJXWoC7iXMCvG4h28pkg+bifumcJSBxT63BZmJAKgCe4Pb6XPBrfrQnXo1w7I\r\no1YAwdHctWfJuqGoxu59TZ15p4Q/icpR/4qHM7bq2Bm1BGAEjK7oDjeGK5Lq\r\nRz481O1Hgq0eyVU0utoT2QT4W/jxBm1lVcBzQamqnTmN2jKUiWCnl+FgLTFU\r\nfrugJ0k6k3v02/Od2waFbSyynDzc36dEUU/XmtkbioDLfN2csF+3guabb9cw\r\nxPDf9ZpnkXsGywQy/+/xw8yvNlQHnwjRJQ5+wRzuQ/zF7XrbVCkVuy19jvq5\r\nzSIFilU/EKEzJy6PigIIeRSGH7fhDpCCshT5WwP7L1qxatQxOXYo/45wPuqK\r\n8g/OvQWl0+MjlTfEJJmAl6OfUnoMsw0R9rgPrzn4jtZ9J0nbgFjWaasAm+EM\r\nuZImkcMrfw26PAMjSrsePrr5oj782Ufd5LkvgUGiK9uyT4KlRVQcvoaG1/F9\r\nqfJlFLrjAzMdQ2PpTef9f8AxGRkkSY0GAzh9fUNEaZD9fOZO+ScKmoLw5rip\r\n0QaHhV4kRICB3d6zWuPfM3kmfooknyC6TL0=\r\n=xXqe\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"5a8fd2fd927d036e44b0b22f48d858fb848e504d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_14.0.0-canary.fdc37a445.0_1646073907477_0.6410269334828207","host":"s3://npm-registry-packages"}},"14.0.0-canary.43c7d87dc.0":{"name":"@material/density","version":"14.0.0-canary.43c7d87dc.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@14.0.0-canary.43c7d87dc.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"92cd32f0b16cb0f11e4e64ed2a467e58ab34196d","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-14.0.0-canary.43c7d87dc.0.tgz","fileCount":10,"integrity":"sha512-hyKoh0XwvCEGPxHD4vxxkD0wRshNs6Fx2AEka8oiA48VUwcRcZbI0gSMgv5Wn3f5r+X67IqIbroNaq+NL2/0HQ==","signatures":[{"sig":"MEUCIG+b1lQccDvY6xFukIaPUKCfilyygWOLxY060Rf6EfqzAiEAsXlk9AGeQLt/H96YbXvLX47lZTTfcOq7sD4MccRvyYk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHjx9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr4KxAAiMR+PTV2uh/3BNcFZHCTaiqk90bRibgVW6SCU2mNkihlXGtt\r\n9zGRTpQ5SlRSZPqSAnaphFnz3D/CMy07sUE1EwoFAhCo/Xyyw1t54ZC/SYL4\r\n6yzkTyCVaPXGG0sxRbVxPHiAkbibS2NlCWktCuROPczDpWYL4vZJ4bThu5f8\r\nt9WIQlSEFRXxXd6ymCiAMDayioOKBtlxlQ99+rxfasIsxc3bxGQi7bSy6Qh8\r\nzyHDIJF5Zd22I6nuO8ceIfS2ZdjIZ26OMG2kxfOwIO40IeT6PSeAcUROth6A\r\nLFkss3/b6VGRfocogoDEGWjEIcTVB0alqCPX6xcHwJsuBE08QhAYQ5cSE3Tg\r\n080vZl7Df+cCe263W5Lo4+tWXZwJTzU+RDI9xBfLmPVs0uDCRNtdRB69lnTl\r\nMDtRpDn3vK1cJ/ZQYJJAM+MLewEnxJEILlOdcgF7I8csZpnlSUdNnKU1L8bI\r\ndv95j4QD2frmAPBlXq8M40mEcAFiI8cqMFfVaZjp4CB9XgpvYpy2IfVhVG+J\r\naKfyLZU2JPk6no1TYqIBvhDd6ElkAI5dvn/T3bT0OU9uzCoEc7VsOYeAdAcN\r\nRRH9eLzzKB501ys4fN5DLO4B0bOqk2gX1H/uE/O+KRRdZHfeWeffWcJBIR19\r\nB6BcNAw0CCyytmA/2uAkkKc+qMrPcmKsBEE=\r\n=lp7w\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"c03dfa84e200bc6d570c73762d7ce507d0659e76","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_14.0.0-canary.43c7d87dc.0_1646148732942_0.30025610867273533","host":"s3://npm-registry-packages"}},"14.0.0-canary.23043acd0.0":{"name":"@material/density","version":"14.0.0-canary.23043acd0.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@14.0.0-canary.23043acd0.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e26954b14096dd47332609cbd22de591f93d7170","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-14.0.0-canary.23043acd0.0.tgz","fileCount":10,"integrity":"sha512-+QZHpzdheX9CguP56tUtujQEB80ONAHDVJsIvgcI/k9jQnoCWCm09tLBfsRtc0ajlizi2jh1hnu9qAzDGE3yCA==","signatures":[{"sig":"MEUCIQCxmlQ4Pmzvg3LJOd7ceaRCuYfZeAkhQSP2aHG4qJ+V4gIgW1sd8vJQSTLbWg8zX4LPWj32SEfmG+KF7g9KVaYY+Go=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiH9L6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrl4A//WQZAurAKkXYY8xvRORJJm2YWYf81ENUva6rfpXK99ajsXFT4\r\nhSrgxq/E7l07BF0DLZn6mRrWT14ryrGrNT7hUonpJcZPyktf9r2fPXo/CTwe\r\na+ZUkuouAmWgkeHofjtZJC9hhYvY3ziEQszfh7djo3xeaSBWh7pFBiTXaJ1o\r\nVZiSvHGE6M2GPLAwiOTUn+AKPWXwYJnypwIISgL7N3WkXaXkGxzdx5HTMyQU\r\nQiHQNtSnOH8x96gWUtxnIHVzZAgd/cyyT72GTuLttbn5AdYvz+s1r0QDpIIF\r\niyXY9ceFzkuHU8/JTWoTJLlx3gQwAfs+mLOSTtItv50GQpMp1hNFBEsZRQxG\r\n6+KgsOSkcB6tS8l2ShJ8oTxA1e0Ndl8Ch4nagrqDuvE/svIeWOq/yIW3dca3\r\n+5IT4Xp3eR8aLXz3Y/rBfK0g07XxLzm72aqUon1swIQ3mxIAtVztdeDjccTF\r\n/KFbv5uCtcHkaGYNaNbHSVJNz6Hj2ftvif+AlVi1tOcMtMgKw3zM8jesIn3g\r\nd9klTDxc46gLuz7zTsJpf+VvYFnbRiMjCOtYdP+51eSQ2f7d3lrS/4INKVOD\r\nSCNZ3snk1zTLjnJQar/5lChCVe4i+zorbrDvZMuRz9NQ4o3CmWf4zLUcUVl9\r\n5j52RBQISNMy+TpOpFga9ENf9t3uco/0ccE=\r\n=cuto\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"b1cfc3908c111a04a69dbaa90966642093f79e86","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_14.0.0-canary.23043acd0.0_1646252793722_0.4464649825490301","host":"s3://npm-registry-packages"}},"14.0.0-canary.6505e61c5.0":{"name":"@material/density","version":"14.0.0-canary.6505e61c5.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@14.0.0-canary.6505e61c5.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c060bf683947beba36cbf9fdf76f6df714f14cdc","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-14.0.0-canary.6505e61c5.0.tgz","fileCount":10,"integrity":"sha512-THYubbACbWWsL080wQM5XjOmUTZ2Jo9H1+DGczn4UhQg6mfVqaiUfdy7LHxYX+fEAR/EHPdPzVEttDUqgR1ctQ==","signatures":[{"sig":"MEUCIQCUsb/0jzZa8oODsZWHLzYCS5O2Cbgsl7ScKx8Mt1t/vwIgV2WZOR7IniPbda/KQSAWLJd6LQ8fiCRmrWou/d1vJ/Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiIR4WACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoMMQ//ZmRWXVeG8KoPKI6KYA4J33XLSx5Y4s8cYcyxj/vfA6YquVE/\r\n37chYTMNnklnNiTn1jLHpI+9r9IaIrzracQN+h/PKPo8bKM+FbFXF/ZQUVU5\r\nXdMKnWTuR0UKLsyK/sUX0UAEfU6byP/1nMPB0qYTnBmLwydtJz5lK/hWlFWt\r\n2yUzdaxFv4a2CiqVDaq42s6Z9BTjikvaJAvyy9K6MVFpKApYT10Dr7cYUpzL\r\naC3Jdcy0KWV3J7yJ+RpudYClhEE6HgxO5sIz7VH88IRo+bV6d+BMxXfIZnP6\r\nDdvDoiyBYqTNHjwvAX+CL8gyk1wrNTyZc2qI/QRKe8fYvLRvVJCeDyqKFv5m\r\nV2ksGjipfxP8qYWShIF6owghS8wX2drnMPAkbBd5kEiTfMOLtZLlI/oYoeRY\r\nL9o4/T/NxK3LdLWHxveuh4KQU8oGjFqKXxVEJCeokBLdoELumaXud5mrG+Se\r\nL/5JAPYd1sj55kYXWhkQ5hjoMbG0X+fce464wdXPZcTc5NEqtYc/n795//Pk\r\n8kDmggGDF0hVPv/dXu1m5E/alpuXXhrs8IrIaqmn6J47SqqYWpYp7Y7chOrw\r\nveFjDZMx0WYknm0kZKYUvgQXKcAbQ/kzhpNWn8kg9YSRHGy/e7R0NgIHptWe\r\ncU4SZkNuPa4VAA/hdUEKYkPA6hI7/DFzxD8=\r\n=TMx2\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"c9070f0099aa35dc2460994d2d83a8330b996c5c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_14.0.0-canary.6505e61c5.0_1646337558399_0.9834045735861665","host":"s3://npm-registry-packages"}},"14.0.0-canary.16c166154.0":{"name":"@material/density","version":"14.0.0-canary.16c166154.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@14.0.0-canary.16c166154.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"983a5f6380ca474fc004d430ea5aed3e18596e27","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-14.0.0-canary.16c166154.0.tgz","fileCount":10,"integrity":"sha512-dbuAopd+mRr+3FWgZKr6x1z26ZFb0rmh6pCBEG1Rbs9EFrILcNvHKM+HxwDLdjG2DRcldeuiTzAVSmacky+FNg==","signatures":[{"sig":"MEUCIEPUfx5y9buVOHzHvLE/6YeXlhoSDA85CG81Nzsqs7jdAiEAvyLK1OEugS242RGya0yIfj531oqz3CiF+bLspNW8Dfo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiJ+T2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoqxg/8D8CQvJdh+WUKPnR4GNhmPEzvxM2c4pkvyGvWX5MfVXn5n9Gv\r\nBfhkh3FKmxXDM/G6drpp5TZ5a/AzGJmgITy4qyjDVwd39d+UWWVb2h7Zj//Q\r\nTQW+MRLc0zF7C9feOm2hJbswE/nMJ63cuZ4UsYqC2/U0sS9UmekcXr245rGe\r\nLast2EWZC0cU/ml2EivL8+/REA0SiE4kYKtxJegJoFic8UHH/oMBKyoiIJWi\r\nLrHlMFBbY+ppjhiybSdN6GjwE3o27Gx8MX7fwiAbquM/rjwS8suHSL7zhpi/\r\nV1tflqbrY99VolGexCSVqorF58ef7Mzn4tHy3z/vPEBaLUNUTvjNYq9S3e3p\r\nFJqwMliY8rTLtciXYspY0kI05cHZZch1YILbKPVuooCu17urN8T56Tk0A2kd\r\nNtbUBywWHZiQa7gbFbnBo8l9a1kFrjUB4ET6XPyDoXRl9PEqAPhB7KuJF/0+\r\nOWZ1hMFZlK88ar7wIukzyIW2QijJR9bLELaAw6xnwc27Pl0+o/EoXnyeESmx\r\nPiAGcpB25Y4rWUEDq+XbkBUw+/i+aGjPTRrpiXjOq2BhGJnNPo46tshSrwb7\r\nTX0zZOnNxiovndujKbiNH3gVZZSJJSEOX8R5doIxW3BYrto5W49pebJPkcuU\r\nVVhX9ON1Yvp4sWkPofqlDszVvTj2u8d+4B4=\r\n=OM++\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"dd1bb8b4a67220dc0120ba2dbdac900e51002949","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_14.0.0-canary.16c166154.0_1646781686304_0.9687423656710707","host":"s3://npm-registry-packages"}},"14.0.0-canary.bdf1d3771.0":{"name":"@material/density","version":"14.0.0-canary.bdf1d3771.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@14.0.0-canary.bdf1d3771.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7e8e69ad7b6867e718b189539f6237dff6dd927a","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-14.0.0-canary.bdf1d3771.0.tgz","fileCount":10,"integrity":"sha512-Ca7Vu5OcVPgNjhQdOqH3w7iCMS5aYObgRT9QBhJO2vYsaugvPjdJ0rMMg9HX/TiRQyHDKBrJH+bQNc46NUDwsA==","signatures":[{"sig":"MEUCIAqho86fWH/5bPPto+Z/7Agaz0C0IHQcjcT4a4Ta2C2fAiEAoBPqaC3VMIRADcoO4rITBljhTG5kg/+2PYVMLBu5fWw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiL1DQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqVDRAAkcBzgRvSmkUSWZzL3RGUqZAwluiY6ngE3+fwmHvipsdtW1/i\r\noSaQwfZYiPAjy56WEgi2k9iTJ8GaU0BlZUb0jEtSV2vkZ8KvcglNXnl7hgcD\r\nYGWseVG6vxK4SGjNf5zMrz1vh0ywgRNM3Dx6S3yzStl5P/NiAJJ1taNO171r\r\nTvkQzab07TbN43OdNz/45nV9eODqB2Z/hUUHACc35+TmgumjFf0obZR1OKVk\r\nIo2U1wDsob2vEF3u3JvY9eAhZ+kr0pmbcn3Q/7NiTYt79SoTxNd24qcmJhAE\r\necNne2tfRxzXKFUHm6gQtBtgTcNb7son0YIF3F8aX869pmrTw8O9SPdIJJws\r\nwMJ/tRdCyDFky9og0kh1U//MX0AOjxJKn2RmdPzbHtztbt4tqacelR5pZ0Nk\r\nDZsvg2zzcrSypijMdLvITfKdGFxnurxLupajSdsZ79UTR5VKRuGkx0AKGKQ4\r\n9+Ndf59v7xuwF4SqNjdfc1X+BatHXwdaRazNjEmi+OVIp3dYAISTvQ0KQlG3\r\nxjPSqrGmpqcWZEkzSV2h1gLI0eCFiC3za1bOFvP3S0GbwRG+7nUY7YogRObQ\r\n6JKBbhdrbY2H+xD0g5B7DV4/u0QJj6l1X7lSVtLut/Jl2Bm88wm2rND3HlIp\r\n6pkzBce9mZSM3Qykhio7+91PheZgY2+Arg0=\r\n=Dynq\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"bf598649c7389f49207c410e58144f75a67cc4f5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_14.0.0-canary.bdf1d3771.0_1647268048188_0.8400329572522418","host":"s3://npm-registry-packages"}},"14.0.0-canary.cf4292778.0":{"name":"@material/density","version":"14.0.0-canary.cf4292778.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@14.0.0-canary.cf4292778.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5d19c053bc2abdfdfc23fb88fbb4a3f36adaf009","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-14.0.0-canary.cf4292778.0.tgz","fileCount":10,"integrity":"sha512-xXhE8w96IjZMlWGW0Tfb4/Q/ZlT0Dw4WFoskz5gcgyGQ3h3VFG3ouoaeW8SQXTkcDGL7LjFai+Zr+QggRyXeAg==","signatures":[{"sig":"MEQCIAfpzkDsA/ZwGSLZBx7n40a20LP5rSrwy1Ep49HHur1GAiBMp6OqcdwLlL+fe1BUk1lErA+MUrB1LBSh3hy/j/f0LA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiL925ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqV6w/+KYWdd9p/cIshwTItl3plKmK3aUuD6Exxj1OGLBZkrer0PZmg\r\nmwvEU+SCQDCZQ4sBC1/3x6xIg+Ds1zf7OmhEeCzDPng5rzV4Xbo812+3IgIV\r\n2nn3L1K6lGLibsnEiN8icXB+b3hqJCwhNMuuseVgm/Z8ZeiDpWUDhReqOeGa\r\ntYEQm9pclchXPVAnSgBgBxaDfnIfxvb6cYOHFMYMGEeqzI+hny2zuirS3gia\r\nRhj4ehEy9enqywOGwsoMJL1xFx7KSgHimSe89jWEp6rmqt2lfRHsqii8oF1c\r\nY26XGs96LRdcLEnzsfkrIN4Qq43hMltXKV6irQTqnmI3qf/3p9DYCwHISmbM\r\nERk3uNEe+FVx0R7i1ncyUwJJFyMrXWHzEogzjd0yZIWEWMeRWmP/W20Vyv78\r\nSxw45mXpj0IWtj0frIqvkOffEUdDKhyKeta4s7MuDmER1BX4npJZjsQ26AJD\r\nj5yIc33NbjzHECyhFFV0if0tvZ9s5L22DIA6Q6Ys07o8lrcLO9BmgseBBYbY\r\nuWARqcsbMbVFfBqoDxaAheHGVJIIL9unThKZJKFzkRdmhHgAtfAQcqJUdG6a\r\nea42Jq8g7AM+Nik9YmgVp+yRQaTCAiAA3YYuZRSQZk1t00iuVc9rXsEBVywg\r\nrEYpa9W+Ej1fF9tJvo1VvfDuHPJFL+N9eys=\r\n=/Ws4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"85b1d5db9650586ff51d999fc12531d07489d13b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_14.0.0-canary.cf4292778.0_1647304121813_0.558554521999687","host":"s3://npm-registry-packages"}},"14.0.0-canary.bbd43e0e0.0":{"name":"@material/density","version":"14.0.0-canary.bbd43e0e0.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@14.0.0-canary.bbd43e0e0.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eff1c7928a82b9f87244c0ccf3004dde8a6138d5","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-14.0.0-canary.bbd43e0e0.0.tgz","fileCount":10,"integrity":"sha512-EIcmA3sPUA4a5QI1zvNRR0p/P4UUbZuord2OqSSTbZjSx4mtodJTAU7Bs5FnjxavjGcncE0b4/F95uTuppNY2w==","signatures":[{"sig":"MEUCIQDghyScl76l17369t29QYyIRLkg62wn+hs6cuGguK8LfQIgWaC5gPQxvpZUUvjXi/g2KFoRj83TYzJTcOVSCaOmdYY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiMk1GACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqqLxAAlGFQi1KOuhhdPUzaWj5a28Ku1Rli1pF3U9FhRf5z5GOjeTfu\r\nstxcTu4g/rqyGGP5PXQWcds/7ffw+qkzXQjCjk8LnFMc4xW45CbfSWDD/0uy\r\nd+yfjg/PZ5GyU2BiFsHwGJj93wlI2MQP2sYxtFe3Dpv8lEsuOGSmb6aCbWof\r\ngVVfXz1Y7UXO6ZPcgR/gAA9nFy/iikl9QBlLwasAWQZD+Eo/grxr+1vE7SW+\r\n/OnlgNmcaG9+qj3hSIRHSMbS9ib79mRf9o8PiAzCowIkImsAPFkxz/I3J440\r\n8KBItlnZKt4RwM1bxTTgM/l6C21N5q5TEabvBTA6/ch3nTEhtIgnkctcIbBZ\r\nHSDAyvW2hltjQFt5ee6jS7XzWVCbLfrEKhPMb1GhwHRVu9UXeP0hTpzoKGGG\r\nb2brPcwXF6xhSHzjZm9IwaW4yJ6Usmh9YAnFLVeOHSZkJol8ZDJozFgcl7Eq\r\nBu+NDWAq/rqEVPcAXKFdWITCY3RNTAc4hgaO4HJtiLa3IpvscDuufQtu12yL\r\nYt7yETYsoiTgIGmDH/ji5cNbroXcveRTVPeLxN2GCJe/JkPqTYVEp6YJtY5s\r\n2jEFcR0EcP/wizS6KrsVdG2C9zBLCULMvvC578Q7vkyuVMNjPtQGW0+gswkf\r\nY53g+GjqVtwzKPnQHCLp5yxsCh3EtEVI1sE=\r\n=UEOH\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"bd60ebc6c6267688058726d6f98421b0e815336d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_14.0.0-canary.bbd43e0e0.0_1647463750811_0.5992808815253243","host":"s3://npm-registry-packages"}},"14.0.0-canary.1b6afad86.0":{"name":"@material/density","version":"14.0.0-canary.1b6afad86.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@14.0.0-canary.1b6afad86.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"db73c5f108c14540964b3003c8ef2beada8b282e","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-14.0.0-canary.1b6afad86.0.tgz","fileCount":10,"integrity":"sha512-BRJdCAj0/lfU7ZjA5TFaaYG4iosQvLGvLZgNQRBS+Z3V6ajCU7DkrzDuhgufTgqzuO+VLWtTc2XOppdO2TZUgA==","signatures":[{"sig":"MEUCIQDlp82n6JfvXd8juqduHMSw/rDFRWWplQals8yQ80f/UQIgWJL5iHwH9vP/r/+0SSI5G+udOksNOaOorPfPara1zJA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiMlBzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoTAxAAnPRZ1CQEsrM4NMZgyjDmOYdCWXVrS5Lh7/JxlNzAfnxsIHo7\r\n8wgQcMPgDH7rQn11v4UbXFtz6IGk0kjTMATLk577VkyI9vTgHFHeuUqYaULy\r\n5iTFJHgp5eFV1JnKe3zDeqMuKV53IYSBy7XyKT4pD3E/1VJ3Vd8FYpmd4utf\r\nV7Gdy0DY8knk/AQCYBrQLHnUDd+xOnPwgICzTDxczZ1JJUihtw6kZW7JcoAn\r\nW+8ippQk8QDl446mqIfH4PAFRzGFDzkPVBvPCfci/dvIB9juG6GoNjWgFswP\r\nBJt/m0aGsJXCh2UZCRKNXwJMzPbzErlfn4Jc0JgPF2XoaEBaHDF38MoIsVfQ\r\nXIURKVGSKyGJWoZk8ozWe1goDvDY6CUTXYuyvuHRP6kLt1zt0Q/K1utJMybj\r\ngvH1dbfNcJvJa3hUWzGvPGOFfs+piiLM8Ko8It5Qv+zU7DpE3ku7lmFjxzcy\r\nIHEkkOj3jWAQaCHhiSbp9Foxa5efMyrnUwQYCSSV+K2QjNB7foR4h6sJDirC\r\nmY3VchX4RXoXuOlKm3R1Ab9t5FRTNfOq3Gw8YHpZ5eXaZwL8GB5LdAaqlvrP\r\ngpe/9M9Vvmo/7/RIczI8wEYHz8Qb7V8cJl9ATEde7f5mC8LglTQLvtEedm2Y\r\nHXfAgofDKLFooAMF/6S8/MxyahqUl7oF9GE=\r\n=1Ija\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"5e32cc72145fa47fd2155c83c81cfa7ba5e27db8","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_14.0.0-canary.1b6afad86.0_1647464562997_0.54628840948591","host":"s3://npm-registry-packages"}},"14.0.0-canary.bdf9d4af9.0":{"name":"@material/density","version":"14.0.0-canary.bdf9d4af9.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@14.0.0-canary.bdf9d4af9.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dbaae3edd73d6d1c9d615db8846594e8ac95684c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-14.0.0-canary.bdf9d4af9.0.tgz","fileCount":10,"integrity":"sha512-VpRCxYRRQmjHYtl3YCgSr0dSClptrXPCBRY5Gagurh3cDWo1M2FI7+bki7IXZPXeAcmbH3hm3Zqwt5Rt8UzUEg==","signatures":[{"sig":"MEUCIQCmZYYvByj2g8HBVVjZX9c7nPsYlU6UU9j00cKfH1qv3AIgJaY79XAEPIAJPb7QeffFUo/aRevZOs9W3bluio8UoCg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiMlPKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoKYQ/9GsDMzsmD+E19HmZZZXIdqX1xrASthbaAbPcOu8NcC7voll0I\r\nQCs8u1Oss2MGMHdVc1fvFCIGVFAgkoOhFrht3BjE10hTC+yGYFc4VjPlmLRW\r\nHD/XvBr898fVUtsFx17alIY4sZsF9/sA0CiwqcM569M+dh7bf7FcwHHCF5ZT\r\nW9nyCep54NfYEsX6Fh9KumQ9ylvoyeqMr+7SSFugGHMA7+P4Kk1E5ejAMvDV\r\nkYmzfMXVpE6Ihhk0wg8WWk6LndMC320/ETV1GlAcRDOMV84JB4AbGOxABHtF\r\ng+trd954Mcu8gA8QdGuFoxWhtSL3ALryLunADaAxJK4iloz0ciS+8edPZu4i\r\nrudfDKO8kCqLTylxh/UpFeFR/UCO2PvXG6NQAB+O4C/Pk9TATaKSoEdF/as0\r\na1nhyFIkZFLTozk781Qq92RcVx+KAGjihjbBMUml+563a7Utf536k2G1RKjC\r\nG467KuxSNGOZx5pcrX5pGCiuZNZMhovyxUxeuDIJKx+sGY9Xzr9eX49w36Ml\r\nEWi8/U+KVtZZ2xt0BlAcbSrbI9BaC27FcMJ1Uuu2vaUH/gEeCODaL+zkSPQz\r\n+Lv107tCd1mADQTn8CRbTOUdL2/l4ArAAb8iMM/ZXQuE/UC+pVTUBDgLeTnJ\r\n08nuPtAihUW8qfSkhCMXLnrboIVOWLRShB8=\r\n=AWVZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"413f4cd271111f1b118401821eb4bb38e7fcbad9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_14.0.0-canary.bdf9d4af9.0_1647465418034_0.8303884113166888","host":"s3://npm-registry-packages"}},"14.0.0-canary.32b391398.0":{"name":"@material/density","version":"14.0.0-canary.32b391398.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@14.0.0-canary.32b391398.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5d50baf9969a7611aefc46e84cba5f6d041b8014","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-14.0.0-canary.32b391398.0.tgz","fileCount":10,"integrity":"sha512-T5TH6jkDkPtZMoInqlORs8qQHxt8BC8PVZo1ZR/zJTyI7Gv+c6P45212YiyHCZtcFuFwghB0EPyIE7DWOZ65cQ==","signatures":[{"sig":"MEQCICCPWPVgfoNgoNZ2iz3C5+STs++u/lNUY8rVplXmzHB3AiBS+MYZhXgz2GKSMH2NPvNY8vuLXOAByXKSe8q+ZobaXg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiM3a4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqsvg//ftf3EUM879fGLMewzF+sfaAVlnlU+CYupoiVrNyBQ85Em7C3\r\n2H+LnlDoMwFbLaFGRxfrjhKz5/lZJ/p+T0FKrkDusCre5qZVok4ZMGkdgUCw\r\n1PWdAxAWZOzlEfxLjamUcvc8I+ngWHvxY1WO8BjDrAovZOKwxBRdZYUIhEj+\r\nzTRut7PP3z2CY7bzSwNBQwIyT34BfNiqLLk5RW7TUc0yA/7zV/+mgwSKT+eT\r\nY38XI7zSrwsdBa6kzAW7yf6SNdNhiXixKhnSFAg7WZfbk4AklTkHaVV0cdsK\r\n1RiwpoBzOHHQMbs7VXiEFkEYozv4+eyJrP9ke33oO2s8IzQaajMqXEAmQp54\r\nOMDmjY9PQmcxcFd4+sbZ55mYMU5t3kwmrbOs/q3Xz1OIC7iyh0awIbaqVIg6\r\n1c/GRQ5km+yHZGzc7dcujjuMo6x2LnLBGxtE5SIJq7FpvayL12zhZ1Luy5kP\r\nuZlZgqG4RUmlsBh8PFJMJsu+CNVc9Wj/HbwTr4hneUIjR37nHcvZjkodN1Ao\r\nc337M+sj2Y1Y4fufmo8OmUrrGyY9n8ZPDtGZxqL9VF8NJN71OnKjBt2+K4sc\r\nwg0qf9NgemWhersnaqfKx32phGSCqlpyd/icLFG8RoSoLZ1p86Cpxirp3c6H\r\nY5HMRTFYpTEbOtRbohi3gbFkcFPdyl1HErI=\r\n=MQ9y\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"8a457bda7a5cedbfaee9da752ba2dbc093b45ac6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_14.0.0-canary.32b391398.0_1647539896083_0.5029835889361955","host":"s3://npm-registry-packages"}},"14.0.0-canary.ae8a6a3a3.0":{"name":"@material/density","version":"14.0.0-canary.ae8a6a3a3.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@14.0.0-canary.ae8a6a3a3.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8e970b5c44cce9dcfeb309f604b2ab39520151c4","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-14.0.0-canary.ae8a6a3a3.0.tgz","fileCount":10,"integrity":"sha512-7w4DnO64GO3FvEC8Zwt2Aov/17o8OJTEhYXGUPNkDPlRCduePX8l4nny1QpMloe/hfiIbxyOKBUqvdHgp+HUFA==","signatures":[{"sig":"MEUCICJ6MgMCD6lHSFwpX9dj3+U4v1e33CwIe5mCgfBuFGy4AiEA+QLS5C8EqFlXmlmPMuqqPXa9Rbg4NZqGr4B7u6c3lPc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiNLV6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqOhBAAjOLq2pGJlyFscvra4mNkt4j7bIDOWbOdHFwVx0AIDoIbsFxG\r\noJk77I+ZRUOe0MgtJzn7bUkw6XIU5P5vVzBz91XFGBM7VuYrqbiUrVif6S1f\r\nBcr9QjJ3LVSBFlfGsLTs2nNprqAOTFx++ltTuOiY/rHhAubRNDKuGUZp4zKe\r\nAm+QWDQiu/EZI8rfaKFGQhx2HnLZNab74fPo+GjDxDL5OtcmxvCM5UVeaucD\r\nJyjh4tECJ2ixkQbG6WGXlDcCHt/qgHu3Y9jdfgVG88v5ALuK6JxOMpsPW7E1\r\nAYmwCUPEW2klimiWfr4+1sBKgjfS6ELuBkY6lNM9liyV/8VcNaQCEU13Oi87\r\nr1u2AOl7ZhNo4voD+H/7rUjUxFmtLhEhY2aqSldCuWJKhhCQXUyEV9Q9wwS6\r\ne2wJGkc+bM/bhR5mvoyZJi7sjSbewFShgOFf4TUm7fxdqbN/diKkqMoQIcII\r\nFYUA3ttZnQjxyYTj7NigolUZtNpFiHlM3elZqv/nOBDzZX0v28Y0cZzRZ6u4\r\nSEqm+xJxUVRbQL7KD1cw/TIMoxV67L+Y9T0i2N9JtF+58WZCtte7t/Ycc6J6\r\nqVHhxMZ5psvNSooxTmD098Splnc5Z0lAo6BFh8XnmmCKJWlUwpO0I5/7zR4n\r\nB2rnAwJFmkmX8uMtSys3tZx0hhpX6UFQGOs=\r\n=M3lN\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"783283a1304f941e05b3ef25b9a589158368c595","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_14.0.0-canary.ae8a6a3a3.0_1647621498072_0.563094482732281","host":"s3://npm-registry-packages"}},"14.0.0-canary.cbd9358a6.0":{"name":"@material/density","version":"14.0.0-canary.cbd9358a6.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@14.0.0-canary.cbd9358a6.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7ac39525a04c4283853fe099ead4a77fb44b4fe2","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-14.0.0-canary.cbd9358a6.0.tgz","fileCount":10,"integrity":"sha512-BZ2hI3mXd7vxdTMmZaq0HyxczlxXrD6Cv4Ac8WAGgcVfPw419JFtY6yIFGJpdEDVgQ2pPF0QryijyPu8LNvvXg==","signatures":[{"sig":"MEUCIGbB2bPRQ0qxqG2feAFGH4TR35UY1nPRE3OUmtoAsEtFAiEAkcktU/em3zgQUtAjRwCyiP+QY1zCYScPub24bs/6joc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiNQzaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp8xQ//akEIvw9M6XDWBlDgLivJ+mjyBO1GE2+m9Mq4V22JGqTtcBuO\r\nfvzvd0zFRfvMERaYi0d1w0PrUWhJYGdtCaIc1B2gnDX0wO9sv6kAd+gi2nLw\r\nDE70T2CYHGUXC5fPrFrFcb9X6M+GMa1Zlr+YIJekWBQ0Q7k725AvoqZMAC7k\r\nDqveiBrT5jfekvtDkLl5OKkpB0RmfBYRo/8MGh75HkxwDX4AwD+6IkPdlFD3\r\ncLv0goSBgGaIlcKbu9yTMlOj8wcPvA2x3cvid7SPXAxT7cNBOHBNLXHEhQMI\r\ngEAvg2Y73EpB34NIcm/S6mRuoygIR7vrMRVANh+NJMqUMwDOj3GzE6HU6gMs\r\ncwkHSlYgN4cSHGOPCWu1gNfyflics2yUWGRfheZ8AOro/pqdHyMviGU+7EIX\r\n0nw68dXxO0nlNRWoN8VisuXlFPJkrXGW7KuNSyjrlAp0i9vum9ehCgVKRDjF\r\nh1lHMJNWRBUldUCtAT9wGS38bYFxzSnfJ4pkXx+SFPHRDnXcmD85LCcagHts\r\nXgSxaxNBANZAeLCaob9T4ytMrRv/nGQGUBzvNLLSTivF2XlrrZOrf0NyusyY\r\nzgadp2Sb/OGAvvvHhCLznpqk0unvqAYwTfG452dBRsvrIB9x2cQ/Anda2jhE\r\nGlzCcnkr1wPsXhYVheRg3chG2NJ+6RB3bfA=\r\n=QLSP\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"a4296a048e6aa0c1ab8e8d2cc6cb8321c24dab9f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_14.0.0-canary.cbd9358a6.0_1647643866485_0.6678642452585728","host":"s3://npm-registry-packages"}},"14.0.0-canary.dcfe49c98.0":{"name":"@material/density","version":"14.0.0-canary.dcfe49c98.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@14.0.0-canary.dcfe49c98.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7396dc4bf279dfcc89676ac35262f43499e764c9","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-14.0.0-canary.dcfe49c98.0.tgz","fileCount":10,"integrity":"sha512-mC8aODWo5MpWgxt8vsLDC2XVSbJaP2mSNFZun5O64ieOWwnXy1MroZegYe2XvfwiRCA8pO1w5ggZ84qRaoPiIA==","signatures":[{"sig":"MEUCIDNkwBBh/BQA3e2KnW6CrfBgYUii/0IP8oKd76LAMjhIAiEAojlRir/yiI9/SPUblyiGWz3qhyLXAYCKw4b5Y6qaK0w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiOMc+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrzGw//TWv68ADwU0bkfEUEtZBYdTCq25kxDjyyPLG4Vuq4ktUre2Sn\r\nx+xFOxiietmZcRoM1BRzPstBvDyFm4J9OuvGX+ImkX25BIvc8ERsVjt5IoS1\r\nyiTxKAUv19KG+0aMAEayLQwJFo0Hg96ocgoiF7a4OU1/Wx6+pfjJybrjuvAD\r\np9trMBUUMgHD2cdO9/OOv+i5KWyETnPzAfDfPeLk+UfgV+OoPlursLqooB6D\r\nH2mSCXHcG3ScL0F+UK3qzaPWeS7CeZ+KEjRk2F+fuC7Yah9DtxD7xpU4Uk4L\r\ndS6k2YLexU/grZEvU/eIFkv5GMZY1cgqmW/+lHzgkfByO/yAtG+7y9rdxnra\r\n6KP+r2jte6zmd3JftsRZugFjdlivepVRYS2SyB572Wv8o11qf1qP0zHLvT42\r\n4RUM8zI3IWjHeyxwgo9gOk0doBA6gAabU6lGeVkaA0MPblu6G4b53gVFQzsu\r\n4m1mxaEuHxa01TqBr/dDAfc7OibJClJqtAPmCqkqDJtr0ijOaGf4lJVolJmp\r\n+eVq3XIrmY26GEdOyLzcD2xnYc7WLmyJXK4E7dY3r0oIBRM43tZ0rJbnsLek\r\nOBQ2m6PEXV/97O7N4SXVRt9SS5FSGkCLHhiEVSFDELflfSAAzv3xlN8JXnxR\r\nnHQxVyxhu8GqL6IljqHPZP4lQdR614t92p4=\r\n=2zKh\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"5b68455eaf6aaf2f571eb64a1d8a5edaba58d37e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_14.0.0-canary.dcfe49c98.0_1647888190134_0.766643778685123","host":"s3://npm-registry-packages"}},"14.0.0-canary.f31a833fa.0":{"name":"@material/density","version":"14.0.0-canary.f31a833fa.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@14.0.0-canary.f31a833fa.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"76b55c0dfec3305e9eaa02f8347fb9bc0127923f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-14.0.0-canary.f31a833fa.0.tgz","fileCount":10,"integrity":"sha512-1BKovLOzW0RPCtHJkL6HS22K/m9I80aI7ra+Vi8HdxqyIkIqJfuTD5GtmiCC6VENl7WdB0uBVs2R263qnCGp0g==","signatures":[{"sig":"MEQCIHZUuORwqD2A8dWAZ9ByIKdwWTPjxoYmyuXkLX0UpM/aAiAH1VSyrpgReUubbFJXGyMzcQ/j3UDc9j8yI9uhgIwgug==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiOm6pACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo4iBAAiSRum0mNGp5CVdyFPVzT0eB7fuND1hftzxDvnM52wZ0Q5UzG\r\nRTW6w5GBxzX6VhHGCOpj8Cr4pV+HOV3KdbvnzRHfwNxYEvX3/k1sZy0s8dbE\r\nN9+IBf2LtaB0EGZK+M+I+RpghdjqkpNBcf88il+PgNqIVEwx+Jli8KnTsxWe\r\nwdLcvOiVjiCpkA+SSDzA591Ycxwm3z2LnXUc2YTgqbgW08y+T3B3/hfYqsYl\r\nmNnlmD5Myw3tPwuUTMAxR6WCSgQTWWCYgfa1OI7ZKi/HRjL51PcCAHQrVZF4\r\nEkbq4LySrtcBVLTD88783LFtoEptlcCKqwI1867xm57KOA/XaGJCTHnK8C5A\r\ntAUaBdrEcTHxfeHELtZn04qXYqtrhgnkyGbCkv+JwZxrJlFSpFnEEAp6IXMG\r\nHmrqGK5yg1dTeSA4DpyyTXU02QXqA/L1rYOur11JilVrpWfxOp7uehxAUwOT\r\nnDinI3ONzZh4ITCnqHoo2FwyJ0ABbKOEo4j5cYmydPicftikS41/VJYfsmA5\r\nvx1fiPepQ6ciytVXTU44wR6FeN2BhLQTMl8eh0JcptGwOCrFefkMnwoXPqwO\r\n2GuKxFXCKYCVN8TG0wuI7EG2qgwPMSy8ITxjjV6k3M+6YqNbHmIIV7WC+8S9\r\nFyz+CARddDEGlWZe4G/Xic5aoTQhi9QZgec=\r\n=pgnk\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"28572f217366c634964a133bbf0ee0b8e88b8126","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_14.0.0-canary.f31a833fa.0_1647996585543_0.5568976442199571","host":"s3://npm-registry-packages"}},"14.0.0-canary.4b92e210a.0":{"name":"@material/density","version":"14.0.0-canary.4b92e210a.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@14.0.0-canary.4b92e210a.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0085a7c2f4933e343e6c119a8713490244d1c14b","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-14.0.0-canary.4b92e210a.0.tgz","fileCount":10,"integrity":"sha512-VJn/3DkqbDGiPLlUpV2YOFkN97Nn9UPZDP0rLRUAMU7r/FuTnNl4eFHY/JmfNeXV7SM4EU3RD+bHJPOYgxEJag==","signatures":[{"sig":"MEYCIQCNb8pLGUgScD8szqjWod0AwcjqOlE4kkTc1Yj/BTJ/PwIhAJRt51Cl5rtbKPihiRl8Nn2r7PSPiktglmgRu01b0AC4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiPNHjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrQmA/+OnsBSEoDyzP+vdv70XhSvBURJkD7RuEkc0/LllYLWqnnXNn+\r\n6/PmDZ9Gjvt1bDmDENkA7MX99sRxSOopEfn7O8ONExTMjTclF0SuQuqVesvw\r\nykyLhtsMHdnlNRu6EuS+nsdqZoIsGWwsNqWNxReF1Y5V5eRPJUoPY1asKDID\r\n7ilSxqweZnVgPnybmmsps4YKrzAC0drPQSu0XVTSPb9EPQCZBLjNoSJyH7Uy\r\n7sl1k+8+XW5qT4QPYW18QZgLnRrZdVT3oEcfZERdc6lN+c8CMfgW4RXJUJF7\r\nejD4w7rNKqdE4oAyt8XS+au/MD4RlrIJUsywWbyfTqEnT5HPW2VNTe5mE9hQ\r\nP+7PTML6/MdgfPFGH5pLKe/zEfiHcRY7tJCjTv8K0WPr6ZT61sN82ZyjYhvD\r\n5hyiBge3PlKETliFgtZUbwlW/NtbFa27HpeODy/hG276XHL3BSA0+I+rKTFg\r\ni4/Fh7IweI1vxkV+BR+7ZHv+FyibyoSN59QUhvg3DUqfx2KW+c9+YEcEv5RG\r\nk/5m2THf8iorIY+bBzuG065SsruBUrcE1MFFVFc/bLogo4YemERofUE+J6jS\r\naHYdHVqn5HZokF20lk/KE2G1+RYpazxxAflGsfewIIHjq8HxUqhYob5sOD3Z\r\nO+5ucWMYIkxXpw7gVqwVhTe2409353ey03w=\r\n=rPxm\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"e9fc48f242a1815183c2b4c74ea1f8bb9967004b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_14.0.0-canary.4b92e210a.0_1648153059107_0.5588182293326793","host":"s3://npm-registry-packages"}},"14.0.0-canary.a657abb61.0":{"name":"@material/density","version":"14.0.0-canary.a657abb61.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@14.0.0-canary.a657abb61.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"99a6cb7183b9ce5a20dda287f08bd6f5082c49aa","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-14.0.0-canary.a657abb61.0.tgz","fileCount":10,"integrity":"sha512-XQRm922xzCYObW7IA6Jp57e1/aW4IHXLQTEX3++6Wk1pxg9yULWl2B/9zN0gVk3ybrO73uRiXJQ8fRwQqAb5QQ==","signatures":[{"sig":"MEYCIQCRhAVtaVLEAYQi7Md8eaTEAc+hkQBnXcnlDKN/iTmssAIhALIbUNe4owgUgBOvUdHv9VDk64w/2DR95j8FMeQnIO1d","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiPNbmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqHQhAAgneVDFh1NNWM3HRUL76ksVBAkRK6Fi9JudytNjsMs1bDhRt8\r\nQES/8BQ2Ru70d0X0e1ajRTfcEXrLv/xa+mV1EqRWG6KSaMMBIHpA8m48LUZ0\r\nvq4/KwqJ/F7S0wJet4YjI3Ur9MwWCUClfGH6/e+/JwF/cGZ8ukPqZn4XP2a7\r\nVChmUw5/kojiMGY/Yx5qWv0UEluWGsNUTyofMQc56Xy7WW7kNZKhS+Dweobb\r\n4FRadHaelD8KFZKz0A7S/LKgPVeMYorP48muqxfsVjdTxFa35tmC2MzgbFaR\r\nw/6oAPcH/3avYi1Dv2ZSCP9/QMihzhtKB9INI2cl064ZcvpYCkHU7kUew8GK\r\nAvDqoTcNeSdNPHvp1ViKe/vV0yikQqC2OO5dOkZO76y3uP5/LCQibUoPBn14\r\nVVaA06xLCUDj2C5vTgL1OVvFEad+m3rtX4DuprYj4WsK2dkzM73LmMTwdQyi\r\ng1CPom6kjGYpOt0ODOHEa5/aTsYEwpMJ6XI3SkZUXcHIWp3+E3aCFrD7A24S\r\nyBQ+BURiwOyEQGGJk0tY9P/WxGV1P5fnH2gVcMTjZz3HXDSba0dRHCT3iV0X\r\nrqrrcITyHj5pDoEyht6fPBT6qFeJUAgq8p0eUGV9+b0GZx4/EstmDrDOWSqO\r\nrkJhLIEITUbb/46HD5KHRzqeqGP5RgX5i4U=\r\n=19KM\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"b17ff714094456afc14ac1ac896e38f85e300743","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_14.0.0-canary.a657abb61.0_1648154341668_0.47229504141756706","host":"s3://npm-registry-packages"}},"14.0.0-canary.443f63f50.0":{"name":"@material/density","version":"14.0.0-canary.443f63f50.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@14.0.0-canary.443f63f50.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bd233ee92808b0590a8823b7e5066708eaa43b55","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-14.0.0-canary.443f63f50.0.tgz","fileCount":10,"integrity":"sha512-CKjduopU0s3+NuNAwSTIfUn9i8WrdYTl1h8P35/h3NSz+gQKsGSHRWAWk4OKYTRAXlkP+Kh7DXuRys+4wmu5Dw==","signatures":[{"sig":"MEQCIFp15OZhEr9N372U2YmjeHBWuQ0Daa+MZ3lgRKlG+2YxAiAnfn3Hn0sqxKu6dhItBi9ZCoqFO4bKZMSu+8oszYKNIQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiPkpOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrwrg//VO8+Ks4x817tg3oE5Uzg126qUQcTV9z5WJYMvLubM5x5mLch\r\na51FtulgSjjLHnh7JANXf97pocyBoOJIOi2pNi+mg73S38luthg4yUzCvz7/\r\nf4R4dVsTLBEHuU1G0nmwSbWnb3+5Sy5psBFvWZeHrU09iu80S51yLlhfM7dU\r\nIwezVsApNYTMDCeA3VYjT/KXyvCzNtHkzAW2ndQiyIWN+VHoXgL63362IVpy\r\nSuyHk1C2hV2N3d8VeXqj5m7pgcH4pToyNALzQVmMu71vlQ/6t+Jrh9iQrZhd\r\ncDAtqN0liKHXB3UdkieU5wXkQEBNc399YxMsh1iDjIDo1aQrgyvk1FZ8zfY/\r\nUVvf+yrBuJehEltDzvGVi8Qloch7/yV0uFuU7jU6+RJau3DagRBoA3TOd/qu\r\nIPkPBHOR0YDn7BjAGJ1I9zPnLloJafdEkfkXfZ8sdele9ONtlFip2/UcUdgq\r\nujm46wSgcNwTfQXP2izfP8cK0et96EkP1EcpIWm+I7/+RQUp57KyhL/DR68u\r\ncFaS5YzhbG6jcQL4t0WJ9KNKx1KY+2/UJN25Apl8+AnYppN6UjDqN/lHpaUQ\r\nI17dDWKoJTuKSEXiuAVkG7MX7WMzAxXySCZ/JyvbPa5KMeoa/ZirEENfJvXV\r\nKnAG0i1B02r1sFEPsxsqH9oGbsCgxbUcdaU=\r\n=bxgL\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"0a9e4a4d027bc972dd036582cbc94abd30d3cd60","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_14.0.0-canary.443f63f50.0_1648249421965_0.3803239149123332","host":"s3://npm-registry-packages"}},"14.0.0-canary.eb382f318.0":{"name":"@material/density","version":"14.0.0-canary.eb382f318.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@14.0.0-canary.eb382f318.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b42e1ece1b289015a8bcf21b1281c36c8c784586","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-14.0.0-canary.eb382f318.0.tgz","fileCount":10,"integrity":"sha512-gH95UdscnWjdB/4VR5K1rUjZ5P32XvBcZgLNwGrO4lhcuDaVdRCc/q65VDKnT2GU3U7c6Y4ouIZAQHew9eTWIQ==","signatures":[{"sig":"MEUCIQDxXaM5P4L5iwbVI28ltPV7sKQhVcZLR/gat2huRfS/UwIgJ6vWe2WGUwrTxhHVVuXCkQ2ebF7iyM8LEkJfswucyoo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiQ0MKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoouw//eAQXZBFlUt67MaVmnKWe0UN9L1Uw/zlujgqiXHYEU+ghrSz3\r\nQ0ajuxCgbAn6Xy6xU1UkxndJEMl1nE4u9hm60pKVEj6skIMzXbQ3vUa1/iCa\r\ntHaqXduYnmBQj+ojOTEZlV0/hIA1dn6cmn/KW9RW51WARdQbo8jNXIDeiwxy\r\nOKTVLfa7N9yifLP6kavjaSfyFcvcRDf/SVSRlhzrUeFpKrmUDNolavNDkub5\r\nuggDuf6zbAEicDOr454nQfGv/EeIi8N2tMGvOoiLmE81rfSBJzYyp9KxW5uH\r\nvFmsDq29/Q43HSfMMn54jAvaSNfORURoR12W6hfCmgAL+sdGpR4yxqtPZ65Q\r\nLkkWdec2HKRjhq2Go/d9yem5dRlr980JjCALc1PkQ9iBYaTuralaaAn5hyjm\r\nAlnOyef3hVnhQ3EQF9PX2YlpAXE6uQBF4nKnPYCUqOlmvVxNvskEGD6nXMF2\r\ngLKRZkH0eFWyW18q+wpq6enh6q+irYwm70qn+j99PtTwkIAORu2ogcqPY6fi\r\nWdEbNSSXrL4dMTwSHpAF6a1JvhDG+BXMYY7OxpfNb0R37wVceg6EMtVubPiK\r\nnYUcU02lZdSL8YT0pcNYfv9DZwj1PlCkdzMVAnwlHxibiha/T5Z9SrVD+Ibz\r\npYnZAIO9jeWvgGI7fzxvDZpEH++7ROmhYXE=\r\n=3+wz\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"9aaa59e82abd1f56fdb3d963213242fe4f989c89","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_14.0.0-canary.eb382f318.0_1648575242095_0.4795479278614152","host":"s3://npm-registry-packages"}},"14.0.0-canary.344d52823.0":{"name":"@material/density","version":"14.0.0-canary.344d52823.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@14.0.0-canary.344d52823.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"016331199fe6434b7d950b28ed58d82afa585c67","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-14.0.0-canary.344d52823.0.tgz","fileCount":10,"integrity":"sha512-kH9PpHqfIYgoaxnxEKSLc9PmroVQjx367YgoKHIAQ1lwN1C0nrAjax1D7gpeewM2jNx50h8i/1bUy2VYZoQRxw==","signatures":[{"sig":"MEQCIE4zM0YGCgyL6MVNNLwHKYEZL4ki+IIiUXBw4vbkQBtIAiBrtMw78xDcMibRB9yczLixYWmNWC+HfUkJD0lHwbZUsQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiQ1MNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrvNQ/+ORcWdZlyzhKJz+D1FLoNPgnnvjKJlbW8HqTmizWgdybyHQBf\r\nb5Ut4tgPzDGb/nFv7ffHE+FrLdCiFcq7ShOJ+j3uFsNgqZCaMbE8hhfvsvUU\r\nC2rLmXxixYwO9vbqaUChDm1cIlqkcgs6wBOw3pGKqtFx2Qj394uIH7zSxfix\r\nE2mZAAm3fSwDNImEhtfBJFZ9ojrFVzYDgmLEiRNlHMIpSefqBOZdrSZOTMGP\r\nX4PvA5wpIONpI8NEePEkEq38jIxLjQVDCqeGf6YW5N+G0dN0dlqfak0FSQON\r\nEKje3/egAtLxrWU05bSKAgTiaQ0o1QFI18+RrsYanq29wDOhATfhnVwDaqa6\r\n3kNCK3agUSQKisaVfp9CU/npM08KU649zZqRo56zMzVgPZzwcyYUnEM/yYJb\r\n2v93CRurnnj6xyV9L6zTt+jx6Y1Lts+P7FUC297Lux6JsZ5+DpAyn80K2IR0\r\nqQ0FIc3puTDqPlic3bxMDM4B0pFxXHsA/quBKApCuob9ZQxevTnyEmpZSYML\r\nkajMwIdELmUah1xwlFPJ9WNjiMcbFeGarZHzIal3ViKJeq9b9Ste/g+PFK/R\r\niRZHsBoKTvsa29Jut3psvlbFS4cVcwTF7smGCcjXyYYQEN/Kx3jVwTMAZojV\r\nNldi5zSLC0nDgQALR+9v8XpVaty7BYMy+u0=\r\n=36Qz\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"1d0b3e3b77ca281daab88499a03131363e8ce97f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_14.0.0-canary.344d52823.0_1648579341015_0.33566177463235913","host":"s3://npm-registry-packages"}},"14.0.0-canary.4e372fb49.0":{"name":"@material/density","version":"14.0.0-canary.4e372fb49.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@14.0.0-canary.4e372fb49.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7ca07564d4540d187ecc074c9921cb1d7dd594d6","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-14.0.0-canary.4e372fb49.0.tgz","fileCount":10,"integrity":"sha512-dzx//5PAOHkSj/ucXtdHYgfp+jR5S4b4G9Nlm+TpoKQDjRmqm33x2wN+T9pRcHKFU8vQj9qu0UP18PiXNwYhzw==","signatures":[{"sig":"MEUCIQDl+A14f2zi4T3leHc6OcJbUtVBxLgIcnIOj6kOFW7/VgIgHbfzBe/V2HtVB+pRf4FA5dw3l2bwglU6s3ZZe70XzDE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiT0o+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrV4Q//TnLCMAfhd3YjKsyfRVEPc9RSYg9wu/XBevzviQPT5SKOQsTp\r\nUV7+A6tlQOpVfZByc8Vgu8skgCTZOLlBdAuJyStjkptupymKMeNubZ1xPA0D\r\nTnNd+BLQqAoTOQB3j28ugRKe1gqmiPKdXew8M5x8SsJEj6gRnSZl78rifMwA\r\nPJGvbMsHL/UGGxLoXBGOF+HCQU6VTaugNAQMLCqeTbTlwVyWG35Ek0tOm1LJ\r\nXKQAw7kX3DlpiymLWJ4oKXVkXK+K0SZnhY/uBE8xTgukuBveHC4ei3rw2BlP\r\nDBdUQwrOPVA8orpoHf2qByARKe1J3F79VdgJ9ZwdeqS8MxLFrtLWLoWGeL/x\r\nSNvrN4BL9Wt8702pdyEw5x310yZpXnHb6I/gCs2JpmlguOg7hPvUNC7vPdh8\r\nC+rvhlVA2mxBmeuXEOKyLepJs71hwv/L97h21zLoWwhu8uKlIu02R0N7TrPn\r\nfHHMAg0uGRHd4pmH6K291EY+VtSbd0fNkE8rzLPtMVk4AgnjBImmgxbImVU0\r\nFXALizdgbJnfdfOeyeLyHUwXOAXOA5KbhnHChcdzFP9UOemZUMRieVvCUL3W\r\nKcRjbgYeLP5dWKP2g6kl9YDtAY59ZkCrHtW+j3e9H73gQIaFZaga5IptQzfg\r\n3fisQGqb0zPqHs86Rz7y84NRdUJPJd6WaP0=\r\n=FzL4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"013d3cd7cc6d83c59581f40ea832529343f43047","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_14.0.0-canary.4e372fb49.0_1649363518162_0.5480865469149561","host":"s3://npm-registry-packages"}},"14.0.0-canary.3e30054fb.0":{"name":"@material/density","version":"14.0.0-canary.3e30054fb.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@14.0.0-canary.3e30054fb.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bc0ba6b3c287d40b0eaf390040bdd79108f65f34","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-14.0.0-canary.3e30054fb.0.tgz","fileCount":10,"integrity":"sha512-gK+bnPTSQTE1oJN8CsQckx+7nHNbI7t/03PHWYkfGOrS9ME4H4GIRyAk7imkHod2zWYjXkeyyat1no9qJM1t9g==","signatures":[{"sig":"MEUCIQCfNgnTZTVLsCdX8yFLe2vbQl71iFMsf2KHOpE5oGTxSgIgMxWWHbP9PpvFir/ZDQwSCFOGXps1wWvYD1mPCZ2UESM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiV0r8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqsbw/+NKXlvy098naWn+MARduSwRDRCWL8EZj2EoS1BS43wJYc8y0F\r\ndIwAG1qEvkPTIrv7CHZsQu5d9UVTyyjtccHgy1Yu1JpatAc3gKnLJvCAK155\r\nX+2oK1N+FdoC793lQSuBAZm0aktesi0e4emgkPh9eBSvFYV9DgbwjkOXuifD\r\n4b+02GUs3uFT4+ym0f6mvrA8F9WR+i/Y2nhzQkgHzhUGP6hXt1XLRnA6Z8o/\r\nNhK/e7hddpyj0ad0Ry5ID0iHLkGTCOVsId6MoZdQcEQMKbgqQmfPZ8zVNRtt\r\nOE9wS6+WZbvAu/LGNrx4bosvksT+gOVAo1vp9qNIZij7MTGzHFCkEAx0MIEW\r\nKcyHL1+Qc8h8va+QNwm/nvLwo5SoRj3SZjLRRzMj9Dm3pXkQkKEft2jyNZnu\r\nTzb9E4EnwGkDZ2CXgYIwtHKnle6qglFmQBFkWAB+q3CS/8xHGEnyXaq4gcvq\r\nx/nsl4bgiE+Ecfwq3JqRZymmeDkDVpsTZjOxgI0tzwgUwgtJfd68huwCb+o8\r\nT8QoQ5IsbAZP2oWFQ9V9Ocr4oiwRGXLEiazwaVgvD5Y6Ked1tsSFeR3n1Kn/\r\nMAsKrqllY0ZhkWAEyd+1wsILWeZs8omD3RjnGF1hzLCmE368drwaQBMJ+il6\r\nRawPP7lIwf40TTNjiVotMcFnCgCqRGQq6b4=\r\n=ZYxa\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"04d79139861b90bf3488ab3f74e4bc33e6af1c8d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_14.0.0-canary.3e30054fb.0_1649887996358_0.7889799645666464","host":"s3://npm-registry-packages"}},"14.0.0-canary.8c4da223a.0":{"name":"@material/density","version":"14.0.0-canary.8c4da223a.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@14.0.0-canary.8c4da223a.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e15f982102574f713d541553acf8410a68ba3e01","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-14.0.0-canary.8c4da223a.0.tgz","fileCount":10,"integrity":"sha512-EgcWVcWUzE/w0ZhQby7SOcwzyQl5VNrJeX2e3NPe8bbPK54ukQv8DjjwS0KCYLwLgV2r1M8OjdCK0c/6UD8Jhw==","signatures":[{"sig":"MEUCIAnJjWAwmmP0hfHNpz8j25NZNXT+KmcrcFFwEwLEfRR8AiEAnzEb7xMRH4r3TGiqDzhM+OWiIDzOeYLRUGEohE1ciNk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiXtPjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmocjhAAiWOkYBU6ZuJ10/gfejWJoY+++vkcI/EzZp7WqcVQGpcC1veq\r\na6XG47frp6Ztlf+I0sNhSdkGyJcPDKHzIkQRld7Z6n4P5D2xPyskRz+8zu6K\r\nBkLsLbM4QaX/Gh0gNVQF2nAbGmZnXpruZLzXiFl5UomyF9D6AZD6NRasQYVi\r\nuwGbWTIzooo1MNZ2D1cvwulcKxpSmO1ipXRagoCzEdwp/H1+Rna0oTL8EW0l\r\ncHDEYqLtlo+PwnJWvUEMp7maUn7QgG0LUslUI8i6/IgMdku4FR6/0zKbg5e+\r\nsHm5o0louXrK+eRHlr5tPQ7DLHez9bSdu1oeJB5jak8T2h0ehSMelJ6Fe80p\r\nclLdw0UAMDMQVzXJvT771yKA/fTst6Zlcbm13UJIXFc36qz+08k0CzB6bot/\r\nbBuWykBQDRPIQFixcz+XUzkdAIRe5RHjU4IY9YKFustpsRgSzzyWI5a9uITY\r\ntKvLFdfg39X0U2zPISFM3qjWnFlHrOGAEApQZjwlReqRLhbloVzfae9f7bB0\r\n62Odfy8bu1xrsfR9dbdigVy4uqMLJ4GVotO8kldTqo79twoyZQV0QVtGsgdW\r\nif9Tpyp6q72iHBqvmPsymshrhcjdXeNZmvsxR0vbRHURkXYjpGkhkYzgPoPY\r\nIlUwDhcnERn/dXm1RheRcxtPfYmymDppVp8=\r\n=c1vT\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"a5f798a752de150dd0a004bdfc90979ab4185d1d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_14.0.0-canary.8c4da223a.0_1650381795611_0.8567683820731964","host":"s3://npm-registry-packages"}},"14.0.0-canary.7de8965cc.0":{"name":"@material/density","version":"14.0.0-canary.7de8965cc.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@14.0.0-canary.7de8965cc.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b8c178b60c1b11af47b7d3284b0d127416773db0","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-14.0.0-canary.7de8965cc.0.tgz","fileCount":10,"integrity":"sha512-21BEZbiawuCTbhVwCRiuPVu5vUEeXfd85K2jufhToEMxfvMcs84l0J+ud7O4VfFgnFhNlBY/O8bX2oBDbK3MEw==","signatures":[{"sig":"MEUCIGbinLa6AH1reOpKF8MAf57pgyHiWrM9gZMz/FpMER96AiEAyvYJYfDM5etKTM8hYLHlD7jcsav9a+0AJtKEOkCGZAE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiXxoBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoU+w//e/rXyPKQi2EHMstuDS4UUL7upA02jqQHPV8KCNypNWu+84ak\r\n6fGWjBFWNnenQydj18OTKJOKBQ8Eez5ZnfviYvM3T0iHs0bKQt36uf2IRzyr\r\nln8yqCf0qusiMbnxMC4DN8h0yrFXQvNg4brqy0hZdUQAbFA8Vj7kWS2griEG\r\n871hdbjMXxKtgylcRLJF9Nyj3mgXyu4075cMbpqfw7NraWWeM678tPlpjDrD\r\nLV0aVBLO5D9uvBMuhVQsbJT1u9HoRg0ok0n4QexDLjlOAMvU9QwtRIh8jv0y\r\n8RrjwsOt2gDGYgweWWj/MkgNNcKylZdXeqmKdbuWlTDWVwaX8whTW/5tVYnE\r\nbRoHVgb8M1ZvA3PZTjJ+WyazEFq6hxu2labUyXSARdYKhusTLLqzxG13dVhC\r\nktW/X/zO0VdSa8qbKYvmSVrzH25Lr1TJojl3oCCCN7nLRuduBh4aBnjTCWeB\r\nQDHJT4I5/NjYKJsw8ni0WWCr5/A2PtIghA52GyFK2xl7wHNRY/BjskUhuu6j\r\nJh8yDAMGJhxKrdg4sADAEh9c9VXRGtVnZePVCuuniW5FUL3irY7Q8nkBynFP\r\ni8lGPFG8yaH0Jry31WYSOa9J/WbETjNMPpN+mHzShbCyrqCaAmAqJdsqIiwk\r\npbLvUaKLKZz9rR6GQ2DbF+hWOD/aWXB8dcQ=\r\n=jRLc\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"538ae755c197f0d9a1fd3a2cab5000c498987584","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_14.0.0-canary.7de8965cc.0_1650399745613_0.4987688657527092","host":"s3://npm-registry-packages"}},"14.0.0-canary.641ed0851.0":{"name":"@material/density","version":"14.0.0-canary.641ed0851.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@14.0.0-canary.641ed0851.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aae13761b1b960cb0d5c80d8155ce9d259ee3a2d","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-14.0.0-canary.641ed0851.0.tgz","fileCount":10,"integrity":"sha512-TzDQYf6EfkKeP6U1UrhS1VETyk+z6A371C7OFW0F/L8GgzBOzoZCdAgpGrktFTqfVC+orTyM3esV5VFMBYQZ0Q==","signatures":[{"sig":"MEYCIQDKKStX9bdeWewYwIO5ekBI9mC1+NC9vDEhR7dIWyUdDQIhAJvLKyRh3eebxBQ4iWOyXq3pSw54eIFuP1cKiy8FxqVD","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiYC8XACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqhURAAg7qP7YvubHuoQchys5lv1AGRBP405OdSQLbv4+xQn/oIINFW\r\no0j18xsUVws1y+vve67QLLf3+ecXaUeQGladFdRSLUdbAilbLNltvsnhRarU\r\nP9pQFHA/26fZEqOwHge5daqkSCsXysO4W5l2XYkl4XzzFayezMYOXd9d6D65\r\nCCOcca0BxPo+Sz/bHLahD0NqgBx+I1b3b/LU5r/hOkIHNjiD1/IWVnibF5h2\r\no4jJ7MEuzAT9gkwWvkQWQw2sozqn7u7WkPxFFRDTBdGbNLJC//afUQGwzsoK\r\nL8K4NZ1X3SinsbSF0eQ49OCX2nAbINvBEWVTu8wCNYr4Ke/nrczNWpTwnqCq\r\nxfWsRaT0TJBxgYDieiiFHXMaCT54A71VxTvFLpWScWn07y0W4DNo4Zzq24MX\r\nRm+vHActQR7blqbjLI+n4r9qkTGwqS9juuk11jVgN66AO0WM8u1Eirae1o00\r\ndf+Qul+VapDuKjct10KZiygM2gZo8KSrewwZaR/tWm5DXF61sw37Ym2hfaTh\r\n69XExDN4lAxF3313bgaDS6kS59IxREGg8Uh/ysMebVfnV3QK3nLGlw//ZaXv\r\nk/xk39c7P3wK65kX2kYHj7lco0HBSbd2Q1i4WQYsyb2J3+Xj4iUJfcD9tQ3Z\r\nb/W05RWfFoFxw7WfBfyrevsUXG6CEFPaeaA=\r\n=yWan\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"b45ef0f6764b2048f5027d4990cd48d6bdce11ec","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_14.0.0-canary.641ed0851.0_1650470679486_0.6787697867511273","host":"s3://npm-registry-packages"}},"14.0.0-canary.e88f83024.0":{"name":"@material/density","version":"14.0.0-canary.e88f83024.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@14.0.0-canary.e88f83024.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3d25cceb58f59a09609a23fbe64192f00f399ac1","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-14.0.0-canary.e88f83024.0.tgz","fileCount":10,"integrity":"sha512-H15B41xKdN85fLKOU4f9AULahOYTLh43kRjHnS60tflKc+Dy7uKjH1QsT7ILbH+UqB9eFGdACq+UN3Hd9bu6Kw==","signatures":[{"sig":"MEYCIQD0ilrBpIX7UZflEPZNW+iQQ9NEo0abfQFo5h36OTfgiQIhALVTdYMsVKxDBJl5qEX7MSM+1tHZLRD7MttMO/VIYItl","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiYEcCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoAlw//XdkO8Qw8kMWBDafcSf8bvhJkhTr5BMymePLXOSDcXEYmcuRT\r\n3LCqoQsXGNfIKjgFQk9WT/30+opNNL0CCFe24KRzXOUbNRGdZUfcb29s4yFF\r\nbaGF4Z/sbzOWILntptzy9fsZGuiB87PWxAjlL5/vz0GDLKS69ho0wE45s9cm\r\n4eX13UvyFYXxuNpvvkfwNfrvyN7nac+e9HSb6jmpLhQPPWpvEjQaP0QrK9NR\r\ncaqVVOxmDTLjixzdDRFM/ePSpv6GT6C4UMq+3UOWcKyeJmGGWFje6QJhNoG1\r\noBDvvLAvSNooJYWJE8SgIEGR93IYg0V1/igiCTn+pWvIoN8sB5Amyq2ZCwrv\r\nzkyFnt3ytj4zHIeMe/Mo5cLrUgPwDxqaO1ayaDEd7VD4qS5wep7fEkw1FcSM\r\nQ77hXp+Ixehg6n9bh26vdzl2wNfHJ/WVjJPO/J/NG6N364s24ItozWddYgrY\r\ndsQxS/HGt3hTsv4oIk6EBlkjmjp+vUmKo867q8GBkBMHAbJWKQgfVOuD6LQB\r\nQ/Rcyr0RXvpB/tEy1XSoZGhsB97RsrswTTCnJtRhrBGZePdUw+7m1SGsouOG\r\nceqhCHu9aD1yHaghUsV3N9mIQ+jTu1lm+UrdueMmSla2T/BisSr2KYC430rI\r\nhx9VrY5Tnqi5YlsAXV46VXWQ5vgh1TgTwWE=\r\n=LLPN\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"e9fdf51ad2ddd3dba754b98348bc356126b5640e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_14.0.0-canary.e88f83024.0_1650476802723_0.5385985774091173","host":"s3://npm-registry-packages"}},"14.0.0-canary.7321d6254.0":{"name":"@material/density","version":"14.0.0-canary.7321d6254.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@14.0.0-canary.7321d6254.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"04851086feaa07c6c5e3763d48b49a4014e2db7d","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-14.0.0-canary.7321d6254.0.tgz","fileCount":10,"integrity":"sha512-qF3z+WmM4gUmtxVeiQ9CW55oyslRYg3chZ276Bt4O/SXUibXh3haoahJ5aE56hYBihSSllUPlFVU42PrKC9llQ==","signatures":[{"sig":"MEUCIGrezcblFwQLLHgpifHsva5Vso67dqCvJdsA9jfOqgegAiEAtLi0LZtxDxxrFW+BmKUU3F0+0fV4yCUVLmzncszBUaA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiYGioACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoz1BAAnuD0I9SKCDQF68jcIdjdCbxF38tLmhmzpqH8o/d2PKMj5T28\r\nz1LKjnH2SFgPN7yILTAel1J/ivNJJzdK5C1aHaKZ7mynjJdfqliV0Xka/fVh\r\nvNNtX9wJq9w/Vnqnp2L6QwefPIXMxEcqzh1VJiU3oi/4Hdfn04wZK7cSFlBj\r\nQeIL38GaYGcjFDNNMQnTauH78ck1badAa1JRTuwkFlpra9XjF/EloXe7TVtt\r\ny+SsiACSAyfUMvuZYM3kXLNxFKl3DazSio9KjMv2HFs4mzHdLI1IPw/1geXA\r\nVfh1CSaYkIxHYV/X7OyIqKdi46WY3RwSJLHncR7ySLLBpngTG6ifKSqrYk6g\r\nloU2gM4xxrlkhPC/r+RgMTuhQaUaspojgrWry9YW+MIeZW5gnNAngoJBJ+YW\r\nXykAYumOg2xoI4i1sE8s5C2yHkRxBlnq66HMTqoc+WnQuOkDeJqtbb3BlSVC\r\n7IQF9z+64TlvX3WEm0gGYLOfEPv2eg4NdnwEIMNIw/Yg3ZVym703MzEZI6IS\r\ntz/bF4CXZVVzhMyrq378BpIvAMkQ8M/90t1h+5RTeVDI+uKHpyH7mt7y12M2\r\nwv19BblsWMazVUmChGsHJoPKvRAV7r4/GTGHoAjMoV/ow5P5jF2gER4p3vfc\r\ndeMv2sn5rSuubTOMGqpS+gIHubPaPXnu55Q=\r\n=5csz\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"981be270463043c4b45845cdc3efce353eb53b30","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_14.0.0-canary.7321d6254.0_1650485416228_0.08332576165028738","host":"s3://npm-registry-packages"}},"14.0.0-canary.3ab956515.0":{"name":"@material/density","version":"14.0.0-canary.3ab956515.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@14.0.0-canary.3ab956515.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"643ab44182430134fb446b84741e07a2acbcd74c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-14.0.0-canary.3ab956515.0.tgz","fileCount":10,"integrity":"sha512-RS+WcMs4f5CCSzGQ9Er3PPX1Zn6jKvsZKpnh27YA4v7hx950sTbWGFFTP7YQ3umvZpFk5MMorx8x2z8O5dUV/g==","signatures":[{"sig":"MEYCIQCut9bTxBZwO6XuNHR2nLW7LuhfQFjqzGBEkSmNYa3rwAIhANHMxra2xEG3mDkwz4DUrOwBudaSuPbxPk+YRkgvKjsi","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiZrelACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq3FA//dukib7IT9NQftJsjRzk/wQYLPKK+8fwvcVn33GIXNWju3PNy\r\nBk2TnsLaPHVa4CwmUHvDs5vEUB+nZCLP/8FXt6sTKt3qNDGullAe2l2fHm9d\r\nEacnKA3XHQBvOOet7lIQqEsC4wI8758I4qDq7tGz/xPK8ePxIAgOAE6aCENK\r\nFynivEF4iiW/vHlP2JEwSk3eALSXlhNeyrt+8GAD33lBD5xuCseLJm9m5cMr\r\n0tUHJvY7Q7wRqlTgn7wwASndiNtwgy6ChtHUaPk1JpRliftSOz8ERsgPIfUe\r\nU/sXjbSqVWdJtctRffYZlMTjhzgjrMdAU3KJvWd3Hs0sg1B0DFQ2qn7SAL6B\r\nCVirJIIWZaKavBzhxmHL03hTHvnaalarqj0YxsE1v/lOl5YChxl1PEdt3ILM\r\nGrEVVZNsw+MP8RE1V7WDNy5MQfdfKroeMEM+idujbbr1LXSriu/qHFNWxQ7Q\r\nxLw3JbsPmDw20ZhCzAQBUytb1PUB7DNyUagS29Yx/Wq++joCTwN82k8kgiYw\r\n2JT4d7iCw+Ss7scyIVkqYGlo6XN5lF1hXYjaitSDZtwRvAQXRRKr6g3ToGM4\r\nNovXxQx4AZ+5mOU+liUUsZpeuc/YIQnRtCEECzeMFa/krkfrKQTGub0s20pO\r\njO10ZCKaZYohWqnrMoq23BHyefKT1xC0lZk=\r\n=Y4mG\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"a09484c5e8d50e8b042d5367972a9111e0432c38","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_14.0.0-canary.3ab956515.0_1650898852847_0.9780835882721519","host":"s3://npm-registry-packages"}},"14.0.0-canary.53b3cad2f.0":{"name":"@material/density","version":"14.0.0-canary.53b3cad2f.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@14.0.0-canary.53b3cad2f.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a67e49fdbfc5347b8757ea14654197540762c20a","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-14.0.0-canary.53b3cad2f.0.tgz","fileCount":10,"integrity":"sha512-Eh/vZ3vVyqtpylg5Ci33qlgtToS4H1/ppd450Ib3tcdISIoodgijYY0w4XsRvrnZgbI/h/1STFdLxdzS0UNuFw==","signatures":[{"sig":"MEYCIQDZRXrNFRyd7cYuQah+lrnh/LuMKhRPraZKV56lF64MfQIhAKIJNK02qW7FTeCPgGEkQoS7upIgtr6LO07Vp3xtRrrl","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiaTqhACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmruqBAAiX69IEinYSb9c/ZxlI6FU+L7TBEyXFoVvtTPYOQ1bVHWb5Ik\r\nd5wOe2IkDMfS1pOTeP5Zfj2foQl+Cp3jitS76VXsjtHArpievCNM13uNL1e0\r\nRuTHo6oI5QLKh+XhWV5Lmt+5nM5x3qZI9pKv4T5Kqo7fLhbWN8FbtjXLuwcN\r\nqc/EhBdqVbi7LzMbxcEXRqJaFw0LhznSmbN5uaNrHPF20msFAAAydoZltEfR\r\ncIxL+LaV755qpGBxXH2fwSQK4Hh/J8NA25mOa+Hbi2nhPuTHwJf315CdzPYj\r\nmHAXWBPmCUmNoKd2C5QB5pfq3wtAGt0uhy6vH9e/15JeZ72nI80rLFqkCa3c\r\nDaf1ylz/t/sa/yBNXLq8aFjR2C+YuXPzzUwH8YOTr8NDTYJZd+PaL7hIvSeH\r\n+Pj6iFfYYOHYigBPoFMnk8Oc1dDxPiduEaP6G1vbPQr62LYLr3CL6bwmwRHQ\r\npJA1rSQip4SVy4P4HD+qx6Jy7Y/dKIlMwJkwZ6jeQj2Qv5iR1LBifByC0oN+\r\nOAId9MmXE8fKZ4xJwD6VEzXmWK4E8i66sj1IZa7MCCv4VgjBtNIvp8Mg/yYT\r\nuoB0UYKPeG0XZV6D5O0CxiuvC5faiMyvMCJnXWckyys2RTfHmHfl7bokpwq1\r\nf5rWWmdu682iHDI7A6xn0qeHU4LQkWIJBSw=\r\n=Av0z\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"ebeda2e23436103241b0e82afd57b60f74599133","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_14.0.0-canary.53b3cad2f.0_1651063457359_0.9965232192089886","host":"s3://npm-registry-packages"}},"14.0.0":{"name":"@material/density","version":"14.0.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@14.0.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"584c4f3468c86c96e361ebe7ba6723f4aa6cd548","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-14.0.0.tgz","fileCount":9,"integrity":"sha512-NlxXBV5XjNsKd8UXF4K/+fOXLxoFNecKbsaQO6O2u+iG8QBfFreKRmkhEBb2hPPwC3w8nrODwXX0lHV+toICQw==","signatures":[{"sig":"MEUCIQCr8iKm6ODI9EXjNky+N80RI9RIah3X862Aj86ffNI6mAIgJ4lIbvbzTwOtt0DECU116+x+HbXI1nEvhu/QJGdkFQg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13376,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiasbaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqMLg/9GUWVqYIQGtsG0ciA7yWC6/qEZPMQIJc7cZOXdTwrO2SSZCIO\r\nzny+s8IU/HUAAcNDKSwK4LW+/fK2z7FW1XyZM4bFnQXo7XEQ4pL5DI7cXPN/\r\nZzEXuhCHvDEkUXdYIItHqOAWCVTUdSQQBC7YHVi4Ry6ACUFNWp87khHrD94h\r\ndmh0FHJh0s0eijlfjjSdk1a9BZBV1+wTQR+5rx7psKrxM4m6iFpNiFVcPQVp\r\nnZpCfoc/b9ZuOGSDYwxWHRT15LzySSFDDJ0p8JtmxdhwtwrX2jiU+JcpZpxF\r\nSSLDmI3g7XB4auapSnQrdZARmP20Xp96dfnncw5ikLwjcAS/p8DckiWsnP2W\r\nOG8LkbXWKX8+54wJX8YK1WAIqObAxRhVWYw4fh+OQLP82407INZLTm5gwR5j\r\n4djLU4Zp1CTTYXpInF7y3ZpPFVQk1Rbjl22JqgwPWkhmFXibnJygWZ3S6zFn\r\nrWNZg7ykRsWmz8TWtKISYDbfAWT5xaijAPhzzmwTtQno+EOx1cJVa0VPTb4F\r\nZf2IT4tuG1e27U7mqKfRbIuZwcIBRbLdE53Z9bY2SiH2McM2yyU1EljVohiK\r\nCaFIL4HYQJ3simK/NDP75TIip+1/6R7VcbQa9zOLtlocR7ERpu8Xjn1TDUE0\r\ny9/zSSGUkp69KMWnP5We3yGkAUJZTtR3zCo=\r\n=/oPf\r\n-----END PGP SIGNATURE-----\r\n"},"gitHead":"432c815e58d61a257742836f816cf95e271e6ea1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/density_14.0.0_1651164890249_0.2660600865320386","host":"s3://npm-registry-packages"}},"15.0.0-canary.432c815e5.0":{"name":"@material/density","version":"15.0.0-canary.432c815e5.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.432c815e5.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"32ed6c5a7ac7c8d0cf70363a284ffd963de63a5b","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.432c815e5.0.tgz","fileCount":10,"integrity":"sha512-IYL539Cvuoy80zOy6YDOcZmBDsbAhGgu0c9Ngv1kchRyzV4jUg+zQGKZzDckfXwtludYRCuzRFNlEHD8pdjBkw==","signatures":[{"sig":"MEUCIHBn3o7qr0s4M8ZdNf6jMHBEWUYHF15TPPDEWAYKCyaPAiEAvNOum2sqB7VVga6l0+jV3K1WXN+QklWHWDzFAEiGVx0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiascdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo2OQ/+JdS4/V2mOP1tSfF0xj/Cd2g/NE9X4NvXCN4kEHb9zPa8P/c6\r\n1QCPN7T+BlQoLngOyw8J09IoeJ+s9PeQNUc6NFR0B1kP8aQ4Q4+/tbMBNHuW\r\nuqtD4YyNtBCzxewIPV1o5XQ9OXqqbz14Z6FCsdfarr/eNglgrkTHKPpe+ClB\r\n5+B5c8bp2G4ad7UuVyPjHqwICsoUPfipvbsaS7ntSt32Bb94I2qoV8dXp6tQ\r\nxJjNmw+RLHx1VCGYn8gSWeJ6bHy7pygBqdmEgK4HZoGkcsgJMXLyyN4D7qWW\r\n9YwHI4c7Xhne0PiHlZSA7XEc2p3ABbk7HQZxamqeVAgvAyKtXEtWX+nzSPRL\r\nneNAPLE7AYb3MdSPL/SiXzIUEbUwnixKXxZzZjI6RDtHoHYxvSi3uJmE1zIp\r\nxkUFHWXbQSOa+Z/YtdmhycBsXjDvRLc5kTP9SgABEWugymVZebhzzORpQLIs\r\npzqSymaOaqbGa0fXfpQMl4FdqbBxF9Ok5KO+81QJvXRVyl6evq/aYm1kfSLN\r\n/nJs3btsonCTBNh6YQuLDmsQA/1skpo2buqU+Ajp5PwVZoUqPcyrsjKBivlB\r\nfheHxXXDxVNcKxXG0e0MunagFS0GQcn7SrUxDNs1dZCmcLa8/U3TsUQxeIDQ\r\nXfucNiROIQpA9/Ro9J+rGHduVccLuRWFI6M=\r\n=amUt\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"df8af7a4f190284cd9f3bb1756b2f443509424df","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.432c815e5.0_1651164957743_0.9262522252270122","host":"s3://npm-registry-packages"}},"15.0.0-canary.a0f01f669.0":{"name":"@material/density","version":"15.0.0-canary.a0f01f669.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.a0f01f669.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2e721295e5529321c637b07bb83c2ef54eaacc47","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.a0f01f669.0.tgz","fileCount":10,"integrity":"sha512-bopxTENVbjNWAqsUnUBWx3MLxCuQLXyezl50dsfChs33WhL9vv5myy/6hT6AllUYrfnSXszQAO7WTmpBXVNjGg==","signatures":[{"sig":"MEQCIELgznBQjHB/O/FBpeDB3xTf6FhB36UHQnh69al4apGNAiA/3jIipIbQqJrpUo69f4XSS0abz9Gtansr0+dYPX5FUw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJidYF1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrh1g/9Ft0wskFd2lZ7g/8k5U8HW3eaLIZsLFp3DIInpUt9ulXhtK2r\r\nlrQ7QBxtoOrg4sYd+gor2WhoP++uqTtAVOb5EJWtvHqpM5d2kGXKBlLI9TiH\r\nKQ9cbnQZfEhx7YZ7EUgZN+eI/9kNNKxp7M+rHjOTjpFMSYImHuq4JG6w5/Ey\r\njqL4hdztVracxFzEvcc/WyUOoDHkbndOQ00ZpQg2lf3EPr00JsFmE15WwIXo\r\nVzOVt6g4PVybQ0f9RFXtbMACr/HM9v3hZTSXecY2/dO6m//XJ1FWpl79XR6I\r\nDh800tlDGfy7jaZnFXj0eqy2koT9T9AIdjp5ZPFCD5noPDwdkV8Sp7g8NKgA\r\npguCTuDlZhF4vqWEtS7wR0O0ajlfu7rJ+eiv7SgDlaqm4EWHKXCwwPITmbfv\r\nPL4MGPXvZvazO9nrwgjCJuNGtFKboOwJhnQoqGqiLP5/an6sAlSPMLYmNZKX\r\nRADVfhQRXkPD5+mminOVDoPmdL+Oa4t7RQZp8dAIR65v7jsx60DYYAocYC8k\r\nxzzgaoZYSy9/iKutsiRbcPv8gCYyV8NnDOD1Wj+ouaBq3VjGAs9MlLdCTqUH\r\na+wIzmO/jytC+cxf6JQMYDr3UBBGFpA46vVH0WxtiM6BcIJhwGtN3QPPHSGi\r\nz3xWoQl3kxWBbOAmoNvgFOV3wIJCE7uNrHU=\r\n=97XK\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"51daa70df3212a8d73c545c86ed1c57273d41688","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.a0f01f669.0_1651868021570_0.3505594615290337","host":"s3://npm-registry-packages"}},"15.0.0-canary.276cb39a4.0":{"name":"@material/density","version":"15.0.0-canary.276cb39a4.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.276cb39a4.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b244e635c0333c384f31df3e3c1c744a230f6a70","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.276cb39a4.0.tgz","fileCount":10,"integrity":"sha512-RE20DnHbJAmnvrmuUHF2yHq6ZrzPeOJwef2W1XQlQ44qA1K8lx9Hm2DQ3JklnAuq0lvEBQP01Ph6Dz3A9DOW1w==","signatures":[{"sig":"MEUCIQDOTnuUz0Ckts/IgL4jJ8mNr24ojGZkmw62gpDTyCnAIgIgTT/JDsa5yWwalT+w9NFtyTtFXvw+kNmkhj534svk/9U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJidZN4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoFkhAAjp7fnPs5Q44pPydlQ00IvNL1/YuldS6CZa+UQFLrHV49otIv\r\nOhMWR7WJfZhBcD6alt1O5xDvPZatMfh+scmclKi2/WAoqNw+Jsl4D6m6p0FV\r\np4V2xJMIZvoYQQ8qK9wBDGRI/uBOuuWKLAgVeZCEBk9wAeXFtOBTF17ssHRv\r\nqfWO3vGhx2I6loGq3iVT1lqqQa1PuMVCMCAkNIgvMnhOH4Wrfj21D0EDwMaY\r\n8KRP/wTyyWehJ6ekN76C9TDJTolLPt3JuC6op1pXPWhrhvRpZ0wAoZIvSk8g\r\nsofdNmKH+ZWfrkljL0lfLpPDqTFJHKwnti5HckhmX4emIFeGOlnxNgP/31aX\r\n+iA5vI4huIq9gYjJ8a0aUIyT25+/1tbY7Rtpb828cjzIlzzBx3y8PIRGJiei\r\nhEp0tc9V3tCpqaoOsc1A2u5cr4qbdOL7qNYkn/b7lfcz8DcGPVt11V3h6rzq\r\n277TPt1PSH3PYEsFooxHTJmELcURUKK4yCPd6d5vjMe8ldkGk0HJmIyvNkyn\r\nDTF/65RRvDbktP1XJz0cDSUO7P5oZNn/U7j5s7xFpAImaCzrYxq/Xw+7jYsm\r\nmyG0FcuDkUr4VZTUXLHA2WOBehBtu9bu6f4yOBEE7G+YWH1jk6MPJNWFshfG\r\nM9chz8o/TiabGl2v+w1s+9LX9gxB5Mi1ZFk=\r\n=bYws\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"c57cd64760098925aff1fbf0bc2a73d32dd2bed4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.276cb39a4.0_1651872632324_0.5250771677686608","host":"s3://npm-registry-packages"}},"15.0.0-canary.4fe98ed70.0":{"name":"@material/density","version":"15.0.0-canary.4fe98ed70.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.4fe98ed70.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"71eb4dbd41c4d6b260e9164731926268c86be245","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.4fe98ed70.0.tgz","fileCount":10,"integrity":"sha512-LxdLfwnMdyiSPsANRq6aDADSidFMgbWOjIgtNc28lIuzYbOSkV6ZjbmSVf4J8FhjxQKsINxVHnyChck1JhR18w==","signatures":[{"sig":"MEQCID5WLSeD4c29/pWz5ibVi7XmLHbmze8pnuySo6HHVqZHAiAiNtOjvPDqnBbd4DrOymynYoauqiXBWz4CgKtwqGQYXQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJidZk6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo8xRAAnmvknh980Kt6KOjs8eXfRcFHu+cvpnDZPgdQdE3OGKbqE6o1\r\n+IENQ4Z0P3Ly0J1Po4bFB+9E+/X0LM7fy3HgI07bmkKxrf1RK66Gzh7FjOJ2\r\nyFc/NXRQq5lRqNP0lKUmJolMtZRpnKbhsB9/r7l0r9QxDy35ZtCS0fz6iCI/\r\nMt/WPeAUaB80Hsnr3Mqbvomn+wP8WgKwCK754bePewtAanSJAnttXR5e4ykA\r\nAuXAqzcU50AWCkJNBvLu8WhbIXExHTIrR1hgS7x769Yl/NezogpVZEdbjLYt\r\ntLl8FopAE+YJ/R4cj0uvpWeMjwtjWHaJyWGr7REaCdUq1+uJOJitIzhxez66\r\nBTMHArox8CbO8A/AHevgvfbzn04xCAG9jHbvqZwK1bsxM7dAuLSpEdmVOQ5Z\r\nmLPynOmmFv5L5CvejzDPqX1OZYw/+wGYLbmIv1BeNmL1deJAGWuX/F8lUjAI\r\nmbsrmIfNQL5zjNWV6p0pqO5/Q+Qcgcl0z5/zh8yylmFC/DstXviQ3dN6y/Cl\r\n+eunV2qu0sq8moVWulbxj8xWDj0mCE+Xz6kGObhpRXgDhNr4gI6X/pyu9zkz\r\nwYVMXfcx1qeXfSzYYYJR+Fm48jkyrWEBQ5ahc2PIgWL50Es2xtU34H7cDGlh\r\nhy1w44Nno3g4ZnV2Z1GjByNCf8kXtVFh7JY=\r\n=JW3x\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"353fde061dd090ede4416fc2477bc050587d6367","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.4fe98ed70.0_1651874106284_0.2020437080745745","host":"s3://npm-registry-packages"}},"15.0.0-canary.58b130a3d.0":{"name":"@material/density","version":"15.0.0-canary.58b130a3d.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.58b130a3d.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"956abdf0489826a73c7b62953f4f4f9b56fa76c8","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.58b130a3d.0.tgz","fileCount":10,"integrity":"sha512-70QlGJIA5/64i0x9rLNIcWYjCkqhLEUP7yV9LKsHYluJrzQhLzm9JjPjsSMVnhHZiUlj6HAALVoR/G2rEGUOfg==","signatures":[{"sig":"MEYCIQCvLaEZxQvtZYfF0C5MUrCYjvcNJP8zBUcCgF5hr/+ryQIhAJDdlyHrcRtwhdDH45gxaJodPpxQUpTyuVeGRbcYpTjD","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJidZnEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrubQ//a2EteyX6OF3v1aaYFjpd4TbjsLaURG3T//DHC+OWB/He5sRS\r\nJN2zVUPuJ31kpc0/FDsDqTA4X55RTWgmZoWMRNhlPreUnqajBRNyzJ/7U8Ww\r\no4Pi66sVKMfodD3ac47whYVgY6u28tZ610fcpOrBN8dnr3sp2ivEeQjJvl73\r\ntd4Kyj4M7MrCuPHJzoYwD+FMrxs63Id+uHNKkePsA3KUD905qnE7sS82DgOT\r\nw18OT3mHpftxVZhM/esjazmt55iiDof2DikfzVuvjMLQx8YyqoPleiqsGArh\r\nIWQuNCXvyWieSE6FSO7235Re0g9+vb8vy3NIEni531oiSPWs2786fNCLV3Av\r\nfr9/6AzkiWIis8pjtoBPFGQcLT1uWGAFzRQCFyaCS3UO0SaK1y9J9D/mgqmV\r\nyGRKZWVAjs/ajrwB/AqlJe4TrH2GnSPLttj4Ta2Qd650C2rSLwntAj4Qp5et\r\n4nZR1QNIswU7JVK+HODlomhReVa1tPBH0lRo3BaAy9FuQScLYzp1UPbqWvyW\r\nR+2AfY8BlnB3uuptqiCkTwTKz7RqvDzXv0vLCBXnxnrv9DmILUGaB58fa5xg\r\nHut3fV+jyEmg7T1rOPzt+6gw+LxIIT5WFkmi0SIJj6cTjCB9mQ9LNEWdnhUl\r\newjwwiY6/adNfKCwfyl8q4FSPGvqxf5K99U=\r\n=KKd2\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"58c8ada7946689a0a59acd63cbd49b6c987c9853","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.58b130a3d.0_1651874244656_0.3695505240196191","host":"s3://npm-registry-packages"}},"15.0.0-canary.ae278a2fe.0":{"name":"@material/density","version":"15.0.0-canary.ae278a2fe.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.ae278a2fe.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7718550aa6aa8b4742207099f1a84d1c274335a1","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.ae278a2fe.0.tgz","fileCount":10,"integrity":"sha512-dMqCuWaDHJHvKqGI+iFoax6cNV3naWWnJZiWufFpoceehMMni+ZAyhC44B2aylAAi1fPaSK0COCNU7NgwT8h3A==","signatures":[{"sig":"MEUCIFVUw4OUFOrvgFkqE0ZEO4F9b0bzpmktnlBhVTPl6i1qAiEAky/uuPOizp8TgVi1UcASM2fvC//yKWlGaX+xW/wdovY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJieTHiACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrCHg/+LAJIOhbQtfB/ittXOsVuaZ5whsE0c5JXGDCOaMerAvyOTGEe\r\n0/YcsPbtHt7bfBaFsV9wx3aM4E50C3RXrQqP9/67iHI0gYQs3MSDu45NQJ2c\r\nv3hyjObYkOZmhn/2XdtLl2FvxDpabpv6TlaKqJB37CFqGN8KncbmXZWNgKWN\r\nbWjBE3Sc1AAg5vGO4w2DcncpZ8ME8S6/X28nMCIXeg+HVnnENuCGZzlQJuWB\r\nu3P8TCgOvNtRlF9jr9RSd0m133Fl6WzBwj4G+FfJkNwfuFhaawVQysXfn4uz\r\nb0wZvERjPXjA7LfhgPBvEmpjWNWn/DGDopDsbPXaL6LWdDcU4Z4tiXw6cqVR\r\n8ozHdb5Z9yEllFUxbfi/vmIrHhXumYrmlwQnLnSoAA6Cn3IRLrlD4p+eH4FJ\r\nHo5kEMCYrsr2tjugnrTRvaNCCaHR043ciDwYkVouleHGhTqKJs15YZtDh+Q3\r\nhoNxqw2UB+b/XMUa4w2mpRNwmdMawWg69bjP4teOigl2aaew1m1AfPN8tTRx\r\noa6MFbr4+13aLa3pnY65ISt5JMiNQrj7/HtJ3NeWXEZ/gLet4jgEFEtb0tZe\r\n2UUMXzVkQ0BVYo3qVOYKLRUz3kKE3vYx5nY1EqyBrbdPBWjqHke6U7gEC90M\r\nl4NUkn2CKlsiwywg0zQn/akKhdTuv4xqXvo=\r\n=QxfM\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"bfd08e232a3a514dd5a38dcd77d17df365502ece","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.ae278a2fe.0_1652109794501_0.555961398438455","host":"s3://npm-registry-packages"}},"15.0.0-canary.bebf5bfdf.0":{"name":"@material/density","version":"15.0.0-canary.bebf5bfdf.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.bebf5bfdf.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6d20606b9751fba78e4980e7db819a0081ff58b6","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.bebf5bfdf.0.tgz","fileCount":10,"integrity":"sha512-qONIy3JBEMAxQoePZaM4nYJ2rAjHgqUC13LIkWen7AAUR3h04l8Fe6Zz5NCiXu3EAXYFOBPazVERUiHAbagvnw==","signatures":[{"sig":"MEUCIBCmEVFEXE3n/jYPDFohWYitLP6yNfhfcvQgy2fBTzKWAiEA6FFS8Wsc5yed2CAQ5zMrDFlAXNAxMtoPOdnPrBhVof4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJieyHaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoq9A//TyqmNRiBdgwhEJK6Fw9bocco3M3Sfz0TyBmP7BHtgUj98ijr\r\nuUVycOX1w3l/Dsn5oK9SETBTkj9vQmlwdMwPCwhobh+RDHvwFr2SDj+9qe07\r\nx6IXpLzF9Oek73vubJVbyGqJ8yT1EAGqaLyIVYtGTsYKMNkkuje6vd8cxflD\r\n/Lg4SSwcuAmB9k5GPQE/5sOmZ7LoBdmmEf3r8MsYejJ9tAB0w+rlHdoJwwre\r\n9+FSuUoHE8zu5iF40zYGcdIZsxP8eSameJI6dIyO8/l7prXMXhSGRUr8K79U\r\nwtsYeyIWkbPUsBnpTKyOo+WscTVNUbH+d+bBpqMxwWgB6c0UI7M6XA5UCgIe\r\nRsHFMyZoy+E6jiUO4taudiglzexB6WRboxbLT8IpG6qly0lSJFtAx7hzgMXH\r\nKt7BDDd6P0MvYedOyqKV6Ih/TgYM21j4e/26gBNLyB65eVbJ56ndgrCIhEmc\r\ngBft3MBrx85rWm3y5lpowSJKFR0R9TZO3l8Ns+YSAHd2BCAypf7uF2qYB97T\r\n88y+T8c7mSMyQW0j4C0HUPR+pmjSPe3XVqPIrAtE+y6yzLF3rNC20/Fxbpc6\r\ndIEQvnHOTryU++FT78OIJkQw82fh8O4T1Bbrxs7hB9OgCEv+iWCGh+AuNnMh\r\nrEvmcL3S9ISnEm2Mh6TdouxvghZ4hmSYiyQ=\r\n=2pDR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"61d3971a411616375c31cb3fb763fafc120c9570","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.bebf5bfdf.0_1652236762078_0.8985403986809974","host":"s3://npm-registry-packages"}},"15.0.0-canary.e6072cd6a.0":{"name":"@material/density","version":"15.0.0-canary.e6072cd6a.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.e6072cd6a.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"98806f076c62a374b44be35f7497fb8093d60942","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.e6072cd6a.0.tgz","fileCount":10,"integrity":"sha512-eYfozHLtpV0/KzUxT360AtxeK0srwe74jG+uc59/5u6ZkBW43zDWv5Cdt+Ajuf2ZGJniekgl+JHettZV9G9PLg==","signatures":[{"sig":"MEQCIFuhF+3/HKT+boL9FQwNJWCuIcv4kSVXLP4Rr3ybv4iHAiBwixt9W8Xepv4LyG/gLJwQ0hAUpW2okGTdZXQ4JMgoxg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifBnbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrlRw/7BH/QS8iFf+roQXqNrYvDIIMyzWYJNNYYcpF4w0uyDF7RA6Mm\r\nnmfRTA+kLIO74OY0SrJqqZlCjz0R3BfwsnFAAj5O0BLM8xXQz9brBokB4tl4\r\nDcsJIbGPDjYs+xC8UGPF/giLGCEktynfSV+mjDbUacDQeNagmMdaSrnVSMoi\r\ngDkLfHWMmL5kR3m9kN5owQd/W8+IJGnsI18ok3gIPMMPyAIin0Mww9GjClnD\r\n4xUbh3nil4WVn0/FqcsiwDUYy2FJPRYbj8SoSGfNrDKTevx6X4pgmDzlcbER\r\nB81pXzpjeIrFKEncs44CwWldpVfkbbpdIM66dgYYaqHZULDH7uX3eQ2JehRH\r\nWgaNQ7jdCJYzC6uShoth5EfHaKC3Ed4H0wMzUDr7/3yzR4pw9VskTdHUV+C1\r\nWxtC1+sCidOHd5vl4mRE1kKBurWHEKme0m5gufCfxUHxsNY/xs0LcmC4VFTg\r\nCrDtEtFAM5+nMolLoYplQH7D8/XrUnANme4GAnEfr1TsD2kYiuPuH2pDWz/w\r\n9qfV+Pcy/WR6RGY0t1zO+hfzr06u9lolHqjtdCi9SaU5z/XhSsd4+qNt/cwM\r\niG7S2wyJgVJf6BIe+L6ky1z1kPTEqs2TJSPAZtIvdp73W85eyddx0qtmas4J\r\n1CrRt49034Gd2yf6RjKFHUATCzcltpM6/TU=\r\n=50sv\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"ef2da678e66576709be19aed16a880b00e73a039","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.e6072cd6a.0_1652300251391_0.4617368671176205","host":"s3://npm-registry-packages"}},"15.0.0-canary.5b40eb988.0":{"name":"@material/density","version":"15.0.0-canary.5b40eb988.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.5b40eb988.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bc35d54d150d5fbc50ffae5b885db66fe9dc10d6","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.5b40eb988.0.tgz","fileCount":10,"integrity":"sha512-5LLf+usqyfnr7CMQM8aCuZFmaH7wpvUs6RqViAQ8a4cc36mpXGJPEZmaMxJR3CCeR7vWSL7oSIKVJUx2KCljpA==","signatures":[{"sig":"MEUCIQCGso0STVJJZlq3m2Q2rKUBrCodKnLpUkjQY45edHQRYAIgajB1pPTMloM4YRYRMupUVBxtfOwxz8hvclfK7t6CqdQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifHRCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq+3w//cE1RxKQXMBtyWvIeiVHKHwezA3nCs55bAmyjjEC2cMPEe+K3\r\nV75znIhGa5JJ8MB2Fu+j99+a+UIcS0sdTZ6A19j4JZRiRSKhodHEBMP/aNVl\r\np1vD5AyjKCiJRTj4Ryx1qLryElu02PYJssHqNYNNMUHZ0vpP9E3//u3TfVOS\r\n/LGRTQoPk+DwojL2J9HG2w0oRKeJLmupu1F5P/SOSJDLbv+kBf4wGZUAExWB\r\nFxJS+eTdRDDo5vQx7EfeZw9YM+JT2SLRoKR4Rim2e5CgKYdewSMolbku/GDK\r\nZP0CQ7qy+paBJazxzNOwdCDaW/Ke8MZzh+jXYHfTPvzfa1hD2qqSS8LzEB/4\r\n7/98DhYrbGmeQ/p+YWF2qV9hXTQKEnpDkxz70FFC+MU+72OvmEQAznLkHKkK\r\nsRHltT/gQ8/0Y4Nd0wlUfDJ2VRUeNKZqq2njDcXnh/k170l4qqmTLhoays3Z\r\niGzVQ516l0xFTc7CluxdjiYyKpxuHOk8m5Ex0kJHF/di2bFevfelDpSYL719\r\nv3bynuJ3NsoexPtoVMkWWcy9j4CIG8209mP2PKEcX0PgmydFeIfA2Mqi5BiO\r\nQ36PD1E3nWFnZB6GXboBgcTiFi9gHyUOL378xkt1g8YDpdrJ159qRtt/5pOZ\r\nNTZXZqbypAt7rIMaJrTw/zRfsdJ3jHEIQxw=\r\n=At4f\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"c30f2a613c97ecb48fd3f9ad7b0677e51a156449","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.5b40eb988.0_1652323394128_0.28434682264327327","host":"s3://npm-registry-packages"}},"15.0.0-canary.6a61d62f6.0":{"name":"@material/density","version":"15.0.0-canary.6a61d62f6.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.6a61d62f6.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8cddc12bfb3db47411bd71f1ff30ec0f10d696e6","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.6a61d62f6.0.tgz","fileCount":10,"integrity":"sha512-bwFzDGq7gsf7lePoGsmhkfhjO2KRdRohXSn3ZkV8vapbNSzKh7o+bZPVDzP5628gajKvIFQnBUbOUIPYLnEc/Q==","signatures":[{"sig":"MEUCIQDVFyK1u8SajMwHGB97DOLSs6jGMGbWMrK0LIqsqa9L8QIgG165zvFOc5UcooBit+lA/QBcROZ3cjptXDAi0D7zvJw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifW1IACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmonhA//TTL/pLuJ21ArqfTEqcAEr1X4hGoSJ7VCnhvVfDQnfeBtI/Je\r\n/+zkOsIQ9oUb16lzotdUSDOf5Xis0xwLpy3t/EBaAEXUf6XlqeGoF+JqMQ3X\r\njPf9qbktrTM52vi2wQZTqn0m7KpsSCLBmeSE/k6neUxWZ24TCN1785Wd52Ik\r\nWsKx6FqEUNs4FHAJDkEJf3lHkrGHrCG1YmIj7e29vaGyiJ8Y7mO4+J5oUMpP\r\nVlKrLiLXQB17DBtvV+kxhsQt/NjkKfhHQ62sWBSD+47trWAHdf9MAa1gyS3C\r\n1lI66M+4c6gZ67vfaHRndJid7GPg3AHl5mDnqS4p3zYAFW8zVDF36zEi5spI\r\nsMgwyhRGkUSNv5OPHrqvj+AdKyl/e5BNaOfzpqU1LSAAIj7u5CEdCaChEHEX\r\nrjIbsVnrHEMgVB/TKsgXO3v4pcVzGVK9UMxAuCTQ4pt1qfdS/FNnAoDuYT1O\r\nGYF8jaIrumelCcvY9TDC8LZuO5ay9O8WVkWuaconTPCppvSaS76nt4Cz5ujg\r\nPgvchtRt/PplcvjxAvMTIRL7PLKDd0gosPphEzgkZqvUbsJoi2arQTMaFLVY\r\nkBQvZcc8DzIJp6L/CDg5IUlSAGNokzAYI7EXotmCpjaFCXGJX4P4e8UXjV+B\r\n97Vh6TJo8RflzDTMAFOGNQ0VzHcZb1pdZGE=\r\n=ApOz\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"1d46f0951ee9f725b870919613271f00fcb1b521","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.6a61d62f6.0_1652387144365_0.7448417582620297","host":"s3://npm-registry-packages"}},"15.0.0-canary.05930a453.0":{"name":"@material/density","version":"15.0.0-canary.05930a453.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.05930a453.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3f3b40342dbf617e2588d883859cf0e40f94f440","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.05930a453.0.tgz","fileCount":10,"integrity":"sha512-TL+0rAEF8PwZPBlGiQAkhXbaggR7D7pqa4adZ2LV45D9Re23+iuxyyyAZmH9rDB7Qdcddh7+qFTLtYtSCl9Q+A==","signatures":[{"sig":"MEYCIQCh4QIzn4R5ei5ESfzVypw1fiKCL+cCfs720EiKhVfGJAIhANDBZPjSslq9gamPoa1/jS4C4CMTsii599tWF+OqCwGj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifqeIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr1SRAAlRZS2Kycc9CvVEY5KrsD5QXj+UO03TbmmqLARMf3DINeBN/w\r\n2s0puCHS6C7w/R7XTbCVsDErw0rZ7VDTzLEpY/izjlK9pUv6SITa84Q5d5qe\r\nMp77WvnPIjF8Zt2O6eD1j9J26s7AO1o4PZtDIqblXQ7A3PpZ57cvbNNcgdRt\r\nb/cUL2YFojW0YZEC73HPGvojLHO5hWpqhoWUKDptycqpIOL2T6gU/sEVU5FU\r\nXYLZrVmBgs9LUe14gPcPjlVnqGwKiwtIprvfwemDwLrz0zI0Cix+NlY4YWkO\r\nEDBvH1F3i3cxCxD4+XJ9y/a3omn+ikw3XaiIia7DkfBL6XmFD0vXfBfkAwkU\r\nDohVs3lQvczq9jm7eWgcJCw9EIjzqhQXngiUu47kVDXwJXCyGPYSHlJ5P1GP\r\nL8MqmMfgAVsUSzCHpoXWcRmOUJ2mli3+17e8mx+Yb3J49T9AePz12Z+5jYzH\r\nPa35XIWemjjMaH/GAdVMMbuvSKxUzCk8/SLIZEaobm10tg2dDImFYuPyTPMb\r\n+rZllOg4CkZtzQ2k7pRBo9NKWuY9aqOt6NPksc/ZDd3ner/+Gd+FQCtVqWJX\r\nHK4gZK7lizqnpr5B9EqY4uRkj4aLSELl6FfNdP8YM7wABNQijhPX0CUYHtVm\r\nK8zaUkqyPXo3ay1P2JIdPWcEcq/P9IfpAXs=\r\n=68xA\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"e6dfc2d0553321fbe47e71fb414cfc1152b0ef8d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.05930a453.0_1652467592009_0.7429831236601796","host":"s3://npm-registry-packages"}},"15.0.0-canary.c0a11ef0d.0":{"name":"@material/density","version":"15.0.0-canary.c0a11ef0d.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.c0a11ef0d.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f1b101e347b57fc529797c2be500ee9fd1f08c94","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.c0a11ef0d.0.tgz","fileCount":10,"integrity":"sha512-snzbonNvYbiuQM/8VpJIFCEq+ttbmnbybSpES36n8xfmKwxpiJ68ZG/V7ygbUpWjF6ZypeEGOgGnRLHQzWKuvQ==","signatures":[{"sig":"MEUCIQDBrrsjInSPugl4uSttHq75qv5yPdta4OnzLLrGWjWjTwIgKTEb1JLKmF/kmVZr0RubLQZ3nHOXrmhPnepo39B323I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJihWxnACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrE/Q/7BB3xCz2kdvI0c9VAIiweraJxX/LIF2XfivBwkL6JuODfxHTA\r\noo8zC2kMOI1qvo/yXC5S1avsV4tsZR3LlQRdpTsAed4Lvz3odgIfulOZ6fzk\r\nvuNwmb5MpUpBUc2ZR8mMtJT0mdt8NiX9jIrkQsb5BV0wskc/Ofwl+1vtiSLs\r\nOBB0KmbbzuN6W88hhIeSH6Eoq2aYGTVqZVXX0SOZfsK2LZfdUquFdqrfMaJc\r\nH+7FjiXb3rkKYFVtejatukfa23Q/sSTImnVyB1FWlEcWQLEcqk4xLejriB1O\r\nBHGTDA7LY38uhxCGN3E9T2J22NwC8KtGP4kK89MR3xAMI8jZq2bsNWB3siY4\r\nfHCh9Qoo3nTnfm3EHNYKKYJUsgsldMNHVLcmLcXaSffWd/P8vXZoWDb7OIYC\r\nOIbyrFZUVLb7BfMiwTcghUWbBLaO4MbJvBz9pIRiAXNRam4OSX5ahDpB/v+i\r\neIb0DsyzGSrHWrBOZ2Dlf0UVryP9vK6YDWqrK2LveG8fl87PtaRu5XZEBWDz\r\nhnkkn7nuQ6GePqSJC4EuXlTkzoLBu3eXc4Bsvva92BnHoN5PgdS/52EvQJr6\r\ndJotiie77vkfCYbtNE0akhUvEmpkaJTB7QY1v17Mq4idJ7S26b14Vwcq69iR\r\nhCAREJ/qPgDQQ3Q2gxMu0HDhPh3FyM4HsE8=\r\n=Fo4y\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"a97df68c1dadba0530f5fcda79fb8bc3082d963a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.c0a11ef0d.0_1652911207723_0.20207052550322957","host":"s3://npm-registry-packages"}},"15.0.0-canary.2f9b268c0.0":{"name":"@material/density","version":"15.0.0-canary.2f9b268c0.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.2f9b268c0.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"efa632aedc71f91845398cbf6854271f453c1f19","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.2f9b268c0.0.tgz","fileCount":10,"integrity":"sha512-CNRrmQEC9PMztgakY9zDyDO0/k5qm3kZKPjvTm8y8l6hWaoY67A+YS8d1TXx3DFVtXIyWZ314BKyuUwyvQCbnQ==","signatures":[{"sig":"MEYCIQDH2kVgZBSP/cXrgSIal5JP4lpujsP800LRIVqLzVifhAIhAMOxFfjM4O2V7h39Q9UjsoCKVLrlBhX0gU1j3zFgcXAu","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJih+ygACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr02xAAnTYzlrPmmID3XvOMS+WDanPY9MIVygjQGYTmHNjNFeC5WDv3\r\nVZ5pYGSxbUqvtRJI0vsu6k1eS+/qsddFy53E3VnvONzaKXBKn0Pfi6NLH4h5\r\n/IjpiBafeNOEh+V0E10AUROfIshUxB7DmFh5nlYGjpuhVoQFqGO8DhsmJAR+\r\n0OzuQ5vd6zqCAaj4+NF4TflDFtZRJ2h2vT0cb7N0Hy4tpUw6+zBfR6DHIv9H\r\ncMkZfzAuEnCE9hWy1BKYP2WflhuRxL/U3FQTwECweytl+W2pA/5ixlvxmSUt\r\nxDcm63bIAuudw2TibvOhlN39ivS0b5tS/uacIlJdMhSCb+aKPYoNaXa1yE97\r\nYSgbt1cRVS19INd6odHONtdIG3NJGLq8KLd8Ui7hcfqGYboW5jGpirpy4dmZ\r\n7j0yWUY6NAdHIDSvVdn/KMae88K4b+Nq3UlMpbU2YArLodKAQCySGNEiffCL\r\nfxsrMc2Ck/sRjZw09/Lo8vO0R4xldGp/AKEgbD34qze+QFWrSBs0EEeDcTU8\r\n3VExwTpuVeoZkI30Mb+PE/sGN6BhovXiFtFlAtB587fWl72IZ2L3KhuAGK0N\r\nxVC318YVBUqJqxPO+WRO5t0Er2rffvBcRbyNZAZHID7B8ENkIUVippIcGdPJ\r\nYyIsWsv8au+2vMqaG9VdHs3G0rGk/oo9Qeo=\r\n=Cp7q\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"29832a4f010df39515e01d98656d2e77ac1e47e0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.2f9b268c0.0_1653075104073_0.8925262660360833","host":"s3://npm-registry-packages"}},"15.0.0-canary.7741345b8.0":{"name":"@material/density","version":"15.0.0-canary.7741345b8.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.7741345b8.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7716479a4bb827e9023ff6770e0c344a0660d7fa","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.7741345b8.0.tgz","fileCount":10,"integrity":"sha512-QN9vpwJ9aDV3x/J+l3HyPf1le7t6GbuxQqVp3oUBWEvVxAEe91cS1XDCXF8lIhhfxdvDmKyi3DXGEworL62V9w==","signatures":[{"sig":"MEQCIHTddwk5R1pDRmeUkrPQ5FtdKsim/5d7fAXCqhZsynMCAiA1KbosAkaLeR0ULUHAQPCjttylmDVrUAxR492mNESriw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJih/OuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrQag/+ND2ax/41JkKqhpZIFqOevefXBkeoYIgfk6du8g+dKvkMmmeV\r\nKkfuDx9hf6G+0u3gEK08x/B3DZMUwe95/F6IcIjyq2cIlhrX0/Xs0pu6qVuy\r\nUeKdVG8xSfrkSgaH6+SitRaWnuexzRb4/YyV3wSqtrmC+5KKmk50R6R9eWis\r\nGALhl02QlRrDocbn7hl3gdKL2eDJLyXrbPe7CjD83ssg7PN5U8IkQIDH6D75\r\nfVwxMufeJ0tBpmQYRTcSa7Z1bgx4S5gpkGH3Fr0ogczxMqgG+lbDMtN+yWpX\r\nsmi0BZFAxpwRfdKS37uFhYeNndNxBBFvnNOQ3l6OKZhQuWjcTFC6z5fupclt\r\nD0COwD5Y20prjUuQrrBQ0FXSfVMnIm1Mn+aInaxPOJDH+r4zWao4N9FDGazJ\r\nAQzB3VZEjw/gShpS44f84piTrUErQhYaMMOnJ6ChJG0LCYS8dDFWg9ChQ0hT\r\ngdaHbUcdK87bt2p6nZa8l8p5pVr2NQBE0KKPRxO25sMhbROfJDJIN8JY5OM3\r\ngAH6s0CHAlovCEjuGDrFVOX9OgH/Ja3NatM5G+U4ZJraI5+MlESg3PWtas8Q\r\novC4AtGu11U/RxxhxN8pMpWvManM9n5H4W7IoyHZKLIfyr6M/Ef8IQu328TZ\r\njkwh82tCGyMkcMhyo1UN1OyFeWKuu46lWHo=\r\n=l8fS\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"2e61e5e8196d28c1bd4d1c7a12c242276c1d8ec1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.7741345b8.0_1653076909932_0.07501654934664415","host":"s3://npm-registry-packages"}},"15.0.0-canary.f807e793f.0":{"name":"@material/density","version":"15.0.0-canary.f807e793f.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.f807e793f.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e1f7a6e9b942b9de38b6dd73f373138b4ca57916","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.f807e793f.0.tgz","fileCount":10,"integrity":"sha512-MWFfOljZgEcvLNFjP2P120gbj9LZFc+gEGvctbPpnBhENWgPjFTJlzZyH0YxCDSTz/JEn79D8kvn2ySxC9aPxQ==","signatures":[{"sig":"MEYCIQCHNPWo5zV8rVtG6YFTZoX05FOT7fBA0/E1bYyzrWtG7AIhAN+CmTtjqJxFKy9tbOeiHnbx5vXdZBuAWjhet89j/AeB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiiBQ1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrRSg//aoctBggbPXUH/7WZ7EgBw7DKzbEvnAHPn7XCncJZyopTpAmB\r\nqIu/heMmPWtPQKI+0xLfwfHamS520kSUAvJuBihaNGx3FrWy6+M7EGqc9vNC\r\nngzdHys+H6gEwNc1/T2J8I0xCnQrpr0lcTPYxWIkbj/LciSOHffzUDEb+6Ac\r\n21PSEq8sg7YBMW7+xWEu5sEM29khF6sPP11hIZYem6cCruZN5Amkg452vLcY\r\nUJF9Ye9AMBbAcxl8mORxbFZauloBSTM3RceqJfQZMI33IWV2sWPPMaUrvTiK\r\nnSMekGDJS0RWxK+0eSZoi0b3u+U49U9Nx+GOAie2XNLiYgMuWOyiL40OLs5x\r\nJ5V5bpx2sn1Eb6DfiXh7GdNqCtBzYeJrDwJfC4yWRRToF2iL/Sf74Kks084q\r\nL42Fhuj2U3d+mSVxMJiDplVJxpIjmeGwr/KPnl0IodwHgXu+WffU3QfIGreA\r\n9gEu0T+vrGQo6hgf0G2JJ27tNxLlsE9M/jk+QnWys03FypmE9LBMc6NbJAs2\r\nGoUHkCKt/9HqNNQdfLlZSJw0eKV8BadUOsff24FLSGVNhW/9jhjaZUeKYFF3\r\nMGtsC1CZvA0b3dh4Oy5RvUFWFx7GUHQLZguPO/h7YsPS1WFxkVYkDuFpQtX/\r\n29h1GO6XaItaflQq+bVH/u4smmWnbA8Pn0I=\r\n=KEYO\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"b4ac5ff59e90b4770de9f689d9b09381fe2cacd1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.f807e793f.0_1653085237226_0.9366798342022136","host":"s3://npm-registry-packages"}},"15.0.0-canary.9f53d4a8a.0":{"name":"@material/density","version":"15.0.0-canary.9f53d4a8a.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.9f53d4a8a.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f27ff7f28f2544bcb0e11fe701aa7a34e0fa6bb0","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.9f53d4a8a.0.tgz","fileCount":10,"integrity":"sha512-L+7eUX015IVx6VlOk3FOKqF8wCi1rE6NNkvo3pDtV76wX++d0tbtMJa0bpGOW9jWAPrnowMJ57mc7Ew9HfivQw==","signatures":[{"sig":"MEQCIHVw/jwoV1OsNo3i5qYvmF6qAmwAneljMiNr+4wrOra4AiBGLhU2YS/IM3wTC58xcjgBodi0jeTJYPZfTe3mssP0AQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJii6CoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr4bA/8C0+KCvUIobo5vH/zbSFQVdYplpkwO1AumXkhMiSKMLY43RT4\r\nFvYymxUO9i6bZI9ry6vOA9jtvO3VMF4NKvmjCoWOfElGgp1A3eiaM+3yrPxs\r\n7RYyB0f4eRFd4Dhw1Yhr2jpoSoibklWzsgX2A/84UJTjL7yxj7pNJmshMBDD\r\nR4TFqWwcAS9d7tQuGoAXV3M548PYJVzqBd6XeWsJwyu3dFs8YHq43SQ4h1cn\r\n/QDpY+k30qPh4dn41/J5w8VM7nyUFv9UIHimde8s3e5L3Fei7CHo9ikA8H1w\r\nDacqHGDR67CjgzD5ezTT1k9t3lqFgPFwmFIrA6uvlofXHXVlGJqAbA+qtgPm\r\nUwfAeceCSke8TR+hwuDFmJNnwwbhTh3IeGiiNr9sQgyTUFvZfhAHGD2dzlZm\r\niQ0LI+8zOxcPGwpws6Tk7YmtiqcgVe8/AGRZSXi30Ke2Vd2jCXRZ1sqQ7zW+\r\n7fOHruoQQoy2W/kS9DeCu5A5i8lg5F+I3AIwvWPydazWNaVX3f0wMGqxj1Di\r\nNivlfenG5uXHhxxNjzAB27n4CnDxF3UzzKBg1B1dGTV1z9D1Krmcz8d3LP6n\r\nnpZVcjbSOXe2K83DcOyZChLS/mBscVOJ4LIdI997iiCO4mmBupBdMHIOEISD\r\ny54uc4xBWRyMcPUcOjTrgi+hud1T5QqrXR0=\r\n=abWV\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"5db1bd7747bde68bc956d054f2e939e62c78df6e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.9f53d4a8a.0_1653317799888_0.9485142071611028","host":"s3://npm-registry-packages"}},"15.0.0-canary.77cf00e37.0":{"name":"@material/density","version":"15.0.0-canary.77cf00e37.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.77cf00e37.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b1cb2bc817faeacdb969dc2ee88ec4764cc05d33","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.77cf00e37.0.tgz","fileCount":10,"integrity":"sha512-2zsg3aKCRjdqVveKqrA+afNfohxreZ3ZcF5RHAsEFFb8K+2+je5lcR4AaYi9U1vvwDcyU5mgaeXEo5bvHsdslw==","signatures":[{"sig":"MEQCIGLXkEvbHOMgxgL4YzbP0qhMR7oQd4b4rjxSKHYpz1D8AiApYMpbRIrlpRmcR6jIL9nOLSjGVH9jxllD6PiCEzTapg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJillKYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrdlQ//bs76Y195mN/EfZP3Ywr094IKQBsXPorZoqLSXDilpSjhSzpL\r\n9fVr1lv22TuTeuzGiWa8tXsZMha8KlnC731VmsQY0BOxGPauTUy0zZHSuGvI\r\nLJ1x8CzSS+EzNlBENTBp7uA8IeOxaaDTyMxH+aEMd9k4x3pVimzC5fNMzONq\r\nYAJgPbJdVAdtnwNLSlfMoUGSXFDWcehffVkcohhGJMddEI21VRHLBZ9orsoZ\r\nfQyhRBjZmmWdS3aeFi51nFbIOyb/4SCyX59kEZzmj0YF3+mYKH/HWko1MNz3\r\nhzeN4QDucbzjxlXueBo5z/wCt06Gu0r3umFncQ07B6Vtw8KlNpj49qfZ4RPt\r\nMG4UrSL2eGj0ZdFCYcMBxjtNpu53ztPoeE7/4H9WBRDx0RoPT4XR/iEWFsiX\r\nfeeEVeIoELAldfY4tSlKG4xMpXwAfaD+aTVxWrwPvm0XFZj+qa+2n2zWLF3d\r\nLCgw53eamvqMrm3Ksyn57MO9y9mEuMuY3zFuIM9vHtKwsE1d/LVuxgDaO91L\r\nJEBenYzbdapmCuTVL0nM2EbqlCzoZjt9EqJu+2mzYykhMESryRD9yZvd1WRa\r\ni+zKr+jePBInqOhmRP9L5cOBBU0VtOjwoB21pPWtZ5HZm65+eNqcdMvJt+6b\r\nojm4nfASrdyiW7Pxua9UddBM+/0QNpOPhMc=\r\n=Xjz+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"1a68e64a5e78b8bdc529142c18c028aaf1b15b9d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.77cf00e37.0_1654018711798_0.9024733089713526","host":"s3://npm-registry-packages"}},"15.0.0-canary.3c7b844c2.0":{"name":"@material/density","version":"15.0.0-canary.3c7b844c2.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.3c7b844c2.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f4362bc6bbb5ba938ab40a0bb9e1ccef3df26606","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.3c7b844c2.0.tgz","fileCount":10,"integrity":"sha512-vaYOkq4d6OUG0vCmH9cxAm66/lxTQyJJJdu2ciZI76UldLvpFsdjv8tTEUSFQwlEOx/P5724LqLDjx01OESbaA==","signatures":[{"sig":"MEUCIQCpBZTj0G4W7g7VSvNvpVTFm5LyGR1fab2/DvTv1NpwiQIgY4kTNWIBGTfFugw18wUdGeZQ9ZyxYtQgq6YnJd+OwGw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJin88NACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqXTxAAnpWZWZOgJgQ9J6Pen/mE6l3oPXLNyD+/ddAzRlypCqLdzgEK\r\n8gIHQarew5+yxhvOZ3M6ySjjpY/tDsfP5Eq5SQyg01f+QQXjM8XZX8VNIxqD\r\nF95o6tL56O6eJLsYvtDviKGhZ51lOoQg9M9f5IWuq5/6l4KkJgsNO+EnDQ7P\r\nTMxUutaSsIp8TI8Qx4QjZmEjANzQkFvwlstOMArWH6YaXbufcitNCZ/HRGvB\r\noNJo5y+4GMIRTN+4Qb1ZK9LavVFeU4h0wfz95xn+HOyuwunuXarrUMlsbX0C\r\nuSesziiaXztNGEey6gPcmyAyk83kJXXeV5YnrMwgzSeFkpTU7/p1BdCIX8bw\r\nvqv/K5QMk6gfap51bjhl4NWfiiTdwbtYooTB08ku3GOttr+gYzCuSM5e3PBM\r\nvMQA4ntJ8hwTS7PWaSXW18kJZCJyWsC4yMoXzbKH+7fTDxXtxfSOXVq2W+kP\r\ncf3gabEsQ0RcvlWwfowJH7apizQe7uqS897LpqtqpRz4EBE+JHDUPrC9WKdi\r\nGcfrDkf6Xm9Yz698NzW6flLE7v5GBLBjA7tmscyroBBbNER5HhVnwx/Ky3Nl\r\nn8QAnGHwkvhQkZJioy1rqmXdXxqr1QO5RMs38rQSN6PXGUnceqWwg1Kn+J1l\r\n6xprUDMKDUBClI9a8pk/BbN4cue/AFgJNUw=\r\n=kGvz\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"e9422b2e6573001fae4c8aeb7cc75741000e0034","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.3c7b844c2.0_1654640397469_0.42158923840441265","host":"s3://npm-registry-packages"}},"15.0.0-canary.df47894db.0":{"name":"@material/density","version":"15.0.0-canary.df47894db.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.df47894db.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bfe0cf2ff1bbdfe8241ec7dc9eed20ced10875a3","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.df47894db.0.tgz","fileCount":10,"integrity":"sha512-UWHYGqYSOkERQtq1XrS2xH5PJrgAfL4sR74wg7SrwC1jsVnlYH48KC4p+Ql/z4YXpLR7j4nEY68u3QxgHy8M8g==","signatures":[{"sig":"MEUCIBA9icsx8MIJwrLxXLURpHBnXBdJYAoai6+ncE/67lusAiEA9KE/cK497afX45jXd3F4Bsj3kSivC6XG83CO7hdAKoo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJip27WACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrsjA/+M551/2/ljvq/lOVVzkZvKfDuuSGXwH5UVXJvB5/xqgKt9NGB\r\nQyXyOi+6nDMGrS5O5ua4in1PvlBa8DKDvzroSU7gXl2X37xd3Qcg3K54z9/B\r\nr+uyVaDd50snT4jJpssuiVMOy12j1iMiQzObaYcl97fAQsLsvVjQMiKERnj5\r\nPNuR0cKkIX9554Gqh0005/F0c5HSmbd/aUtoI0B8TN5Vw5MIgM/UhA9PXXgc\r\nPY6p3Ffqrme09OjF9DY0co2Tz477pp2rBxslwgElrOLAU1BchMwEI17LGyLn\r\nibGgxri2vv/JzwBXINGyjcSgN+aPcpFmNKs9IR+nPyAFEZwJkzFYJ4o9t6Qe\r\nUeSabZfYOoCCPxiU3p1mtygmi6pAuWUJVjK7OvAUSAgYZMLPR/2dD/DKz+Tl\r\ny0Gp/hAkaGDvlq+5DPNcWl/wUubQZM0s4aJGyW1MZRh0VXlGA3C2abA5dP9J\r\n90gj+33sqa/V/NR6K02uDWFPEGrXrgC2PnDdAvNKfxhx1ZLlaaM8aKxZIvBr\r\nE4cC0l5ih+Uamw68ks4pi+TOXKHjSfTLTvWvVpSQYYYdIinw5YiL5e5vEcZY\r\n9qgoJxw4jFLGXEQsUtYSd0kdwqSNqxWbHOJOb0at/vQSo/coQhzlmpoTmBX3\r\nTRTeb2HdeMZOIwVkyfPBKBNUx8ffCtuSG38=\r\n=S1AG\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"42be62e51a7c150444c5b32b2d2acee03d09e6f3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.df47894db.0_1655140054213_0.04587558578220463","host":"s3://npm-registry-packages"}},"15.0.0-canary.b18a873dc.0":{"name":"@material/density","version":"15.0.0-canary.b18a873dc.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.b18a873dc.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"926c2ff3baa6c74f3aa7d3946df3960390ab0701","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.b18a873dc.0.tgz","fileCount":10,"integrity":"sha512-V/qrcrZJgLeE/dR33mMWJV+bIx5bIRyU23oTuNDNpD5uow/aonpdnCTa2hWlMgvr0vyApZ850PClOmaqngiUsg==","signatures":[{"sig":"MEQCID0fmAzQOyglwr3lo6vJUB9kUdz0YsOvpMaVhJNLTKkEAiA/YPQ6mjxbLl+rXpqAPwkjCH/+lC8jT3uVZBrEav4emg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiqCqmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqd3A/+PJZrsEsG7y6yeEkGXCXGD0d5HPb6iVR8hxifvzzkTpUxWYTn\r\nqtvJ93l8G3NCaQJHf/qjBaaJXL+0x15CDvalDv+pV7/R1cagMDQ1rp56+/jV\r\nGJecHetZYIJphSUW3ylC1GV5RuTARcMDFJbV6d1c/7djgmLL4b0/PSVg0yPJ\r\nKIstHglpFvx598ggLjd12nzDdWhfMorUVrl3erXgRQKOlle0uHoDSP1TZgIe\r\naV9oHT1vcxD7z2ys0HiT7M5KWygNhEpxF5cheb8rUmUixQB/JsHdEy+L0gRH\r\nKLE6yzcjOSJD+88Vk6wKkz8d3iA0d8QGoCUBs4/GEBdvOGyMGy9R+5S51Ufo\r\nc4v5kZmRZqLmxAtPLkQsLZ5E7f+T0WHN8gbsd7xyn+X+OufyCfI5wY+wnjiA\r\ndxHHkHovXtM1Hm4u4HCu4xfHrW4YIK7NdYdB6ZVok1V31Uhfn29+9wB2q5Vj\r\nFGuknFE/Bx7BUnZ2HVL7YJwNe/H/8ND85agFQlZGiv0aKLqcNMD3tc8anw9u\r\npmtSezF1Xm4cAWLVEn7tsF5ahELlFSZtKDspnOqfHCPYCcLRdBQHEk/to6Ir\r\nqMJps7B11LXZTa4yfvUFv6TZK+PAjE4iYBsdJCHssQ/5wR/PApc1Gi1V1GOK\r\n3T0DzTT9qQkbiA4+Obr/e4Ya6pikjjPHXgw=\r\n=9t+M\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"b35dadfc99a3788643d8762f8afda3f2d6e76d5d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.b18a873dc.0_1655188134139_0.6420015748674928","host":"s3://npm-registry-packages"}},"15.0.0-canary.ba9c29637.0":{"name":"@material/density","version":"15.0.0-canary.ba9c29637.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.ba9c29637.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8f54b26044490d818e86c3855035850cd8203cdd","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.ba9c29637.0.tgz","fileCount":10,"integrity":"sha512-BbMaoc+zoAA5bye//+/V8koQsV9zppwHPh3OV5uMMDGpXOGwy4iRDF9d8VkV8nDD/t7sovS1Z+j2v24iGF+3UA==","signatures":[{"sig":"MEUCIQDSGV+aHX8ggmsrFz5VnhsLeA2XAVqopWXhjwiBIOM3MQIgUG4m+dsAMlh/p3ERKi3UVt4AgzbMtjE1J7ydL3uE2Y4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiqNniACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrTAQ//dax5ARUL/SDXkNeNsvd2AYCDxXyiNGsqYwrN4woB7srRQ6dz\r\nhcR1KvS9CoL/uu6vtKPtrkenT8ntJKw0Rqx8PzMu2AzFDbogKy31jXht7GnQ\r\n5bAhxH4m2HAmF5i2UFQecPYlSaohmaqQoYrN1IsdcOlFU/xqH+AvuUCXDQ7s\r\nIXHMuKxG+vv4fW6WS5QhwuHvo2d9S4AZzhErVsLdJBtvRcZg0vqcLEUEjYKr\r\n9GTvl7a/XXxqFlXdLCSZccjPoeUwQnJDvpqLVbJ1uFxUf6VgeC89t6zxvUV/\r\nEt3EMcfq7hsAOdsvD9/mJLODWgG5J4bmi50mCMVt/AmnQDb3r8chJCKMSMlu\r\nB8xs7nxFkpof6ccXW1LHaewnP5Mi04r1Sl17O4+W7Q80nezJ2c8WP4a4TgU/\r\nlMDv02w8K7mSIQpoBsYFZDX2ol6WKtBZjZ/Xj3C8B1AGeBbUs/7YN/kltaoU\r\nrfeMHzGE7jINm1lUjQ8psJq151Q+gm4fVb+DGz6gEEGFGgVDMVl5Z+fXrOU4\r\ndIsx3Sa+7S9PJ1IVPf701kyy/yl1JwNsfjbZQh0m2UEXB2bHONLUuWYCRcq6\r\n/RAMxmhVQdNSkWClbAWHmhtX8Sq6Jh/P6QZfcKvnolV+KlzpzvT8qQ1qIYxE\r\nf4bpjZq653v62CdC/XVsCSlLs/KTRskgE9s=\r\n=x5E9\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"2bf89a291dc4aecd82cf7a6432d198374cfea69f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.ba9c29637.0_1655232994662_0.7450182598321267","host":"s3://npm-registry-packages"}},"15.0.0-canary.9bfd12f01.0":{"name":"@material/density","version":"15.0.0-canary.9bfd12f01.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.9bfd12f01.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ff8bcdcb6f03a67f0b442df2804765bd97686763","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.9bfd12f01.0.tgz","fileCount":10,"integrity":"sha512-4JHYHv2mQfvJXf71E5Z3C1gHJ+a95PYAoD+PmvPF2raQJQE/L2NURoTBqTkquYFfTYMM5R7IPAp2ZDAmCLVnOA==","signatures":[{"sig":"MEUCIQDeDTwVq7+5CpGPsKJlEa1DK5s4W7bg69yswaIQudMPgAIgBZJnfZaujmGw4kcz0333yT1py0D8iCXWW6sYSx1NUEU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJis2vBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoIHQ/+NNuaAqppGTlLZgvxTdppBD6ClmcNBwCvmEygEkBitAQFwHEq\r\n9M+K/FU2eQLmMHhVkh+M8OJFE/nK6N3WCp7TYw6M+PHYfziAk573zCVV4KcA\r\n6SN674P0hL3FPr3oiItvM50+McaJ0XRA3bumjFzeDVR/To8gDPTVEpEHL8vH\r\nTUoSMlMd/SkKt57FwNX3yt5C2jUIFLYdkmp9fk0hB8whXIXkwLorV18r0hlK\r\nFtZ8OTPHoXLHtweBFi2Nwd5cU5BbpKToXnIQ341yxOYOtctipM57vbdaM+4b\r\na8SOTKibYLCZckNi1S8bDRNIj2az+JHj2XCZQ/aAUOaeN+SUnELf1NwHZ551\r\nPP4u1P6OtFQ96IdXo0WQVh4gmsZ7bqRzTpiISuW4dGQwGZ1pL25RyHrMP9xn\r\nv+L16fdhMN+Qm0cXHS4AHAT1z1m+XZhuD5szkspmml70fat5ss7U8LiG3sAw\r\nB0QEhBzDmL9UhTfClx6XNx9FfrB8ftXZczpvKYNychXrz0Wccu1EmRX2f1QU\r\nX0n5X5rmFmdB/d5tDgiWzsEIe/TXGtaggrafoWhB3bC2tem3I+xynDMe0JsB\r\ntWWQgOKyTLRNyGCAp8NhFwS+0i7uulP6BpT7JbHKDlH8uBZAu9D0seLTZemO\r\nK17+zIst0NxII9EsT2AgYUODWBRlzTxTH7A=\r\n=jgBZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"ba7b0d01530df70f39142820ab69babfc9cf5b8e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.9bfd12f01.0_1655925696995_0.3141516680121845","host":"s3://npm-registry-packages"}},"15.0.0-canary.764de225d.0":{"name":"@material/density","version":"15.0.0-canary.764de225d.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.764de225d.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a192e76cb77afd4d6dbbaa9efcab5441bdb247fb","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.764de225d.0.tgz","fileCount":10,"integrity":"sha512-1LKDBs53ccSPNT6wnJ06JRPKcCm5TjPdv/gk4jWJIWqhGpyVTkZEJIFGXO5Gxz5Tq1+5PHoXHdBPqQId3yKyOQ==","signatures":[{"sig":"MEUCIQDuu+PIxLpfDAsrAqEyxwMoDG6WiioYmWhX45ErFj7nMwIgTDt9GIh74ETKzX3QTa2Og/ZmnCnzTvvos3KJGDPvLcE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJivH0jACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpJXg/8Dj36NPhqx8dvU164s71CY/XexWKEcnPB5nZgPysMTrphfxAb\r\nHGpM1HCLNsKE8voKelWeJYFs9vDYJood9bKprzenBJByMUwa4FW7FtUJ2mMW\r\nHqlll3oatCBSHuXrguLqCC5Z4xwrIMkm00Mb7Dp5rUoofSC2+kWruigNHSrR\r\nFQYsnIyOlGZqOeUGb4De8MoZTjWTUD3kjz1Yv1+RWMR92Nqy2lF2bJxz9rIb\r\n3DVtSxEYDHzLn+7YtsGiT6eid1f8ZvIrDkC492md3NGB//ve6EbDVVTw25ul\r\nLF8Lq/7lDDq/Dz11HSvvrBJnjSBpAE8xCl0D1X2f/ByiaiuM9Ya3yltAQ7AH\r\n/dQ3ffMeNrWQa8OlAiJ/4oQRAwEI0wV1Fw0jSqQmISbPcO7YwuCd6uOlSfdY\r\nYdjwNuGVGtTIKuuG7JQmVd43IKtLJE9vW9h2UzrsiIWM9x+7O/aor8HNewqA\r\nkHO2B3Xdody/Zf/11r4wHf19ep/UBBJr8Qb0+1T/13JffoDepGV3ENru75+z\r\nTdLiYtl4ZOtpZ1cXL8yvSghv0iM1XoUIbgBP+ypPnL6KG8tK9oQiAmwqjCOT\r\nDQVS4goout3BdRYHRNQeAQjCOtbJ4B2q9fvJHCH8VQeaN1B5EZCrmdNiMOa5\r\niijCQin6H0f2wWKy5YW0QOyydmlSkNQxQuI=\r\n=H1pY\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"25c0f0a7c9d8dcedfb35f64d0851fc4fb86b8534","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.764de225d.0_1656519971175_0.3899638248006674","host":"s3://npm-registry-packages"}},"15.0.0-canary.31e517cea.0":{"name":"@material/density","version":"15.0.0-canary.31e517cea.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.31e517cea.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8922ada79d484ea7888a3025c42b655ef64aa792","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.31e517cea.0.tgz","fileCount":10,"integrity":"sha512-CLbsbGk2slZA4SVH8sSuuyZSe553BLFOhBkUX90oeflpxssw+r/B+oSzKdonP2HkQMMzWmjjbmvfMU209bV3Lg==","signatures":[{"sig":"MEUCIQDlYY+E4yz6KNrwdwUi4h7ackZ9xTrEfTgov3VCC7TkJwIgUPsxv4tILElp4kVU2OCvuRkC1R/rN5hqRWUqOjNFipw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJivzyXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpD/hAAmctGW7TpVekmARXsXsbq2S7v2vGGOztqWwCVzIfbe2TIT0/a\r\n4rJdDUS63Yvs2HY0OA/ffhA8EoCL9A/Rn8TQQ2P24reIC9igEmtJM8n6wOOR\r\n3G6pHf9G0WkFCmGfVgCNQFnk88IP58DnXHMt2JsrKJOuZa+4AhYYh1MvHQee\r\nBJXy5uQPKwLpT1Knd7USozRmFv6wkMQrqO48brCiHvrbLdFuK3uJ0nD6L07T\r\nurScTnu46KagAKJiof2Fo1mh4ySUfoQqvqKoiAsbchpecW4484dkBfALBgta\r\nIn5ZcUUEE+mEibyXSVpNZ3lLR00k0ZtNx5cdB2+FQZ9fMEkj4ZbIELRWwkXK\r\nYDzDbnCZ8N6yWn4eB7FNgeXmLS7AmgZIsKKiCUxKFsHlt0lotJ/DKP7FT4Oa\r\nFeJn/6N0MK8hFNxouFAu+qBPPmf1jfvyDv3UeTjYpq0EilrEM7f1E3Qm5/Xq\r\n34amIuH7rvnYkb832vzw92tsNKy880BhpuQUPRw5StOwpkLyQIqylcu0DNGV\r\nAlBV3ljjSEG64D/3r/84Tt4dKsY8XS4OrbFQhwxtPeBTz/tecHoi4mndnKRb\r\nMzz9q+su4xC0hCytUL+zTGHIZAvzjWBaxuxW8yfd7zwfBpjzOcEQ1cGxUFxA\r\nTdvac7B8qS8+n0M/CqV09Ou6HWlwVbvtmXE=\r\n=ZgsS\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"8af6d916fdf79ba9e33a883ad56f539f3decd5a4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.31e517cea.0_1656700055187_0.5556070687938082","host":"s3://npm-registry-packages"}},"15.0.0-canary.9ea4e8e9c.0":{"name":"@material/density","version":"15.0.0-canary.9ea4e8e9c.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.9ea4e8e9c.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6c43a9953000bc8acc734cd01cf8443b9ad1cf0d","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.9ea4e8e9c.0.tgz","fileCount":10,"integrity":"sha512-U3zaJtoVaJKx+SW0XEahVsHo/LhTY/TJH1ez6mU5TKY13Z5COte4cgZGUIZ/ChETZzDJU/C5EnGHEMEq6z6R0A==","signatures":[{"sig":"MEYCIQD1Rc9kHood+fmSXaSJZZWeuDt/x3DfyB1rC2VmfTuYBgIhAI8D/3ZdnCEQ5hKEELCfJGb7r5FWp3srICzOynuyrRxC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiv3sTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqolhAAoFSuiL1B0t1H5vdmzTZTm7+vIbmi0xl/iyJUqalcrd/nVClL\r\nbCFBI8Ufk2pe6gXhWMYCb+qMQDd2Rc7QItqEnMhYXjbgFJFz7DTFzVy2WhFm\r\nCdr/9+toaywO1F2qvD6GdfaURXykCPmQBPeB5/KW0vPzB3o+9fCPpFk9ITkQ\r\nKLGl6udwoxiB/RqaAaYnvCzmhBuwUQf5oz0YzQR4u1XgGdDLEFVTZ5os1x7M\r\nrhVr/8jixdd2MCB35RhYFlUa6vIzVeIWdFPctaNnj/SJ69UnFmgF7m3NCpp1\r\nh0ZrJ4/DY1RCmb4iF/alWy51OyRDznskFbB3xdt33b47xKYxZfW83QkCIudN\r\n5xof/DrtqxBDV3O1rfBgpSFEyBauk26pnxspHRrorwA7YZEKn7FrTLuJsaKC\r\nlRTcbhaF9zDkhE7V3VKJ1q9FfaohcqPyiGAKal54MTsKxUJ289XRH1d0JWWu\r\nZ+UQf4vMkPAj8Y8zttmfMk7vhxSjfH/t5MyGo+4xCmO2m71vMDjyx7PPue+U\r\neAbwgCffPphuYmGEXChJSAwv/gXp+qH2JFCUlgvmopS2FNpululQ02InJJTn\r\n4ogedQj0/5eLo+bA/7yuss9jNCTaclElTeEPN1KOfdU5YSO2YfwOjIDTH7ka\r\n09FJehTLVbqSymyldtyjjlDSQRNL2MnldB0=\r\n=Ui57\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"7a2b791f6f1e376a53ceef81767514ec18174558","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.9ea4e8e9c.0_1656716051375_0.027232167023857334","host":"s3://npm-registry-packages"}},"15.0.0-canary.cd5bafabb.0":{"name":"@material/density","version":"15.0.0-canary.cd5bafabb.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.cd5bafabb.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f8a79f1af08b53bf50974d50e02e6c71e0140918","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.cd5bafabb.0.tgz","fileCount":10,"integrity":"sha512-GG/s9ffC566pJad6ZSoMlFQLVDg5oV4eYd7llOY0SgqhSqadP5EeV+eRLdAj0Blj2HWP9FaOZR1rqFxypsU/rg==","signatures":[{"sig":"MEQCIEYpTgyR8gwpsBuWV47Hv6q8XZenEcU2L76jZQbmhIlfAiA7NcR8p379rd1vd8TSricca9VYqqCoFTwdMqyCoL11Xw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixcwdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpogA//RUXql1KOYceDisN0KmU+0mX6Sm9SWHk3Zd2vxdUbU+CIWUkH\r\nz3QsK4DAT9Qbyj88pKk60K3LirMmrZKnHc5P9/b9um5FYVAgurdu/wjFRqCu\r\nDnKOF21KqnDngjzxAZ6CGFbnzccrAqH7P2qklWXFRXKKMn7pYiB5YJkKGKJC\r\nwQgns5NQRzx/tlUpJ5QaIf7oes4uHflPHC59ntsNne98bc3nXbs+yw3oM5Bm\r\nwO9LvTw018ZiHFMbyDIgoUxsRXCI4wCgbpJhQDLGpSCDcFCb2jh3C+cWDYnA\r\nOmGEnXaFT5cDVCQW7JRYy4mIKvzz9/c+3rtTeMTclx8wATP3GFHaw52RT0dx\r\n94tfAszKqW2BdYdyJtIecXbQlVyD3kTt+YXDhNbH9v6GOC8yRSLkEweYuiBH\r\n9+psHv3U2dFHZVnQ+vpSzylhUnIeGmXsfZGcxXmkovKRcEFecwbwQFrEv9Hh\r\nZRQm+rZXQvfmSlFjL2B0VtmvXUHva5Ul5thlA/mbGEAhuikRumxn7Os4nSb1\r\ngDpJCXQmC6ttss0CQujyEbGHjkwRIKXr0BnhIzHnpt0OwM24QCRqCW85Bnjj\r\nCf0TJFJlWOTqJSZ54yClAdGhf+ZFXKCZKHVrGFkZV6ZPvE/KnH107iSXtafK\r\nK7N4VpDLCRIH8qokW2m/PlptCnA/aO4QUgw=\r\n=9Lwb\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"fceb62aaa361c04ae0a30158d529c7e6896b6f9a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.cd5bafabb.0_1657130013333_0.7143348657760515","host":"s3://npm-registry-packages"}},"15.0.0-canary.a02fe49d3.0":{"name":"@material/density","version":"15.0.0-canary.a02fe49d3.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.a02fe49d3.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"87f9066a14bd18f93fa4279a87c204348e821c42","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.a02fe49d3.0.tgz","fileCount":10,"integrity":"sha512-AwXdxJykBB9Bji9OjHPaPup7YwATZDQewgydCVNZM69ui9acjKSiJDGUYqm9ARX05yTPeX5Wsg3cVCyXOFAmiA==","signatures":[{"sig":"MEQCIE1HvWMXUVyGriuwRSV05j/zYuB3kv4aNmAne0M8VLt4AiB6du6ZncWWterJxEnKArEjmfe4+Uaadix9O3RZV9cjYQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixdlmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq09w/8CkX0F7YesfNyG0nUMSubxn4lWe8mVrw2mfdi+z1Au3qr5+8K\r\nE/J9tArYBCX0p6VbRltM2JJrWqslmbej8S9YDqt/K3aXbCgPY+t8veNKiirj\r\nRY3PHb+oe7DM7MHs3MbDQT1a4N9hrwfVCOtV9VgVEtMjK2pSPIYNElqIWSvG\r\nMtQBaxxh2+k6f9VJQcTU5HiEryZIy9pHKPlcFy6GerOt/FUQNQOmsVvS1Enx\r\nn+hhhLwMAMV0xl5/4bRezns9an1IhAjuy5aYgp19qZp4h8nY3iC6U2Caainb\r\n1I1TAJfT0Shnf9YnNGpc87UZUFYmGdJjFJEYJcEQCrMKQdRtzYpF0kQM23hE\r\nNGVITnA68OIri8DVjzHa9vpkExcIB5z4DYf9rrLbNZRb11I3GjrKDZsB8kiL\r\nxLbap0R7J1EY0aWBdYOwwk7v7a3vCqzVihcoIvYdFZhnN38hskOo0lnKSanu\r\nh7toE+uIN8KL8xo4qwLcqpOzsyTIMuzsCgaU145cE3nXuPg5Xz0ziP3Pm2mj\r\nJf1IgJiwdtCnu3xv7w+vJCDsTJmvD8dZJh3+TaHSCSq/7svaU1B8gdttHenN\r\nm7vQwqmEQ05vHz6J9eLy440biXA0NsuXyEtcFZm0Uo0ZuhvvBHlQ5k6kKu2B\r\njvuSNT2u6jChpLIU1zoxK0LorVteaaTQvXE=\r\n=krVT\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"8304e794f430681d03b9d2d3193e635a072f2d8a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.a02fe49d3.0_1657133414156_0.07700974446657494","host":"s3://npm-registry-packages"}},"15.0.0-canary.826a3d8be.0":{"name":"@material/density","version":"15.0.0-canary.826a3d8be.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.826a3d8be.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4fa6979f27e43aa11c8e29379c93a80c0cf81994","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.826a3d8be.0.tgz","fileCount":10,"integrity":"sha512-oB2XvEMFv9GivCVfyi4k3Fj9JrmEk8nFCz9JtZ3m7jKOwruRUVLsPiD6pZZjmf4EQ95hjxbONvZ/1EO9y9akow==","signatures":[{"sig":"MEUCIQDwa27T1lla396TPekCCp+x6AbVLMyJZyBHe+qXwdjQ7gIgO0ccNMySR6jmkbCBjEKd7dFTgn+x9Mhqg7Eai9/XDa8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixeLFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpQtQ/6AjWMZz6Vag5O+cvHF9I/NCTFoCFc99JXECIDd7dyoeY5aYSm\r\nIKBi73AdbzjcYCrBpivh9Vkoo79yf6J8Anq0MQEHNMglfufUI/sZbPjTWKQe\r\nYPVHmC7g39hFDWuuh35HcPXUCioHiJyfkoWUj+xUhbDP+TrEs/qvBGs+SWVZ\r\nOADIx/BNjUFxuPedGZzFYGG309f3KsbqhOwto2EUJbHh91+/fxf3sLlwVhhn\r\nb7SIq2KCFsl/u7MpyhbH0wrn1n7qN6CLYmI2CvvGnQKbD0V5UBGZdk9UxWco\r\nQL5CIqGiZbuxRFwL87CBD7aJ0u0w+/lT/c7a4Qs4ZUV7IFQjxxQEmLdTcnUt\r\ngh7v3YgPOtpyWUPGChNi6IzB6LASyz8GN+yUetgUHgDYX+fMjjz33UpL3sM3\r\n5oPNtd42dBeZ5gNbbpnvAiCWP4+uopNFDTE3opGrlDa/EECQlJIAvnxIbhBs\r\nqTmFyZ7x9qvKTkO/ExIOuRc4n1mohhqKZCm91ze25U0he/JttkdU6yHhj58q\r\nHj5e4ZkbT9Q+R/S0Rk3AOrMocEpFNtvzPsNIl3zxarL43iMMoV59PUBYSJvj\r\nlt96Z5FrPYBK9l6EBCCrAHd/s2/xXQr5dkJt2bjIUcGdQj4AUEW2UOPotm7J\r\nZN7dwDUGxzA+KLiIhIv/Kw4Lfq+V8ln+xFE=\r\n=hhj6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"f54c723431e97d10fc1886f271ed251cb10209ce","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.826a3d8be.0_1657135812976_0.6689383132069293","host":"s3://npm-registry-packages"}},"15.0.0-canary.ef276aa93.0":{"name":"@material/density","version":"15.0.0-canary.ef276aa93.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.ef276aa93.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"01328d333756b71ea44cd0b0024ddc67dfdb1499","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.ef276aa93.0.tgz","fileCount":10,"integrity":"sha512-qS7Uh9bVCwf4I0mZS7Vp4XhsrcRpRK9JKxEsHkjaCA2lyaWuoipCG64hbqFypTwSOTOV2cWgBAhHvYxtlTaU4w==","signatures":[{"sig":"MEUCIQCT/nwzCfGsw5+Z3YOAiW/Ibuqd2y/qxCJwe9WhCK6HNQIgBdOeihvS07S+DT2aKjdQEgWuD6+oo2kWr7SpgwGfKpU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixxF7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrQNQ//Qtt+l/B8yw3zVtCxS2LULQ6BQXulRc9Hm1ZZ3xoxWYyifa/A\r\nmjHCseDM4FHOXWHyA1MAmJQcZOApZ2TDTkqrRBt3RytEdfd3AnatalFZE7FW\r\nzIoMW34vIXOzZPTtZMWFsamiFjYVN/2yIii0n6Wamyug7sUHaOG1Z+WXE2R6\r\no2+dhsPhRMoH+oJhgkxNJa2vaF3EJ1XkGGl3/XNPsp4Y7utoG4BdK6ciAf7a\r\nAiOHxzx5K1+Uo+XgayLwHdY1SKyyYcR93Uay70M/7KTc/ie5o8gdcolT4HQW\r\n6LNF8p12SvDPlscy5SjjlCzjuZfmDhfkKoyB4uzTG6lAv4m5Z9v3bDPpWN2Y\r\nQFI4sGO/euxIFoAci1VD8WxJKlwyyZH3sjzLq5GJNxos6lQtaYKKaVznaA+0\r\nH7PRsa1wIr9C1KJSkz260/oCTZpK/LKKVfXpQBMMZM8hnvgtejo5sKHwBwHv\r\nbjvUDcdz7xR8DCIWPRidak74wttuURbGSj9uOque9wAdpIgtKuvKnM1EkQV6\r\nRqVkzHNnJYhlCy0rdA5cqpj9J3eFBgAI4Q41Kl3hnB6QxBVUBwz4r/Wc5gHB\r\nWw0Ph9MinXQpa2hrUlUwBou1HfdT5HMujbUWPtPkNfZGzEcENHm5AXsFduIJ\r\nMeH0tjyEVZpg66yEXIE4rNJFGlEn6EO2elc=\r\n=Cvqj\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"502fb9536e29ea5887a9fac4aaf0c9dc2c732e61","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.ef276aa93.0_1657213307271_0.15361891813302542","host":"s3://npm-registry-packages"}},"15.0.0-canary.59cf61d6b.0":{"name":"@material/density","version":"15.0.0-canary.59cf61d6b.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.59cf61d6b.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e55faed4f4781a0fe19aa88503e91b7c970e685b","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.59cf61d6b.0.tgz","fileCount":10,"integrity":"sha512-KfkaPhMJx7aklzNPmclKzlH63MTYcjn+v/qrh3Cbnr5xMxgn1zk7e/2H8wPrUKswmL3icm+wxNnEKM/BHAwB1Q==","signatures":[{"sig":"MEYCIQD5poVCLafypUJuAsC8zhZbmmRkYeKHp388/s/wcDJ4mQIhAO+/aRlbg/PACdrcpYaMS6dS83hxok5UZGif+azi0cmM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixxg7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpMBxAAkWMLGIAlPFhJx1HGmnNopXDEvCfFxZmjHJsFhDLri85PCO+K\r\nkEGwMzGkgpbZn9F/7XQ5pDLchyhpsAUVg3vZnuB7k0ySNiZdwgxWqmYgIvcp\r\nShGd2+tZGCAdF606tgACvwrX3aq8KGObY6MdY2WtlVqcXXebSLOglP1Tlgc1\r\nxzVwbs9GVhnlWfaIXeemTZHwiCZURK/ehZbWakJ9pyeTqLuPy+Z+kkWmmXhJ\r\n3HhRhfjS6vr14qee6m+UxGxysC+3Wk20Rqpjsw0IhkRe3JvW10YSZJiqhiT+\r\nThecAsHpppyGq1vKaau+76nvuNJ2LZLZwhhrSW2F8891m4FYMT3XA2p2rfT7\r\nq9PRrlXHpX4lfDAKoENaqvNYJgOEHmY1JYjwZlKFdEjjfSQiee9HNrdnY78V\r\nbIMfVaPafUaiPbHhIxjHnvU+fsXFLcw/W1lviR9OGcsllUb9oDVJdYRetrvB\r\nNfsjt3z0YReYlGsb4gbqTqNLpjzjo+eB/ipe9btwJn4zNOo/Gvc+Ew4hnqVx\r\nB6JVdV+Mrco+XtunSE+WtBKLN61YBPfMsxWMGnQ4BrJZOspZBUK1g5Hl/MJQ\r\n1Svphi3xiS9VAvus0VXix/l/mqdCIl4GgTq1j4KG+dqWSJaXN7JNNAzpbriA\r\nA+JzNQzRvXj4rpf7cfzK7gXNT0R7inHHUcY=\r\n=MgYV\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"2f27bf33b194929683b4faa9f388325b07b408b4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.59cf61d6b.0_1657215035004_0.9097740274069555","host":"s3://npm-registry-packages"}},"15.0.0-canary.8647092f7.0":{"name":"@material/density","version":"15.0.0-canary.8647092f7.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.8647092f7.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"108080833ac7ffe3473865683f4f7e27e352e5cd","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.8647092f7.0.tgz","fileCount":10,"integrity":"sha512-2lbDurq/8mpM/2RHojGSEp4e8dfPN3u6BNqC/x8/rXnk3700dnLZH20uZItQPr2njcIb98mw7z8TFEAjguiWPg==","signatures":[{"sig":"MEUCIQD9MXt0qgnew+jYr37Abb3eH3zUuJu96+aR/n4GpJ3yFAIgIeNAlcXr4196V9vlpgntQ9VvxporkQaCraM2tL5m0PI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJix0QeACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrPNBAAnV7a7WfN9SJU2c+1pzD3zC7GZiS6X7qgK9LpViIUXM6I1IsM\r\n8zL6XcvS91u28p4meJ08ADXwATolRG3TrkLjQHBDQ3R7ULE60LwcTJdMH1Vr\r\npVpeQF5ylYXKAVBgjY4vY6PbLCp++aLyS1kSsRkRA2PdsV8/kV1wv9cJQKBj\r\n5UBtKOyWuk4Icc5qjeNWUuA29eGs6jn80PWJXui0wFbyr+XiV3VlD9SmyQPu\r\nGpBgftcm+E/KTcGtc9MRIPTX/fpGKaIBDJP528o8RAuOtsj+z0BpTp37+uDB\r\nqyNWI6R82dJDmiBc/JxSxC8sP6iVuns8dzURf5jkrcYti71Bk56dun09mzWP\r\nlla1pd+M7S4XzI/NDAw7M6aKIfbHPtqVg5ylAPChXeex1xf3N4iqcbFkxBMs\r\nvgn78RBeQ6UN/yTsh4DIJPOFg80PtXQFZgEC2+DC3gI53FsPY93uW3NhUHOp\r\nKl95mVg1soSZAh44xAIV7Td+OysVJcHpOTfpfFToK78u5CJf5pwKXEcczrLW\r\nWVSKIHYDV2N5Zhc82segLlun0KQ/pauea2aHZr+49DE2f5hTAI26aKohUOmL\r\nTTslLnOWyG3vpEexcbixfJ4fx8MU6xEjgCVDDl/vDxWRN2NsyKXHktEEtKf+\r\nWIHfIfdKhxOGT+UKL9nMAFkZRAqBd1wqdpk=\r\n=BSnq\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"1edf72197ddaf5b6318f71205888f8ae695e9b29","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.8647092f7.0_1657226270590_0.5938091445429208","host":"s3://npm-registry-packages"}},"15.0.0-canary.02ecd4d85.0":{"name":"@material/density","version":"15.0.0-canary.02ecd4d85.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.02ecd4d85.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d10dcf5775b0d2c45c0f6a39402255bb718737bb","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.02ecd4d85.0.tgz","fileCount":10,"integrity":"sha512-+UKp28EovvOjLWwAVA7mrnq5utvpJS2up2r396eNhotUEvim5e/e9DnAWZU5NK+1y4YZJluFnREqE+qiqjl7rw==","signatures":[{"sig":"MEQCIBlYTFpqJL+TLD2mn0+WisFfCE0UfSL3FVFnSA57QdQYAiACSwIbHdptexNp+JpcgPeu7H1663mQpvnSrY2ajK/NwQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJizFH7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpvrw/8DwdabHxb9GneNELeHqVi4RAzGrW2z+YvqjDYRPV5pJ/LpgUR\r\nRgGanuVKYZynK6hlbMeQZHiNveFeAmE5LmQ22np5m2wDd4A/FyZbXTFFqymT\r\nAW1BfQ6Eic8bH/+W2Xis3JvcaSd09patW7S8AONRlF/Cj6Hd2zVefLtienmz\r\ntrWPcg56Mlo0ZaJIq5GGhphVT/uoFXNSyu2DYj8tIZPgBxfn7iTQJxESyark\r\nPpGc/P/h2+f4U8UGhAHkCNq3nnp/YKHwpt9twD4r5DEPLjADIn5mRQ8jrqDy\r\nEuSlctS/D7XqgtIzvUmIUKUA9j90mK9tFnVWoiairTjc5pqe7+ICAtOzR+v+\r\nsgFtQcsH02AjNB3/wixrxB+/DEVbp0WhQUNX0TUf4QMCnB7He71LtwSRJ3K/\r\n9ykPiCkhpVI7e1Q1YoGACu9aDiLkb3L+t4sgapFEPqx+kCv4R6hHel9BC+L4\r\n60/JEfBGfFLEpvnXD+5YlasJYkMCgA2BtxYpQH7NFISge9PWusS4zqwEZU7J\r\ngwSgC+x6RJUGKUxw3SFZsnBjr0v1WWRenlb3Pu0+inIQ8/OztIbpuGvi+ZFw\r\naakxI9+E8u2sl9WArKHNqnFn+4KhNwZl4M8AoXVCLdopUTvhVs2H6WQrgS3M\r\n5+6JgqGM9yoXlPc7+7E0+Z8IJQivwfffXkc=\r\n=jLao\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"e9bd9b1837b6df66731c0fc9da61877874518d2c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.02ecd4d85.0_1657557499622_0.014831283266060424","host":"s3://npm-registry-packages"}},"15.0.0-canary.63d3a146e.0":{"name":"@material/density","version":"15.0.0-canary.63d3a146e.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.63d3a146e.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7187ee920983b72dadf6b553a13bb3e22d55092f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.63d3a146e.0.tgz","fileCount":10,"integrity":"sha512-btNi2VkjzHx5ZfFubvvkQfd4JL2gZ9JWQV1m95YFTYfDCgT2cV56TmBhbxzWpvewVRNoUjmXXNIG4bftRheeng==","signatures":[{"sig":"MEQCIBRjdBMG6HWdYVNya0V7WoPWgLCVQuD2uqbxb91thdebAiA/IMQt+pQkTUIXoofN9siT6eJWKqJ62X87KSGyLY0jZw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJizVyoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoKeQ/+JZW61FYsYifRIoherCwd1ZZnrFUXOZ1XkZLuDNirAEqJY/BJ\r\nzmg/sIHF+JGEMLLn2NFk53fV68QXWvg4JfI6HbQ/A9xN55OrGZKe461tXyyX\r\nJERyJTtDn5ox0jUKWfDKCyU5LSWC6N9fubOsL/OFZpKn6q3WvyvGfHoDTrs8\r\nfJ9i3i6J4b7CeaYYK+CkjiQ4BHQCFa03Ao1gUbs1AiRh71l0mtK6DZJcgLK3\r\nGUYQ2rNKYXvsibGtHIavwvudiVPEEbuV2W40C1h6sugfsPAQD7n4aGVCbYIr\r\ntsZe1eDy4iTxLNtLG68Z2YGrAXHw+fcHU5fiW2UozOj0hPpjWHRsuWJ2sICN\r\n4tcaciBvDMEtU+TzfABheery+ORsPt0EyuZhpcudKxlvjDGuUpmJv7xQLVI8\r\na27xQauQOyvHTZ5ETPy9XuMjtGyWGFs7o07VpUwFHiqOCq6TcS6hl9GJT36m\r\nM/+bspI5rHTjOxwK5rhyyRzlIhc8dwmxyX3coZUUDbtC8YkD98SfG71dHl6s\r\nJyc0CMaDP/82WO8NTsnf8zxLMONX1yj38zsxyqeFzeYqwMZia5Q6AuNG6m3W\r\nm21mFvGkfY6TohCuO0TXrEZyk2hHTZc/CvF9uPlZwC3sBwVCt0c5vXoHofTE\r\niw8DiW5RIBEMQ1kfdP7mdxLXj9iVZdAenWQ=\r\n=PflF\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"593f32d351d8703bd0422f65b3651e55f97fd31d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.63d3a146e.0_1657625768390_0.3424799984708713","host":"s3://npm-registry-packages"}},"15.0.0-canary.88db01990.0":{"name":"@material/density","version":"15.0.0-canary.88db01990.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.88db01990.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d4865abdd272df19afcf97abd3ec4e3183226d01","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.88db01990.0.tgz","fileCount":10,"integrity":"sha512-YMxmbQd8NBvXPFeO7fZTsj/Yz/1neOS4w7mAYCuulUgwYx6Uj542X+0gIPammSZYN7TwjVulxq7vrM9PzrfqJA==","signatures":[{"sig":"MEUCIQCE73BM3VhYhp0eLuOCRoobJ8d5Vkr4q7fj5TlG2izR5QIgEWn+JQkwvqBmqp/wwDpX5sFaEwLekEDy6PanyhujRMI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJizV1aACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq4xQ/8CPQDI3akS8chsC5MurHq9B4i9G0S+hHPciVEWP9VLaS9Cynx\r\na8xKS5BjaBVh8SWLpq6RM3KArYTPsoCOlRLu1fjCcQGxtMFMMqOJawM+Gt6T\r\nvE83wrD8Rcu005ZVWClkpDGfXG4c7qyEtZnX4SqmmKF2M65/SqpExK0fsLPE\r\n/XkZ4/FWcNGKdT7sXY6JEOoGaFhUhF5rlgGmHVBkd1+NhPvwGRNvUt6j7jzJ\r\nFfaqaKlcdrVxJ2xGhYZN4Ra/5qPllSx7VEm5Pe75q+NvmPH5Nd5G8s2KVmNm\r\nlKng7WVKrfO/98FzBwosH7F6aiYvpWrvZ1JLrtNlKb+zM/G2TBqq2Xp5kt6v\r\nK/0Fo9RGSK6/5QXRCzzogz+QMnfMCYm1S637fm+ZL1MkBaBKzTUXsaneP5Xq\r\nMXK/vajuf5/1tFNOJQsoWlbRcrPz0ZeRA3L5pJv7oY5mwFm8nKB8cwT7iYtM\r\nW64it19loIUFUjOBpYdscRkYCLUzLm22eZ4zfDWApg4xfL/NGtXza5Q26S4e\r\n3LTjr74CIIvPkg9GLP5Qk84gg/eI5nEoD3KKRPrS/agkdEdc+zdcRnWHmYOm\r\nA6uuxCzMHqKHUc/CJ8uTLTpnHTYaNvlgQ6LN8FLWwDQNEi19KvLUbXApRurn\r\nyM2WZ3rdjULdJ1e04OZ2jDTFaLPqCn/WBPY=\r\n=Rfky\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"a2570f15e2572775da6e1894e5310c107a703ea4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.88db01990.0_1657625946493_0.7725025469150097","host":"s3://npm-registry-packages"}},"15.0.0-canary.6432d8fd7.0":{"name":"@material/density","version":"15.0.0-canary.6432d8fd7.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.6432d8fd7.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6959dd218a56451eb2b2f1d67d1e26ec539af048","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.6432d8fd7.0.tgz","fileCount":10,"integrity":"sha512-0m69pSCs3PJGl05Wu7KikeEAVl+gAljXd7HQ5hjlKhrKqSJ3TDd4K076F1Cu3zZDDkZP64vR5doZXTZugZOqAA==","signatures":[{"sig":"MEUCIQDwKr8thodTidVZQq7/nv6EDpsECglkd6wBWn1dv1up+gIgGu7evY1wgH0pYyR7gOWQaUaA2Z4xd7xzhfeXDQNkXaA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiz8WCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp11w//c251/+GibirxX2+a2It5NAQXUROJo3HTKtt51BVyXc1DlL4W\r\n9GvyKQpU+4TDQB9DkWlKv3NLiTKxhjJ2xbVt/R0OeVYEPUKPsE5XWjFt5JML\r\n2Ri2bWMt8IiqFC1G4bvoDUM9Vk9TBRUfMQfHZ+tsntJLMDZbbrUipXtXfNfn\r\nMjfZFOvn9B2u1gZ9ED3E76ditNQFG8pFGJPsqHPcROAC++bvelcfDGvLI3Yb\r\nNnRVQy5sGf2aEVF4EO+qO1J2StoDQcRUrCiflmxIMuT9wGS0qrafoSxArpF+\r\nfU3ZPfFlYrpBIidoFBlW0fRQsnUmvZ85R93QDByAm9qpYTL0LNrlPlRyfFBO\r\nRWbn86IPOMHxVYcArZ0royVnroqju9hLsGzcaRL/CXn2CQAJ8i36EfqafLlh\r\nboXW6K0pUETslq83xShJswqOiYlYkQvbo0CMx/4HP2YssFtriXjtZQTxoMJl\r\nBG9ueJbxwqAvmFAabNgJgnBM7FQ4CSlRErGbHUmQ8gtDbEK4Thjoh6zwu2f1\r\nvRgkxVK1dM/P61V8dTPoLWNJrp7za1Y/wgEzfC7TbXeSHFYaX2z9AnLZR2b4\r\n6qbPXtOcLJUFzYpvmpeH0E1LRa9NjU3Nbzl9ykiFoPuh3KhQ9wDK1RqJoCTs\r\n+8f9qPuCjFMiCqpMXCAbVM07HCyPUM05lnQ=\r\n=baf4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"307aa53d6ea873bb978456b538f97f9922496798","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.6432d8fd7.0_1657783682054_0.8961869375354583","host":"s3://npm-registry-packages"}},"15.0.0-canary.085f9b25c.0":{"name":"@material/density","version":"15.0.0-canary.085f9b25c.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.085f9b25c.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"828ce83d0c73811d423b3cdb7e897b8a5a8427ae","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.085f9b25c.0.tgz","fileCount":10,"integrity":"sha512-Rj1WuyccBlmnV9rrffngZ5vnY2Z/McVxQ2zAq/l4e2Gw5pcGrAEQga6+vyQQlU/u4Nf22JvQRlTD1qpmO/V0YA==","signatures":[{"sig":"MEQCICxEyLzQcatWu6VbhHBRXYRPoyHSGCkv3+92e+gzg+BQAiB2kaenYeFmcmlSjqMG5zkYWDu/2PKO2El7P20vlKMzRg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi0EWBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrPShAAiEAHpBlbcUD/LclGGgAEtSxmWBadqKVLhR/f6MVJnDjE22IM\r\nC4ChpJZ5LxqUD4TsiuD78ROS8iqjnD82luAzwitHA4dSRk75fmhkIjBSugDY\r\nemXWKW6sd2LESRiaOo5VixL1yjA6igq516bgvAIWOhtsEwRrg6f3hv6P79Tj\r\nmrtP/7vUQvx6IqvlhTU25gykB5wpVOgTZ3fKLAQT7KZQSWIBS5SG/YWYY/Tr\r\nyejN984lXQwAQbafJvaoD87mhZIKnMeI3d52MFdTU1nETpAkpUYYjzR1ICJb\r\nkvl+sXfGhwkPYoGVsEek5eoQU0S2Bnxv/4E7g6Sv7/VBXsQ1DRstR3dC91g1\r\nP7FG5xd/JE1BccFZ2NBHD9zPZEvv5kP0e2l+Gk3A57GJYwR4eB0y8a4bKZFj\r\nvict9Yxvd1WAi+935PZ/kECu/KfYnZ/4sxX0tMRBopvEWx90UsmMAaQXC2SQ\r\nGyHvCmw1ptcZT0KpkmQdEyfGwWV3CUZ1Ckq+lkGE0Vg9MgVwzvQZvY+wGD/m\r\nHWgpVBOEeh5OZmLt6PBET1jmAVZtPKzhM6gB93BZKNS2jCVBYyH9dGba/GGF\r\nQS6BzT6bKyYFLji1VQz9Ve7Ld+9HzJg2j8YaLqpd9dv41rzxHERSUWtCjrRB\r\nW4nnFZIeB3RhFBe2WF/+Pleb1nPT51XieY0=\r\n=mylR\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"766a8d5f5fc7e4e022835f16c6ecdab8d2ccf071","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.085f9b25c.0_1657816448718_0.00793101436321364","host":"s3://npm-registry-packages"}},"15.0.0-canary.39f9424b3.0":{"name":"@material/density","version":"15.0.0-canary.39f9424b3.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.39f9424b3.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b5bc954f35ae417f7c28a27c4d155c71cda1e6a0","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.39f9424b3.0.tgz","fileCount":10,"integrity":"sha512-uSIpNVCr0ltDj2xW12pBUZ5TLJ9/ZO9dOpzGiTYNeOHogAByjQkFCnP8zJIVyCYlmmJErununc8e8UnpPUBong==","signatures":[{"sig":"MEYCIQCPBu0DiyGoKbqOHs3ozIxdxwpNz6oFa0HkFIdc9UdetAIhAPiTYluyf95wQ+EFqSn5vN6XK7W2PkLd5hkKrQf10dl5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi0EyYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqdwxAAl4zZwcfdYwILErw5My/82QSB+eKF2KhytF5Y3UYgfw/gjLqU\r\n3s6xd7+Ne3TwySXoRs5OI0E3xzBal1ZGYQCJBMidZkCdJXXcdbwd3qPSUi4r\r\nOZptP2AAZYowuL6cRzPLvnsg9yQMZpOyIzaZXEGKrQ6VLnN6nXc+rpRv+LQO\r\nCOjbImFGMLf1tRs8hVeVjsOp9UVMzoRope5/bZLTBZ9ue6E08y+5HT6C/Vsx\r\nrXVF/F8xSonCtr1xYl5aHEou2QrKevS3jhaHxYFSud0YJu5vVOLAw9fES1sO\r\nib1uyGMYFD2fzqenjdUhfLm0RXLzpujaat97SgOD5+DCSS/rHsTsrUe2aH/T\r\nmUpprl8KPBOyLCBAKpaRlUgrvXz9JhUkNntdKam+SG6FOBM1cvU0n45bBigC\r\nRoPlTmeqOg2tFwCQRJpyo03tXVQfbiFskjahSz3ORwpoxQMYB89kTzbE5iQd\r\nRVKdS4Cw6jN8bfj+X0Mg7f1FMfNq1NLb+4BbVAsA2qNwIOJtseAMN2iuNehJ\r\nUSrRQUMTNurrfr8s0Jh8K6DjhGNo1mSYZz56oAAdm0mFRAePxENTNc/FfE2n\r\n5mL1Bk8Kh8qV2oFfbCeNvE2gydPGez1CnR5s/qXYo/iVV4tbDGgt3tsoqvMK\r\nkzr3gTDYjFygJmQQ3nXaFDcKZqWOO9aay0M=\r\n=2CI3\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"62e726843fd90c6139d8ade27db8da6ded6e1d77","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.39f9424b3.0_1657818264666_0.7825633260958762","host":"s3://npm-registry-packages"}},"15.0.0-canary.ae9fce587.0":{"name":"@material/density","version":"15.0.0-canary.ae9fce587.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.ae9fce587.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"990fbc8f87a47924d21f7f5a317729985f49539b","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.ae9fce587.0.tgz","fileCount":10,"integrity":"sha512-jnOpv3pHy5BYF+MW08fCVgPcIE4cV3qVrDUAS+Pu9Z0fnhT3y0lCEF80ElWqKNnnIWqVJsX2TvmqUypeIZzdkQ==","signatures":[{"sig":"MEQCIAx+Eou/ZY8xnC9s2rf1/oK8kyNwiU3u8xXU6ROxfWQKAiBPoUOxmFTdH9LJKcsyXlrEmneQpfMvd1M+D6nSOZr+gg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi0FtZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqMCg//fERGTGnh7/U1oleVlqcqvZJ1OVSfPfZErpmKW5gW6k21o0f2\r\njbfoW+aOunYkP+QC5AlRADVAhiWx9Xcjby+HblIfgZf8ymooij4zStu/Nbsg\r\nTkOfMXB/fge4iiV9LB0DT4XUx4lLEjQnD51vntOBvu+SH6rfSySaaL2UoL9W\r\nxGpaGurScKWV4EP3WoOUfMl2UpRxR1i2GdULH44C4GFiIhk6wNfwak3CW1vb\r\n6T8HgkAgjItu5erD6e2w/vUy+NxDOK3vrZ11lsZh67rdhHurgOdPou0wwQpj\r\nUa0oLkKm0E81pt8hpf8+2XUYYhMv5sSYaXmXrkz2EPOwNHqNE79JXGS4x3Hi\r\nGaxzqoTn/yXPo0g4WYkUhDyiOBL9peLKONjXnLTjetq6S7e98461YRKeuCUD\r\nMzkuXhhb5qrjFU2YKT6p6h5OlEcOu4rb1WbTkYazZM+mPJta8wYfQmAneYQK\r\naBzRBt1PVGU6EJDWp5ghlVTffvPS6adqqsBHltBWF0CRid2RXOP4zTAV7N9J\r\nh2BohvfRzUShW7vObdFvZZnDoNzSAY14hCxNB+DjWunrmezJa3ddSiZ9nLvo\r\n4u05WvIAMMS0ytYPTgqo6BWgP/uVdCIwRMzOo6yJQJ2TXGb9bqOBU8r/HY6q\r\nJmPIhSzHDL4unghgR6hvziGSJTUAQNQ5Z9c=\r\n=mokB\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"2d55d2ded8f3ebf66d72baffd67452a8de349b3b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.ae9fce587.0_1657822041250_0.10844946825322732","host":"s3://npm-registry-packages"}},"15.0.0-canary.1ebddc343.0":{"name":"@material/density","version":"15.0.0-canary.1ebddc343.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.1ebddc343.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0bbc8f1c791c7d03981b89cb0007804a834e567f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.1ebddc343.0.tgz","fileCount":10,"integrity":"sha512-TVP1EpJzPX/QmxzngVCMY6Aks/RX5jR1LzPIicai5BHH3OIqjV+NVfDcaE1YJOJ7mpkuV/5xRgGjJRHnfQcC/w==","signatures":[{"sig":"MEQCIAb7IebqyLzv/RjKavStOrebI/POXHKoEAtj97QoVXEBAiBn8118MBhsCwtoFR74RiMRgH50hflEWBYkfcqXqZpuaA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi0SngACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqeHA//VB3SOBqUzB5bMRrtHWLPIF4b/k0bMfp9SMRJsWG4j66PB/rP\r\nNCgK/g8WzNhQ60jLnYzLE4y8tTqwyCgg9VgSZtXWh+zbcllOSTLaShm0tRH7\r\niihi2bnMANw8RlDIdNFIsbUnb6hMxewis2ayzbpasr07KliB3YfPi2Ia9VNX\r\n4voWExua5+Zfv5HerUeXnb9DN2ZexiCw7TQoH6ZKoQLVpCsl9KqJF1p2Jny7\r\nR5nr+RiCihU0fuQOum1SzNPM353rotxFh3q/TaZ7WbtyGOkcProh1/1jSEvY\r\nDE3DarbRiGeaGTSIBTEtEUQynT9f5CcBzZ/BDdf6q1AOXNsTR6VRzbJjfvY/\r\nnpeFdbwLABV9n9DuSTv99YaDYfZySy6zBiskwrEFdWM4li+mc/spcfSqyHUa\r\nznvDRk90qKxws/aDaLCFx9gHOkkniDvcNThqLVzBRTGKL7YsXQ1AyJSuDMn0\r\n85nhPvjZ1WKivWDU/VVckuZGwE9K4xp9DGaf1o3fptaOE3NFSc31RkylRweA\r\nJv0zz/Sm1hiBkzreQOTetlmT3LWDPjV3cTgmA6ID219OK535QARPBaZPmZBx\r\nhbrZbtfSDPQ453HRuuay+sR7edvVi0rXQnlZoWXilS9WRF+drQJ0sAS5eul0\r\n3eZhE6iXLnEVGKaJgT2/eyXLH0I0xVNTQYc=\r\n=9h8R\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"2ec31cdb5e8e1a849368a3f352b213919bec43df","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.1ebddc343.0_1657874912159_0.4820093349277792","host":"s3://npm-registry-packages"}},"15.0.0-canary.c5018840c.0":{"name":"@material/density","version":"15.0.0-canary.c5018840c.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.c5018840c.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"25d14bac7a1378f449bd2119be58dd0bf273c982","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.c5018840c.0.tgz","fileCount":10,"integrity":"sha512-DsDG3Nbh7rJ4POLnv3s+k/hb5Zc8xS6DmUpYhrwJ86lt9Xy9YQdojJu8TM30sqanpGuvUC2FxX24anvI+CHYLA==","signatures":[{"sig":"MEQCIDYC5za5VsExFwvSo5FmpBTd6QvRX7ovNc+Fa9eGvIhaAiBlhZnX6MtBHSFfjSCt1i+C5jQGfWbs1Sl9LaDYsROBmw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi1Sr8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqToxAAnV9LUBcOMbgqk7n0mDPa5v/LwzFpW9GGLU6SBs9X8S/zX6yo\r\nQ2FuHy9ETro+WUq6g3cvj65pOSJTUg1Z63031uZ2vhhFnhv7bNO/lrHuTPl+\r\nDJkFI8tp5whgZVX+Co2iWIncIBL+wNsDjOCzxtEqhtnBqO6E4UcH9xXQ2I30\r\ntwFXqW8wwb2kJ8HDw4Guu64O8u2S8amePNU+0OIHPwWyePOrmWCPKaiAc7Id\r\nC6UxLUbog4Jh8pOjTz+W5NJYPakK/YkBiaWaDEsgAztcqo61UjQkp6Qmq3A1\r\n/BYWx3nFPrXeorlroQx+rhpDuQjz4E5LpEbjegoHdcWhtfHmQN56N+6od1uh\r\ncJhHxg+BROM3YS4pLRHNW8+7hTAGjslm7GCaqFSD7BfYuSLEMywXRdNZHAKl\r\nZvjHS277Rq7jDVi/qa9KGg3i9zUPYTwA9D3oWtTBzUZHsW7JqFM6lKSZZmVX\r\ntdJ3xziYwFFMH6VChX4Pz8ooY8lYJAR7DR78MnJwPbxBjYg/vklQeY8u0bSM\r\nTcBPHO1Cfcs/e3SgBdSF+HmWM3LsUuwSmK1acCkhNVilPVS9N5X4PiDRfQ+8\r\nmUP6nfirIQg4oZoc6ltcdjXEkRLpB9Pqb2NbzXyvALmw15giK+RNoG9oIT+D\r\nPD4GEtml0CQNb0Ky7OEfXPSC+j+udWsif5o=\r\n=A3RT\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"c86de383c50b7d72b8c5cf908c5fdf3e6efa94c4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.c5018840c.0_1658137339895_0.07938632133280432","host":"s3://npm-registry-packages"}},"15.0.0-canary.551b40d18.0":{"name":"@material/density","version":"15.0.0-canary.551b40d18.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.551b40d18.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0ab537cf05646aa5b0bd5af40e5f7c722891c283","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.551b40d18.0.tgz","fileCount":10,"integrity":"sha512-P4hlpu6hudRJHhKLblZ9yY75fbYcZOAZcrHNDCJI5fgJBMW/++69+KTGbf4PC5wLotx5HFaejGxE9j6S0UL9mQ==","signatures":[{"sig":"MEQCIFF4Gmn/7DYrUx91+vQrlJ6L9209qMn/O8BwZIIRmtpwAiBZk+9lyewnyEkGdxnlazOU1FBHm7yebCQc3RIXgTNtkg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi1S8dACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoQERAAksGebfz9b3PPNc835uYQQcCqx6F/7Dg4pZKo8e/KeTN4ivhB\r\ncgmVmNowyqLHht2e4YNTex63YuRsqkyf+NhN1FO9zw8AuhS7QUPyS3Msscpe\r\nUUGOncScN5YoKlFeI9mq7Mx0c1p6mdmptuPMUkDF1Et34AHYb7AhS77+IPUh\r\nGV41WkjX119e1RZzSGi+oUirdTC7skoH6hTWYdAOR50EzhkXK/jc9ARZt7Cc\r\ngVaNQNzRF6hQdvPjRaXnkYMbkwAnn6tgFIZIcelumMOauxsQPQAa12iHg1iw\r\nz1lRntboIaAMq9ybM58zRwufwqDQqZ6rX5ZzbsDAEJ9UpL8VZUn7KaQYhlIF\r\nCM/C83LzVbGNVfZhxFqwS7+d1hOZ6fXF9DMZ8d1x7wg89BmJ4Qt36HMUVmHP\r\nQqUc/zLFXtUCYHVNBif1t+TXQjv/O0kh+Y7cJl2BZVxmYhJQZzg++NaQD/2S\r\nBphzdoyyBqsVhxcYH100QyTbrJ6/7nGkdjVn0GE41mcjsB0/PUAmkkBJTpuN\r\noEKApGfTQOn+zJbjw8dD2LG0nJyMyZHnL3iFHgb/9VEupjsYpAwQrjdhEFvr\r\non5O8mQkD5ti5TTkeuoEYebys6jE4+B3w+FeqLkIG+xQECaAyY7gE7qrq9Om\r\nvL1Lc/oh+N9hYnLS5+FspbDNtltwnR+MS3c=\r\n=RGVI\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"3e9aa3499438031c9229cf2a18a1a3672620853c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.551b40d18.0_1658138397410_0.7755983926741183","host":"s3://npm-registry-packages"}},"15.0.0-canary.cf9f12371.0":{"name":"@material/density","version":"15.0.0-canary.cf9f12371.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.cf9f12371.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"adc29e87b4b360f874440152ebee51ca6803c813","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.cf9f12371.0.tgz","fileCount":10,"integrity":"sha512-Gfh2GCuxQhpjqCVj1tbXCR5a3fZFTYcGa2093b1lZxqEzKL+UJwhJb/P864W5vPCs1Nu4CH+zxRx5aWWo2DiMw==","signatures":[{"sig":"MEQCIECSeKhGV3zVo7Zmb1lXyv3Px7oLvrgYktMEAjnyY73mAiBHlLYqDM+hteUPgYhlPQm0Da36O9GuNQ3v1rqGxZfk9g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi1TAWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmobyQ//TNd+897EwuoP4llKEHuQ8vzaXW7QiJX8y9gK3IU7uxVmU4X6\r\nBXwh+7qZAWJjNuu/5+k3MIz15pVV4Evetxm805bts01ykCZary4jN760LMhY\r\nXD8oHNR7nYWKW7WRGFBlvodj93SjBxX8TkBE/CfsPEHrSGZp36uPhlc2J7BP\r\nSUaFQ3rD5hNXNFUZuiHLls1XQCGfo8uLba58nW8IUiCBInn2YvK4zdi/H3fN\r\nm4WG3VcyQUf0FcF8WXFS4xs/EDBeYllZn51rfu30MNJg0fRHNWkdCz6gHZwW\r\nVk4A+Vbh/QjHf38AGkByPIDGfPEfShxkLjMkM/29Q1Bg0Dc3uYzvk5tgrfdj\r\nsNXgg35B9L3SpRLMFUMnT/9VcLTgJRRR74YmCZ/63zVy/2hvRAQHoLSoVPi/\r\nmYOkCnk66OLFDS4K3H3hzD8x2x7kfiyuLQsQjsTo6YECPZ8N2VvNHbxye1AM\r\n6jOyUC18pOXRUfeLBPtEafZBrf4fPyalrmRZVounogbbAi2CvHzpD+Q25hdZ\r\ni5fVfjv4K6jbIVvIQwdGeRkg3f3cuLh75Mtu2JyzJfzh89fihG1w5I7GuWPs\r\ne8FycknZYClCrGRYIaqWWEs59yP5f2dGvAPHNtSdB8/CTZna504oOKWc/t/G\r\nxZZ3Hkpb2UQWl7tvLJk4fF+Mt6Vx6YqCCcE=\r\n=Jz6o\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"1817e344a80081e042f37248beeeb96228402878","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.cf9f12371.0_1658138646116_0.48189531486054826","host":"s3://npm-registry-packages"}},"15.0.0-canary.2797ff8b6.0":{"name":"@material/density","version":"15.0.0-canary.2797ff8b6.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.2797ff8b6.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2c5aace0c48f22ff07bcfb3d27a37e08c4b58ebf","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.2797ff8b6.0.tgz","fileCount":10,"integrity":"sha512-Cp0gUuKsbcvA+Dritsi8cXeE/e6Ec4PldIOjJXdh/2Yjy03xqTGAoqL2P9vGNVU07d9sB5YKFxm9hh92FriC4Q==","signatures":[{"sig":"MEYCIQDJC5K8kOf8udrt45L0DwzyF+ihC0cmOHFgZckZdITPqQIhAJfh2W0Yui7HbQ3cQ1cVz/FHDykPvOOYu9Fxbumum/1l","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi1fl0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpX1Q/8DWRmvuD+DDq01zUSkRyZ5SKgnsCnOeojpRU7mjJ01G+Z12HO\r\neC4e44+Tt2hkO029jsMHUhj8+fb/bb+Ad2lvgRHvKsSeTWq6jsKGAaoi4lb8\r\nL3Yh3dX6FEr4/9K02iMaZId2Iq+iVM9XQH/e00cJo06EL7jBhOYLC7mKnUjA\r\n6BK+TIape+6NTgkk5/kFZhmKaxeSg2HCqENL37ZOV0XWkhVJZ7mZyzOzsMt8\r\n1tG3d4W52BBrHa8XHeyFkPmdfqpyZGlhJZoOJMuK0CtvsTnNBIweo6uIZuao\r\nnNm8QDfUE6WtxnsACBu56C9cf/JNfQILZp0t3OnAIaQS+TAT0D+naIOIAyPN\r\nw+UcBYg1MADCqVvAh9ifkTCxzk7rkutGi1NVBQSI98pHH80XHJ0appfdj4VJ\r\n5BCYEG06M5IpT3QlVreAT9lY34Bd9Rp1NArtswfkrcDh8HnBs7qsVhz/lDs7\r\nl6AwhS8WpQbA1XOEfPkBWfOF4AW/Kjp8DZHkccFBx3ghnxlSreySqO79ykOL\r\nAiadKTs3J2auEdpMyu3XkFACJvFk/88GxKqB9iGNtIOe8pIpg8J6npBC8pAM\r\nPhB9cLFzTSPO4PMqxHdJKNVHetBZMwmFTNtpU8RfidLMJgp359r1tfecIXWS\r\n4mPyGRWYh9obD0B8jMRn7MsKSqcd+ubjMf4=\r\n=k1Ku\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"2c89951e5e0cfca0b1dc61a4f30259b33cee139b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.2797ff8b6.0_1658190196019_0.500162286110208","host":"s3://npm-registry-packages"}},"15.0.0-canary.110fafa17.0":{"name":"@material/density","version":"15.0.0-canary.110fafa17.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.110fafa17.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e6e3d644031a06b8acf3340c55ce7ecbd66a07dc","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.110fafa17.0.tgz","fileCount":10,"integrity":"sha512-LZC/7N0dRuSk/urE8xpNDUFGFSpvP4Y0WDBLC2URy+taIupIr42izmrN18GIz8H7sqeVMOWNR5el/D1UkthBBg==","signatures":[{"sig":"MEUCIQDNjTsBpoU90Vo3KY1AoI1s0g5Sciqykp+6+CDI6NmQsAIgNF1gRzibGjdiZTF0ejXbnOeZewKZhmib5LG2yaFj+nM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi17KxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpW+w//d4l4Ccpo0GMFfaxvE4Tg8NbFqn9gKbyB41Q7HGISfKtuKr1u\r\nLNBPBbMY3bPQVjouuNYE3T/VSauClEdXt9Krbvrf0kbL/vmyP03Sufv5zxob\r\nD2tqWkalzkuv26mqUgGwpPtamDHp0xbIWBggtcJLo2MYu+p0IN2V20WzB4Nd\r\nyfGsVl2TcfCDv85UYk7raCjLH7xwwn4gXbkctsw8ebr4hWMm+c2jIt9/5Ru8\r\nN0/VYZzezNAcJnlXnetPiVWQQaxG02j+oiukTf/uTjykpkKQKANM7sqnEOPS\r\nALU2wWp1nFl6tNo1AaPGiCpVvDsmgw4UTivZkoEPGYJZNNYegRbJ7nKK0lUa\r\nRao63AM98uhT6Wm34UkqlpfnN6FpREdLf64cBbdIO7xev+rF+K8hntL6H7ZK\r\nTunnkiqarJcN0h2TXuagSsxPDKofqXZkA3tyDfo/j+dZKa9k+efkPqfcXxeu\r\n33mdp+sR9kcINE7r3GolvlOMsvwMQ4rSBdlyAQvmmjKMZGNYq4c5OZXZYs0B\r\n75e4J0hoLj/cNfVySCvPukFzJd91PEe4fdGIOm8cSRjOFVodAe/ki6u5edDp\r\nNBcI/y61Rgip01cn0C7oHnHS2iur3xZsXiFNwH4Gu3tvqAlQoD3APjU3H6wn\r\nSBGrcR2wAwmWVHJpewfXYaPgeEpLCq+Eayk=\r\n=4fN4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"ccf0ed3e8eaadf1526fd10979e8c00e79b228f5f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.110fafa17.0_1658303152825_0.9983365110430702","host":"s3://npm-registry-packages"}},"15.0.0-canary.386ef1d2f.0":{"name":"@material/density","version":"15.0.0-canary.386ef1d2f.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.386ef1d2f.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b84733b9a264a19a7722e0573a702cfd07c54341","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.386ef1d2f.0.tgz","fileCount":10,"integrity":"sha512-DH33dLqu6MfhXUTaQRLPbfzYVjLlflISmncj16XNmpTrd6IV2DUpVuQl5tk+KSZiHAgVutTKIKkbKJuedFZb2Q==","signatures":[{"sig":"MEYCIQDNpZrlCSFkrT7YlHtYfjz0s8eKZ2PAhx+IN706fITMmgIhAMc5URF6LF+sCWDYj7kweZiya+Vvlfae8B5i94Sg7+6C","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2EcRACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpR2hAAovE4Y/KZwO2OeMjHlH2psTR9tnX6WgZNN1cTM7cuknV9KRvp\r\nDmDow1zkVWwxMvc6Qy+Ic2NoKx3nQNjsyG5Ad6WwCUEwhiBNauZcqSuoUIBY\r\nEQTDJLBe+lsykcxqczQQJp+r7YHtjJziMiLc+1WuDa1DfN4lyj2yfhCRrvv8\r\nEQFjpCFProIwDa5nicgp2zXANGSHlqLJa7xC5gpVopBa7nme0KLoXoQpPHed\r\nh7UsAHQhahbf/8/DvEb83DePS9JGAHlf5CNukJuiPTT0rGdrM2UST+GwycqV\r\nx+gJjhCiDV01dmG5RMkWcoxRd6w9IVXd0O/zAl/FjSDo+Vesrzp2JT3Dp34r\r\nqIKyQOnzYLI/g2BC8vP96pgxHdSHZuIGq4TGi2O5Et8q2amBAzUQNOcOgT1p\r\nxcuDYvEZxEUmgHiXyhskrbsig2RRnRkq8VEsU3ofm3Xe2BfC2zur5S42LfIi\r\nNKvrP08Z9LmAo7MlGGZhLE4qDT8ZobMhcHvD8K3oA1aaCgyrNCWiQNAWWZ/B\r\n4xOc2nVANKqRthwXHtjVeXCJ+p5/t5p3Uytl00A6HFXaUJOJnEBKD4CQHRR6\r\ns98CGPGaZ6MlLjcVoF5QxIrftO/+KdobUSHlNr0vT9L/krL1s/QxVSaYZByK\r\n/b6l39L8HtOHL277DIwt39q7/eXM/TXtMkI=\r\n=uTPc\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"f81dc27b99348c90268023c46429639f145ca534","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.386ef1d2f.0_1658341137596_0.5363952205158","host":"s3://npm-registry-packages"}},"15.0.0-canary.c3924efef.0":{"name":"@material/density","version":"15.0.0-canary.c3924efef.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.c3924efef.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"37fb53415d2a0e3a37675c56830061aca3e9d645","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.c3924efef.0.tgz","fileCount":10,"integrity":"sha512-q8tuuStHMg8l/DRbSJ72Y+4MyIejZ1MPHjNVGVIbINuEscFPuIJCXY4Lq0Vsyr+fONAxt8HoxIwTSC5IsippNg==","signatures":[{"sig":"MEYCIQC+GNnssJlk5FR9YTDYR37qTkSC4COMq4zW2TliIpdYNgIhANvvoKgegUjIQJXyKe/kshT3K4HLI/SssR/aYMR5ZbMv","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2Ek+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr9KA/+IFsD3vTlElB4oOVAkHmCb88ZRBqxXzPs+SYvSJQqr3+fgwLA\r\novw840sC64UOu33gDel9FvPH/nqx4Gxbdc8REUwSpo0omS9NONwoizwHv+Ns\r\nxbG8iENtgoAKhGB/ZbDMcqGQ8EQCAMM8pnWL7goEGgOnyGvJNW+RFBTZRH3M\r\nANIQXQRM1nG6FYOPkR/U50FNVsHn/govH/0O+elybNNCifJUgFMwLN5ON9Tf\r\ntyujg/gDMSRc+SoHPj02Q9hbRb+R1sCct+7aCwqxpFArl7H2pJtfJ8pNTjDm\r\nE3uU6XdBPY7u+YqvPvPkSNG25hhCUJKir2E6S2ZEXJSaf6g2mZPlbELiC8lW\r\nWa6Xp4DLHKS7J1AYpn28eVdpqiK/NupfvNr+DfMjNPxtSnJrPkab/lq8MN0T\r\nYvdfYhiCIF7+afA4IXUhutyvFsmZLcjnBC05zZL5ig8PuOvFTjxXd65qBAUY\r\nurQ13etEbpzG2anhY1Ep3BS2cOtbuDCF9GN3BIQlvkuUuFEiBmK9KkHlRVYU\r\nWlTLTqUMjYbAIFhECaOdxkzCbdeqecXz9HoHZ9SDw91/4gTHjskioeeGfiPY\r\n/amnk25vm3/Tb9eUIhZYfm1l4jotFhAVA/+SXjQFqXkI1+WpMEXrxJEKZVq4\r\n9yP1vnGaTu0UNQa7NibtWutTBaDElbbN488=\r\n=ef8+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"f665d9454e06d217296aa1a2064c9c67d3fe2759","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.c3924efef.0_1658341694430_0.011687358133536163","host":"s3://npm-registry-packages"}},"15.0.0-canary.cf5c5907c.0":{"name":"@material/density","version":"15.0.0-canary.cf5c5907c.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.cf5c5907c.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dde68cae49dfa5840e932e3457a3d6e48cc30720","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.cf5c5907c.0.tgz","fileCount":10,"integrity":"sha512-qYCmAqQ6TII2oOho/X1JWAWkZJTy5WGtvUxGuSC1mLZhh6E95kJ7oCRbkBNZqIWWEak8ufHEIqkjVWgtuHDNmQ==","signatures":[{"sig":"MEUCIBRxrzJ631HZyGgpjVNYfp80PZTF5Drc0WH1qR63y+TyAiEA5hYkF3BTd5XY/P/3IB0idsishdtMpfywtohm7geC4J0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2HG/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmomUg//WKTYr5KMmJb/oi7soMMv4QTV2J29fbrZUPCSXqzFras/t20F\r\nP8x+ZzfnNIOhiLCWP3eGdTZPw1EWsQybO/14l5IeYcs0kwykAFqky9iPota7\r\nRgmCmj38j2X3t0cfTtrmAlx8XKdDToYAE2vuaHJ2dT7yUvSolK5Ww2BKZmKS\r\nCj3gbJ1Sa9+v+rDzP4FeoCdXUf30c9v/7Xj12/617wEQ1TqBLSFbeqtwfrig\r\nKhpPgP981/V0+Tpeho69v51otBHbd+LCRcPrxB5b2BTdQ4V83ZJeWcHOb1aN\r\nI0HcUUJiRNKHKNToNj+SaYMMaNxX1Tnzk8MN7aJnocidFi6OXg8jI+qQeSkA\r\n7Z4r3Ve0ntsfkDKdgZaFh6sTk8Jlee8rkmho9apEQTGPtPvBUKfIFL8ZcBi8\r\n8DInK7G2OHUc35FYKL0L9zgjP01OMmIXI00O5LbLfFVYAaMbtNQHi0V76vd5\r\nViSVpkFD6K0SwqoVoMOpzUr8BWfD/4BJrEV3Nw6rNtnlMt3AwDe8JgPJuepL\r\nqFfBU4gfB8H23JY3ccoZzoXbFTd4Z/N+lPptpmrsRNhIEOTV1WtE9xhNhCbC\r\nc8Xl7XnCF3qNRyP2nCSxixOgVL0ytcIWPN8SLISa+F+gb0SkA7Ni7q+lalIp\r\niRzUkTGWE63zHlIedwBUt5hgA6lPkSWoyHE=\r\n=C6Vh\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"ff18947542e40ce8532c2ad78551ff4e74f9d647","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.cf5c5907c.0_1658352063061_0.8043026688836237","host":"s3://npm-registry-packages"}},"15.0.0-canary.0617e2319.0":{"name":"@material/density","version":"15.0.0-canary.0617e2319.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.0617e2319.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"af4a38ea01514f3a4d12b290c4defaf46748782d","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.0617e2319.0.tgz","fileCount":10,"integrity":"sha512-Z3yVuFz1rFbci/UK1QtZ+X+zWThSM8LOWFRn3xepXbOL1r4rD207IpHggDjtc/WqrqSTTm+EbyW/HZY7/+92qQ==","signatures":[{"sig":"MEYCIQCeCGI5qXIFc3wpTUSl2XjlsUqWs6erTysVDJJC/YOmNwIhAL2hKzUCrOaR1y4oDPLLM3Rfl2UghsptnUWiKGL7CUL4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2HYAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrxtQ/9FKotVDdo6W5DqzK+mFTIw3uFPhCkHE1aGaZf5tahAi1c8KgD\r\nFg0tFSt0B3ZlDE2do+VVUW4XdX2o7RUjsOEh4/XCSH3aFr2F7vPX7V8cbZCH\r\nI/AEZByYGny02MthjhB63jtgm195dg/8Lw5o0DDEAFtdSmtM4WiXpfbQS2eD\r\nqjimisXIUpgUkvtZ1/IxkqQZ8X73B+86PvJ8329QL6ciVlMccmiV6QlUL5H2\r\nbqPLXQbM96NKHbxGrL9LRg0VYBbBRAKiKEb/bzozydzHt2e5bUuBnUgREh2p\r\nq+iUS+FfYL0zIU6pMQvJN8KcM215Eis8ufX8patgPDawZ9y4NjGj4dxt/Pi1\r\nxCsHU/DAaAYR5/iuFwv/BgGG07PIWh/KcMDu5tQh9SsZWp1Cg8TGoq7bygPe\r\nEeyFO2NEzpeTDnF2FH1Pk2jRn5U+B4cwwhdltW6QjQw0UazThPF2TZR9mmBA\r\njlBnNxxx5lY+bU/59m/H+tE9kAH5ifIdaz6mPIKjvcNjFH+UtUZiUk5BW+uh\r\nmp2Ss6D3/THE6MHb4PnS90od2Uf9ERntjPRIUnP67uZXV1p9mG/+rYJ6eBsF\r\nqcrcCv49PycbnSzlycFhD4V/naydJn2+eQ3mr6c4uwBPGewsTioLrXVJP5ZU\r\npKPhkWvvObFyp6NnG4WEXtEE74yb3GZfuPg=\r\n=ZLLd\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"a4d6efed0d00cc69adede24744dc368da0b2c897","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.0617e2319.0_1658353151991_0.17053167975494876","host":"s3://npm-registry-packages"}},"15.0.0-canary.a743b7967.0":{"name":"@material/density","version":"15.0.0-canary.a743b7967.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.a743b7967.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c8dd0f792f8ebdcb529f028a8fdf1d1fd12c6e20","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.a743b7967.0.tgz","fileCount":10,"integrity":"sha512-e5brInDHimo3ad5Bb5Z8VMpQCCwB+fm3ICBJV5zJCU6zrYYiGghukrZqjyPLz2J/xHSkgr00Xj0i+PeeyjyySQ==","signatures":[{"sig":"MEQCIDi2F34pdwpcpFAN3/ByV9543t5hRIZrXAjZqoYN4YeDAiB4pg3T9MfwFKJF5HaPqIyNXGsHHU9mVbto28l7naMdPg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2Hn9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr09RAAmz3UTiaq7mD/QM8B6wZY2QpybIQ+0QjXt0CcIWu4DksUM/As\r\nTk888mTAvv3mxfe2B73s1ZiBjhF5e0VaLKyDKiosJrxK3ClU8lHCZFzVaSot\r\nxIXg4xqJ/swRDUh/T4WV1VaeQcNlaK8IkW033VETCOPH/sror3wGcQwmqB8o\r\nOdlg95pBMKcFks+T6zvZc+f1x3jbTojgy1JoJFTFCTZdEd+9r6qrjypLJRMn\r\nN/zBRfaneiCNIsEhy9T6Nv7WCkTxhhYxdvrUIEJO+JsgEfcjy1WIZN58WdRk\r\nhMIvXAZIjCgh3IcYG1n+sya+/bBYqCLnWOcSr58WTsSp5VURURyKpkzlgis9\r\nZQrG4EXYAQYRObkSupzoTyEbp13Q6lxClb8qx310l7R2Yy9hYLzmg4Me5r0X\r\nLP7AGNhE/N3b4wsBJYUvLTxFxFz01EUtagqkYolU6Lh4rhrMT0ANlrNpLELU\r\nJKoMqKAVvcA1hVkkqt+NbHHLeDjjLe6vkz0fjQQPrEsL2wPsFiPOOzyLxdLZ\r\n1FlaPnFg9aJzXhhlgr9Hvz5mAlm6a1A9TkoSrwSXMnCw/ablOvkvFvkJk0DS\r\nEMJuISxvQFhReoQ/Uyd7It6O+5msYxmLGtHk3yOUf+sjoKpzydnuP2pIwDTS\r\nozLjZr8mlTyf1rIisSrOhrMRVPPXY/lMEkI=\r\n=FeWG\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"6fe7cdad71b01dac35a3d815662020bebbe50e23","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.a743b7967.0_1658354173126_0.9240451587486675","host":"s3://npm-registry-packages"}},"15.0.0-canary.69fd619d0.0":{"name":"@material/density","version":"15.0.0-canary.69fd619d0.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.69fd619d0.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"32ba6c9ff400edeb4366b90c278eb956e4fa943d","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.69fd619d0.0.tgz","fileCount":10,"integrity":"sha512-KYLxq4oWdwOYJQ/BAWw2kNdgi3CmMiTIoSCO1OhwiFF/XZ5VyUdTamgWaUELSfm2Uw5W6n6iydHAAcyJQYobVg==","signatures":[{"sig":"MEYCIQCQZGxq8vihZ39gG/XlPlwY8mXeSpuYDhXBPMldISMoZgIhAM+xLIjdhT+z6J4KSOFGlyYKGNt+nHWizC8Jiz23rq4k","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2HzKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqN6hAAhiwWIDzjQBu8lcXTIzaaGiXhBH1zXFrVgTPcF0wcB2l4lBQ+\r\nixdxlu+Fod9B/l2xZkbwxpdWVKitIEM4In+Ogy59PdIqkN06K5uljU3qc+rf\r\nZn52kTjiIODM+ZgpcM9Vn6XPJy9XyB6utCDwGGaOkujVM1p897wLB1kA1CNL\r\nCFqxH6I5pwelKlhfCfd140LGfDqPHlGjhp4RQg4EUkQkZgOUXe2Cbd0PwaAp\r\ngjElQD7kDEYtpHRmtschVrpbStqT4C6Y5FnmgQzfjH4NR0qFwqYcGQLgbV1V\r\nGPzdHmfvy1DCHnQSZxFQwoDOghKU36yM76AClKHPLcsQc/9mjUhR0EfH/YLI\r\nn9lEVHh3i+XAEk41F10mGH7u19oUGPe8OLgFErLaidKSqsoZKNcMTOJN009a\r\nY6G8kgyMMVbKaKuDFwf+jgIjAtNNJmtUExb8GJv0atr2n0T+2w+mKquVGfqg\r\nkSQdLLe2OKh5jKjDCi6c3k0oJz+EXT+CjaMzBG07WCxPgI2ct4SdkIZOlX4H\r\nVxy0nucT+vNZ9yUVduOOol31PfybLIBqkYSSOJ3xAH47oU/7yetLiySI/J7j\r\nzpRmDMOFFBV1ITVIkXUfNzXnPWCrJoE6WMB2MxXa8UM4s09zzf6eSrqFJfdx\r\npayhOtIx0M80R/jwqf2xGjOP4ctUxRyWyJM=\r\n=eHCl\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"8982644a21769a71fcdbd9d8a35d87f00bf73b3c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.69fd619d0.0_1658354890523_0.41536099729168297","host":"s3://npm-registry-packages"}},"15.0.0-canary.2a6ddc1cf.0":{"name":"@material/density","version":"15.0.0-canary.2a6ddc1cf.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.2a6ddc1cf.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"516c6a2fd5186c40e9d9eb46e6f20b31f1c93f5e","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.2a6ddc1cf.0.tgz","fileCount":10,"integrity":"sha512-IfkCfMWaBz6wXdhuKnd1/0b5y1h2UFQi4iej2AyzQuSyExATApqXjPgdcR16ZbZCBWo25XkHOMrObiBwq9/8VQ==","signatures":[{"sig":"MEQCIH6laGPOUD3Uwj5gjeJWsS7whoLkiu+LAUhNkvDdOzQwAiB5/OAYck+uN24j9kz8skS3EXdvxkioQi4EguNCk9XCig==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi5ATfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq6yg//eaUGmf4T1kF0dFygfZUqM8iyhlBkFdjvacIl4qUrD204pwQK\r\n+m0FWM5Bko7l3uWYqRWRFih4CbeuYpI3Z67NWTEFYrVBiugW4LZsofRXxno+\r\nY6WtAtU08aMYXXRNiiSxM62PnFcCAfMm1P1qVJZCG44htkUQkqDgFimv1Dy+\r\nJb6ImVm3y7+aTPzPykd87oQleCWOCSq4DePryUupBwqvFoUzjdGatyJ4iRxn\r\n+smNgiKQAVAzyrMqH6uGxdGT+pKjxaJAMzfeM0RhfPoOgNLxUZ+I099zzF4d\r\nsLSZ20FZLt8LbKDEpkOoZ92x4cQgFabr/g4sU7Ehi5r3PrsZsJ5eAUmOaCF0\r\nQd/y1sPsR3wO1IlMXOJ5n0soie8fDbon0xgJzvcgL7Md+pzDGk0xNrjCHEuS\r\nTO+k55xiZ5obR9xBYThH6w0QimQeW/WbGAogYsjJtoksmnESbHrrytSHhAvB\r\nhwpzOnjDPo6aRWr8CXhLB8ZjrjIXvtNuWx7wdDm/bfViXcrD8etq663BeaW5\r\nrecMA7vPBNMRnRqliNqJgYWQCEbH3AaDubO3PnzXUUcM9uKbjTqxtloIuL9B\r\nxEtJKOu2YEPDglTLYlGvQJw2u0yz1FuEiWJOaaZihEmPjebp49YJQ2FdzVKL\r\nxSrn2F/twa5wWHYsgkfAGWg5GujnEC1zPP8=\r\n=IDjz\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"0e951ea9d38f3d449f24bd1d8ecb0fa70c0da462","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.2a6ddc1cf.0_1659110622973_0.8048792626487995","host":"s3://npm-registry-packages"}},"15.0.0-canary.86efd56f6.0":{"name":"@material/density","version":"15.0.0-canary.86efd56f6.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.86efd56f6.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"805aa77724c79b6131acb2710e1375ab8f8c2904","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.86efd56f6.0.tgz","fileCount":10,"integrity":"sha512-28g5fldlFTasOoIxiSxhW8VpTNfXUBZ/69SkahP5c9AF2nzi1uXeGsrGK/SXNsipKrK1WHz0dCag55ofAc9k/A==","signatures":[{"sig":"MEUCIFfWkeV3KaWcz8aJbP7bTYLlk0l0ei7zJI4/IpkLJjAAAiEAy6phgkA4C5TzxNbtTKk80XYI6c/UKMMG0DSEsu2noMo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6ThZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoTwA//WNFl24vGmLrKYGiRRBSdNiE5Ha2n3WlwaarZm4QorSZo9HAG\r\n5HK6hwULCCPH2tUR294BCCz+JXPYBmi4tGIqGiO99zBHy26RWFx3LZXbrPqm\r\n1dwxX82QtiiE6ztN23wCy9cne56zrSyyHA5llUUwJBTRHBk1vrTfzlVYB0sv\r\nNQZu5jxkGuz/KICuKU5n6YWotVKrLHayDTApfaSGbz4OyXYb1F+A22Lq5FBt\r\npYUweWjPCVoY/81+RDGvt2ySn/2QCqa1+hIWtpVpZdwTAJUJZyV7LDS9JDgm\r\nvmPVesBV28Wp3kWvxCozKcl4Mj4oRPLkjscrSs3fntR7nGlrM4Oj1akQjxl6\r\nfdhY4UIv0vAKzSwtceFbCF3Hw8/DRWApQy0I9M3omI8wjMxnsGYJfGz0Fqza\r\nDyefO34jjvjMEzVxnC2kaNcroiUQobdOSGVC8o0OA6g0yRxoN6McSYK9MWeE\r\n76KzZf6AjNTSiQf8Q5r1AnoMh0cOTy8AV9qmC0ei2HTXJzvDzEavxdM3T5Jq\r\n0P0IV3r89z+njKTLPMpd+NT3fZ7Z+Kd+3SOajUYVJ4d5F19LxFGXgDnLHZx8\r\nBHl3eUuf3YMaZYlg3qpbWUohaEFr5PCOTU9E7K+Vhtq9kThRF+uogJLwxd4D\r\nl9NFKZpFhCdpWD8sRexUCaZk084v34XufbY=\r\n=Cz+S\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"a4781ca009f9a9b59c7dfff5df2d23bb14b9de2f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.86efd56f6.0_1659451481632_0.08844478459591887","host":"s3://npm-registry-packages"}},"15.0.0-canary.ccfc24d19.0":{"name":"@material/density","version":"15.0.0-canary.ccfc24d19.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.ccfc24d19.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d8e35187840fa355a874c3530a4ae07192ebf64a","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.ccfc24d19.0.tgz","fileCount":10,"integrity":"sha512-WHbgXHvG8sG+UOUfoDgQponEITH61jLcyCAGdsdGd896m6Rcw7lUZZsmAsFRBo2iKTiDdqj1uCVJ9Q2QugterA==","signatures":[{"sig":"MEUCIQDAcODGNVpoJE5hcCmJa7+cxbFh5sOVFVMDUIXLG4YCPwIgKE/Cf2Udrc3tQibFvvVeV1KLlNNZBExT85fdgLrbNVo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6rqIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrzhg//R5HG+xR8PJvT30fX9KlwNLzGbH31nIGM4bKAVZ2Pbk+PWQkP\r\n5QrCnccVHhV7lg9XICdSDXaz3g0RaWrht/SMa3Yw6V+k6d1bIkgGUfeI1kQb\r\nqBirgygNjgoslaWxKMhWkj2Qvz2YBxWfZlSKsk4vc7OnrWA47q4bIEuvUEX0\r\nkjaSbvj9S/+bKGw5xMp4mcuvjmYpstyAehw7qB41flJixHKOvoiMJR+dp2Ur\r\nT2AVA9gZDStY3A1ojaciTyFDJyEZB58PuYFvmLspiZRwil0KTi6XbK6OvKXk\r\nUkCk4CjPBMOT5kQERpQGr8kwbN6W3NYtDdbgmplfpEH3Kj+fxTY7gIfjENsh\r\nsuJJJtEovnXSsQYuQgwcfsRm2ZOTJKq8WkA/KRp2YPBgIXvh7UQwyPJRNWv6\r\nZgeBY4RairCyKVZdkzkkTzcPimzmZzIsTyw/1JXRs8XqqH9yfoE31Q53S4H9\r\nPkL54BtnlK1PmQsoWA8ZV2nb3H0MkowHU7dz13CpyxtNsQBlfr7vu//3gqpC\r\niBViAjbqiE/SgFGxN0PxdnSqFUgxGxfzcYPPKpK/DojJzPhkB1qcjhbTTrXc\r\n6UZjZHCwXcc7kduSSxKvzjl4g0s5lyM7GWLH2W6CSHE1lS0M7VDyNub3wVEY\r\n/vxFYltVRPsid0Vg+gWpETPX569VrmcUGqU=\r\n=TJsD\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"f790058ff0b4b30289ee965102aae1ca19654ddb","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.ccfc24d19.0_1659550344037_0.08850643207671749","host":"s3://npm-registry-packages"}},"15.0.0-canary.e4570146f.0":{"name":"@material/density","version":"15.0.0-canary.e4570146f.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.e4570146f.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"764c3b2c76dcfbb391d4767228d7b58c98da6f2a","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.e4570146f.0.tgz","fileCount":10,"integrity":"sha512-iawUq3MCsME+sE+JqrKoSMAbOFSMVNCiRLcSHYJJ0bjNnvw1G1p53MpAiw71583Nn5hMG29bSTHiRlyLi+0mbQ==","signatures":[{"sig":"MEUCIQC4HOP7p6+nJocsPFMOUl+uO6b7oFBYAEqMuKNVFl47hQIgQiHI9HxnjXoWqOyaLEz9hjAkKEh82EHp6tC8l9ROOgE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6sD1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoKww//Rd0hFDbyXMlnVIEr4QA4qImO/1xEwjE1RGxBkEuoCYyEHTVt\r\n269LwQZlS6bfM6OSo7hXlBG7hy86ybsxRN87OzMWs7cd3B3J6m5IzUZeB8sj\r\nBpiZX2BSHky7jeiUzGrRMvn8FGyizkvWn2AjZ4RhBUq/XHCrQLGJWKSqigtS\r\nXGYjRGBx5zJsQ9pyWgSDZxhint0c+haPzxlp/oy8RszG68bz5nL2k5dw5kXh\r\nm32QvADWChQ+5jM8hUZwAuThNf4ero4pJJZATV8wAokf6AwwvhkLt4EoO/YA\r\nJae6ulv51n0Eo/eG66I5Pl1s+shWv3zXjRbRTGM0KavTeb9Cyq2IUGoX/H56\r\nZ1vzHaMO/8EHRuTam3S0dlbIDq6kXKTs+V+GwbFekB65Dic+gcw2u5pC5cxQ\r\nk493TccguNw3ZbMSx5JU8iASJGlJl4myCMqRUWo6RVTEW9DOesX/KZXN89Cr\r\nOOkmApdE9318RyYnRwja0AUriZz5St5Drq4DeO8JSQ26NmcNOna6N7rFiMKR\r\n8bAZR2C9DeCAADafgFYGXjVxEDPQFbDbv9DkiFK6jGq7kShb2KtPLCA34/RF\r\nuM8ZlK7/lFujsJmZtPqOH97z6befAoqHTQuTl8h6xvo8zRBZ0hNC3+2PqQfr\r\nFGWCC+hd1WK0bE8/WVU3z0vEc5yDtdqJUzs=\r\n=ZH0+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"e80d690ce0a868398025065053615e866dc51ada","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.e4570146f.0_1659551989060_0.520208813806583","host":"s3://npm-registry-packages"}},"15.0.0-canary.6683a36cb.0":{"name":"@material/density","version":"15.0.0-canary.6683a36cb.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.6683a36cb.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2cda2aec3a85663873cfb7a7c06b38cd5ff76a80","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.6683a36cb.0.tgz","fileCount":10,"integrity":"sha512-qi2xHJt8eDHBdM9sxnBTwydog2QRV1Zrw2ybV2hac+E05vutjFHT0aFPd4shoflhtLVCGpLrWysAEmovig61JQ==","signatures":[{"sig":"MEUCIQD3eSREHf0xVI3TnhXgXz6RLXYxES2gcLvXzrjAxbjwUgIgDcQxshk2psyAzwNfB6xckfEv/TjR1urEXfKvu2yU9Vo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6spMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmocCBAAoc+wM+ITYUTnBe2sDpS+wkgEPpcLCV4UxcTbboQ+lje4P1FP\r\nZIptL2VzqThyUb1ht66LagO3LwL4sIibvcRFonbfNs6fV9CV15THlfImTJ6N\r\nOZRFvskXYlQi5N1gasUPJ7k2EiceIlRHs6RQK4hxrj0NMVci9DvTmMakeK5k\r\nBrkH0/hukAAE8v3zCNg/H54cDIdepk5Qalro5PuPnnd3sFoQGdQxABO6q8vc\r\njIHsBkevtyx58F28Gn35DNmw3+EcOFPVnevM64dYlYXO8M5O7OXfWCm0bXzI\r\nuDUTo2fQ2m/uW4/7cpg7Nm6NKSzTYzdxmKhXFgrILfkxVGCX5htIQa1q1Zyb\r\nZONBTf98aaKYuctTT8cU/aohBe3RB1l6kgBpNiN398M0toHCCtWz1vVByPm9\r\nAU20rDMtPkf5vPlHavr4ZioYkarRo8w1/910pmqVWO/ATuVOjGAGCyHI2qr4\r\nf65QZ8iZqFCP97vZ2RXkveGLXx2QL0lctttw70NkuwDsZ8xmSdN8Szwd0HzX\r\ne6rcaSIK7VJTwwP+jistiMBVXDSImmaBPoHVgB+uRvLQGWibY/qXO9kfEAlC\r\ngsQQsyVffH5fRTwR/ewCUYGCtIAQ8EKyDWi4F2eAKzq6ee9Z1WHxz+db31J7\r\nxRfQcFY9h8v2BNXei/GZfZK0oiw9rgOxWVw=\r\n=aKVx\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"8feb0b9a8c5151a18a06d282cce87d861ea12e5d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.6683a36cb.0_1659554380682_0.9617004864069665","host":"s3://npm-registry-packages"}},"15.0.0-canary.10196647d.0":{"name":"@material/density","version":"15.0.0-canary.10196647d.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.10196647d.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0b15a249da4935c6233ebac35cc3948ac7908497","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.10196647d.0.tgz","fileCount":10,"integrity":"sha512-tRimXJnOf/aYuhHZwuhB9VxEdqcU18bzIQxWZ0Aht+90eRO2rHP52jBi6ffozMm1MgChi1S/E0xaCf5c2xVwig==","signatures":[{"sig":"MEUCIFiP1DpDKbMOBs5XdB/P6jgO5uLPNo6in/s7BvR37mJsAiEAtkBaE4znYNKgEEstIsdJTu29AVUZzsrlvTAWImXWcnE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6u43ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqPXA//RTVtwgqHBmsRDQHWBcfyeq87WCjMKJleNNtiXTgLmemWTqed\r\n4U8dDFIiGwESBmt0qYUe+ZHWrklmBMckm0IVq0SpOT7f8xBYSeTtaKK7y8CE\r\nUn32Dy+kTAH9SW7Bn2CsQyBkEklyXGT032eVcqpJwSsi6ZcmR2gs7/571DJ9\r\n4AW3bwL0jNWSTVDhtRYtjhwdQcWX3LPeFx9M7wc2wxWkxI5ABAXnh/M3mLD5\r\nroyO6yY1mqPxbh8/kRBkImpU9vxUX/2nng9SFG+idSbaIoTwV9HKHyWWfNmV\r\nRTaEQnK+g4Ph8+IGLbFk6Y5tzxw4/IdqiLUdTI0Rly8mxweNwap43GixtlsC\r\n3N1rYywXKEXyN2qicokYkF1GFUYaX0crxTgEjkr+KJ5y+sXwzhlvoQUkY5Uz\r\n12Ykg9wBJlgs1T5Rzjy/d2uTbUCekjwETBLweh4YoDyJhRRGJEIt4Mrn8Br5\r\ntMWGTqOpPLxwNqVZEG0gXBpy9Jbz/GBZa6L/ux/Mk2bHC5/dSDLESB0a64L9\r\n3kWCkNZqFtxTcLi3cbEzskI7ec8tzE3O1jqpWZWzRt3fwZJYnBrwKi9evAjE\r\n/aCf4+Jo0jrmWpunpHSOIvNSWHj2ySgjOtPjLIvpEQUiDP1JPDxtlHlhzvHR\r\ntKWc0bkorzzDDkR2TLQPxLwBqG6UdK3jx8I=\r\n=wkI4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"7a708dfc09b3443c565ce80a676b159abcec1339","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.10196647d.0_1659563575484_0.8427208131056876","host":"s3://npm-registry-packages"}},"15.0.0-canary.b20d3d73c.0":{"name":"@material/density","version":"15.0.0-canary.b20d3d73c.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.b20d3d73c.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c620fc828c1486db7733b9cfb73808c2cd6f39ce","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.b20d3d73c.0.tgz","fileCount":10,"integrity":"sha512-unVsePo5oK3Duhdy/k+T8Kn3c0YLXBZWO39N+lfGZ3PNTMQOHa2LvgJeaMWp6q41CiJKiQBoUSLOyoE+GK2Qqw==","signatures":[{"sig":"MEUCIQDQfzjDR3H8VpkQVXtDFoiFPJgTByqdLcY6Z+JnK3roGQIgd1S8YUsUutxNgMlxgTNF6lUZb/CnZPklTFvkBz1PdnE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi7Es0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpptg//V4KRTJeK1TQj8h1PhhJE9FgOChrf00NvwtxH3RNAmwQX548x\r\nx2K9f9I5yi4olvbzud9iTKtONNncgH66ytAAbgklWr/CyPYLQN/8ni017d1i\r\nHgo2IZLP7KdvOfVH5/EPGoK1T/9QM0CM9A5bOIch1mJ3RuQbSud7+xNkSlB1\r\n3CIxKKN1dPWx0BUlxF9sXmrZ0hLK9LOjkOvIvUd2gBg1+gjzmgahwgt4NxmL\r\n94pwmbpe3CREQrI9G/4/2pfUbMZKK/Crx2z1YgSorFmGbUhEuvPAEqiCALC8\r\nHU2s+xpNC7JZAv/2rthlsXBMoBtLb/dgTZ5YTrtXpuFDc5kKOIAU6c7+pK5f\r\na4bSGavmKSlQRaCg0WaJiTyvXfqJH7tpJSOgTsGnLFhvf5DoiifO3qYZ6NZU\r\nzTvlsMNPHExqxG3cSrHh/4IraayYzDuSpJAF/m3loqFInTXUa+FBRpKGEjd2\r\nc/WPz2UbMsTBWvpAo5BReBNeTBoRZyAgu4bPNC0B8V2f5UlGdaG54c7Zivjk\r\ndxWQcnjmpdDZk2JuOITdFtu+vtHFWL28XFzztzk+8fsoY+8+/x51aVCnS+sK\r\nfAiNYlkCLQCkKqsN9zNXW+Bm8AewbUwtoM5ZSG1qoDIqDULmEPPNCJDIT4Kt\r\nEnrYEYk+mYgmb4P8BodtoKQec7cggC+8UaI=\r\n=0eT+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"c869b5a3ceaada6bf2ec164c65f1e4fd88a0e7ba","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.b20d3d73c.0_1659652915864_0.7686710652028508","host":"s3://npm-registry-packages"}},"15.0.0-canary.47c0c6b1e.0":{"name":"@material/density","version":"15.0.0-canary.47c0c6b1e.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.47c0c6b1e.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3fb1bf6f8d8cec90c0f93d373a28e4039eea4e57","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.47c0c6b1e.0.tgz","fileCount":10,"integrity":"sha512-k9ARhS10T8zW2VHLXdXghG+BT/ILEiXjbEjO8ordhVM63cxoDmzUWELy7NH9lXdDgOoAiSj7uax7/RU0QFkiew==","signatures":[{"sig":"MEYCIQDwavKJtulu1Ja8VhLjLmy/VAd0qgiCzVGhSnWdkXvGOAIhAP1WD7guNpPeSWOLKOIQLD6cCyxJRbovQFJYbrzIPCqD","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi8nsBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrEMA//UXk362AdtBh1hwa09oNImkrNxcW+5zl+Uj99zjufdT32NRGE\r\n9Ek8yHE3vpmDe7fMoC1zCJoHFCrf/A7t+9rQT8FFNoTm9Iu2oxt3RWZpLBev\r\nuSsdP6H0KoxvJL5HWsg1P0M6I2WC4RweJ2R2wGRR8Ba/24hPYs62pEiy5GV9\r\nMvcrLxBzCH+1S/j+5PE/jeOY08Au796iAy1haYq13Vt06qux93dL4wW49xmg\r\nwgHc3SmCq7UEc94vlpNugOzpev1SpdyhIaXVCKb9+UHjlncj1OmIFLh/1NFd\r\nOveMvoKQ9IcSu4rdkcSfreRCwdCZoScPp4f9Bs5UMtCMUju8Zkj1oFKGOoJR\r\nT/UXU7fEk0mG/tByU9nNX5DX/uboPVIEqsIRvfoihyZFMGJOUmp4dtkOdsCl\r\nbTZcQqpTwpMtDMqY4xBXLK8jbxKZXAyL33bUxlxot+phgmqmoakh8mkTyUEG\r\nIrl0Jwjb9cK5rE8ZyQ+nHvEgJp1ZpuMCX+0F4ESGZ2BZIYJ5cQJYTt7CO2ON\r\n6S38Fq3eAcbDt8znaSgI+GeWVvG9T86+ptco2t4cbSKVTUD1AdHxfoyHNjWS\r\nEHSS7jm9TwsSlGhKCvxdyD6KoQ4gUYvp7Ft3BWsGmf5VSGyRg3GN/l1aTJQf\r\n9tnn2j5j1ad0Igk73E0W01oshEcg8hwkDFg=\r\n=6CeE\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"692955bb2bb9c99ddd9321606e40fe4a56de120e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.47c0c6b1e.0_1660058368938_0.1579041985565266","host":"s3://npm-registry-packages"}},"15.0.0-canary.0e3dc8e38.0":{"name":"@material/density","version":"15.0.0-canary.0e3dc8e38.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.0e3dc8e38.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9d7d56b67a4e3b1312b354899ea4d4d0047c8fcf","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.0e3dc8e38.0.tgz","fileCount":10,"integrity":"sha512-oxWwjHGRftosSNGgmVLig/qxwnDLazgboNHbThtalUJhKJBj1h/yJF9Sf79EMRt6MrcEiq3+HBzMJPhwmUKbyg==","signatures":[{"sig":"MEUCIQDzedrJtkVVJ3JX7/GnO6B4LPWCFhlnHGletqxEQhBgMwIgAvN4U0S/epDai56ElpeZtQpZV/rgUb28XEvXjfGQ39I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi9U4uACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmog0hAAhcDk1x6WPHTr+JgVcgDzZ3VZCrXF1wxDH1f/0HoXHGf8T32M\r\nq5fIIw8FDMEb4BX6VIQM1iPNWDzoBpFcXSWwAUC0qj4LjMYohDVHUPBa5/iC\r\nQqpOZBfbAaVDv/49+DzzLAO9ULKUwjlssFDKNTYFYlioUJo1iwlFDkBkiQwf\r\ny9AhfOp37LLslcJ43usSdxlYmA/z19pLmwIDB1jKIuu40H3qnC3XQtFZa7IA\r\nJNQ2VanY9z68zEutJgmwgs3XDq9uvaD6JfeMub5wse5c8FWE/K+fgK+r5eQj\r\nseHoGnuLNNIwK7Sd/jnf636hbgUonM0dI0p/9Y06QFd/BexWWex+UvfZZqYz\r\nHZ5BNCcvRdzbPHfHEdtUx1gxKlY2vECqc4Ves+uHFmgbmaBvyFZbPcoiFgDi\r\nRWLiOPl6k/CCmiINTtjwmYhJ7CTAzsXuvnUj5HAnTixySQjawBvPUW/jCXBg\r\nqCyICoTJAQaQ/UCnncysqPh2AsKnxpuJ5g60GIrQ9e0XZkVkVkH57VgaKeNy\r\ndMzrsNbC8a2q23eL4lFTPjgOZrP4Y+00VXJczy9skuEZx4V3eSNAnpv9tj3w\r\nTgIgbqO1R/4Rgn6BDY5zg6DoYRIePYVOXbsIkMXrNZTqVH9JXKM0/plUOhXA\r\na3TCUavufTTK4vDdsNGzwHSHM+/uZ98neVk=\r\n=lENe\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"51983e03d07e3c1f50454770dc24ff8d6d6f97a1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.0e3dc8e38.0_1660243502389_0.04679636395852249","host":"s3://npm-registry-packages"}},"15.0.0-canary.d5a11f1c8.0":{"name":"@material/density","version":"15.0.0-canary.d5a11f1c8.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.d5a11f1c8.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c4adc89f6230e15edb3d87f2efcc3e6649bc389b","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.d5a11f1c8.0.tgz","fileCount":10,"integrity":"sha512-xr7Q9e2ddLcN6oRV1Wgx1OsHZLkKhgetRqGSgJvjRvQFExONcBIB2NEo7FrBiMdMYnMdlXdOkAzfAlO2w+tNjQ==","signatures":[{"sig":"MEQCIEyXvQkEH3WWPm/ViDeCSG0+rUDH+yOF/OhRzD+Bv39VAiBnPXhNeWkvQnKQOi7hID8dANPBtUSIXsIpz38RSySeyw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjDpaIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp/Lg//Tr7hXOH5y990BX++e1+CyV+nd/Ic2mQPmeg1XcEMoRyzPSo7\r\nPVyBdDl9t/kxey3bED3UKlj3jAg5/q9TgsMBlUbFHLXGimnfV4Id15pvX0mS\r\nZhcuprh/nRVrMOH/y/pRXB+50d8J+ZOhHNCmeih/FPq+OOws/WnxGT/xIiKH\r\nSnQgmXVZgnfLQNu4cCf/2qleSAHYivC0913covfbtj+h9UTZFcev6U7o8Vun\r\nkHAqegXROpb8qUj+N+jkWQLiTz2H0d02ja5W5yzS11FYdIn76WBJootDRl0g\r\nh5XNCdgT/QCZqD5dcZJoQz4J4LcImy44XSJAQpTZr2ae/77Pp2APNLHrKFmS\r\nLzWUD51zOs7sko/09pswr5oMLL/OYCJpvLKAIrsYNu87CNr0suabJMakazlw\r\naUW35Z2uy2XTGVXJMcRhgDbmkAdyj7K5fL415Wb2NmxQpReRFyEXFGZLXIhd\r\nV+Jo3di01A0o5/rvh98mL3uOzThZQ+yKsf0WlEcZeCYq6cx5ty6YQ6/t/xKz\r\nrv5Sfh/ASOCuCTQXC75++kvAM+/BJHH+syZ+0ABodldOHgha/YpD5bA/wIK8\r\njgFGdvisCZ7RDKlHy5Xf0rBuyV8Osw8+iWygeSlH/Z4JfhVnV19vp7/65PN/\r\nv98DNtdTT3XEC0AYP+zXzbzgcbwZ7tUaaDc=\r\n=NKlQ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"7ac71b54192751de3a5469d20cb2e1c30e544d30","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.d5a11f1c8.0_1661900424443_0.6118407109437491","host":"s3://npm-registry-packages"}},"15.0.0-canary.bac992a95.0":{"name":"@material/density","version":"15.0.0-canary.bac992a95.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.bac992a95.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b057f563e07011ece660d4af76a7b90d685ba269","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.bac992a95.0.tgz","fileCount":10,"integrity":"sha512-3VpaSvb1CjEikaSY11qWq24nJ/DXA2j8vf/VOHog3vxt56BQZ5tX/BLZp+cSTrO7VOKoyntsMp5eW4OwIr5nPQ==","signatures":[{"sig":"MEUCIQC3meZ1rpVC1m5izlP5Atge19zSE0egWdQNnuKAlTXJAwIgaCtj8d4t5Q4KvAZ/n2VGI7v8VCg5NPVbBJbtYDPOfR8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjEFmJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpdCw/+Ji9qei0uHf52J99qHvi3HU7AirQBvwpKzOJj7BWpWzqyD4+0\r\nITGbtPPU9Qc0joRshSvM1qXuge8dyVtid6OgKuqC6kQS0L05FR0FK8eVtrjt\r\nR8Cm+cS7ZZzd3zCyww45gJKBPB14gOuvWVSMljuR7hpmtmk3dK0n1fNkWyIf\r\n8t+wd3qzmoIGynANZveDf3KQQCpXKmeNP7aEDIQqRchb2nJg1G0JKEQclcYO\r\nbkO6td/7fXnatZ0afnkd/N1f2rGxIQ189Z2Vh43uO97h/wlkGvkdglTLTHL5\r\neixhxk/FO36iepWZxx9Z6ap6eUMRkc8whz3CDA82rValETWCKr6B6L98+Fi2\r\nYexONMdcHh7dy17q++JW8ySOVq/LGJXWK3DQvqUF+RRsOKKC6A4smhXLQ+qQ\r\nUccaSlm9oj3zdaCNKdVRrj+fRQTYjDuNpRhRYxfIcxy8GnWepv5AqKdWrnW5\r\nT2SMMv/pN/jrRusI1GiYlcQfdsRWv0deHE60qnS1axPVVYb4ZgzYWdrneDeX\r\neA8gxrerHTzAceYul41x2o+LOy3OrnTuiXjc5/+3/5U7wbCEuu8ilyaWFcCh\r\nzaYvQ0+iO9nv1tJS4ZSTvVMJNWZHOBiCrAkJQpozRiOc6TiEO6gq2DcSQUhd\r\nB8wpjiyHf+FAN41duaxh4wjqWqypFO7/Db4=\r\n=V0yS\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"b8dc8f019b6b9a7241d55c21925faac495f9230b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.bac992a95.0_1662015881084_0.4616218657960165","host":"s3://npm-registry-packages"}},"15.0.0-canary.d25f3404c.0":{"name":"@material/density","version":"15.0.0-canary.d25f3404c.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.d25f3404c.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e256dfdd14e9ff20ce44b0fa2ed7efc32d21bf3c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.d25f3404c.0.tgz","fileCount":10,"integrity":"sha512-wYcNdrY9Za0p4gertLjVUQpKHrs5hQGAh54/yF0YVOMIKqR0cD5tcdb4Sl7os6sJPpTSMF6XgqESTQNuhH0QcA==","signatures":[{"sig":"MEUCIQDvrBYJJNUVTo1pO9wQCg1qL4iY1IvhtNzmjCbuljSVsQIgaMlolDMaZiSaF4d4knHgjEgt2SFdANpsEbgBEMOAy3s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjEH7BACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq6KQ//XvqYZ0axjQ3TXGUQznoXLJGTl6E+5GUx0Po3tyiLN/ImyGtz\r\nqdQ+e/VKp16ppVJ6elxg4JTSAvv9tbylurSy62TOuyIHKbltfGNOAAqahpjD\r\nMxVD1ziwKzelh1NXWl8ffY+5BW6LVnslzb8iWgc43PSKl9tvUT4mFQ+pGGUv\r\n2NqCmm6b9Q7r2znmCFt4x2clPfJ5KCvlcDOjdZTLrho1RGzW0ckoUS3kqxbZ\r\nItIHp3NM5VBWuutb9qbDT8kopwFH/QwbEj4NuULaCp+rxcEq7RlhxgjieY9W\r\nNy4vhoSzAQh/sqHeRleIs5wDM5jC98vIQoVJvqFIDeel3Yixz4CYJvcBxao4\r\nA+dS5/nb+HX29zSDJoncowKIwMbno33Ou63h35Ew5sf5os+KGTg6TvFIC9Da\r\nVIxGt/vt+t7SB0lB9XDSx17+FuGO1tWahWOCfRy2tHhd9w6iO7kwfxd62jyf\r\nn8zFsxtRNKriNIAGd5IBpFoF6CbBNhCPOEocUqJH/vHSkRDG+JGnPSjYm3Cn\r\n7r4E7+1bPdCOuxujvjX0zr+00jpE7Xj9D6I+Rkj18EjCg9c97jp2tzQxHfIl\r\nMQATmLaJ0RHg4Qz/uE07OTJMHgNpgXCddtT5SDQt7MnKllvcYh7m8KNeImdb\r\nBwDEoLQw9dppZaDSRC7DzNNUSfyuWhvPppo=\r\n=ccXN\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"cea256990068cc2248c9bed32c4a47fe622a3286","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.d25f3404c.0_1662025409328_0.6973947004201151","host":"s3://npm-registry-packages"}},"15.0.0-canary.920d8a79e.0":{"name":"@material/density","version":"15.0.0-canary.920d8a79e.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.920d8a79e.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"28d3a3503826b761cfb6a563ef36af8346704051","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.920d8a79e.0.tgz","fileCount":10,"integrity":"sha512-Xb/SGwoUEbPvdwYneCMXicwBJ972Vc0b5e3VBZliq2UKNMygjjvwUfMym1Gp0PRo18hCHV9IlliDQ1au1UOnoQ==","signatures":[{"sig":"MEYCIQCWuoUsNB8/2UTDNt1Iu5HvxoL7vuTiZVFAdYmYY+yE/AIhAPBzbEmhnYwl/x6oH1QHm5vZIYKGnzNuDUIIqwYWWhWw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjERPzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqeEQ/+Oed8+cR3zQgFGfLMgHvdT63aYKqUi+Hix1TWNpJXDscQIiDb\r\nspT1ROffeCMAgZT3t7rWoM7IqZTkAcyOgRluChqloa1xg+pnspIuJZCYqkzJ\r\nusKyO+nxXSfDpbFJhtb3r30Hl4E8k4CYO9Q3UNQAANHEV/wSjQJXaJywpbFo\r\nLOUNLnwBsO2JCGXxtZX2f4ajHb9k5MvlNmueblEypzly1lvelUIE3e1nxvgJ\r\ndj/IbleKDie5zqhqMgtm9YhaTHuzX01of0y+GvoL53rAzhFeEM/InUuhNbGw\r\n6SutiPxHZjvnM4wNGR3RZT+aAyfg6pKDxYMm6r3/xqyYltkHo5AkOxiETkWh\r\n2jF8QJvOwf5YKBcXXcHSfJKTXwbFEP44L4pPyImAp9u0mADuiAp029X+E4Sn\r\nvbiugvdoEqYjsAsQL35Du5QXLHHGnEAgjyp/7WDcIi0CHU5dkqdlbpIqTW66\r\nUwtalODN4p9f0dWXAP3RZ5R8x2BTUPhHVDV0xmawrZs5YlzmWyAmN4Louihs\r\nAkLgQkCiIQKSpaz6cD7Nmca8FILW3rmfynWVH6ZarF55/rkVZbBbxRS5irBe\r\naybmnZpe7jeC2Ahi0Q9aJdc2YoOQffdbmp1iAGqMf+HnWZuUPU4O6IAPhJ18\r\nm/NaHit1mbwmlcESsFNsx/KtOMvnZhlCIr4=\r\n=omHn\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"781a4c78770587fd97c25633bf9f137081c35bc1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.920d8a79e.0_1662063603432_0.4346882625838864","host":"s3://npm-registry-packages"}},"15.0.0-canary.c363f267b.0":{"name":"@material/density","version":"15.0.0-canary.c363f267b.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.c363f267b.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fc3fe7780618491506db679fd338d92cabe2b3ba","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.c363f267b.0.tgz","fileCount":10,"integrity":"sha512-+gXznI9EHMGK+TG+A6RWtOKTOT9zKG6pyO3PxPnfjRNcr7by5vA52chOigyP1bXjeaoftCqAmNln79q/dJsRCA==","signatures":[{"sig":"MEUCIQCsgRpyKEuEzGc1M26Wao58A/r7nwoyy/WKoloJcoDkUwIgEpmOiJ8PnVFzFnQZxsqHRoYFLrmhCt+RvXkE+4lXt2c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjESFmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoy6RAAnIdldJ3QpDTjsHYADwOz3OMqvPd72pO1vpUpvgSYE1OwqsJt\r\nlQQF8+DzmjOhF2UR9r3H3HP9pfop/ETTYpE4wlGYZq3128tuHgrPhpMhqDt0\r\ng2qo4sPmcOj7OapOdqymsOsy203HbgbkndarafuSk7mS2jWzetUMYnBVRywZ\r\n45+swjh+dIoCQW836hmRWmo5D+04YqlUun6h3CH1Jp0lk0H/d9VadGGUoeqv\r\ny+RQmjt/T7gX2CLar9ipTRBBGAywSZkXgtFON5dVN2cP0/cBwdvxCHWE9ziz\r\nxMHseGENxjBsHeabspwmOXdg04x7HqE9ZLRB6PNJsU8aAEU9DuFua5aEX80v\r\nKxH7SSZcKPs1GAnCVTf8xuk/PNrISKnaabBKrX3qmKcIlFBDiYDY10qD4e7v\r\nqRaQygc49g2UVQOC1H+MUofS/rBzl1zZ+D4QnmWcZVE9wfW2bPZHOv5O2F12\r\nIIkDisMjwExrxUtrY1UJePduhz99Uwtzvb7ux88sy5WJLsc/S86Z34eL+yZ1\r\nbNGGEk6xDi68xxN1B1XbPCKj9Owk8Wyn3j3P+0qWD8nYEwYzcXqxDUkgsTzx\r\n3V2x+ElE9BlkkH88UzbDrzMgf7y2u2G30GttnXQNagCOG/MmCq3AaYXkPSX5\r\nQcYe7ot60UImGjSPKB0q1tt4odnyAiCyDv8=\r\n=YMDb\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"6e2ef624f85a84b5510b55933f017db57797f611","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.c363f267b.0_1662067046264_0.7986111278298018","host":"s3://npm-registry-packages"}},"15.0.0-canary.a4eb4937a.0":{"name":"@material/density","version":"15.0.0-canary.a4eb4937a.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.a4eb4937a.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"658f4a62bbc9ec457e37ee52499a8faff4ea50c4","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.a4eb4937a.0.tgz","fileCount":10,"integrity":"sha512-gKerldOnFyP5ALjYCq3VsRBwXLPPblmqBPW7OMGiuSvhPUpcRL/1EnIf9nOJVpWyK6+vKoysuNlpIaj+tp5yiA==","signatures":[{"sig":"MEQCIEYf85kAL7QrJ3bN2hqeGvSbJKQ7Cque0I2OBneydvimAiAzWuwUsPRdSrjQ/Xq1dydQsnFGGCJ0vugK8NRG+z4B8Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjF48QACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrMHg/+MXlcsFfVXY+SDIPBiFcym9nkjFq17TVUx5sOmE56BG2ecK4S\r\nzTM6VcNQRC1YmU2VCu0BhmIyi0sRZ6RWj40fE3CNwNCPP4kZ90IgBmOeGw7Z\r\nggDxPL4kq35/ueB+Qi4tWdrlzH4G1A90QAs+E0mtV02K+lKAxqyu/W47Qg2P\r\nGMsAn0C5av54Uj9xWcU3gxaloHi8bPmOzZTGHJSoM72f9EbwUx9ZOI1Pdu/A\r\nYgEjqcPr1Q3+vO9pA6KiNEVFkDdOECmfPInEu8IVY86yc5qway8xvx/tlj8A\r\nyWNNl6t0tEYDrtpYzzZDpO4XmR0t8oUKBCwJkGdEyLBJRgObL4HkrhgL35LQ\r\nHocYR7mXuPjtHMpI7SH8t4orSox5liyhDxAJHQPrR9QdCNkhzYoCYIAXdrbq\r\n0SzS3qyJQ29BxHfsGRmrmxEL32mzsky1A22XxMkuOD0C0DLF0ZVW+2FCG4KJ\r\nc6ozzoMIDax0pDvZFMcare3DeqTM2ykJe/mUoaI6O2OYZSyzg77B6Y193uNV\r\nXulDWDsveA5clpKlj2MFLuFMhbfmJomDPLsD/7BgmFIrFr2DZ4pEGmdI6mfR\r\n4bVztbOgU/CwtjoQrwHXQiGQW1dCqJrpOcSNHHw0SkszvK8rxuMVLsMwrSnX\r\nBJLrwKC5NQNNSsN66pLOh5l3AuTIyc/DRFw=\r\n=klVS\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"cc03915314119934676831cd7a244f70e12dd2c6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.a4eb4937a.0_1662488336349_0.9228440654503802","host":"s3://npm-registry-packages"}},"15.0.0-canary.4299717da.0":{"name":"@material/density","version":"15.0.0-canary.4299717da.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.4299717da.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6e5b4ea637cd8b83b6447c598a5d148300e07d2d","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.4299717da.0.tgz","fileCount":10,"integrity":"sha512-/m/+PfZoCR35faILvYzl8fueY5ZA9m64iJyb5AcPYQuEwyNZUWtA40GH1xL+fTRgaY/HhFFSxRIvhJyYQ/9GBg==","signatures":[{"sig":"MEUCIQC1XAakpF0NFC4scM56p+ZZVWzMkiClmoVJ2R4eMi7zQQIgVfhL8Ri4EdleF+EQUGTeHa8b4BKYFyMpp4bzADZQaYA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjGMN5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq/nQ/+NkOQRspfSaVn7mGc5dbPkA6Wqylhkti3uEH2aARbEw9f/JXb\r\nSxU40B6LudRdK0RdrOpztwTTWpiAMIuTyZLizsEO9+EkSriwQfzb3sG91D0Y\r\np/KOtxUMbI84jRl7lHjO1egm/0i8Fr2bQ74kFSJzLvdYu02keLOWiHkmgwUr\r\nmqeYHIWYdMRy2AiTv+gxOpt0Kwk2b4GI5+mZdgsOwvnfqtjB8U3x5CXBSYz1\r\nk1NsDo1E2nY60k4JFJZYfqcVY9dK5J1ndMzZW51AkpGyhxoS+dgNAd/vzwOk\r\nklUBAoraCuRfIOXoG5Fxw3ebUEe9WxuogK0/DLBqfhYxddeyKdOwKqymwZIl\r\nO9lV1bfhEQjEPg1+IYcte/PTR3ePylbA8tw2csjH+WInzq+nAViJU38a9Jwk\r\nypkzE3Cu/ecrQcp1rxFKcKKghRqiImk36oafoBCCM5mWVJlz9OI46IVokc+L\r\ndu2n4Hv8tXMd9Qu35/eW/3nW/xIL8FJlG5lWdJ+icJj1Tf3VjThTCiu57Fm1\r\nsYKEUoBiy7pMVyX/qL4g5gUiqTrUwTuYbxCymW4YxQRDEmtX/7XhzfNrBGEm\r\n6RyCWIUzqqCVQNUaos09zWIytCmj+v6UpxlXaW/rORRkk3jysxFBKbLWDCmK\r\nOJX0OmCtrf6bhEYyFkeJ4byTJafp1Mg5vrM=\r\n=D56W\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"22082634ffad1ea812192e5ac62786a8ef47aa81","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.4299717da.0_1662567289049_0.9688631818768672","host":"s3://npm-registry-packages"}},"15.0.0-canary.fa7d8d44b.0":{"name":"@material/density","version":"15.0.0-canary.fa7d8d44b.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.fa7d8d44b.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e7c2bca81bd3bcebd99504591dbf62d729b3a5e5","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.fa7d8d44b.0.tgz","fileCount":10,"integrity":"sha512-0tAKYZx0C5MiqPqQVNuvQziYdSInpgrwg9j4jDTwHPqQzWoXPfIbzsEpx9UIh3iuzwrE0p1BmFCCUXO+BbW86Q==","signatures":[{"sig":"MEUCIGDuubMw5GLiBavt0CKkxyKX0ijD2TZxroolEy+cG0bvAiEAwnK5IAnVpc2at3B7WRHk2zfG1mxOb0CV8Pwa6Dvg+7E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjGO5jACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpU9g/+NG+EZKYMrH9riaqfAqdj8vN8rkDD/24GoDqONAk4SV3QGJeo\r\nYPZhvNDciUmwQNYhTXnygkofPdgX7HhJ6N4aYICi4PYYiKg+w++7QZCKC+dj\r\nED3W1TRWPUB12ebLvnctnrD21zP15REHRBGXyg09WZcKMQZqp1azFhrddMNn\r\nhrAEt6NQjCVg6rTiByVKIHTD2yWEij+4AduNHdbjJR6zgb1Nuqt/aqK/pVEZ\r\nR4owbZpbHCfPVaeymdj91nCscw9fLZEPr0CsRlTliBfb4WcZv5ymxDDya3Oe\r\nhRzbWQCw0B6a1qS9SDrrPzrrgan+Y3vFPxC9KxVBDXe8SdockTMgy53mEKiu\r\nLZksZ8Jcwc/9F8dkWC3UomOCm6VulTUuYPkz8iUxoSWyg88umCPxlTfNfVUD\r\nOnGYHCZliyDkPG/yboykqrv4yqVpJ6Qq98Oh/hu0f8vik7WYU/yzYY97gSwp\r\nywEoI4rszVmrL9GrQo8WRZxZ2sRT5CnAo1atcLtVtY5gjfXBzeU/V48EyTfN\r\n23hSztFmPiIMjV9fy2AhBnA3l9tzUvJ+QUesiPX+F9+FC0sQt9t30UzBue+5\r\nXUyZX3lTL4tn3haBwKxsELNM+BCe2vE4ekfdnhFPiu1S9DCxI5Iel8TUOfcQ\r\n3ow3w02rFoD3+J2U8p6Y8VBKd5bnXj9rLrg=\r\n=8hiw\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"6fc828292e73ec2f8aa4332891628e90f4586658","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.fa7d8d44b.0_1662578275066_0.9348293519990056","host":"s3://npm-registry-packages"}},"15.0.0-canary.a40e3c768.0":{"name":"@material/density","version":"15.0.0-canary.a40e3c768.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.a40e3c768.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"81c07b5ce1b5be7ac4b968efceecb0452d4e4ef7","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.a40e3c768.0.tgz","fileCount":10,"integrity":"sha512-Z85uJcZRrguHD245ArcnMVfZ15geWg6affS9e9fDWgBq8KLkypiQwnWdlBhcnvm6rrgMl+sG7k7Upo1K27sdkg==","signatures":[{"sig":"MEUCIBxSWdrtpJmCZTfSy+HeB+xg78xcb6A0tcRC21Qsz+i/AiEA4YFUpmyCWxYTmNJUikVNfLSkUUHDrWAUDYoHGQ4nMv8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjG5v5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr3oQ/7BMJm5oV0imo26ogh7pUHb1TemkKU37OTzRkJoDUUUzo/yHwq\r\nCRPmXc2KvUHrYnJEjOpAOFo0zBmPnKJbsht6EmK0cG3Xn5K05CGEpdfprHIn\r\n44lX7F0Abqba/YnE/c/it1U4MebStNW9pa6agITm7AGSKYs82qLruZb5iuoY\r\nBQ2/bWZaZJHTwN/+4xRK7K3lzznmC6XZLNHCLatyP6t/mx3BbOGFVy2ehnnW\r\n4mwiVEX0fHupD1y0L150YfQGcELsqlRY7dkiUsDJZQqkq1RGOct+jxDzh9zn\r\nN2NP/EUIUTUiVMSSWltaVJhwxUCSmLACgchMP02qKL4l8zfcBILoEeFpFdus\r\nqFzHW3rcWCVxUquZe9K1Su1y7nGVwoOjNHk0yFX3LAE1rjzdf295Kkq2DSST\r\nQ4RmSf+UjIyhU0OzeQ6/yZGg465HaFDvIRVF/+pTdGrJ3bbILbEcncMcjbTx\r\nKyHy+Tf30D2SEW8RBVRCjm/W6XhjQHvzXYKDsd3sdeCYLRwykzU+Ii6FyYON\r\nhP5su9oGjVxyJZiaNU24/550UaO9sIP2i0wxUvoDDrRDFR0m6IsHUcrsuR4A\r\nA47pM5S4l/bqtGC+ndBeDkTKrryQ3xMM492N81c0hjl1SUwK9fJ7z06qdnyc\r\n2rUuUtHlrdEWhBbVY+dPzAJk5/1/C4ZX/Lg=\r\n=qkZz\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"33ff1e71e12298ba7158884edffecc83f0055913","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.a40e3c768.0_1662753784816_0.1418930968685299","host":"s3://npm-registry-packages"}},"15.0.0-canary.18cdc9a00.0":{"name":"@material/density","version":"15.0.0-canary.18cdc9a00.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.18cdc9a00.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f59f1e5aa203dc9f6db71e82ae9e6104e0ae0f70","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.18cdc9a00.0.tgz","fileCount":10,"integrity":"sha512-Yj2JR3z8Eg+ev2yHINsag7/yap5QxxjiAa7/vnRUqwfVKA+XaKdSowrQCE0kTX5zpDGV8DYDuRXwny+Yo//9ig==","signatures":[{"sig":"MEUCICbbh5mmPr6ILDxaUunfc0mEV/ed6XBafAEG4COcD+EsAiEA4Oco9CrdoZX+3ZBeIDxZzoA6bAd0IhHYAYTyv/GLeaM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjH55HACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmro6g/+IVuKP237Fx8tFQJyZFjhXWZRC1t3CUY0v3Z0YV1nxR+YhH84\r\nwKjqwtNH9SOrdrj5b3WOBFZMq8WNGAmLbqq426HjOnMeU/actP1/EItQg3dj\r\nABExjPUevOgbrDlZ21ZWhpgllfWzE7+juPncVIHDWghmBd+Gr5Grxt0Xiax4\r\np6jRZrM7pGvF1P23S1mVCrb3UewzpVBjhkJTCMGpRNY75sUvr5ONpLB8VQVX\r\njA5SVa24XGbwUAeRx43NaKtD6t79LP0KveXF3izZs1cFTKzrL3s8nd3VfSV9\r\nP9RZ3Om1FH27PLaLFUJ//eNKy/gxdt343sT1o4SHjs2IBhJvZ48VuIbyKJDZ\r\ns+95ckW1T0ZL2iN4S8VQQHor1AvVaQsU8IjZZ93Xj1kk9/yEWLtdPZCaGD6D\r\n2odupYCLOchv8oS1Rgbkbsz6kRQ2YXzutA9PEGHOk278CLMh8P9XnV/r8ajz\r\nu6+gRE0IPgxm5zEbWvz9mIDu+5F3/GUaJ5rPruO72juOvnSFHwPU5vFYRDfU\r\nabcMx/zzo2mNVIuu4b0YgSZ8R2slynoocn3WZx7mILaOnnNoWMJTAOlwhXIn\r\nqNUm7q31b5lZIVFk5CS/iZaKicMFrbyhsC1HHbLvgmqy4WegY8DB9xgITaBM\r\nZzwGTN8DfxYcUQ5vbAn5L8LBXUo8yGrG7qo=\r\n=cIND\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"85b7dc2034fbd68e480826d635d6d061ba62d3ac","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.18cdc9a00.0_1663016519081_0.4706824433989716","host":"s3://npm-registry-packages"}},"15.0.0-canary.7ab3cd3c8.0":{"name":"@material/density","version":"15.0.0-canary.7ab3cd3c8.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.7ab3cd3c8.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5e600a88e2494a0099ed1d4acc15e9e10b8624c2","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.7ab3cd3c8.0.tgz","fileCount":10,"integrity":"sha512-rZrgw1cQ2HTpITa0sCETI/1TdRq3rbkvSCA53ZvGcC+g7i7bnmhYvuqn3g3pRKm6JkM5+VpFUboL0XXnyczcsg==","signatures":[{"sig":"MEUCIGNXobnyr0JrwJyfebfAzov8HpkWyw6FQUT5qWvFwhboAiEA11RtmzAddz/3ubEhEjUueEUCiVlya4y7SaH2PWmaywM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjIQZbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr2NRAAls67KZ28tPpR5AB3R/D7j+cPwK8601gDO6XacGWHZLlmccVc\r\nChUmdRR5pZ792wNouMui4I07QOjAsulPvUHy1bHm7TnOq4wuzExrX/QjuBnx\r\nXIEt56jRgCu1ZKlmQ7VFUn1vmTAi2hFxvgED1Nc04aeQdHroE8e+AxUbnzCd\r\nxpL9ZJeY9d2T5ZiJ+u30+/tmbL/zXNNsPNTDGbutr3YxDEPkGM85/f/3inMb\r\n3pXYLwS+Ak185e4UxrbIp5n9meGXGje9hVNKHdk+4HQSRJrcocowAWZZ4J65\r\nSzd3ab2Y7MwEaAzk+lWPtGK+/Pu7iPFXI1S7ZEW4UFPlzuQhqDFv2aB0BEoT\r\n9fxV2Pzpzh/Lzb+Jf7rHKZj3wrJp8JDpjrRxaEgiUCFkdbzRQ39nxvseOaae\r\nQxmwZR9vTg2LO0v6XY2lC2+rFjtUmReZf8VvH+gA6rdRyyDvlIlUTptYvaZ8\r\n24UF5RuVPkeGIDvyggt3as3L9e/iaL4oQt3zHgTWnF25k1EqmrafGMOjT6Vn\r\nrOaMTYCwODjjwdiqmas/e4e46rNVj2J/XmFCvGv9O87ZXt3uOVk0bbPpVqwV\r\nwDM63W7/KwiBfLjFRgoSAfoGjw795XC7kv9pV/3zzz3/Tg+SQsTXTuEhJRou\r\noy1JvQsGZ92J1UR1I3tNqIA87F3zA+5KHGg=\r\n=8ObM\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"5e840f2c9b221706de7ff81194e71da2b68b82f5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.7ab3cd3c8.0_1663108699700_0.6296205870620675","host":"s3://npm-registry-packages"}},"15.0.0-canary.2860d244d.0":{"name":"@material/density","version":"15.0.0-canary.2860d244d.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.2860d244d.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3202ecc3efedfb9947ef8240193a17cb916289f4","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.2860d244d.0.tgz","fileCount":10,"integrity":"sha512-Y17AaAPyMbv4UCJhLxGPP1QU1PPmB6T1k5L/3ffhkPmsBYOanhMxEUou1z91GNq3BqMnP9T0+huAWf4+JqKcEw==","signatures":[{"sig":"MEUCIFOhCIV/cQZI/1gJ52z7hAo/30dLBexKlC4FO3JwV04cAiEA7vzeD13YT7SdGPIbzlOvRbSG8JqnalZ16Eb5xyJQP74=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjJP6KACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqiEQ//ThcBhr/W4z9zos5xcDr+vrrLfwrQYZOV+EgyLCP2/plWsauX\r\n5kxrylwl2gwaqIfo6AZyEqdU6F+i6ZjLZ9CcDDBQ6DMft/2B6Qv8Gs8p2hom\r\nnQIzZRj76n2tgHWRFgGwC2oDodQMVBQAjgAyGgdEQlRTeW72Z09zKX5WLz2o\r\nCfjA21H4QtYoQc1sgSlSYMNr6LW4vGB70R0aF4DseMmsVDfBpIUf+3JzJREq\r\nsvsK4EYNJULChnuSXKcdK8BWdRyKpcHwfUpXJEQv/6vRHClk1D3VD2qqL3hY\r\n/oQsMgE/lbk4BgoYBlc+YX/lw/CCSmSIKavzd4FfvB6rNHY1lCYLcVKgFJR3\r\n8i11PTSlXqvqdlQA/hqxdj7ktZpkU7XpLKok7LgpUon/aSoHxZAjpnVms/qf\r\nG2vjnnoem6l0g/G2I9ac3qd9j6UZ6Pr0e+XzFKbuozmGRHTYnSNFjNnPL5dR\r\n+RzlpAKBsMwx800tVVVyLlxsWQ2Q1eHECo8OVt7DKLnwlrz9LJSo512u3v3x\r\ngjjAcx7meXZeH+ull0MjzvC9tG5PChLwgjwGLqFOTnMErSOnyc4+HDJ8zEMc\r\nlZQzjW+hlNpCTAK5qIIZEg2j9DNn4fPrqvOc8Cx2NKrl6uWwttWWwlQg3f82\r\nE/KLh/KKK4Th+20PgpQx+Sos+sDusIBNNQU=\r\n=qfH7\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"992b4ddc7340e4e4231d1001d68229e8911eeba5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.2860d244d.0_1663368842421_0.14106309994067945","host":"s3://npm-registry-packages"}},"15.0.0-canary.e8726533c.0":{"name":"@material/density","version":"15.0.0-canary.e8726533c.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.e8726533c.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eacccf055a355d694ea746d003d2be9724a587b9","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.e8726533c.0.tgz","fileCount":10,"integrity":"sha512-zaRBFjiyPTGOQ/u6S1E3CyKYdMV2RhwtMVku1J6IHleWV4xrxSTJIuBjjrihhVZOacnls7ortqKD4EIqpi5ekw==","signatures":[{"sig":"MEUCIQDqEWvmfYdFYrG7SlY+MnBdUfZrOzIklIbg5g3zY3MG6gIgHIUELNx8GRrEB4kHOr4e47Zw0pCm3dJSxZHzEIPZKAw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjKh+vACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpGwA/+PD8vt2Xcf+kSzRukprbK5uWT0sVRy/U5yCBw02prbB+GEABf\r\nK6ndoTMTu5joIa+s8S93hnA1xaufqnH6a3sMaTJXK9qzwrv973UGCPteP+aq\r\nWvrWNK6Hm8ynXedJtpA7pbpfx6UZLH9NaQAq7WyltJDlmFJFtvgQHiyuzXCh\r\n6FRRSG1HgGr9/7qNXY9QOP+nAOf74DSQVAtZhCNFYgaOiPWNDvFRqgiq0l+f\r\nVMzveIm1fhDa/iy7IAYf9hSPtYkhn710M9kEqi0n3kubK+Ya4XyHUe4zsxxv\r\nFsSXT/irO3l2kyg75lugEY4Nhh4FpWTEQk2uJ9S38YaFUJa/0uU7K70MN2o2\r\nnr/N1qOnpRW7Z2ebjgpeh/hnTeHm+MTGp1ICFc2bseJq56Blx0Jo0kZM8EUU\r\n84IyHZjWEfklfhdcZOp/d8d++0j6Mcg9lP83zZ5qCkoWa71N1n3iPGNQnQDT\r\nzA3yKZCtxR1PMZvwHEWgm3jm3McRsbqoeTTsYU6H4EMnwQ/oEKP3ApNvQv9a\r\nxQK+z8FYylVsrqEXK9XjoZ5rcf1/ic+NtelMC92g0aOSptw04K+yTKhQk+AB\r\njEqhBtITu6O0ztvJXvg1YFfaNiFaVmQMsulwrtPyhTWzuxQmE1Hi59rhtNDV\r\nmP09d/+REgmO8ZdMq+3b4qmmvGFKpLcuGQs=\r\n=5D5L\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"b85a9f4d1ad6e30de8175562c0093248848c2598","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.e8726533c.0_1663705007308_0.5515145751917319","host":"s3://npm-registry-packages"}},"15.0.0-canary.00d8de0aa.0":{"name":"@material/density","version":"15.0.0-canary.00d8de0aa.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.00d8de0aa.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d8dfaf8336340f8febd648f7b66d46d0e1a3e363","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.00d8de0aa.0.tgz","fileCount":10,"integrity":"sha512-ZKiYxVq+BaqM6s5EKJUhmPo9LwP9yoPj6krRl8EYenZXdkNQxapP92XFoCv+gegT8AJRrMOh/E7Jk8tOPRb0GQ==","signatures":[{"sig":"MEYCIQD+Oi0MjGcRQN0tcX54ffqG63RL9zoYwgYTpsPe3iqXTwIhALUAz4s2LD5HKr/ONT2A7GPS4Hx9Vcq0BMjImqRiGakC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjKytvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmooxhAAnUf3zif870Veoz1pAR9MWo7kjCWn4WGOBlbjOy2pyFWPp7Y4\r\nvhzBRf9TNUU39GtTgk4i9DsE4qFOKi0GWHP8LkWa1UFKFmG0d6UgrLfMK4+k\r\npUCHUo+TvzFy+tokUNoUE6g1oX6N9zEyMzmILO4BTW8alQzJfDM2n2XLBZnd\r\nsGonDEivjZi99sckGmNZcy2MvYTwXhnsjKc3NaDqD6406NnCM6uoUlceAMsa\r\nZO+8Iav7PkyaffCfoBEzJ2bBw/LoLcbMNlCYK0iMaVLDZDQ303UmVzftHY3s\r\nyfsPY8wEDcOrbkEdWeaFYZ665i7jRM4Q1QUXXyXjtl0VIt7s8ncr79ZYqM6X\r\nkK94SaO7MjafSBauVLjEKzknqOy7NVWX0KeMbibWo10uDbXEtZqqulYfO2R9\r\nN9MQHSD/DxvGnpaGwoIVyl3bBEu1Qy42PkNVsCiyzqPdWvGm1qjDFNo8A1OS\r\nVJ75fgwPHbcbgsA0Z19Fz6O26EImKdvaYKp5MxmAliXR3mfwRiFSeN2v11Fw\r\n052r85ub486EzYzusm8vPDX/LIvkGhqDKRFGM3Vdb42CvxQRQG43Zf0M0q7y\r\n1+VlTXa+NB9cXol2vHvFQOj1cF8UMaaBLZerrXmoSajTJvnzTNv7Hp487X3U\r\nvYI/T26UEy/kF4v50V/mxji+XdfCEMhjBik=\r\n=fIGG\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"0be0806991396e042fbbfb14ac3ad622770647cf","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.00d8de0aa.0_1663773551671_0.8740537473077523","host":"s3://npm-registry-packages"}},"15.0.0-canary.271aedc30.0":{"name":"@material/density","version":"15.0.0-canary.271aedc30.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.271aedc30.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0de331cd6c66c8d6b3d45b332e3df1cd8cf1658d","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.271aedc30.0.tgz","fileCount":10,"integrity":"sha512-F+XOmhlvJT1i/pLXq76Zr6DFycv/g4xq0ds/WDvikYMDAneudpPH14/kPtVf4i+EvVyMa8wifLFQOHhcd0VRgA==","signatures":[{"sig":"MEYCIQCOS3pZR2QA3hu7dbFtJ921aMtRrEDAcTrAIqlPTH9ixAIhAJ7uiRR7wgq1KWhzp1NbEpzJ/uGt5VQz99FwfYTgnMt4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjKy8kACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo2Gw//S1XNtMUGHCoRBKDxA3iwj4LwTp6gAviu+RtCTv26LnNegLRf\r\nJkAczu+dBd8wDqO2zd1qb+2d6xBA0B5yrHVjsHj8un6patu4d/WcKvpvhqXf\r\n8U/XzEiM8XjT2lNohgIsAAdPkj/AOHiN+PWjdmFzEOaRKTw7vGQx31FUQ1U0\r\nNxxzyQ9W1dnteNxzePnj8IMNtIdVcBIpXuu8VMnFBLNP6BhLcJOl+JRZlANV\r\nDCFKzkUzafQjC0TLlgT8ie/Xry9E9RQDJWP2rlBSENZmrpnFZWwssqxNdgUU\r\n1EU2+b1dY8MdbnpFy4BbL31LdEYl8oYEhPrGhdy+i4Iz2VJZEQAAGip5cD5L\r\nIvUaiim+Qna41lin/q9EmTwGvqZ0h2DQv4lW4JFSFlTCLOWVvF0tEYUPt7TL\r\nS7vOgrxAA9/u2HtunyEfOElkJH9aKyYXFDleKv5DU2trb/EM8a7DnTT/h16o\r\nzPUX30k6IssM1Pram5ZnZsPtR2ufTV3MMz2m9aBKnrM56WDdsyjU9GAUqj64\r\nLGlF3nH4ZxUpjyYnV2DSBDTEj7xVhfDb25P9F81+CQZldqxnoimDLn9VT3/b\r\nTLkd6FJd5lBSf7+1440B2UkLvYEUMlarddY++PuMxU+khMzwlD0tWmln9z9f\r\nvinrN7ehb/C95K2VRCWeIs+3leyXTc4yu1c=\r\n=nUbe\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"4972da221d6f097e904fd1a001de647e0e185749","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.271aedc30.0_1663774499780_0.601481661035931","host":"s3://npm-registry-packages"}},"15.0.0-canary.9f17ff2cb.0":{"name":"@material/density","version":"15.0.0-canary.9f17ff2cb.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.9f17ff2cb.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7542fa6b7b9943486360601f98a8c8bfa7cd164a","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.9f17ff2cb.0.tgz","fileCount":10,"integrity":"sha512-4PW8BhhK2ZI+jA1HjDOLu+yyykW2JXanQVKFcd+4Gc/9LBciw5oxR0+XNn/+Q7mdrryZ8lp7dfKxV1dexiIKeQ==","signatures":[{"sig":"MEUCIEZn+eOiM3lhrWfSRo8rzg/2bDJ48lGb8l2K1xyZogdvAiEAmQwuewZh2Y/yNU3l9pNhWCQs8bC66ep6EYrnu9Sd31o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjK1LaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoj+g//UhOTlY7fqp9cyn0Z9rUAAiCJJPXy2c2r7E+EkEwMYjlj9nQQ\r\npepgpndv1/GeS3zO8k24uDmhWJTIS8v25Vq7RtZN09SlGlXJ2A791S76ZTrc\r\nZ66vCPb6Bka+iynnnTRLsmiq+/W9v7NAXxyQqqLBWcbqGEgkRxfvFUifhYjz\r\nxw8G8BDuC/MPXfCFlLNccTVBNOrzCB7YGGNxdMDunJQY3xGDFzAVWnQ8JiXo\r\n4p3zXFTWQoq1RWh+KwBtLlAeMmXE/+2pW9Qkwx9AFHuKuWvLQVs8AlOTkOqC\r\nLnTD6Lznvxb5dfrb1FGm9OWP2Tsz6f995Oa+Z2E9FhyxGNHUNNEwCkKCQFc/\r\nTWjCnO13AmbyAmboBWeTCFi48MFrZKebd3yaRBeez5tnX9gcfndKCzcqmBKm\r\nLQIFpdh3K2jxLpnFOW+pHXcNVX8xbA/5+8zRTaJhOEH6fY29LQ74NaKi8p5G\r\n2qDuSpsHHqiN+lJq5jYKl2s9fkQK0bnz47dXoyRb4lgNVkWZ8VaXR6e1Dg5O\r\n6TzHlvyThOFSUKSKOfWElaymSlUxfJnIjPMmUXu72+nhCYe1xVe6at+h3n8B\r\naOJjaxjhHzA8XK0QrxXOoUJbl5CblLYIvJt7upDPaP4ahLwWaIxme97exOIR\r\nEK9OVN5OPe4EXRLh+FLHDh/0hIGA6kQzlyQ=\r\n=fTnn\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"34e73eebdcebc0a0b475c8b2f9fa0dd4a4c3397e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.9f17ff2cb.0_1663783642374_0.2675923216510956","host":"s3://npm-registry-packages"}},"15.0.0-canary.d3344c16f.0":{"name":"@material/density","version":"15.0.0-canary.d3344c16f.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.d3344c16f.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2c1397f7b2e926385193cdf349f53f6be32b96f6","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.d3344c16f.0.tgz","fileCount":10,"integrity":"sha512-Iv+k+KkjzUz1icggrPCA41fCIav6yYFTJfS4RPyGIk7xRtUIcZ3dtjJu9Bw9cFTtuNTETa+MXnBzhBzSadSGag==","signatures":[{"sig":"MEUCIEajd5gl8cFaEIDvMQbGtkxpELUpotvaOnEUKaYdw3YSAiEApiteVRYqjXkVSXLSCMwPZi7itaT1nPqjkwN8j6fqFmg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjLCmOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmplOxAApQrlZDYyPtC4iJJ2QG4Wzqrd+UE+eslyU+R9wCLw4hdgnMr+\r\noCHDDqF/dskjrEwK9S/ZKvYAjLS+l26vR1m/LXXJEL1jZjTI5S7ZhJJplHzR\r\nmM/Ff/llSMDGpAkHq+6499pJMUHMgc9/ITORzIhe7pHElQ9y7KxdJgp4G+Qb\r\n7HTQA8zx83XjM5mctJYGp2c9oxiPRIqftqQFf2l8GAo399vd0cckb8XKRZvR\r\nXhvNPACRMnSH+KQBa/yTeRmMifEQ2Iawv8LKdYNEyEWjeSSn4orhj5JSrnuN\r\nzp1LePk1DW0Itag7hzbE501XZfGIm/9TZETi73SGsanacvw4FtyvKHIm2n3F\r\n7g1jseq9k20wMuYwyL0q09TLV3peYacgRGSd2pWW8txF9DpBNKp2lUdm/zdK\r\nKWgufGQSDWVM9AYuekfWwqa+s0YrzH4h452iodQdCYE/YraHBbaFFfYjCASj\r\nQFQgcq4nuBuA63Gsk9NV0zHeeNGFkmmbeKm9DdiaLGRr9+hu6HcZeIvI/QBW\r\nBjgbIA8cYE0E8E1+NnAcMaf8Q7ol0LQsXKvzmaRLr9UTbjEbXDVNe87T7q93\r\nelo38qLOAeAsYjDQMKVa2N3T3s4pPnaOg4jdftf6fR5O4HNKYP6fNf998EDW\r\npq4iMzdIJ8L2MmzAByYHHut14oAOMFP+ptU=\r\n=ua5g\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"e0a8dfcab6df46c9fcc9969a6dba1f4fe48e028c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.d3344c16f.0_1663838606742_0.7594931262952074","host":"s3://npm-registry-packages"}},"15.0.0-canary.94f20ccb8.0":{"name":"@material/density","version":"15.0.0-canary.94f20ccb8.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.94f20ccb8.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4c3f80d6f36bb13abff2d95732fc7c4de1583d3c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.94f20ccb8.0.tgz","fileCount":10,"integrity":"sha512-rDKGL+7L1/6/qGl5da2Ki+FLWGBh7e4+e+YGcJg5L5kkeUCBMCfH/2tVtYhaZYJSrLBj23CMAHpGejlB9di4Wg==","signatures":[{"sig":"MEYCIQC7eqryJxhztjhweoJJxgEkupRTNCiJqOlpyfjyhC3f2AIhALvwMknMHL971gLQHGxJcBiN9Z+Hy4irbeYS8P85FrsZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjLMm5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpG6A//f/K8VeKbrIa5+JQfef15Rk6HzGHa3PmOz+BR0HeZf29RFY+5\r\nT7iGUQQHrDQsbuzjWB9ajuaAbuoU2VBxpLBWganaAj0Ts6adgVOt0PF/FPlS\r\nUd8J8h27cjnvqUwcdDYPHd8MbVQ+dpjiht4zZph2/QKwACYPTGRwE+yG4rnC\r\nAvSDpAVlptUxXPG4rwXU9/jK5WV+A1jezG72Q+6VYf0w+55N4zOjVAjNs95/\r\nn8IzxdCXmfT6VTL+a+oEj+vPKIsEuo924BVP7442L8JoXg6XkZFxgQekZAun\r\nobKTo8rER7TaSxaqCz6sRLaEkoNCsyDY39U9SG5lRPA9U102b4oK+8uY66V/\r\nUWZtUUmDttQFbUUvX+tzmprptgRz75ca2V6u6OPC4YRVq0uAydA/4zGhbNtW\r\nt/v7y0HVBJGGbqZEojlLnscvQ5whyOVBMD+a76KoZtVEiwekpgmhjBJve2iF\r\negELUPqeHsUwd36/LNzXoAqGxcF5ftzr/XJwtwDC03xYTwPsMMiN4w5dUiGF\r\n7zlixYWL1tn4Gn4LCGGSCqhB/J+6UeSWt0DfY9zaC/u86cJ/IzHnm8OupsCx\r\nWT/9eRsc+nK1o1TMbX6t0tiYgJ/ZBlMo0Xe1xrEgJSYm1QEM1+D2H7tA4hbN\r\nA1Pne7xJtzfT+Qvf8UaM4HG4A1k5hc6s02c=\r\n=qXob\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"16225f613437ecef2ed2d760a08046953ecd51ff","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.94f20ccb8.0_1663879609076_0.9570996212078124","host":"s3://npm-registry-packages"}},"15.0.0-canary.81e4cb7b2.0":{"name":"@material/density","version":"15.0.0-canary.81e4cb7b2.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.81e4cb7b2.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"376792c40976cb04a0ede3c866124cb1be67669f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.81e4cb7b2.0.tgz","fileCount":10,"integrity":"sha512-xnlDD9CDuRygw++XwiER4+swXaQIozB1NsxfW46mheR6yWvgLCwb/W+CrkeBX4lsxNZA6NIia1Pw7TqX2FW80w==","signatures":[{"sig":"MEYCIQCpD8RbkV3T/c6zgS1HjolVQzK13sU2+/uSETlBLFgXAwIhAJYZXyB12gCBSgRcYnz0aDPwjCT3UB9hSU0ceXDO2LYF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjLcuYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrrmw//Rx0YzlZP6toCtoOmvSglfL4Hlau3gTgUlGgI2n81+FjvlQ3L\r\nyQiIySxnsZ+MWxknzjCgVsB/4AyHuzwM3XHjOMRjkj+QzntWJrlpHX8bx8Za\r\nRdQ6EfB9eaLBGhpr6V95VXyGLJeqlnx3T462JXcH+geGe++QE5jAfYVc9PMi\r\nfNftjfljmj8tSzcHg078OeauYOIxZwwj/nf+85yVtNIxNIxP1Ip372r9lC74\r\nfT0jAm+Fx5GqBZVuicWl3OissZj3h7DlAsLJOiVHm+9lsx3LWQHcoe2wyx9/\r\ne1ZwtZ1t93XIhlQr3OjmeRvKdo5MJIw3y9e6AMY3tz+kYEOEKvcUiVpkRo9u\r\n82+AR0pmPnHThipC3m1u1ZSTn6BS/AQApx8PsOGimP2d/TjhxtGzgvaVDELf\r\nxkcvNqjHsVQsakFsq7j9kBnzld9knXuuy7uFG0p3J1e1LQHd3XoFcnpbgFgE\r\n4xq9+Dju20qFZ6+frIzWOe3wTKfkMAhvSpvScRPL+qEkNkCJa1UP39skkjxQ\r\neJL1fnRhBQoYRXEjEBKaJEM63eE/kjFSDkWrM22THWZQsqN++kMUgXMc32e+\r\nNt5hZ9wmjfSCw3Kptv3w2FExf8TTxPfw6UqtHiA6U/qQ+kZg0juwbEVcTuAr\r\nIBG4Ghkm6KS/43bI9VgNwqfCoe1IBxQ9bcs=\r\n=KWzY\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"63fefc99b30106d8aae83dccf8e6e8073043a3fc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.81e4cb7b2.0_1663945624703_0.688370797979456","host":"s3://npm-registry-packages"}},"15.0.0-canary.aa85f9413.0":{"name":"@material/density","version":"15.0.0-canary.aa85f9413.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.aa85f9413.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6e47f327da52095e062ccc08b18318f1273ead4c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.aa85f9413.0.tgz","fileCount":10,"integrity":"sha512-xUoC6WKIVWajyocSt1/BEI3yGwwSh+5pJ+/mVocJYb2d5FJIxxHwsxHQcqVmVATUvwxuZGIbcKHFSXuLevhoWQ==","signatures":[{"sig":"MEUCIQDxOH6lMAej5PY6A0pVPT7AQgDldFMEwUZvgI0vKHzjugIgI8mWOL0kzu3jS7kpz7McXcW6ISvnjvbkawm2kUAeqNo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjMeeTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpHFw/+JjzvbAFUJInr5yOWKqJVsed+bqxvdwwaN1rfJoDtsPOGrQep\r\nVCtYcnTeky/eIpPWJobgBE+BmJJ30GoX+WU2gHfIMCarVHFyFUKibFibTOPA\r\n/ifO5G9NbUmJcDaMq73Dlkpt6o/Hqj28ynhWDBV14RWqBPggS7vYuQ3xPw3Q\r\nYklDPiZUqJs4vD99oADa1rGaxXQipKLc8fUMuIT7AEeCwAVRE1QOQlNJWo0t\r\nvgOxGU/Q46yq4ZUPTwXVdbDGEUuDAxAjW7miq5KYK2s/XOp/8hz313eWwtbz\r\nxP6EyYfdKlGpfoHpxNdx1HHE2Y1zjakcP8Gf3V8fi4vRPtFIS+BucKQ9vF+g\r\nJkXSchxYXgzU79xcgk9+mdHb2ZS3uycyn3+cibod1QDTMKzcVpNsmU8GGR4C\r\ni1Z0j28vMEQqEBtibqBCzRbc+jpezIVj1F5+cDJh4q508p/EcHPVMoh357oO\r\nLoQ+WyPxVpIshQu9C6qd9c8H5aFWC0CNHqNlYaYyk2SIzd/Hd9mZNmQyWOk9\r\n1SUHz2ic06WqzwAGRgwnfixQxHguEJJekt3pnScZtDVF5Bzirp0Wy6c1rRay\r\nk6he18v0Kzvjd62YWoq3QnPTpxsemfr3jIVHXYvxNwHpjWsg6XHkrLL7Gzq5\r\n0lfreQEsGLA4xKHSVGKSnf8WceSNBu/+eh0=\r\n=jhKv\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"73f7402d0fd839f22c2c3bca08292a66389f5829","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.aa85f9413.0_1664214931504_0.019201650956110816","host":"s3://npm-registry-packages"}},"15.0.0-canary.7134a7752.0":{"name":"@material/density","version":"15.0.0-canary.7134a7752.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.7134a7752.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f8773dd1725c567fe5d42febe8494af8015356b4","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.7134a7752.0.tgz","fileCount":10,"integrity":"sha512-nkLwNkxuHVZ2u7BiWG50Ec6kDtW7T2WApB3Oc53n6YXKCDcZNelsJcfiretXoYYtCivBzPKNH48I6Jmo2o2W2g==","signatures":[{"sig":"MEUCIGLog7XXio4U4y3DQVDjni54JDqA9EYMSKDWY8VLRmg3AiEAtzHKUtZCW/Y8VZjetjC2AasC3E6iRdwPgsH7fFwHvy8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjMiAcACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqAiw//bPd8JBtWWABwvNL3hVYkpTnZ/Uw0HAqMuObXBI5eKbTL09O3\r\n6d2N5MkXbhgRaHYfSbeuduzmdkHJNnbLk5wzoQrcaYciXXi5+DE84NUzB+5m\r\nOIJoWKrObsXT+eQqoSMEKZnJ5ud5DkxPwkEcHtpiLsTScQvET5TAgIpGNn5i\r\neYldiCZNeVdqKImP5aRA/SfIS7tyWYigzn7z2Uew2+4sos5FGPK8zQ80XKmi\r\nY8JLae02+kNOX/D12mjjdSO71Kh306OjaLnZVXiHfSBKvzOJOgCPiEng9jGp\r\nSzvocJKTqCNhlHM6z4/rV7XwkDZON+MPehk9etan1vD2ZyyLv5iIDTNP5cK9\r\nubkyySnycz+VllznMMHS6dWmEgjapbtiY1S5Ds4uY8Jc8MF61eWV12Myou08\r\nIa/4jI2xDtBhoF6fa4Gl1uoveQ6ORhuv52iq8F+/Hrci2///jBgdUYIY3fbm\r\nQqoA121fzfputY3jgla9BigTpbaAeGenq3RpjREqySOcVmEPMBgVVOYLs0gj\r\nrOYZ2NpL0+pu8LUX7k1ELpI0zutDmbiQ5ApFoWvGNQdSKwPlhmXSiHqIDPg+\r\nXsHqKeTwbbSUi7rjOIeQ9gxnovVBtET7jrDdS4XvQs8jMIsXR1HMlrADBKEU\r\nvlAT19ac4jzeZ0B5Vjj9rank9dcZenU2QDM=\r\n=tc3m\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"31aaa09805eea1ad3a30e7b91a8bf8ee8911e80e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.7134a7752.0_1664229404330_0.36584245761584366","host":"s3://npm-registry-packages"}},"15.0.0-canary.70b8ac16e.0":{"name":"@material/density","version":"15.0.0-canary.70b8ac16e.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.70b8ac16e.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c58011c56cfd2d7aaf50ed605bc83412fefb6532","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.70b8ac16e.0.tgz","fileCount":10,"integrity":"sha512-FRL8sJUCJEn3CzxYEMLztP0qxpJ38A8qCKL0ERZ+fvLDGL6YiUGtWA8MghoEOBWjribVwr2cyIr+40a9r4EdlQ==","signatures":[{"sig":"MEYCIQCeBHwiUsdtikTPCQ/5Z/H8hCqCg/0cumLMVupNWytkIgIhAMkwknHn4o0JEzItEJJ4Ds5CNTXJkz/IbFjv24/LVKj/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjM3yuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmraXg/+MHWcsKeLy+bRB0HEffDCPNHpyGX9SQ2vQE6rvzWq0BYu1Veu\r\nBgNrme6T0vcSLCCaigCG5nP63rxpi1MJMbRtQLfkwvDU6Ocq58jdJ1pZPcED\r\nfoxmYRJpdNUtssHKxLIc9oAubKWMkx1tI+Rpe9CP+cd8DOLVsHo2IEYAgc2p\r\nIUBPn0ZYbLq3McyGtAvIf39uSFSETrC9Q5hXBolX+J+/wMuP2rWKceVkyVvC\r\nb22+auhwHFMKk54f8XZT7uWKW+Ah/URdaeEfYO8Mudot4DPiMPunFT7KfYAI\r\npV8KS8aDdTHM3UoXM9EkhW1JfLsmEV+Gjb2z9UDPc2i/EqFBofiRb2id7IGx\r\ngSHT9SEirPmwL1B/SFrbTSw1fSLw+UhmsVw79Bh3GllKbx7RUYPp0ZMNgNMJ\r\n4jgAK0r6yxpG42Akj31XvXmifV6xBrplyGAm3iXXw1JhkSQBKM/NkGWAlnC2\r\nmegT8vufe4dai/sYNarsaxSuksHz3cxxUj9/Fl42XdGSC4+QqmjigpaBFlgB\r\nzpcvkjSl0u0jcA7IFqGGrKqd3dSf4lepATEsTLvrOMVVjBR/nNSwcKaKwlKn\r\neKvNgqIgkq1srxziYoLnmU/3vi1hJAwReQnv9Rgg1nbijTsQcy42WaMxRkDc\r\nI159p63ZK0J1l1w9p6F0HICbhxQ91ogPrxo=\r\n=C62S\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"9f9fb4c3a4123798d2b993ab287cc4bb7e8d7014","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.70b8ac16e.0_1664318638397_0.21753731492000128","host":"s3://npm-registry-packages"}},"15.0.0-canary.c20d74405.0":{"name":"@material/density","version":"15.0.0-canary.c20d74405.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.c20d74405.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4cf1018f75cf232fc225098d9ae387d97a11903d","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.c20d74405.0.tgz","fileCount":10,"integrity":"sha512-ZKOs42YXLiywifk5kvDbMJTzXKMb6YR7tm5yoTYq4gyxuX+TbgcAK+TEFkfSJTKe6S1onvrZyW7XBTdGvIKDSQ==","signatures":[{"sig":"MEYCIQD5ZclZHjpk6FNnldOnWPqrGTYJU+lUEbYDkOqmLp58tAIhALTP8SVYnse1dcmnNbfDu8c67nDtUH5KYh29v4KKtqeJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjM4eLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr2HQ//TgvsQcbgPTR9zarqPXsbICA4yFPM+wqshKBg8R6CEogs7hdF\r\npTg+OooXN/v41nUqA+djOZqbKPxZbHmFtr9+5oc1kORefZspzTrd6ybWNJE+\r\nInUBFfDNQ63nkhR3Eobp96+YjpwSwWYPZowJY00Lx209EnJ7ephsxj0z2AWy\r\naWSuhVy58YbmNd77zZxlbPef5XhWyfldHUZhWN2r/esNK0CpKdZPS81IaQll\r\n2ZrloyidMV30m/ulYmSU3QR8tI5GRpMbHm7DhVhgCvZJ5vYkFmh7Sc6ntGGX\r\n6qz8DWRwsO/IW9mXUT9ifZmV06mMu5wBOh1Meyhakki51YAuUVdYgzRNHeHE\r\nSmviSb3PuBrfLIKR2ZaSDHvDtmHVgb5oGvJxLAYzdTtyKhLgYto3l/ekbraq\r\nU0XC8Bgln2XHzGNPxvl9L5bWD0DMOyuYQwmG+mn1hPzsAYlMrc9OOHIW/8lX\r\niq0O9pd2lppEVvJC16AuGiV2FY1VhDQDewxhYHeAAQ+oIT7SFftGgydkILBI\r\nsHQVRsWc8gGdy9sN21da8ORknqrESHErEFmsJWE68AZ6P4oT9T7TiadyKiV/\r\nmUQ2GQcFbCKB0jVZneYA6kupkiR9b8DRWkBh85uWn6DPiKtRnhIZ+pIDOifl\r\nLNQs7KSyVVpO1x9QC80ex7EwNA0Eudu2I9g=\r\n=1xAH\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"7e1c6f9d7e3c90438265d23d710997462d087d78","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.c20d74405.0_1664321419113_0.22404154446548086","host":"s3://npm-registry-packages"}},"15.0.0-canary.f033fc8d1.0":{"name":"@material/density","version":"15.0.0-canary.f033fc8d1.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.f033fc8d1.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"df2cf437f87d8b969042dcc82a750e5906ecb266","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.f033fc8d1.0.tgz","fileCount":10,"integrity":"sha512-IMQoZZPso52IAsE8Wq+/db2Eh5Ni7089KBSkP6dcarrC3vxIv5MRA99tiR945GIPejQFJHrQ0zONQP++ogjcNw==","signatures":[{"sig":"MEUCIFdc1OjQGZlLvG8+OF3FH5Y68OlKWnN79QoLb1MEe7DuAiEAx1hJOiPiavuHBrKkcn8J+69s3hw7cllQCr3ebhXwk/k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjM42qACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqEhg//SoyxIUzX6NqxCzRC8AESuVdze7c7EHwmHlNKzY7OwYbqSmaS\r\ntm7Seln2xLuQnx+ljpVasR7Sd2HYKo7TWzxQsV2LE6zCMJlBX5MPXoBNfrbr\r\nygOAlfWMsbYzUoD9SMhu/s8TRqmECiFEvSytmpAFTiqjcPmHnGsUiutyjOlv\r\nh8upthSc+UPEPk+gbXdpywWG6F1QIkWCCaC64tGso+BHMkLKD9LGyfGdAAFc\r\ntFeRsI5Rroys8WkCT6ryLVvdooP4b+8GpUooPy5bBnkJCb92aFksXbrUSbzq\r\nlL0NpJrxOKc7vH2VCePGM4J0gkiKnuX5WnoQGBpxzk3XWNPPRKjT4CLCCY4O\r\nl7A+Uo0j8NSCRyidzeeKyeyrefkUQoecXELWHdpp2PSbXBHW8na9HVkSc5J/\r\nhzEmEUIrSKSsPrX91OvM+EJUtgp1pOvxpOYplcCtTU/pAu25LTud91yLdZZ7\r\nUyJwOl+8zlnGRBtw1hwqLBtuZjvkwz9BBtzMu4HV7jisUNpPu0eph6b+X4Vw\r\nivLrSz8As4X/v3qeqr55xlaYBtz5+dv8/FFI9klAVdcvo3GGCT99nBqls5pZ\r\n4qusZ7ypE/L8YIL2Pm6Ez0fLhY5msWb6JK/UpXvyI4bcvXXnSoJjkKdLvODe\r\nnXr+gPLDsOxy453f7wFUJcTHqeKUsirHV18=\r\n=IgC1\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"a658683d647364520f9de8a2d51f15913b5ffb78","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.f033fc8d1.0_1664322986617_0.5731930700538064","host":"s3://npm-registry-packages"}},"15.0.0-canary.8d7ae912a.0":{"name":"@material/density","version":"15.0.0-canary.8d7ae912a.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.8d7ae912a.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"831033ab2951bda84eb92fc9640c8e61b412793d","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.8d7ae912a.0.tgz","fileCount":10,"integrity":"sha512-VEZ+OtzzlM7IcxWbn3kcVi09HBFv+ZudeHfprmBnYr2jvPTw6fyPhh7oUFfUzOfRHLs9V9TE3tcf53hdQfbgTg==","signatures":[{"sig":"MEUCIB4U64pjbeuR9BKRsH/dyAAQkT2Z6VCCKaty7Wnh2d2PAiEAogU7o05zqYIbUBATfu39WzGWNdICcGy0FW2jW6SnwOc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjM/3fACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq2qg/9FAcsrHPryI9YZqvAAzKTAJJIjqdDBoU1t9yTNeVweN7PE6rv\r\nNBCEvN1aoF7baByKqSDb2omScHdDSAW0bFbdxaSSaJSxE6eWACd3jynEEP4h\r\nPCSZE0ImDpesAmhWNACuHpAuk7xVrhCwclPzZ+hhIdyu77O4VMrBzdK4mhe4\r\n7Xz4/8zXnx0JgUCOo5hVq21QEDTJQB00/F0VEXCFfopQphtLVpzUKxk1sl2U\r\nm7+qSXQH4kgSig8V4AezEwtKGNrtjB7W554ssY9FrK70Tw2hVFapGv4dWVcv\r\nOpcgITHFn6vLS6i4oCIGLuKPQgGRPXqV7b+7MakTJHp+3B5WaZ2NzYdGirNZ\r\nMdsOQSC0KB3V/dCCXWx3U3pnHvrRSSBWSqJ+rRMvMp32E5d9Gmk42GbvAi3Y\r\nc0AiEcDQS2sPm+afAuB2Q7LHmWAAJvDNdJaJasPf6eE1+L0DRYV4KT0GzB0C\r\nGoJ6zZyo/ixFBJ56jO4GsNzdpq622wJF+bQ+LRBd2BIfKe9OdHwjRyeiakpD\r\ndG+XHfqfgFnHFEk2T17k4CQibGmIBq4v2xD7TnlGmNPhC5BBV0bmSd7TMyST\r\nMNMu9lOPqaAAOpWJiIYewgr1cfsaF33r17Hp7ri604d/2cu+nMNlw1Jh2qM/\r\nRNO+cq9oPJXSxMOGP79ku6HoAwko2ShsEyM=\r\n=RRko\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"26b2ab57ab7cb3eeceab31102ed1b6cb133f4cc7","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.8d7ae912a.0_1664351711678_0.9849436813393901","host":"s3://npm-registry-packages"}},"15.0.0-canary.db414b864.0":{"name":"@material/density","version":"15.0.0-canary.db414b864.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.db414b864.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dd05263cb6f66ccb7a9ec4c092794a0996cbd9ca","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.db414b864.0.tgz","fileCount":10,"integrity":"sha512-HJVN9DrLMrN1Ro26Y1rwl4azO6CPy6qDdy+eVQiQtH5gM5TvdX2gAutKgHsaU4FpkDoXAmWTnLtt5wMsjOzoaA==","signatures":[{"sig":"MEUCIDkao/gRDPmMtbyifq1wQf1Tk8dNX7dn6qsVfkbhY0K9AiEA1lw6TcB/+ZR8NgJKvzn2fH9fFs8AWMjPXeYxsjPMJWU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNF93ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrHsA//bhyCRINmhXyeCY7on/FINZO0yMwnEu6fAWVe6r0PTB0aGaBB\r\nhYNBX4YKYKl4KDn5n1+kcREMXgCFKq0/ErWCHMbOPEN8Vq3/B6s95AUCPHkz\r\ntQtYT/7Ayc6SlLxdr49OHvzmG/TqDaeKZYDj3PlWLGPyOHNwQurEKAboWCt0\r\n7ZydyDTuFmBdD5yLoaJR8IMRVHdrJIRQ8QJV0maG5cV8GfFazZ+X/KhS1HTo\r\ncKRe9J43VmidfOvo1P+JATNErckM5x1QpweCDdc8bUAWKY2WsDXF0qT+TowH\r\nlFhymSUF/9b10mB/Q00hrxn6f9YUgf4MLBg6D186eQnbnjqq0X+XwiiTTBcq\r\nitFCnUDPXCfrxWrKI2dt4xz9u0YLg8SW25re288ltYjJN43+E/VlE2eqTh+P\r\nf/5NeUtRnuAEoRxONvtKpCDgTBQJm+Pqs64MpQ3O1tQELo5tiUpN/Ge4V1fB\r\n10bRiPM1sXsIaqqTkkpv5k8h3xuFpyQCMI++LCqSCcn2CJciCAsoce4kp1nF\r\n1hYyduTVnjI4rSsKocPfQp6X5z8VYfe53cxELuikdLjXxfpoaW27ob+xcn0+\r\nz/iPVrKVbGcgapsSoraz9SdUj3kFk02JK0RdZ/Y0dxdpkavmRB8r1ATDGcY6\r\nV7JTFvbeyNY55cuBMkZ8JwNxvKWE8Q7dEgY=\r\n=laa2\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"7601f089a2e7599728805effc4e9bdee40008aa0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.db414b864.0_1664376694980_0.2815761697538066","host":"s3://npm-registry-packages"}},"15.0.0-canary.c0462d134.0":{"name":"@material/density","version":"15.0.0-canary.c0462d134.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.c0462d134.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c1332b697c90783d2b0cc339d1133a021eec9b69","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.c0462d134.0.tgz","fileCount":10,"integrity":"sha512-ZSfUuv/tbAdiRfda1H1RrvxPdi41ElLrq1V18qbv5Qpiap5IP4/68GoodAImFF4SI+Pgc8E5ThOZt+qvESmqEQ==","signatures":[{"sig":"MEUCIQDZ67j1o2vw96CSNiengwIzApsUqDEgoF3KjFz6gCdbagIgEymZM8UKdSl9y08b7XAyU9gSkiG6M59CxM95mvhpAqo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNImLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqq+A//dfu5uGi1CWD7agGnOnVxbdviOujea6vi1ahddUCOm6b+gQnr\r\nMbXWl4bkd0jCLnUdosE45IT7gUFmf8J9DJu3pIUo82L01zbvxQ5Ju1LjWnlI\r\nLAonCZCZHnF0nAPP6o/7gPGvsEavKxWEHdCTZ6rf0vT0zaeoVNmAabmfFJNV\r\npSZhzeMWKdmYgm048u+bvaRePpp98gXYiz4BsaCkXa2JN0XRshQNDX2o+wKg\r\nDR0aFREcRQvDlJXNvLOkxPG48rxzstGfLlomLB2j6yu1cCaWU5U91yStmJR9\r\nnE22K2avKwTdfbaPTeJr1lk3EtlG+IFTFQ5hQGg6SWqGcTlnrMMVRBXeHzuH\r\nJU+xF13BtjJMYkpqFrMsw7pqKwIP3jau3sMiSfenzNPmfH70GU1U3y4XUuR0\r\nqYR7HnYk7lE8BCXXaQmut6uxPdahbMXcFPSBU6XI3f19/yo7KAtpK4s7Hsfq\r\n+hZ8ZUsNI+DxduWH05+tBpiLfsafLb1hJX0Bn3/xAv3YcjQjlNJZ/ImreqEs\r\nq95xfxtIdwsd+kDiidU8+UuU3TnzXBXWoSqPL6iOhVKxL1aOOPLoplfXvXhL\r\n60kRxXyMGk2Cfe+FVqtdYBbbis4k9tOS5jS1wvm1TtxDqQTB59hK30AFYPiP\r\ngfataz6uZ0EcIQROpv5JMYllrZhPui2TtDs=\r\n=xwG1\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"ac1e8bf31f6e69539e68b22f40f639cb7eaedca8","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.c0462d134.0_1664387466918_0.8102755196238252","host":"s3://npm-registry-packages"}},"15.0.0-canary.28cc6791f.0":{"name":"@material/density","version":"15.0.0-canary.28cc6791f.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.28cc6791f.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b0eca5599786cec04c400b7f7fa46fc2ea1f369a","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.28cc6791f.0.tgz","fileCount":10,"integrity":"sha512-w8NBWyw3FLmEI5bh380YrAUq2N4neb5/kNR1l+umsBvClvHxIOx8u6Y5Do0BbXa1LFg4LEG2s+27B2lJ2jcCZA==","signatures":[{"sig":"MEQCIGPCLhZlAe3oNw8EfavkTb0rdXtPIr8tlRgJVfRH6Cb1AiBp216MJ3ocmeylIkAGCAtZQwRGKNvv0ykYGHk7v3fN/Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNIz8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo2uA/7BYGNQKaiG42XRJL23UfVd5P0Z3smOYHRJcpYKC766ydmN72K\r\nR7LTUINvqWW65wYnE73YkIrqmuwNSc9c1xGYdueFTewmF6wqD8bbHcryjpj2\r\nDw9Y42gqHNgKLwGF0oe2qwpA75DxjBvy4pxv4fYbXnuWQJfZ1O43OgH870wo\r\n7WNp1ijnG34lKJA56Hzpqk6GITEXUGO+XHklfJs3PMZYZ+znvNpu3wcMFIm1\r\nHUNpX5m/yzjnlHJBvXadP4Smf1IlQgg9FcGzhsv11xQ/rEBy/4s3abirpT+A\r\nABwawbZ54+4+R+/emn9X+dtkFAESVAsCl9ExgzNwLJ97gixGN8eGH3V4gABf\r\n4iAcWnUho5ZuThjiTG1xBoOxfVf9s+c+lM/ew8nhR/YaA0hJYxrBX5gFN5Sp\r\nh5+qDoudgm/Qz7hAUlLaVpp/5OIgYsvLbr+h8ea6bR78Bia962oKNU6MN2BW\r\nR4kFflHW8b0HF8Zo6NO4cQucWy+awx6wnywziee0Mv8Kmn9+HYBdUJSblNZt\r\n30MwpFKql/bR1i5SIXqv8ePXTclc8Wk7J9csCQhsS9XXOAqyXcJyJ62EN3OQ\r\nTe3QeBN36+fkWcJX1xY928w3rCi6jfR/JcmJaur+zZuL1wlve2h1MGuWtErw\r\nxrbsAv9Hf5GCGAl0KPsd6ZIO6ADzTCMZLbc=\r\n=iO7P\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"d2dfa219437727922f4cce877090f9afdd87edc3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.28cc6791f.0_1664388348572_0.9683040666063054","host":"s3://npm-registry-packages"}},"15.0.0-canary.a515a2d18.0":{"name":"@material/density","version":"15.0.0-canary.a515a2d18.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.a515a2d18.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"627ab8d4425b5c61f11c3d190255918e79bb0f23","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.a515a2d18.0.tgz","fileCount":10,"integrity":"sha512-YjGY8oo362OeszkLGpntZ1c2qpZ/AR8t9eyyrIpZJlO6bmL6Q+izN25P/EhjDOpH9FmjYlXx+2qKdS15ETADEA==","signatures":[{"sig":"MEUCIHzPuXgYKzfjrcaJGnac7QoUFEt/QISNtoRBu+crmI+nAiEAz07PWAQnKK5i65ldfpSkY4kKZSLprFd4MphnuA2lHnU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNJh0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmon2RAAgr695hoXr2wmUsDZ5S4fJRqh4C9eMnyAPWBuPFe99bFvl3Bj\r\nPsMAgUZq/xrG9E/fhj8KxJYK7+YfAvjUeqYOPUvJbWpXdkVG5Z4RGdDGcoOh\r\npTTfNwZpqlYjAWTY3EvBhH8hA0xTsw2y2uminpGIrA3WIvvOuiRxaxUs3Xnr\r\nlEnajBPdYIzGYzknZ+++fgKK+f4WAGLDxQlC9urkjyxktFYD7DLS9NZLndqA\r\nCqrYCB+q3ZLkKMhN5oCV2XFYDatl0twG03WGvWGv4q+rB8DZEauq7Sr3L27k\r\nnD0t7u7L2RzvJTUBHLOkSJN56UJrEx5BsmGK4kPlvQaS1haf1IxYg9GyHN6W\r\nKzUC4dST69enZxo8HwFKhxjJ9+U0dfyQ8pQKC+0+SGVyOyekxG1i+81BVP30\r\n3c1yWCRBfLQ1hbaKxsRvPSMhFy5BaJC6b8yPuJIgS5oIa5oyRmK9Lsj5oi99\r\nfPPKVGBJ5rFaiRAjd5jzmxSFBd/eWLnwwr5YDslr4o1WJt2NtzOE8GEr0z6+\r\nGtCal5oyc7o6MNSOn1euNXD6xJp3Ob4TJwG99qFbEGhjHNX6W13zQM8nvmBZ\r\nOb4Od1dBr/+Jgj35VJ80h24vl71a4bTK/E6ZtxfTsyJXghSB1KSBWVO1YDRH\r\npsk8sYWMiroNuEmYV5dJatS5tZ+HyaWDTOE=\r\n=C4dj\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"b634251c1f816bc66bc81c76758fd339ec40a76b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.a515a2d18.0_1664391284365_0.9222963545082139","host":"s3://npm-registry-packages"}},"15.0.0-canary.ce9523167.0":{"name":"@material/density","version":"15.0.0-canary.ce9523167.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.ce9523167.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d3d7bfb6d66b47b05b434fa82e522220dc2f9549","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.ce9523167.0.tgz","fileCount":10,"integrity":"sha512-dOOTrYjIISt8HJ/usrZZeV9AA9Tfxt5r+8TANSdic9NF05b1e28s0hxXE9s0P4GqmUBaem3kKkZTmnXclkAzGg==","signatures":[{"sig":"MEUCIHr6O07q4sR3seygXmlAw8tAJQY/5saREPoFvA6QefAOAiEAt45GJngFFdIFxng5v+RoVBWbVwc2YgXx/fc2m0w0NUI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNgBXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoCdg//cxG4AN8SjnEw2cgQvlZ3sFN8GV6x6bdGe1BFS7psFJpKUnwH\r\noRNS2yor83bV4KcDrjwC+7Mi2BxVhXnHvxxSuoUvGblkAJ2CeGH99j7ZJd/x\r\n/+Mm96hnSDFqV0eZ873a+NxNTymkDJOmps1Cy7Qae1423kWeOb/4EFURpLXy\r\nB5kI20tu43u4Kys2ZunDQ9SD3YTiNHk6KK/oUSH9l2mIY8NSOPM+B0Fi9zfp\r\nALE7PvZTxIywSuhEeMpudeaDOjmk1/ges11l0ikInntSmtLZIUBy75FSD7rb\r\nMugera71sjmgJrjiWDEDAVo+MFfWla3Or4FQWdfKF3oyXQzW/cC7t/SOme5h\r\nMBjqNJba2ccbyCGrham/4JDDNfakQnnpYk2+Da2GLWU97UMy0J1rDE3mgWzr\r\nGvBQ2UOpaZ3y94ewqk60NPNjT/510dC6+VcCiRAbqmDSSFwHoK121RecIDQd\r\nErCOc/rB5bTf7MxH4UON11bRv3PpO6H/SAKZXBT7m5xBjw0iLkM1yqhHCIAr\r\nidbef6O6G392TGm8WXx+CKfICiJL2iHexL0NCbQxQi/+eoteQFexRkPJF5F0\r\nJEEC5Roc/7pJR5P6Nahyd0J+2RUSe7ifLHG0xtq7OfPbxT1lJPmKAukVaaYd\r\nyvePeWrx963R9t22FcsUJsCn2v3S7B2EGIk=\r\n=kpnj\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"8aac5a80fa36dceacc7b3a6e2474218f9092a107","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.ce9523167.0_1664483415681_0.11529408011115194","host":"s3://npm-registry-packages"}},"15.0.0-canary.b2310f7dc.0":{"name":"@material/density","version":"15.0.0-canary.b2310f7dc.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.b2310f7dc.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4e8ccc64af46f25178cc602030220d237aba6574","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.b2310f7dc.0.tgz","fileCount":10,"integrity":"sha512-UH5U1VMYGaLQx8aYph7ldF5Gwk0E7dXWul0OqUYtFO8QiW+AO9npi1q54PothSO4vszOgYlrrARe1Zvis1dplw==","signatures":[{"sig":"MEUCIQCSssA3qBuaa1RO4UDoqNmzwNiCz+lWJILfZpf+PIqPRwIgKZ3+vOcWiyp3jU3XiHK52ERQFXjRmZ4dfaKyCWfKYto=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNjSHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpF5hAAiC6vOoTCNpvm4cdeqlymg2BS0aIBzF/bqdJJYCPVJrxmstCG\r\ntB5HD4+WKrhehiFDL0uJVzVR7CLXb3yoQqpmu4qgYkZqD8+mv/pm49yIIqCe\r\nFqjHdHvcVXCwxzclDEonSolfIdYV6vxj6uzc35osIIDi3YkOyeqqaFGrd2bQ\r\n5cxL2494yLIHkpyWBL3RlCy+nGFOZ4Xu050af4kN3KAi5mSwlXXjnzGB/LBG\r\n4dwuKBu1gZIBXqFatSiRmsTPSp4ze5EC7/OlW9jC9O7Tm/gmjwpeQv9+R/UO\r\nsueCUxykmREjJGADcaP6FnhhlPtCcIJ6j8BKSurJyBe4aUptEwPcLFOdO+2s\r\np2ohieRSHLESEUlO2MlgKavRj8In0CWPNsja0qllAH5H+mfWswZbP56BmEFs\r\noLX2ETTEy7t4CInpSVwgEF1YhZtxPDJzCrtZ4qyiWiLjMn2dWg4q2bbvR4Bl\r\n9c54/IdMQLKQ3FSHT8KVNooGe1jXksjsNVlu3NIEjElPwxdBEsLagNmEiQ5O\r\n1sufuV5ZUFz4pLUIJAb2VW6Z/0hLw+gQ0HnbYt0F4Hr8ReFgkrcaQpGrkCYW\r\nV2cuQggi2jqjdlznpaL/AOA5akxMQ7h1fmgdPwQ89RBLi6G6uD80ZXbKbnZG\r\nzvr9NgPoYdUAmJqnrDhXfNV5R6seo0U3ioA=\r\n=wEIl\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"1b1f8d124dcef049ff4f3730b930eadfe1e2a58f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.b2310f7dc.0_1664496775337_0.587639536475228","host":"s3://npm-registry-packages"}},"15.0.0-canary.a44241e54.0":{"name":"@material/density","version":"15.0.0-canary.a44241e54.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.a44241e54.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8efb09c70fc9113336eec95261ccf1c6ee6f8ee1","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.a44241e54.0.tgz","fileCount":10,"integrity":"sha512-nZEzfR4+c3euUH3qEaaljk9mWE52eVZEi+dEt15FWODVkdCsVqCa+hu7rYE/0xsXNCMauA391S+AG35J1nx0iA==","signatures":[{"sig":"MEUCIFDkh5/XpuvgIg7gOwni635Kkp/DT/pUksdFFpkSX715AiEAqKpx2Z++AD+3wclxPFdqacDWLr+OP3MDPFy6BJhgagk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNqa7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo96g/5AKDOboxwRarxQ3gy1CAnAFqbd7knJoDJv9K9DIXrKLk2rOJ4\r\nfA7pkvfUeAFS4+4ciDsH/JbRlxVMnBEgUUuiv2YB4pEFnAZhKkoieys23YrF\r\npqTyaK/jIZ9fyvWssEVWv8cwDINXufzt8j6Ku/PwU+LGmYY03QN7bkIPVdI5\r\nZjdSNBKraiufvERm7Y3hJEf5xCGRrrQjeV18FI8Ui+eDywDWFz7WsExXb+2u\r\nzCGQgGR43+EQpUb4DTP4UY1C5QxMQmRyNFOeql/rokfY5jPqeW15PtcHKPLf\r\n5iDCvcp2N3fwGkAuax6m6v2r1sMDHV/0dBkJ0shOEHh0rqNtog1UrpvEktEn\r\nh5ZEm88z25xEA8CZdLzbaAlwhzviAGM4UeR1XE+uzeiwNnuerNd/2oh4qE/v\r\ns3k81g+1HqQYiBW98HoXnu3YZamzLONbthlLx69vYdIuyQK0ByPmEliM0lg9\r\n/EAK8x6Sfp0CbY7XYKCqI8wFFnjSRwDboQ/rwgB1hBYoIb/dCcVD13M366bY\r\nSZ3sBtFCqv8mh6vyvRopkw94qIsKXSIFGwuYlCaFi2W/cEaXhMwKaDLo5XuJ\r\nzazoOFjnlrE7zYYJ5WaWYKR9beoZVryeqhGJaf+HwhVzIJgqACvDjnpuHsW+\r\nzG0NApGiPCiGd0OZ8eLM0qiU2BByUJZifOM=\r\n=nRHP\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"2a5fa6460bb58b3b2866631eacb27411a12f8d21","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.a44241e54.0_1664526011496_0.6481461506676602","host":"s3://npm-registry-packages"}},"15.0.0-canary.0ce81e115.0":{"name":"@material/density","version":"15.0.0-canary.0ce81e115.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.0ce81e115.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"65fb5e663cf3199815f2269fcacba415a35ce8a3","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.0ce81e115.0.tgz","fileCount":10,"integrity":"sha512-Ue2i7GvxWWNJ7x97tOzBj26IY1q1D2JFEIcs5n1YKNibvfOCJac12qjF3wA99LuTe1ekuC1kDENNKAOQwaqX/A==","signatures":[{"sig":"MEYCIQDgDIIFx0ftBcUNL8RGda+mIkwZ2cWzw5tJI3G+ndsToQIhAIs/qkGifoDqNvwTz7YT2iyzmCR023nEe1YacbtYABnG","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNzKrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpymA/9FH2VXvgb1ieia//S38WW9oOsPfhlEvInMxK4gDOwkCA/4Y1/\r\nv5Rt7FobirMh3RaluZfRSQz+ORWtroUfsXnC6Btl3Sbxmkqwal+ke60E3zz9\r\nQew5YgKgyByu3G7oHSAt/2ixUU1BfYEqvVtLUd+fnQMzmT5iaAfmnUNcd12F\r\n1x7P9z8oDZwQyRZnrymrCKn10Ka3ZTts8dktiW2+4LQ8TC2ZXGwxG+9I57MM\r\nrIq8Kl9Vf/JVf5r2g8NH9k4VwR3466n4s+ZhZ21BTLixEM5AvmDfSNb31Cmp\r\nEQwEbDHqiYuBpJlPtsvoNAIMf8gn9tsBUsfAOfDi+trHk2gjYIAeYaJ1Eq9J\r\nj1mKkmGDB2XsjeFaAxJlcYW2EQC4b6AODBRJcs+lxwb3VTfEGZRN+pKjTtu/\r\n/vnIn0ncLK9cfNmkCwssLsmiYS+Yh42sN8+3xcuLwsjF+/MvoyYWMrwYbfD3\r\nT4/r1vHWGMpBLcnIyWJqv5Gk5sOC6NQ93wdsNlwD8nyhjFXyq6tLUxnke2yQ\r\nXWyp5fgpSuWMwRmJ4ia9TuQK1kpiAIjLeQFEvhwY0kDpvfZ4ILuC4P7T9qSZ\r\nGJgFz4ZIQ/7QWpikttqSEEdraZceoUdH4psGuet7W0T32e4S0KEahcS0YYNo\r\nYn22C41tx/cvqrwBgPRdF29wIQzM5YGHhK8=\r\n=/QR2\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"d690b44f4e157e829199ea749861c3b827d46dff","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.0ce81e115.0_1664561835693_0.14423171872668616","host":"s3://npm-registry-packages"}},"15.0.0-canary.3cc30f6ad.0":{"name":"@material/density","version":"15.0.0-canary.3cc30f6ad.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.3cc30f6ad.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bab227ba937ea06127728e4c2bfcb7d2dc61695d","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.3cc30f6ad.0.tgz","fileCount":10,"integrity":"sha512-AQbwRPy6LvvDoWFJh4U0m0+2Ak6Im8t+ZRRgT7g6RkrFBCTKemhdwoWjoj1jjbHE3d9Ay81J2PAor8S+X1C47w==","signatures":[{"sig":"MEUCIBvJ0VFlnqnb3rRbboC0Z2f9e4QGkLVGYFOZ09viJFfZAiEAhswP0jX2xt1rCkH3SzKx23bJtBRbSIRv3BnBawTq5OA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjPGrUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmouXw/6A7HUQ/Ydt0zea+0bMjfeM3Bs1shp3Y+2Gzr4/a0i1P/GZkud\r\nwmwbQkpiKcC6AojIxJVkRdSiGr6P/mtURDEAdsGXR4TmjVJSlQs4AtQA9gFm\r\nH32e+mWzBMH6KY9DCuta/keyqIxQ12OXnHE5cKmT+Fw1I1ZN3T5t98bcwvrK\r\nfzHbmOnQD1L33a7CFd48qyw/viCA+m0K8dOmKxyIu8+TbpOWeqwB6njLR8nk\r\nWLmACuXF/LRcyRXw4eOduHzgeCj9DIUdNgPST3R9ioduukAV/4E6aYvaRnLV\r\nYhLeLyXdKYb89mITbhBZgH8IDfiRbWmDSFST8DVsMsCC9LEe3nYUxeWKC8t+\r\nlQMyfndRNzlqI7j36mCITMHRnx6Pp2iJ1UOPZtpKHaScHV9nqGUGqSmrCdwQ\r\nTuuqnYqABf+iodMyaLiV5ksfJSFdmyXWeMitMsByPgVPxxzhkfv9I2is2gFH\r\nSR1IbcO3E/WKLb2I1lKf5CoowW+3potiCRMa27iPQpPAldodqF92YbX9Awxh\r\nBwciui6TyXk78hIlWwASpfU4KbUi+TpYxRg5rWyb7Izlthgfe0jRaBDqYNxo\r\nb3LpXg7XBiUTTGrLU++kRVcL9y0TnDnUPqfirjZgocQPKh8o/ePUAncyic48\r\nb3nIK8OvBeH3RLLVpyzRajr2bzCW8TKeN+s=\r\n=pt5d\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"78d02265193749df2eae507da620e7571c09da12","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.3cc30f6ad.0_1664903891936_0.8059243583673059","host":"s3://npm-registry-packages"}},"15.0.0-canary.d9cf98e60.0":{"name":"@material/density","version":"15.0.0-canary.d9cf98e60.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.d9cf98e60.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3070ca474579f291d20c8fcf626cf0f750deafeb","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.d9cf98e60.0.tgz","fileCount":10,"integrity":"sha512-U9pIiUfwk4tcKYWJzbDBuS9UnkkJsFDmRKUf/iVb2HL5sjnVRBw0Iu6JgIBAex7ks+WfTZ/g8wti2JKoiWSSAg==","signatures":[{"sig":"MEYCIQDlvu8Ughd2VuUl2duhJ1xz3Rl+QkwzCgXEDmn3bwG0ugIhAJ8Wu8yn/Qx5dKHw5gJIr977ZU1KvGx2RQsz2RlM67pb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjPINYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoIPA//cICU9DO0zEFHn/0HoCcF3bzR54g4zFtZI/sdhd513xKO1Jyo\r\nkprCa7Ksoo76RaiNKGo5eJN5PZtsWeKc7LyVgp020LN5L9RhkMcZgycRP3sS\r\ny9axMqS53eD3xBK6q37u7+ddhv47L5BN4mUWQ/bUZM0oz2aOhYLUuyR7g46j\r\nhHR3Th4YHvspR31aK7TEurfjoKG8j4CMOTd7mWwJN8IZ+/nQaNLi5Zl9AY/1\r\nLndWXp0bVPSnolxkhmK5jQuegCIYkMS2ZWd9QbJ7e3cqvoPNdu1qmDG3qk5C\r\n+NuxA6JNlv2FgR0UvXlKJMiM2YnigXnke7EB2g8tJic0aNtlkl1+NIYINNIK\r\nPu9mHe4fOlu3ycQUnf7/bGZ6tRNONTRTfL8wRNqdnkZZYXhVWv4mEb7lm7sU\r\n4vafyM4QSYVMF8MNtQZgvVafNJzifS39XUJbUeZzAlxX/KBtNr1yJCahjnOz\r\nlUnL45+faRAE5OYNfLrDDjO7XvSbqXmVaNpZC6EaW5Vo5XFi/1gytLBrE7bF\r\nzQLD4x9rhICfL214h/GRyhqXXLo8h+CxFL9Ttxi7xhCPI6FDfJWkps0Mt3J+\r\ngloPRyIj5beY2YsfxGwF3rPgi6KzAj0N241//i+aprX/ZSh5bl3hg+M8W4jf\r\nn0t9L1VoO0F103q22Ash6NxXxkEFC2W39Bg=\r\n=3qHh\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"554e3182e6804b0bbc262ea0e730d556747b7382","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.d9cf98e60.0_1664910168032_0.9891850477184922","host":"s3://npm-registry-packages"}},"15.0.0-canary.d71935c8b.0":{"name":"@material/density","version":"15.0.0-canary.d71935c8b.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.d71935c8b.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9d87b4225ef4ae2a48f24d9b725bb94c1b318418","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.d71935c8b.0.tgz","fileCount":10,"integrity":"sha512-4Q+hQw3jq/SfCEjio1yYZkkhwPZ4leeH9JRw9jkyJAhww0xG3lj28oq4S59Gu9w1OIWVVasAHeDq45wYUL3/IQ==","signatures":[{"sig":"MEYCIQDv/6uMK7NKznvp2/+fhA1lPUE18X7MRsT9bmvHzKCdfwIhAP+tPiKKUMeo2nv6JGves+fSI/Euc+ttK0o1ukqiVAYv","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjPo5BACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo1zxAAimOigJKdBJfdS6TMDZimhifJfSDovOzTDrFS2po3UQt+QzI2\r\nrp8Av+Q61WsqcBlmbySa5x6GOGl2t1gVthBQOyP5kjvRYzH8ekb8zxDVbPRh\r\ny+ghzswEtXFY0mWJSfOEnxiOXcmx3m79sAx9AoFcph+NtH9e5VTOzmYIleBS\r\nBp6p205fFDQwvuLp0OZ+X3bqsD8P2fgn+lhkYuIdOZPZEelZKCrVBZqb2mbJ\r\nHvnpBRl75UaAnxvitlDJxkT7Z7QPkZ6LRuf7fzRgxbtEzz3bicFYfT0oXWbz\r\nJWZCnZsHxDEg96+iMJ95fBRmkPbRmo2vkXeDyFrkiE+nmA2Zp3o9DI5A2H+V\r\nKz+MMLgZNp/4+/iXAZhWS2cbgHKJPLKl23WzW6/6A18iIyiCFjfmTdPPcpta\r\n0/bo8FeqTpZvvzXh4CSvB333ov5pK31uLZCPqrR20Xb6ypxvoS3pPctoBR1p\r\nnj5pJy8XQbuIcnkSywW/syEo3BZxWR6ZO9LrHbczn4s6y+1KUswLmeSd+X0U\r\nk4QIc1fCemwex6e3qce5s3KNt4cJkAjWLYaE1v6NylRsR4J4lLmEjHcuTg0C\r\n+JqcD0yHj8/f2DcOFi0PQbOXRlIZEYPaBkomT5e3oV8XubKN6jB9SBLK3y96\r\nHEJ9PCP7O7p1Ouo7oH8cs5pqwwMIWukjztI=\r\n=0DKX\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"0e9f697d8ab3c0b93969f61d22a2b06760934fa3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.d71935c8b.0_1665044033492_0.22172016674123984","host":"s3://npm-registry-packages"}},"15.0.0-canary.49c56a25d.0":{"name":"@material/density","version":"15.0.0-canary.49c56a25d.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.49c56a25d.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e796734f1317639134ba0debad5bab63d53f2438","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.49c56a25d.0.tgz","fileCount":10,"integrity":"sha512-IdHCDbTy9X3ZBUkpm7iSaRoIFrPCAzuISep7SdyyL0cP88X77CbhgGrjyDYYDVa0+UC/NsBQK9KACoApZeog9g==","signatures":[{"sig":"MEUCIAZNK6B81A/kkv2n4E3VTK8fH8eIJI+fkxbIRK4+jCNFAiEA2SJKB9rkiDYJL2tVLwNmdKOji11OKKw+9niuCUb410U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjPyNQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo8vw//Udukzf+rAG6tyIPO5KNKRjc41atOeuoA3n8krzV+QkzYvPh0\r\nFOkBMolUeA+M2CbdsRnHt7LU6S2U+tDD9bdR738yYDrEqiyjA5GvDn6WYM2X\r\nsFMhupRqgVjIlqi7+P4OsPumK/WqDiOIZ92D/gPC1IWDWZWvtsnCOg7rxCGC\r\nmgc4C1+ThKBAynZNBBpcIOBoigHmE8hs15KgdGp+ROKftxgognN/aoaRDYzA\r\nTk6pZRgI2Xd/PrM5412FOHKDTGjiMJV60XhGqpJ5RKGCkq2uJqVtxTz0jI/k\r\nLPPpLeJIH/PYo7fij8VIXQGpsqmk2DR6G1PVTnUIi1IVKtgqjrEf1u6D4IsH\r\nKQQg3gLdJCNYhq1luw/k888ZK5dKOl/IIjjfgZ5F/QVOuXoKozivV0OlWfvf\r\nzkkuMmDtg0Z5ukl637yT606PGhOVJmgY/EQuWMDXUMR3O5O92uNwaH4Ny+f4\r\nhVjPS4uLWOgrA7+YwD6XxYQkymSOa7WqUm73yXeRsgWjcB/xNLfb8KbBuAvm\r\n2T/YiHguf/ybBOoVFeBTyd9Yr8mxPt5RAkgTi9oph1mT1NkM7qnTGHlwILc6\r\n5s4oq+FsuHZ3L47YeShyByP80W07wh4Qts9S9CNuvp+MUZFTcrDYYRow0nzH\r\nx2BfX4j+INSB9qnERPLz0npgsgthLLLV3H8=\r\n=qcSk\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"46425b4f1ee71ec9e841d7ffacdce7cdc35e7b69","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.49c56a25d.0_1665082192261_0.9163372514938197","host":"s3://npm-registry-packages"}},"15.0.0-canary.07acddef3.0":{"name":"@material/density","version":"15.0.0-canary.07acddef3.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.07acddef3.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d7d0e696d2c642bd2350ee182f921bd02a9c5928","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.07acddef3.0.tgz","fileCount":10,"integrity":"sha512-/qJu5oRQ12we5ACeaOfIVKzqw1PmAquZzDPndtAnmz4aFFl70rx3KyU/tbriHPNCtAUZbWNhunL7KQC9YsgsIQ==","signatures":[{"sig":"MEQCIBkyl3BIIbbk9j4qIzgX4OA+0KM+oz377LlF5X+Kl/ifAiA+L1eDjUfMhIINSSFOtlmqkfr+HIxl3VNixUuIZawizQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjQJvjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrZLhAAlz8H1zMwMLfoqHw9R86ZOz/g7+mgRpZq5coItSr9OhgWOAom\r\nL0NyEienKyTYZqxjejDHrMPrmGSPkvl3nIQ6aogefm1jc9D/dL6cvEJzkf6n\r\njirUWE7LUZMiGWfFuoF20G3af7XtU3vlH0HRj77aL43rE5b44GC5MDEzjb9p\r\nlncouJiNV/3cU6pFt8OEn7VF2UIeWhWU5fVHFz3ivN5e6YN5TC8Ub96mfgbb\r\n/PfTtSz1R5VLSJkIYA5uPko4cMYBwgZH2NRGJJoSTBdiIuQtYZiAw/YjefSJ\r\nI1esP16GsU5x7z5YgAW6ubbcMmYmmWEJqOPUs7Orug+9eZ6uR/ZhNchSKTmt\r\n1sOCj+XCZJlXLWw8Sq5vKXQG1+iFIT4dqGFCqVHxoA/lrlNzqNaj6XpNQhXq\r\n6xSVsMZwf+0GWtusz9Dt27uLDl7sCMqz285IyJJIYHFpnrE3mf902tyGOIrK\r\nxqs9U1jT7I3kNwldi32xQu2fK3gXG2EhH0Ug9rh19pKkRLNoVNCZKD+EhxPl\r\n8gsxprNpSrSDre6J6J1Ex763MWOhTm715KYRkrv5t8jkY/r0j2ML2YBWI4GZ\r\nY5+sXNhU3MBxJ3mS0oNP2MEGkwMZYE2+quzJqGnUixA3wUXOSdx3Jbt+fFjl\r\nphiUFB3GNlxoDwJNlfgfPVyKa7M7qSVF3z4=\r\n=TOc4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"f61a6c26b4bd60354b690448809f9dfb7ea11564","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.07acddef3.0_1665178595288_0.7737149790340132","host":"s3://npm-registry-packages"}},"15.0.0-canary.1c74eb2c0.0":{"name":"@material/density","version":"15.0.0-canary.1c74eb2c0.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.1c74eb2c0.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a1ff62bb394d583635f905765bb0258f4e8d0ec5","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.1c74eb2c0.0.tgz","fileCount":10,"integrity":"sha512-3K4eEXkalAl01x/HJNfVcNOB/6MxW0XhF9mLPVjZqCQwiowLtzSFLp+lLlGpwOx/XQFpwpAzfRdYTSAXdJ49Jg==","signatures":[{"sig":"MEQCIANANqxriAZT8d/yb2sHN3VWN3L5QFmRePU5Jx/HmXZCAiAXdACBSSonlVLMWbdAPZwR3nNwlWpMFMXKfZriact9mQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjQJ/6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmph6A//a5Ly30xUkJMo05Tjm4xTeno1mEDfYF7YWcLJjr/iY/JThXSm\r\nOvvHvRaO9vzcTeF3XsemTlGSJD55qh2s9js4smHV7My7UY9vRT1gl52/T5dp\r\nNMXW2GSFLepiXElrjve1U9WNxjYNSQEdhe0isBVDRPz5rDBTtjd7owstnV36\r\nNNon/HA6RNSvoeGs32y+eJB9+ctI0MZpzEXF0aChvS5BJHVuEcwojIcE087I\r\neOZE6ieKALbOjoY2kAGaN2B0DU4SgKxYxHxKlyuQ4YAGkFdh94/l7Udnuhec\r\nF2Z00dEM1UZfp4bbWY4T1L8pl9cbJRvU7d84hkckZpcsDqtj7I1FWimbTbfq\r\nG1kB2c4yd4na267lsIKhMZul8ERDN+6UIVSRdVI6BYEo0Cv6nzOIDJ79jQlY\r\ne9czbclbrtVAL+LpDxmh4RC8e2yPkMS5D795/MjeI98gUczk3FoNER95w5pN\r\n1gutoMPwwwejtvDTeIQOITO9e4GkNVjB/0cOnu2khKACbnvgJ934h3QkwCbz\r\naHg+gsQ1szCzuUPKBs0WLMYFnI6xIBTzcPT/U5hfI32sE9eQehZGAyJPq1a/\r\nrjN6OXge5wrjio2YZTcnpa7F9K8hofL+vlaVN/nfHS47aZZ3saWJUGUqzt4D\r\nJKhidSoYXNdV6LfJGvm7stkUs8BZg19OV5Y=\r\n=gCns\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"fa2e48f4e71714ca4a637a500ddf18f562031ba2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.1c74eb2c0.0_1665179641899_0.33211953385415893","host":"s3://npm-registry-packages"}},"15.0.0-canary.dadfb713e.0":{"name":"@material/density","version":"15.0.0-canary.dadfb713e.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.dadfb713e.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b992f776bbe873c4bc247a7f1ad16f19988b4302","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.dadfb713e.0.tgz","fileCount":10,"integrity":"sha512-lyIidECmwJnLU5Z0G5dbMW6fTHcEFeYV2OmiuqkC51d16kfmeGFXfKLaT6sGj1TDqLsKU419AVQpNo+ItwFvrg==","signatures":[{"sig":"MEUCIHxleT1FaNaE+dA444xzLPxDBOFeIcTnyJFCLNqfEbrlAiEA+KkYvsrtUjcYTrYJlC+vC6BfVygf/ASDTeqvSWNyZwo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjQQT4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmry/w//UOCL5K2ZSh6VslvQpobYMU7HbjacjsEX34qfSEtywdJWoVt/\r\nLTCLJYqOAmpldCPV6Q+E4p0gyZzTErjWHe2FMvPFgrX4QeItToweYOZ1OTDM\r\ntC4d/DCjYuXE8cnwLNrauIp1ipQ/+eQHui6cxx165nIovhkmjIQV0/x2kccf\r\nb6TIi23zngf+RyMMmcXBXrQkh9YjQUQ1lPJ0gyyYW2PxC6rCExTkz+/zg3fH\r\nnW7b2r/G5GVsGQnQcFC5pSzI3AC8es2pwsjOnteOoH39Zk+0c8CFP9UwVR25\r\n59qSNBSE2uPfBntLGePppa1suc0etniJ6K/0hWH6Fxd67N3MnnbYeesBe7Zv\r\n3fb1FmmVlC5sI8osU6hJkTGiUjVYMdSbtv85h5Uvt5cH/O09cKBHOcux79wD\r\ngLsH6HKIVORJbzF+S3I7Oin1d83Fox1svJQCoLErUMrFmjlCKQ4ngfb9Dl+B\r\n4JVKsnReWIJ7lqf/L6Iyn/K+ak3dx699e2xtyP2qMNw5RW03PqblUAgHijue\r\nBeYtcSiGMamtiTi0G73mF3nccXAxcRC+iPc8zcdgaaCOTJHydlCqdR3+1dwy\r\nI+gxlKCaYlqndlP1Bignvkoazl/bncX4uTccfvlz6xdh61m6lgXNMaOgQ0FP\r\nLwJasmXJ6lhQ+rrAR0HfjxZFDWRri4eV/+o=\r\n=TOse\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"dc577772f45028a4c4dca1d7c8ca8dfcf636e763","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.dadfb713e.0_1665205495979_0.7738429575695196","host":"s3://npm-registry-packages"}},"15.0.0-canary.395f1ce61.0":{"name":"@material/density","version":"15.0.0-canary.395f1ce61.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.395f1ce61.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fd128bf2d9399ab8a8ad307db2a82d7d5ab1babc","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.395f1ce61.0.tgz","fileCount":10,"integrity":"sha512-AnooY5CAevulmG7bLNA7AcYYtr/BhmuCSyxc/X7lLo64TZQmK3t0ZCTqBEmoCpBZMHRpzkfimXVP3GSamuouYA==","signatures":[{"sig":"MEUCIQCdeOfhmchoXFQLVk1JZHmhhAFG/tUw1vbQPmx+/I0xjAIgbkrDT1y/X3O7pzbO9MTecX6wqCX1msPPeo+7hLT7ilM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjQQVwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmow+A//f9J7StIbkOhlrcUhVOxgNZUQkeybUy1ylaH6JCry+w+lRy7V\r\n0wvnzoaqTA7bAfl4LVkQ7Ug63aumIaeintpGE/3N55S1QOOOwDTSxjuukSbh\r\nJ9PwNvTPOnTRX/ZL/djg44+OrLbTbxYm0sjxEluuNnlVSGeKw2DZf8pHzusM\r\nLKltcW6hzvdhMMxFQICmCuop9MoOHyxApNyoM+M3A4BBeTZemRCQPpv1lAly\r\nozXhCkUm7SKB21kM/j+0YK5869mofsWc0f0HYY4c9bEFVsfd0p2CfOjT0mkc\r\n71dIP6as9TU0o4G6QeAkxfE0iw9jkEae+XFtDQ8kWQ+ciNboZ9GIIbHiNszM\r\nEbRO2MYWhKIkM4LXIDNM+Vs7SffmhQF8irycl83aRRBoIb3jep0bbZwhuKtD\r\nCpHy7B4q285oxG5H78rcIODnsXpuG5xx3I82O9tMl4VydUE4YChOfMD+6wUp\r\n1CFVBHkFoephbQE5f3Jpg58sMw1mB+5+Z8WFHfIT9LkjIkp9eQxNeYvHsrVu\r\n7XxC9Nm9GWgYz4UGpN0egyw8oKlphQJ2sSGS33UiebW0RQuvReyljeQ4s8hJ\r\nZ0q/8EKWuJaNJdl/g2ObN55NZc22A4DI0GpT0SRZ+/xV+/Begpjk14TtmmzF\r\nQe1GSUbgiL92aQX5OEwYEy38f4cfrRrhOb0=\r\n=mkAv\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"15a2d954f8c5260da0e9b6f65b6f49df69764a95","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.395f1ce61.0_1665205616374_0.10198171382914123","host":"s3://npm-registry-packages"}},"15.0.0-canary.e741b5c82.0":{"name":"@material/density","version":"15.0.0-canary.e741b5c82.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.e741b5c82.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0cff91c38fec2ad638923e9533be828b63050533","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.e741b5c82.0.tgz","fileCount":10,"integrity":"sha512-xmcANG4sys4J6UPHz1WO9pjQy0kLX8Y7eDqv/CUFxiTx0Jj4OAg5gtOsji5bupLadIBtCtZxFah6LlxlYhnKTA==","signatures":[{"sig":"MEUCIQDGAPDEfiqYLDxbKIuPLLTSCMcHHJZpGHyPVvH99mb0hgIgbJuA1GV/FqOuKDf8f6WzSFvCkcRGQNvxgnnvYfToRq0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjRFhCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr81w//Td4eS/OhABKKwLkG+Mi2+X6VIzj+FffpQRSgwZ9nPU6wNYDN\r\nZceNK5FDkZLq4PGHdD5srLfrkPggjt+p9JUliWTFJgybQc0FlePtfj62A6JH\r\nT9Dqic9SG047Y0HTGCM17KSBz7nqEqSfrqJYzck5Y5m+/J+mCSTtlnyTPXI/\r\n53dqdg6ojeEjWdjbV8HCPmG3AX5xDjkGYZeQZ6JApCm8RKqg6AsbggKvVUbl\r\nJhWuzoBUupRyDu2gnzw1SVf9uxZhrR9fX+LEqSS/KSzVoTep0ZQ3+1kd8xQ8\r\no/G8mjvVX45a0MMwmjbbiF4FY6wR3QVzukhLLXkPisCN7/75YzdE2hnCSI4v\r\nInOzLCiWFGfRy7vqZdCwMlMIFlAyxcDfp//DuT7jzmnfQPSLAaaccfb1k6iY\r\nSyibAI9UmnznQ2s2/mcwpO0cHa1hj+AzehxatKkfy7mZptRMnvK1efaODMja\r\nTP+bKXxLvd4QruZFFRgOhZYrqmXa9hdkhlRLhE7uKlcSh4TalFdv6IwI1oap\r\n+DvCYKQYEQDb8m4IRwwYIHvirO3N75ACqQzF/So+U7wDJ3f43GNXJ0ClMQPN\r\nQTH8G1uVvsDhirROdbS1ZgcPcO80HK4v4G4l2BKApmjW01dYqolC1dYRKmeC\r\n4THgIsQ7EBAVNqBtri+qt2mGRNMYlknx1pM=\r\n=kdxB\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"489583dc41bf06c909feb0a87f9679b40fe6c03a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.e741b5c82.0_1665423426719_0.5226463525660996","host":"s3://npm-registry-packages"}},"15.0.0-canary.582f3cc1c.0":{"name":"@material/density","version":"15.0.0-canary.582f3cc1c.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.582f3cc1c.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b1ef28c682e6ddf709f08f9422dc0cbbf0b169b7","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.582f3cc1c.0.tgz","fileCount":10,"integrity":"sha512-0HtKAwqB8HCfkUchmHJ6MKQ58QkqW6hw1cftRKHQbl+dtQzJ7JUby0qQgAI37G5aYxk/ua4sgSnNHcD6D4N+jg==","signatures":[{"sig":"MEQCICdxFXWQIj/CdEL3yUtITN7HA0ykRFHuWWTVl+67x5J9AiAZBiZlqD+7w+Noj3OrYHZeJ1kzbTJH+LkYuTvwcItRgA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjRPV9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpW4A/+NzyzN/lRJR5rMlp2qiY1aR3p6oxspfqh0VTBFB0/Jn+KEXtz\r\nMNNtYgtzXvhkUxjfPkDBziJi2ivRU7hsZiTKWyaFoM4MMb+BacpSWj5ujdhC\r\n555VZYCzZfu2dqFaCl3pc/Ko1hqvLP7EHoa+1CaJC8mpzc2s3qggmEPwILZa\r\ntFL1yKM4VQc+RWZuSwivJ38Y5s9UI1bPwUCvkC9KEVLfHXhXequMEan7D7QQ\r\nC0ZiG9zSepPIdFiaTl88EbxyiLWaf1NiU/ZA9zpNVw1KEWobQC59sjzDRGnL\r\n/Hkne+qzcUCNg2oJPIt5ttPrGPN/zQ2kjW6YzKfkHgxOq+jmGvtO87+Mm9bE\r\nOh6omCSPd3SG4KN+/btPLkKf4fmkoIbhAhZf4fbyFrMsPnQ52ysT6KL4OUdf\r\nDpOGYGe6imDbGTRXi1bxiN7HBym+9mAgHU3hxn9rWRmJmFpmnX2Wp/Q1xDY3\r\n+i6Ibg3klaNOso9enS7Vkt1MkBRTFe+oynxNQqILkMkt4ivHR4boBEPSvFZr\r\nTVWSG0/xMyWiD99a+bXE+zemtmzkF4k7NobZx+JPfcEElQb4QG2fvXbaSjIN\r\nOUCWXKNA6Dxt9odg7ggUMpQHWJpDgacU25vye3wCZNCbFjJz2Wqz/2k10d+E\r\n2z3nV2zhRqt/ZgLgHWYh2mxKLE4saqlQllI=\r\n=VAUJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"9910dd1f5b3fa962bd02fe552774781896efa7ee","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.582f3cc1c.0_1665463676975_0.22887067812764483","host":"s3://npm-registry-packages"}},"15.0.0-canary.b1a6e3e88.0":{"name":"@material/density","version":"15.0.0-canary.b1a6e3e88.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.b1a6e3e88.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"63bb6d220835bf3fb56284c2d98554d68813f164","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.b1a6e3e88.0.tgz","fileCount":10,"integrity":"sha512-Y0HAvAdf4G+HDd7B1xm6kU3uXcmpx0M0LTFOym09LEgH+I8X85wWVz0lUfr57sU1ulP9kR6fI85Tqfw9096Izw==","signatures":[{"sig":"MEYCIQDCTQcz01n2RspmUi0rlMjtE0QdCe3vCTNzAeyt+nrh6wIhAKLyZBITMUKeTWjAhJJwj+UP6l+7v9F87NxpEtxq60Kz","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjRqyTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmprYg//SDPsE77VzxcFhrycd7SRel2CmzUtGjs3J5rxwSXL1K+Kx9uE\r\nvXiyLq30lMF/k0T31Dxa6anonEspemKusswTQJ2cPVNsGB4Y60lSkNjUJCQt\r\nfYHnx/Hssvny9nYckwfSukbSdy3FAumOv4N1g3/Qczdlat3ivd0ngutDTAxR\r\nHDiLelPTSbt4nFzaW9eubXoj6CeppCJ0i1zTIzFgTnnQkzXvoxW71nlYPztz\r\nBL2cZGAKPwMsOSSST7E/x5iP+BOkPefMNa6tp1Rj/begoJI0HWUAQNhYRQ3e\r\nKmaVbh8dRtm+vxemCocuqAsvZJc4QS7Xtguc957j8kZ6Ilo/T9ured8AvLhF\r\ntNlWKfMl3TYXPmRJQ5lgPi7kiRNrZupKk5zXhOkU1vIbyP3e9Y+1I9XUK5Oc\r\nZUysscqAnKHiVnlH6XUXMKm6PLwg+Izm52qRigA2k8G2TFgK6Ppa7iRexDHC\r\ntRFC3HJNBd6ss6hyqJ50Anucse0lWPUxscH0/WQlwoSCESIU+5rTdNmZ8ELp\r\ntDDTObrcBftkuyO9J2gXN2kR57+z/isL8REloJO3VIpPGX1gaN56IeQxi9IO\r\nRxo/jPlsxIhP6eyJfMOK8b4WIa60cdejtHnNSh05ayKa8Qyhe1VHJi/r4IC9\r\n9p+3qqZjDg0YE9lxVxZCfWr/WKBU/Fzr8YA=\r\n=sJgi\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"fd6420b1b81c64578026927a4acf4ea73b7358e6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.b1a6e3e88.0_1665576083684_0.4093454396303762","host":"s3://npm-registry-packages"}},"15.0.0-canary.c9b1a31e4.0":{"name":"@material/density","version":"15.0.0-canary.c9b1a31e4.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.c9b1a31e4.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"27d57d1b268a4e617b2a2c01552a17f012031a40","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.c9b1a31e4.0.tgz","fileCount":10,"integrity":"sha512-YtpBFvTDadOMa8aMhuEOiNoMTIxKSf2UK6kh2j7/EjCXy2szOSRnN5Bp2szAQ/CC52FtfzjXQ+gVvHNaLCbJSw==","signatures":[{"sig":"MEYCIQDWhYr+yGooAGi+bNgZt167cCPYgyWhE1QBzHmAvX0DYQIhAM/bDOKOXm2poCBtO03Iu7zlVwbeVrY7tMRxIuYHsUo+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjRvH6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrJuw/8DIjxkoXJjfyCmx9HmamDMkVSt5nESmLfHuqPlG7VBXTekobS\r\nMpwwPHSno1xzUAmniO3/pMDkFOgZIBI1tpXDp8R4vkss+osoKcd7h/FjlLQS\r\nUu+xJqD2OTEs7SywAdABGeuJa8dvK2RBdgGHvUuyrw9ev49T5yt+RjpUWrr5\r\nT87FtUEIqSRke4RiAvLJRi2mxxi9mftPYF9xx0XXjtMAZ/Kw6DLBdhrLWUTp\r\nYaxArviJE9zZGQvXVTtOfj5OwsHhoPtnj9i2H2OkcfJ1vJXfbZRmzlWMsaSr\r\no8nx9gcTj6VSFzYXLwJE9pvWioGrNtIu0VXODVoabAcJLqCxOa77RbCAniMR\r\nKFXseOGN1e7H2cN/JIDA2Yap9HSlffcMgQve8/vyHvaCoXUT3xcaPYBOs3Qx\r\nuQRL6GAOCfBVvtBbi7CE+hsY0+twJ70SayMjCTJNsYMV5e8F5LarUaf4WnZq\r\nprlBmxKI4+/FtYaWWftbMdcu2cHV/zdZuUD9YItV+f4EtHGyeCzZiU/LkSBk\r\nEkksdRNn+WOcMzUWxoyMKXwhmr8ECvugWe5lDET5v/j6kBJQMF2K+I9rSXfm\r\nAOpX4kps4NZ+2U9oQuE3e+ulpdWUTW8LPSfPgNtKs58b3Wa0WILqdETEfGF9\r\nc9eTy725AjIfCkHS0KlRnhJ4LsWj3YqJjFo=\r\n=XuEE\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"f7a6b71c85fbf0d1a9db952402e002f8421baf4b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.c9b1a31e4.0_1665593850669_0.8469470921910736","host":"s3://npm-registry-packages"}},"15.0.0-canary.13e9b0d1f.0":{"name":"@material/density","version":"15.0.0-canary.13e9b0d1f.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.13e9b0d1f.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5389e2309f1521e2c4e542775e5e62d91443877d","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.13e9b0d1f.0.tgz","fileCount":10,"integrity":"sha512-0MKRbi+sDBnl6wTV6KfSK/gns08BRLfkbzLsiTh1o+e7UHup1MLCp/NYG4ICyaYJVmT32ZEusdow+AhA7SmyiA==","signatures":[{"sig":"MEUCIGcrSyfLy0kHtopNDMSsePbwz5m36YJ3Lh7YZZhiLCPPAiEAnUCDIxpn7R9Z+gWqRllCpUeMs5wcKJGbiTi6BIgf4k0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjRxNWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr2rhAAoQvQpDZOocny0oCLKCZ0bI3BWXrEKZxXB9iBBcFXo2oYezOY\r\n30a3c60fPQNKnjmJmh3HZjQE3bZQuVNNbeCdA2a+UTlCcd8/orHLCX4HcwR5\r\ngh5gebcZiWDm7OqOPLF6ReW/I4HShP2SpQ4KSNK+ezEIpnjDzZXLHDKVC3Ua\r\njDWRced28tFncP8LLFF+5ovN3K7WymcOymPMUHVy8BlYT1Tfap8KE36pz9Cs\r\npoabXbzZldQqYzYpheyP9Mvzdm/IhWPLegdgyXsimHkQS5LIBSa4tEutqn0Z\r\noB8cqAhQE+FAi9ZcqfXJoEamiUOOpud8e/1A40h0pB4xwqh6tNewHf2C7s9u\r\nyLpaJP7wuJlebRRjwPa/R7eZQHnt7hoiweQTsruDzNFs198wRm5NyhrRaOu9\r\nyIuF27uZ4fnBjRQFmsrNsiTU0f/sY5OPOewUMvtDBWjmQogSiS5/aqggYqbC\r\nBCYdWuoB6cZmi0eMEDFHwUpxDRw16bXIyar/cHcHCaRJZYsosA7tNRuCIYpn\r\n9n9Hs5+1OrcZV4yFjT0yUo0LEQh1IpxNgs5j47NfipZePhsDFTHkSqqQeQ/V\r\nwwDY8m7vJ97cc9ckqh2TUfgaymOR2NJ1IOoUuyZFyJ5hjNgXirffQR0pgNeY\r\n9D8sl/919SEOc1Ngc03FgQQOuXUZW/Bhhw4=\r\n=iuFH\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"4d9f6e4f27b68587a15ebef6f003f73cdad60bff","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.13e9b0d1f.0_1665602390350_0.23568778629008236","host":"s3://npm-registry-packages"}},"15.0.0-canary.1dc797e7f.0":{"name":"@material/density","version":"15.0.0-canary.1dc797e7f.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.1dc797e7f.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"54e7ee3f391c316ee214cd7a848fe161668dc300","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.1dc797e7f.0.tgz","fileCount":10,"integrity":"sha512-pTM2cXC4itCrrrPRo6GIaoJMAqhNaPsJcsikG9A1s/BQQS3qhTttouhA54AaZAhrSHrDGHmUtq4DWhqHOQRFYA==","signatures":[{"sig":"MEYCIQDpMP7I5mcKfCNCoN8pWLC9L0flayYF5b+hym5hPIR0tgIhAKvUlleoRMkkcsoXRZQJoGPFe73Ermbv8UYNxMfIQnQQ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjSS6PACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoO1hAAm9po8iJPjNSMdzEK1++scN5cQeWE5V6b5DNBhk3sWCLRdyV2\r\nDaoyUXUyYhcTbQPuFGqvU+6918HYofr4k/Ofulosg3KEYptxOuql5+LTcTl2\r\n2eMYCOClc7xNSzjOqDl6ZKQpnO+2lLmJekPWg3FKE/y9dWxfdKahQjBlZVpv\r\nnSW42SQnJSaFY9JG65HD8OFbNAiqHXMR8M6U/NM7bEVrFsrvKcTLf/lYu3Gv\r\nG9tlESE6OoooWX64D8HUUFIi1qyjCzobXXIW4u9BXm29ye0rbJWoPMT+ZNkG\r\n4b/j9HzBXEHx+6Du0EqtonUEn3bSvqd986PyPT8dge90hUht+szmNaXmdaoN\r\ndcgqmTla2nAD6hLkyfFwj6gkqCS3JG5YK4WIirQP5JqWHUwJIqHekus+DApp\r\nw2B+YXlIHvO/rPo8jKYCKEbS3h5R7T4q7qsX98E5hjPrg6TekgK9VsB9zRit\r\nNg/9bm2rQfPApC94DfVJ9ZK9QWEB/caYcZX8vEtDMkmtAsbcFF93w52bgbFu\r\nWiIkfIW1gcLz01+QT4G4cJEmrgXZ7mB72dIDtPvK4vdNduC8jC2eq7EHh25m\r\nRbtCYZzO4kV4vyrNLS5Qmg9FQ0DJ1QGDRhQC3RegaqkdDR+wPPrNcIYYT2cL\r\nhj/E79xq5gtDZu/Ee4VBYt21yyRvH0546E4=\r\n=dEz1\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"22eb0904d0b7a84996854bc57cc417286deb08b1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.1dc797e7f.0_1665740431359_0.7932281082202866","host":"s3://npm-registry-packages"}},"15.0.0-canary.ed4009397.0":{"name":"@material/density","version":"15.0.0-canary.ed4009397.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.ed4009397.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e93153b33344d55f0849fcbe4a0c75f7d8fac457","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.ed4009397.0.tgz","fileCount":10,"integrity":"sha512-o+Baq518k6SA+he2g2AbVzexqj5nS0KOVjNjwkUAoXTDzRySVMesVHwNk1Tv0y84nJiPWIo217N3gHaVJ9V67Q==","signatures":[{"sig":"MEYCIQDT4cyPwFt+wTPbgvCmrVZSwQ/BIR3ERhPhMWhCtEgY5wIhANBlarLdCq5rCX21bovk3T0sTV4N+5tREoe+m6xVulAj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjSZNKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoG9A/+I/UcixdNh8YcxDYAc9DpZgZT++LYcxmzMfbxOfv5jjrLDGZB\r\n5tC6ssi/nldfNeH/kmBIbwoRxL18MGwPRfTpvogHKhM2XxUaAZoGVC1r6tA/\r\nX+DYnmCogNVunmjRRRDCc0tghNRA4WdfmxaJhbpYgcan5jZkEVcd8x48tmDA\r\ndMgggNnac+nTf2iOE1Qq8XLizxMOmi2vh+I3qdUX+htXIkAendTmKbhJND8S\r\ngcF+KXIWuof5VfakRW/rM9ZKh9GkQ3ylyek1HWtWbdWrYg9pJU6J9Xc1HuAT\r\nu/cpfn1uX/P5sgSZ0rUiYXcrViurida/zISiIPhoR9RbgzcRCoNiiGyr8rFf\r\n9fmjRnoivbRlr49zIp/wvbqyx+EjOGHBrJGQulDdGLXRyZgp0mDfLC2dB9WR\r\nD7sOZU7wboHg1GGfXm1wx6GuDytdrVMle7EEjHOhOEEMQRT8JJV3nUsNexRi\r\nNvaDywhfHjYZbEg50WOYLZU6jmxc3tjyCPjNunf3iX1Pe3nT/oaZP8JiWBd7\r\n4ALx7zxv9CmC02B+Rmcpq2lmQrAEt98LdWFbsSjxTgiTIhZj0JuIFNwsNEe6\r\n/5XTeZLtvIktaqZbHn1TiIdXoEDqMrCwWQDnU0Aps3dmsN+uqnAZS5/XkKPj\r\nFMaQKNiC+kdxR6Vnh3qg1+aRcbh76+nZ3Zk=\r\n=SDa8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"a749634198bd160446873ac2c5cf3d4345b1620f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.ed4009397.0_1665766218166_0.8427860257506108","host":"s3://npm-registry-packages"}},"15.0.0-canary.95ef196bc.0":{"name":"@material/density","version":"15.0.0-canary.95ef196bc.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.95ef196bc.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3e2d799e890293beb5ce18c2cbde06b74bb34291","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.95ef196bc.0.tgz","fileCount":10,"integrity":"sha512-cn0pek5duy6sjcMw84pJCk+dJ+2l4s2SMeKBik/Lg5GAAHKbbqjIMjuN3xecnPlLMcfAvoxYhh3iqWih6J9ZFw==","signatures":[{"sig":"MEUCIQDydjfzJV1ldkTm+g9SnPI/JMVMLaITfEDiecqmWAGXDAIgLUxq4+9QsM/nFtzxqcC8O2lHzbON/0sWwF0YNWoGQwY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjSez7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoY/RAAkR67VssOIQy63Csqju0NqXul8w7YWNTW+UhwSvNtQWYjW7Q7\r\n1JA9KDcX+4mdoriYReO7W0+WC8anj7bsbAJRUMKiKONPYu4rouG3x1rQdLEQ\r\n6d7MB8FJGcmWI6ml3tyF0YlHBpgkkitcgb+h1FHfYjYrt+omlGYDZ59XqJyZ\r\nY+l11YvpimfpW9vJNrPbF3PY9yQTDumJ/WjtllqQk5qGs70MOmyuaPqg94rd\r\nQ/V5qcTFxUpOQgfl9X2gaqF59pZ/cY/Jjc7QYBwQAQxyRSdeDfhAW0MFIxeP\r\nlqdO6Wb4FedP+Pbotwovi/OBe1zziKdD25vwsETbdJu7uBkfpohnKSNnfycm\r\nzQHp15KP+YTvv3w+l5qTzDmh4J1gSb2H2O5QhcSbRdlHtnKMrh4QZGEa0OKV\r\nR7FADK7PO7Pnur4hpXyiCtTpobj+SE7ButNCDdFm0Xzl4fRvwh8/H3HHKGD3\r\niS/+VKX5Uxxo0FM9a3UZjtL0g4n/NQt9BkBhvOo7c/WFLTnnLPJsQ/OtQoEs\r\nSm3A4yDaDYpGKwPn+KjJEWCd6hvDL053reS4EwYV5R7RsPBAVongs7HYb9As\r\nwR/ldCgwEeU12PlI7WmO1SkqF4cO7XR/JG8X/IEmdTTrXepv6HMCBt+QLl8b\r\nv/xUMKjL7ySax6gEOPiq25Fy2kqeB6zW0g8=\r\n=2knZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"c133997c8c45e50d9ebfe12fabab75ec90d244e7","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.95ef196bc.0_1665789178821_0.6547833646104442","host":"s3://npm-registry-packages"}},"15.0.0-canary.13eea1b2d.0":{"name":"@material/density","version":"15.0.0-canary.13eea1b2d.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.13eea1b2d.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7f929a0c169f261e736c0957bd8cfe9b2c2aa2c1","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.13eea1b2d.0.tgz","fileCount":10,"integrity":"sha512-Fd35fmyDfY/KkbhyeORHaYGpzE1jb55knBzGufiUNbxtG58pk8lNQaeWlBgQ35vnHDApXxUXzbbvwqQSAjd4pQ==","signatures":[{"sig":"MEQCIAOoeRmU9BZ9CV7BAWjW2f+QYmW73KE6gddTXtcwLd84AiBpyIg45ytWvih+bRk+Dln/QBeIIQxOQSJYAZU48hZKVw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTNEOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmogGg/9GFGjI75KxqtucwsuRcbShobT7xc4ddTpXQA+J45zWs4muTHH\r\nTfMOfyJh35UJ1sVXP2A5g2b+qjjAhQj5BtT7pQQXzEO171XxyUkkeHwukwQJ\r\nK9eI3793bbcwqpKcyXHL784ZaJYw2FOG1GxKqhMiLe1PytfIHLAVUtolSDbY\r\nwUalI2Nas/xQgFczx4YRylw83RZPoORLRU4bm9ir05gYtFxaSBsq86oJCk64\r\nUKmb+YheYqG4QSr+cyNoDpUXXVY5blzYxDc3/2exJKcPN9soB1g2MgncRzob\r\n9mV19QpMjFhSEvJeEN6WBO6RqJDjoC9FEQndLcYZ7CskjyO40b9zZXtHYqaV\r\nGm9fJBlbjkvczAm1UhnqqRrPYlJ/KrYS5vCuHT9h91AqyhNI2KAAAqsJzD5+\r\nT2yvk9Y7NHqVeoJ4f2Yt1qJau6LEObhoQRm/ZTQweoYGzIrFJYK6578hCrLq\r\nQewKNOL5MuNL780nn6PnfOWajEB3IXwhVPwov9+QW/q19faKZ44n7Y9hsqHZ\r\naBIqDbgvJthdyTXhX7pvVw3i4kCXkQPHlU3VNCHl02Q9nvtj1N7ix22JvnEe\r\nqiF0hw3puVtO07b8hKfZdWzBx6L+f9ojvKTM5qaFskJC3s33se9O21Gfdii4\r\nf9BC8mrMO7/kwYCdaN5Vbqqs/pxd7HPmk1Q=\r\n=Hfs0\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"e9a13860e495e7f113966b4c71b9c7931a32807c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.13eea1b2d.0_1665978637813_0.45799924970596795","host":"s3://npm-registry-packages"}},"15.0.0-canary.ef9b2babb.0":{"name":"@material/density","version":"15.0.0-canary.ef9b2babb.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.ef9b2babb.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"84f91b29c85622b1b1364f1041c80de195e9aee8","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.ef9b2babb.0.tgz","fileCount":10,"integrity":"sha512-4fXRCaB7caWCCrLvqMQH3lYmsplahmOVV+ebvDpBpHPWPS72kaH2h78FXkhZMG9+5AW627xjXYP80/TpaWTnvA==","signatures":[{"sig":"MEQCIH1BejeKFFz4f9MYYgyDqyxWLoJISlWLECmjGL/slwpXAiBf6rUvTCFSltC3yWJzq6Rd6mNMuKEhGqv8TINdkfwsDg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTR2CACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqyyRAAgh1TDxqQNtlkafOm1Rq1UAP0TjdNVkbMAImHmMN2Nh1TJDoq\r\naJaExeRGwF0x7fuZ/dUFVE1BJdaqv8q3/htPEgo7POa+b7xJxPbQRJDv/l4L\r\nOnsvUvHcFuxxCnfecgD9b2vG+NO92OfSS6alx/BTjMQ6Emjrlo5d9Qk6tQ0Y\r\nfU9u7Bq/w0AYWJFmBnlbb4oWux/5UpKeLfcFvcCKNno7/I2cYiNG+IUdS6xB\r\ntarl4hXGktHrAFbJx3V6n7+d0nPMFBTLkbYS6dZ1FFHVwWP1jwPbKwaIUNGL\r\nca+mtSMT+fK2goiDTxq3VR5G5yYHsrDcNXRfYYd2fH7SyCQlV4yUfYbUgR2W\r\nURW3dOnHHBht8n13YFweQpxy/oK75NAVJOMyAT/NA2My2YZL20sqiyW/jWLM\r\nGEgHKnA8aUxmQ+dqo0g5iDr97VuqzNr6j6UQqlUF5wJESAygrskzQn+ysBuu\r\nxtmX+tEX0gGZe91wUN717AyOrUXjMvDIKjli3LVxFcX94k4oNl/CKRvZXEAB\r\naudh8tBtIYoL11jWxn+r5i1HQgx+Tp0L9O39JA2HMzAE8SqIScOHbNQCXgQr\r\nB45tk2a6XrI9r8WFkyTNHP6LBKztTjH1GW8w7FccAK6RamuGRcinhxr3Qbjj\r\njKPd7gFE72OW7glSWjbF8hpvIk8WW0LVDIY=\r\n=JRnz\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"2e04dcc89ca80bfb50d7ee1e4172ff9713c149ba","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.ef9b2babb.0_1665998210550_0.42942349125753654","host":"s3://npm-registry-packages"}},"15.0.0-canary.cec7fb987.0":{"name":"@material/density","version":"15.0.0-canary.cec7fb987.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.cec7fb987.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e2b591191ec909193224be49b45167b1cb0a53f5","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.cec7fb987.0.tgz","fileCount":10,"integrity":"sha512-4PuVACHtUPoc7Q2yR37/wFhZLg+WW1j7BjwZ9Q2N+aaUV0DAvxbP8MC7NPuHAQmLCYmmX5l+h2YB3MpHWIPj7w==","signatures":[{"sig":"MEUCIAjpHr5n5G727mjEzE1zISqzfjbTGdvlXagO+S39Ox3GAiEAxIWmP80p0gUhSSSUR8Ii2HFmAejJ4TwNBnOcy8ulKO8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTTSTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrH4g//TfZCP/A3Wf+ZGeN4Chm6SEwG7cxbPGlktZaGuE6NycwQ7L03\r\nCDZAocNxjCLfBw9sj3PkEIqFW1i3HmUKDkPXt/kHuosII8gvoIlCyTGDyhQH\r\nbHYZcfcxaUXnl+qKabUJmzsgGSz1ON4ErTG0u1PNBOnDKMkf8Xkoytc/U3m7\r\nULBSoArWLg7rnXOo6mwGyHnk6ewGsMt+lj83wYrKpZntsF3Houf4u4L/sfMh\r\nd+kS0VWpt+/et/9PslL88LMzkN6HzuwQEZpZQdh89rpz+9X8e/N58UuBLwPt\r\nwl33dp/Y4efumsoXxrlDEsLbil8WE1KKccxGWPf/ld5XO4DFbo90nr3Z/WUR\r\nkmgkdkQC78uBK4qJo4Rl5rDCz9Xk9l9En2ui7aU6DR1gqCkHidS7U92usQjk\r\ngyzgA89LIn3Bru7hNcXOjeYCxvyVmYhjtc9lQ+tCXR4y6MQl3lInLTY64jUM\r\najORpbS7JCKFjAmcBYiNnv3bcQIVUzGz8oEl7cJmLfC8EhDiwEcPKxlqZFhc\r\nvp4yCQjiWagpRbU0BNEnmnWIzx4UQe576VBJ9fvkLw3jNHRhOeZvtAVoeHTv\r\nNBr9228FHTYIfIQDU9Ywl0983p1BD8PMj7FqQYbVleL33SS4EGfqIRHv/HdW\r\nd1TanXNVRwqJ8dicaGZ6S9DS9414jsKrHys=\r\n=Hj7p\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"5af4beeec511ff0266173424b4b179e209402a5d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.cec7fb987.0_1666004115615_0.09304087737774469","host":"s3://npm-registry-packages"}},"15.0.0-canary.4fff58b08.0":{"name":"@material/density","version":"15.0.0-canary.4fff58b08.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.4fff58b08.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3fab89e259e92deb91f8a089f276e5dd633ba7b3","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.4fff58b08.0.tgz","fileCount":10,"integrity":"sha512-DmdRJ6UsxHrBp2vwQsSuYYEtRUsp8pzK1XRdESBJkEgJWQkJJHiGMOQbbleZuF/ZnaDJ9sZT0PZEv2cI366NVg==","signatures":[{"sig":"MEYCIQDxs9iTT9gukT0RpAPP9PwLpvmuZFHrIJwvD1/UbzclwAIhALCxZEjlbgMROEkEQgtgPYCiUYpqjSaKBgEDwUOZfVOV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTXL0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmooDw//cDUbm62lB+wJVRgiNze9P7ZTQBYkQNLBaT7aJ/eAzu0bthal\r\ngdURU4wK47So42ICgcVCRoh8vmt6mzOdI5d9TPmnY09q6n4t8BHS1QDz/vPM\r\nwMxh02LyBbBNo1QhpoOfw3B4T4RaHWmfdXTpdcvEL4KA/17fgFBZg9Gie3P5\r\nPbkYpUPLGBrA/BH/gN1+n27tFUJairOTBklMzW0PPZH99kuKFVP0WefFLwZR\r\nsbXarOMg7M6rUbxuJUdQX9vRo3I3IxgNhpfJuxTkVT/CLbNbwB/jaGCAP4ui\r\np+9990hAILADI6If3mqINNsjKgFyu6Bb0Z/EgjvA0prSp0MdR1qsib5VuWN9\r\nEVMUv04wpFTqCree/bBVZ9LCBkmCTi5q3ux37aoQkmpvQ/Qsw4/1bcu/cYLq\r\nIkiYj5Z280utxxUNjX/cWjP2TsA0x8OU6D3rtGN7IQtbJopW24ZT5N8nWtuZ\r\nwEemnl5GS3D12ucQJ9nkPjPGMFPogHTTwD0o8yXuMAUhAyW265QXDgpn9BI0\r\n1zVajaI+498eqPlF3vTgByihvLrclswdkTo+BqnzqUXaqm4y81B8lPUyqLxb\r\nyDUSZUA/QHNZafeg11w84j5wcOV4N0nvm+i+5bwgL1nQME/3Gf7MFRHjxRBO\r\nPvORvJ2jNms91hDSpwjhg+29gNyCu85ow10=\r\n=JerH\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"b44726c7f5a5db16ef660807b5247cd71a447c80","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.4fff58b08.0_1666020084832_0.5152503097159344","host":"s3://npm-registry-packages"}},"15.0.0-canary.587d8f871.0":{"name":"@material/density","version":"15.0.0-canary.587d8f871.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.587d8f871.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"784f2bc82c7d705f315dd92a00cf5dc3893b5d36","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.587d8f871.0.tgz","fileCount":10,"integrity":"sha512-kFZFBKeN+5CYG0Af7QR6YoQNqFO/Wf5+SUlH3JWM7plfG5w2LgIOk1VmGnvuckyvYFt8TCtiUzgjh+BuIhtzfA==","signatures":[{"sig":"MEQCIApQMZsMmYsq6NVfv1GE8mnwvrYB+zLVKYv3u4ypuVA7AiA8XBMJTJqpWiXxIZoFGBQLu3ZMBfUd7sfagT1u6C0gyw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTXsWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqq3Q/9FZjvtaytGLCNI0r5bnHzjwVR+QLraAPsZii/LJrg1VUOoYIB\r\nvY4kxzSHhdES+tbWFo2fPd6uWoV3s752sFtifBNxLoC130xDoFqBb1cWizuG\r\nEL5NZZ8zHogMo+5v2R5IjQG/xObg35aoJongV2BBkhyM5LYn+2DLjLPBpY5G\r\n7en8u+wIH0U4XXXaxxoyudT5mIK6CBUZZ7dsvPWDEQ2ZQuspSt3AuUjCW0YF\r\nXiaaOjltnyH5VnUn9QxuhExobeKtuscYAaWv8DH/iJF91c4ktiMaQQpMNU/V\r\neXFnNTzjTYdMNJ4nVVpAIEPzr371+QyuUfrnsZVqe0zfnLZBBDXYUvWqcvhB\r\n9bgrFHeX2vfaaDLlXQqifikI33qdX6kq85uPH3T4RYlAfWaA8L2xDMHy6d6r\r\ncVb6BpbwjAWbrxEhOkj3SkWqp6+IYjHVxCv6E26TzjEMurxUsqWCKu0iashr\r\nfedSJ+m1BxPoC4n0RFlaBqcj/v29rv6HdDkLSGSadc2nT/R9xNWAZOa+8vb3\r\nrFzOwaeGvP/n6SUbBcZozLz5y38UpoN3pHWWbvd7khItjxkoSbyGYHQoR93d\r\nXf8vl7UtN6vwx1iEhLlhwJWEpYhlAOZhIufweAJOQhT9KgYXwtZAXQDZyVYX\r\nZFGoZxJpt6r9SDxOOwstmpPuK3ePwCVSSFE=\r\n=mP/F\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"2ec38be871dc355461961e4ac44d48ec44c42a1a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.587d8f871.0_1666022166352_0.4460596502692953","host":"s3://npm-registry-packages"}},"15.0.0-canary.edf4b98d0.0":{"name":"@material/density","version":"15.0.0-canary.edf4b98d0.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.edf4b98d0.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"59d25ac587bad22876c6e32756fbc7c691bc441e","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.edf4b98d0.0.tgz","fileCount":10,"integrity":"sha512-x+TmntNSGACa2aPXUfu3WY2NowTACOH4sOrrDe21LW2+sKOnJgqnSqK9hxC+o/+UKzKqz+J8+AtIjqVuS7ySbA==","signatures":[{"sig":"MEYCIQCSHk5GBckWML6lRbU5Fik6XmSSVPyzltEF7Qq7QwbX5gIhAL/Frp3iHWAADqdo/mugGy2dooLxxpn5IYiBN2fav/QF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTYVBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqSkA//fQarHzmKqYqr5esn+GKvma2q9NwtXc9Iml5CjmxFPi8ZTYqg\r\nrHjcKJvTs0qV425YjK9eLw3nihTrO+O6oVPAlSpYea1jY6HlW5c5CxM/jayj\r\nsBDy5x3sxCseB922hesvqNKXhHhIErc6V5jHfJkifXHo/P987z+s9f5Bohsv\r\nhcGJ1mM+VviBFIVyqZ3rHqZd/6BSi6ARxNtton84FZgL7xVGM4Vs/sC7CugT\r\nVWkZCjEvDjikCgOTQWCVVU3XlPugi0vyPqEcglZwMiSByOpY6RxMxTStYt9G\r\nBQ/YL6ntAz+9Kh38vLdTzRLi4yb6wFGzBxyIBNzYw6KiqB5ZtUE/57ZSd4oR\r\nebq3bD3vC2+/7K9KAtd1MFEryxc4Q7D0P0YEkw+cUmJkZGzoijlHmOjmam5J\r\ndCbTeJfCCC18A0bvNNZSEcawmx8+ZjnB7xwM7vWJxEREeSi434NvHzCJ6TPP\r\njY9ILwpQoBnvaZIX2Hb2q9IB3CYMQ9wQWUlCzApOKkP6sgfnVJVFHEG1BohT\r\n+a0zOMLtc5f3tsyZKF41+xk1dsLP04j4AR+uN2m7NjBKj6KZ/3dpcKvUcrE4\r\no02NwsJppDiVZ2IT8SrP+TpwH9tM2j3Z60njZto+wWSa7Oh3DJ5j28TLqjuB\r\n59D/oZQeY+duZfKYqYUNh15E6odBbqLQ0TQ=\r\n=TtP7\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"ad4766965d2bd24e69b2e2e6940c960907c93c1f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.edf4b98d0.0_1666024769265_0.3481453866065125","host":"s3://npm-registry-packages"}},"15.0.0-canary.024ac5f16.0":{"name":"@material/density","version":"15.0.0-canary.024ac5f16.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.024ac5f16.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"470cb4df0fdac32092bb73cf5f4482ea4adca38d","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.024ac5f16.0.tgz","fileCount":10,"integrity":"sha512-x351XjUWfmMjEUkTc/LwFyBTxA5hN/T4kG5I+Q4QSaxreo9lskYBZsznSKg7P9XUvcB+g3Xmj+Jq9vdKgqdjow==","signatures":[{"sig":"MEQCIAoIVKUINnaAgTWp0OeQaoAUVd1oRW8q4tjXt/99kLBWAiB/d83Y91TVVjiquQnOT3+ZarJPXIEivz6atwCSowIq8g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTdoQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmojrRAAier8Lzi/HbSRPMzicEi1Ogl7dARl9fCibRXwyN1axQs9f74O\r\nLq77e14wo5QYrIXFwXesJy3XjWuqp4M3y+Jhw6917RsI92AgHMpBZpPDfMoq\r\nZcxGatMa9A7J2T+z+fKtoPtf3M2V5tZOHdJBhsoRG2CtrKED/4e/jAbwbZYz\r\nM7OQXZzEVmnlqaUYWb2EH0TWiGWreYbbwLGdGO0c1t001g+V7GtsVU1ug7ip\r\nBXX0oCR3krdkmhXDRLv9cCvP9s2oy2BuW3E4FDQDBhDFerbBVhBISl7ERA9V\r\niiAZxFWlkHNrVyRB2eHfQFjzTKNfvONSBOj12pjRgT1u2/4/8jC3jGJjvcqL\r\nk5AvgjCxNq5yDyrUL/+4Bk+G59mYNuUs9qpHwH0Y/f4mAK87+ZP7FwdNP4D4\r\n+u7turdR0zBy4A9wTtdEqF5ToQ3yRXojmOvFpPIi+Miw4wxRg1H3L6DrczxN\r\n/5F1ccEbxTlnuREWSzq0iUP4VLNKnS9+Al0xiB8l6PbxDps/9D4Xwv2Qic3f\r\nFQPsh/Fmg1nnp0xT9Ley7XkIrYGvy+7e000WVWkIUY0FCSo5cynHyfUsvAMu\r\ngoz2PQDU4E+SEBWAB20MeW7/gyvoRVPuWK3o/d4JfTD43+n+vB3nP1iXNl/M\r\nFpPujm4dWQX5xPqijKvkKryOWX4rs0OzNUw=\r\n=HBff\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"9ad8e77cff1167055c10b93b4082fd5b4e1d8643","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.024ac5f16.0_1666046480616_0.5669632165382206","host":"s3://npm-registry-packages"}},"15.0.0-canary.c8bdf6144.0":{"name":"@material/density","version":"15.0.0-canary.c8bdf6144.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.c8bdf6144.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1f69544b356cad8c5f76c9242c4320747a5f2ff4","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.c8bdf6144.0.tgz","fileCount":10,"integrity":"sha512-bctqGmxcf5iVjzr5dRWKRvcj2Tc3BNUx5sk8BBvsnl2kp0QJEkKjak+k/qaqxcC8C2XMDRDiFmbPAEJR6YqAkQ==","signatures":[{"sig":"MEMCH1XeK/fVTAIA0I0CIJb751NbFnpkYryBqiUJ25eBRhgCIE3ZvsotG4RE58uDaa7hzaTAa/rjDGg+RklaKZxMzCUW","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTu7bACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmopsA/9E7QeSvl49spZfQjqNJwtB5o1wTKcJJ0fR6+90BB97OgfHc7W\r\niTUXZJmDL8n8wSlO1KIRPYCszOzbfQ2OKsg87AAYCoG4bZn1aiXA0q3pxkUn\r\npTbvJUOd49cJJ2ucW04Fl5p9ymsni58OOVvhKf6XPSM3YSHFLHx9DZm500TF\r\nIaNY3oTJ6btJhJ8p1PmJ6WbFtJ/zSDeq2+Yq9j4LsH/FljPVtF6aEabfqaIC\r\nTvu1F+6uM/uwijx8JTRhHjgc4rZB+rmQintCfVyq+nQ06VuVCQGq/w0sMegm\r\nc86nza1MoXa8g27kFO563SM0LVsoa7vPQKgxjC3BZq24LcG7CJ7MSIrLB0on\r\nHe6oLw4glt2uAUSshmr32FEPY7caQJlSBsoStm/PKYmH7epuyu/Yv8SEyFKK\r\nAjyNLDiHIMwP6/8axLbcl6AV0SXmn2QoqKtF8UmpogB/nRa9BlgE8sYDOprV\r\nb9zKGRHApdMPZZTK3BSIhMkyhilimEYXX/Ct7nRtb0yyCsg+g43pkpFZHntK\r\nHGPhS4TAppIx0mQ0Cb3gQbT430BoREK2FieVes4C3mvtrU9En7zMWV0E2PQP\r\nISOHkhXqGblC+rRlxX5FVeCmm3ilrPfNERSRU+0UOv3RU9cMUKqKBrokTEwi\r\nEgd3j0jJT6YDzKzb9puMVz+Bue1ORcK6yYo=\r\n=LgCc\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"92f4fcf51598cb8f9b9e03a35332a980296c24e2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.c8bdf6144.0_1666117339210_0.1509373800294933","host":"s3://npm-registry-packages"}},"15.0.0-canary.bacda4885.0":{"name":"@material/density","version":"15.0.0-canary.bacda4885.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.bacda4885.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ffbefe0c4043511113a6ea9f705fc880ce3b0841","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.bacda4885.0.tgz","fileCount":10,"integrity":"sha512-pwPWAWklzZ8uAc5FZ4mfiu1BeXsmRLNFcakeM1q+ndBlpNY5waTChAJj0M2ZW8F9FZK5pG/6XOCUDJyvGYCIpg==","signatures":[{"sig":"MEUCIF1yT866xPKVos7w2JH4g1L/71zFgmDeJDl5zcnJKXFSAiEAt1nHWKrB9bM1zuPyeTqBbTS3ojY52VEwPL3sQ9Cg2Uw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTvNhACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmptkw/+Ne4aQSj2Sv6vamOZURePEkOQOwKNPQsIQSoMw2kgWJvztT1U\r\n5WxUf5SBmdM6KWnNjWLo6tdOtU0kYc6OmhV1ed8Xt8PHSJDaKYcbJtUc9kdy\r\nhABCXW2KNktCGBaI5Paz9kfk4zEHx0tlmO0TSg1hQsI7ZrQ2tlA4xNupZsVv\r\n3hz0R6Pa8lOsEIEgevPM+EIn/RqgXKBGQWM/9JvW9Sl03Dz0XKMwzT5XaP78\r\nP/7Kz2Jgh6XPTzPi3YkOLb2P60wKEepuoLf8sFVkcdToRyeFIQkDwI4Jektx\r\nmjeXavj6fOJQ7M/aRMC3bTJDqzcBOKrSl1AxKfPintPKrTMGzdtGe/TwBLyC\r\nRpINk/ZtQL3y5MHsvLyF6fhbNr0JqulnE1jMtU68nm0+AaXpWtSuiiTYJDcB\r\n9hS3pItgCORC+fe/zTQ7r4j6VwlrnfDBHIKj0QynaMlMhhZInk7tUhKLeF3c\r\nNSpUmB6Ue/aCCzhS2q5A4lTM9DAvlZisjHWl32mpsS1iax/KxWsg1z//CxCz\r\n7aEeA7nLBkQWYjTCJ7bfxTOnGYqI5Pqz3+rpDtcRCmpB22M+qONJbsFDJwin\r\nDK6qH3EkWgVN1827DcEwCvu7tSgtSzv3ds1/Rvhjn8giTHIMxtZzRoZbGIja\r\nDFhgXTptvn8Yo6MWeTj1PxLhyjHd9IuQEfI=\r\n=lyHJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"9e0a7dc5fb5e2d1554093d85949ffa6c2aaa33ad","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.bacda4885.0_1666118497673_0.5524760096417616","host":"s3://npm-registry-packages"}},"15.0.0-canary.92b2556cf.0":{"name":"@material/density","version":"15.0.0-canary.92b2556cf.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.92b2556cf.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ab1a24e45e782297fb8cae2f576f1f8ec239f4ff","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.92b2556cf.0.tgz","fileCount":10,"integrity":"sha512-5TtbLjwuAW9DeFWOp03RVemTi0ys8xVYlNFWZsBnI99DirI8Z5X8EHIYHzfqE6Uw18L67e3FcYjCuw599vKBOA==","signatures":[{"sig":"MEUCIFMyrrCFc/dHsc0nGyVZq+jOsJL2+xQ0Bt1R+GJVcPPVAiEA2Lcc6QloS9USb73GLvNl7qJ2Z36y6zKZvsWhPwHA6NM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjT076ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo9jw//fNr20NKchoJKnV5gHQ7bvDAplDiBTiKs+LM0unuY36C8+/59\r\nz76y7pQ15deCZieKEsxAMVELKe3P74wGH8CUThTDbu++joghXaMTzla7yVOK\r\nFyJbN1mI1Od7Up/90Cwz6WZPevnca6zQi/pNuXeYhJagpXcIemJ//RaUuMWp\r\neH7nhKrStw1rYg8CtvXJpTygAcYfD78KYxfCTgcUF4RZHuWNz2Rp0U2AELyz\r\n5QUcT/IlBOjs9IU7MXd+Glb4pXospP17RmNjhR5n3wdMuf/0tGw/xlXgArIm\r\nXa+Cwa3F51M62jpZXwxJ4MfxeQJa7PBacPDFE4LSRd1SljrFRTGtFSxQHo2Z\r\nOSfrniEEKqPESgdgApJxDRDpriCHC9tF63ixvpr0G3ie9nNWRSUM58bq0RKv\r\nk/7ji60oHXSSNHyyEJJZHcmSgBmkND7DKd1MSXtg08Ke7980y4UYgQVYriwv\r\norswUOuzMQR+tTmXuMDZr41U2VRKncPbxhgQPObRYYK3K7dN5sLS4l+gwm9z\r\n1muBxJRHXhl+1n7XBTmUPHOEPL3MG3YrlZylPQwdbpPNVMI9CAQdI70T8Igj\r\nGAyuw7gK43J63/emcVwK4JdjgbUZZpNYdQDQknhw73rpKpwopccDlnxpXsTM\r\ngPo2gPraeBuFTt5YpoU8vmzrNDhbQ8LhQKI=\r\n=/pWV\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"7ac326ada7a9c6e84bacf5e01a6d22e675dcda8e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.92b2556cf.0_1666141946161_0.39657302066565014","host":"s3://npm-registry-packages"}},"15.0.0-canary.cc804509a.0":{"name":"@material/density","version":"15.0.0-canary.cc804509a.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.cc804509a.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"79964a1755558af5ad4fe27637cce2582d8afd53","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.cc804509a.0.tgz","fileCount":10,"integrity":"sha512-DknZVuAXLdLIw39TUvLamS1S6NgK1smYmTUqUnZ+zw2mGpVBs0ai3wfShkbmqgMoPOK45bty39g80bY1PVwlGg==","signatures":[{"sig":"MEUCIQDF2wQnP4/6zUygpgtyncClNU1rgz64nKnzRF78aDfSFgIgSYdvkEmfGOXZIYJzAuNZJ9H4Vu1gLp2rUD/H3mLRGpQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjT0/cACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpm8g/+MqsvNW27P76x9peehiM5wOg6qYs/fh6tjrCO6o69fxnsWGPe\r\nTOFb8j7t5VwtfuyKSi8zzyaGA6dQhF3cudwJYIRoVlDhjmcx5JgfEggmEybg\r\nTnUeQQfM90jA4L2tJCPr7ogb8qaIZmlSyGPYQhht79l9T2LHpMXIVZswLrd4\r\nmU0aafRn+tjmuudqK9bz7ICu730Tln7XK7xG72JdsaX/bKf+G/SROz7gzPT1\r\nQTWssbd05XFy5P5CZwuBqM3LRUAPOqWAGPuyUf9BnkPCxXpQIzH2IzFK5rJd\r\nwzsd/Mb8WuPi0h89Ad375xrOAaKFF+aD8vUpTYS0mTfk/SsHu7IHowrYZTrr\r\nFaGsEtnhLe/3ckcD2u9AT4tvQRDsYFzPPC4TP9MCG4yiXWafM5y4cQ400AVH\r\ns+O7079o5AIUV34KvX3+foSq/ht4+VA3IRqbpWGrwkWk+zwIGeQHOw9DY8A9\r\nDX9aIqjOze/D4cnfydZ74Oz/j69B/15Gh1BnZH+zdIDIg19xyAP+YD5S7Ynf\r\nAp9ormx/o4JyeR9IwNWr+T2aBfXUrUXwqetFcyS3QOUbnfv3LEuvPz9LDRe+\r\npnIDPIUQqJdoXmV1qVejWPkb+oOsrG0l7VVVVwQOEF4AJMbrUt/AS4ZQfvrf\r\nnVsouxS32BwBsFepCoxlvfUWlW1uybjVPSQ=\r\n=ilMZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"e8cb944f6f2263dc4b4fec5d7ade2bdb5172b4eb","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.cc804509a.0_1666142172191_0.1852993816015165","host":"s3://npm-registry-packages"}},"15.0.0-canary.982bedae9.0":{"name":"@material/density","version":"15.0.0-canary.982bedae9.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.982bedae9.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1b45d24ce8484b3ae4bd88f006a853e7ad588cc5","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.982bedae9.0.tgz","fileCount":10,"integrity":"sha512-d79Ghak/Q2T9HznSF0fANWCFPN4ktwi3jmRhx/miok5trEX96mArvmgtmeSx54YK7mUiwcgbZoIzLwIsu8gQjQ==","signatures":[{"sig":"MEQCIFk5MzuQhzGYcy7vporZ7515U+G8brHb2N4RAUtQfLPlAiAlAZ+XDt3uemSFu4gO6qJRKtK3wKBKqzd+69T0blEzZQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjT1SBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmon6RAAiVP+C6Uktiup/gKuwYdcWFmd9gYDi6NGO+LaAvOyy+yn35H2\r\neBECwkDeobynsGsuiJPpiYavexn5kpPVWV5J+mDGdthiBchKdIwxiNIWJetE\r\n0vaIB10YAs09hGAJqgDtxU+ARvT303VF0urR5wNefJu3wxDA4N+jfwuysDSj\r\nNmJTdn1Mn7Catj0tyAXUpUxESLpnuY+2xh243+lR2DkCIJEhrPo5YA0TWQ/n\r\nFXv0V/brGLn7HXO075TUalXO0Ne5bh73kbhEoKf/bIdmcea0tyQB7f/bGh4F\r\nYc/TN7heiUtr1IaP2fm6nv0SDu0M4TryBXFru91OtDjhzIEi0NuO3p9TVy3f\r\n3LQi8I8JpEt/jQW81f7fbnUS+GgEvMaY3eRbiKbCN2O1WP5me/fyxN5lxkwc\r\nA4CkWuE7JdfIWYTBL+ZQw6I4WlwI8oS1KE+ltv4Ja7koqRWpMmmfwBYYxG1T\r\nNH8dJQlHf5AVY1gPz5mbrwc2ZR3Ljv+sECTrDASSqP691GffBdfKEPj13QBZ\r\nNb7H1GKeGd56llU6Y24bRxTJkXVg6xRIDxDoR6u6YHx9JV6rEOElbB7RlpDQ\r\nk8HYvAwVLMwRSpTk0hXWHN1lMVapvZWwQjVIVMkaMT9eAWoX9WMZxXPrNMFO\r\ngzc0MrKZr/mSIR89A0NuIPsOSHEQzlCK3Mk=\r\n=Dor9\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"247fc73217ef7d2438e876f1477d141e6970c9e1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.982bedae9.0_1666143361068_0.11535388249604073","host":"s3://npm-registry-packages"}},"15.0.0-canary.ee40081f4.0":{"name":"@material/density","version":"15.0.0-canary.ee40081f4.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.ee40081f4.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b8ced1f337e78b636e95a36d6951b83ff97131e3","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.ee40081f4.0.tgz","fileCount":10,"integrity":"sha512-D1xp+agI/1XA7/M8CyB9Vv8hWu9UJ3L7reJI4C/q+fLzEno7iWFhFCKYXnJsud95MiFejjf8RtWaJf6Qeush4A==","signatures":[{"sig":"MEUCIQDoKIPITY++HLHm7yj0U52ADBegI/Vwd98izF5WlKzbogIgZSDk8RIa4VlZBhGy2XhkovgdyrdUDLoh2bttAvJjJdM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjUFm/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrWsA/+LvhAr4ssDYxoCP3TWETFDzgr/NqO/j/WVuxQRbriM2jjDwIX\r\n9PY8uG8t6X9VrQQpamvQfO2CWSyg5no2Me6cwW0IuEeZkjUyVxgWWj5YXHMC\r\nhOIDPEymDrGDoaS+cCJg46lZAU/NVjjliUBaydsUkpFk5X2rbeSmBcuBQf7n\r\nmWA4nljnuR2PD5v9ugHSpxKfFh3uccbLMWAt4rhONJ7kRXVLCL9VDnP0YVB2\r\nIOtUxf+6IK4iQcVdyq/hTSSe7lJxFbxe5660CkgTGBfkFBaTfoR9odgu+9cQ\r\ntRFjn7rElvavnqsgjEBcd0zkMExhQl60z8DsCZ4mh6TIMO8+VMntsHNf7/mB\r\nSbtV10G5rUmGPaEJ0zNtH86ps3bLE06lAk/BhpIwM9/6ilbc5TvurEhRFzqV\r\nzOczN146jAW4q3+YtDCVXNqB6uSqmXKf5FeoEZX/hqD0Nex0KaXv/AuMh3XB\r\nkzyrQlmD4gWz0Cr5KecS8sAX3fucy4Pxemb+XTq02stR75Vf9ZkgOclVqaIp\r\nN+1g0mRpxcg13d9bLpRwaSXJoZnjD3Vsk1s+15cMF5I218a0M67bi5GdFAtT\r\n+JTb206NWvsqgtTITwoJVaBoEfbTs0vv0KnK80FoxDjCg8ZkxallIxvoYk9l\r\nA0xyk4KuOYnTjCknQe8mdvW1L/ahFoPV/XA=\r\n=MgYb\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"04ad48e358b6eef4ec9ee359b0ab906b30425504","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.ee40081f4.0_1666210239138_0.22088220303909667","host":"s3://npm-registry-packages"}},"15.0.0-canary.98f1b54e2.0":{"name":"@material/density","version":"15.0.0-canary.98f1b54e2.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.98f1b54e2.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3df75655fe7c374f9ad89eddc1812352c1b48df1","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.98f1b54e2.0.tgz","fileCount":10,"integrity":"sha512-Bg1yD2Yz/ezxyfdqVx9O2i2sqt3nXgZFJCGXqmnBg0uj7WwYh2aiCv66v7aDSl0hrOmKEnNiM5xG3ECVLTCtJw==","signatures":[{"sig":"MEQCHx4lWRVe27nfuYR88/1+AUC88tgbbveJa6P5ZwlcG7oCIQC1Cv3EJopZnOU9/9z3JSXtpFi7PSFAjOMZDyrIzZ1bBw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjUdHyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr+CA//QQ3BuTqJgtAwnCT0Ip2tqp+9RBrja1Dcs4Cv6Vc4MljUSD3Z\r\ndxHb9OpJpJrPQvRC66p4VpvhcTBdJpR98yKV1fcmcS1tagLhDNnsUUjFF5Dj\r\nzkbD80+lX6fBAoZqaES7Y+0UcGSdjFrLgKHMEM4Idfx9/1CxEFNX7738Pe59\r\nK5ByswhjvwqCzMVt1riq62UTSG80WREwcvNRvgXxXpPKszWGiINviHV/mdbf\r\nkGMLGV1Q0LpaWKltBqqCKNYPWBQ+jFnRa6oX+gAmUShC2me2f5aWZCT6+mK3\r\nJGvBLn1GLjlg5FBYhHANJJ99usOam2Vh1oFAlX3cVkLKRo08Rdnzr9uYhn6s\r\nLHqSm2cBV/Q4XzrBPel9dtmrsqua9mvzqwGQ17LGyFU6VaRU4HAvyOxyfk7V\r\n430AkuHc2IfQ1Lzz+xji9+1T6lKNoaFNSvfyg3yEF+1WNGlBAgHTslzujUY9\r\n0MPTQVqdFSklRa2Y2CWyHGhAoyAn7BpGDCC+5pVupv9heVocTv1G3WR2ClmB\r\ncoV+SFoGScQwPUw61vcqClM5fCmlV4bSjL7MbMJfA0XgVNKv4KXGwwryerr+\r\nAH3x1FeqRXZs/nndlcPuW0OxX+1M5vuR6K/tMlPFYccViBID+7zxO2ytjkh7\r\nSn2RM1ve2F1ar75oXAwKqAwGIvu0ySTcFYw=\r\n=DrP0\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"aaf0a191532b3357cda509746499ff62e3aaa47a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.98f1b54e2.0_1666306546565_0.380159181031714","host":"s3://npm-registry-packages"}},"15.0.0-canary.e74b7ba7e.0":{"name":"@material/density","version":"15.0.0-canary.e74b7ba7e.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.e74b7ba7e.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b658fcf0555cb6bf5ba29d4608d6aae5562e1de5","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.e74b7ba7e.0.tgz","fileCount":10,"integrity":"sha512-gQnZ8/ncgfduauphdnu5CaALBZqDzJDj68v+teCwHyd7TvG9cgDUMHESrOrFPkb3dEOfJMkPzVNm9FsIA7rCmQ==","signatures":[{"sig":"MEUCIEXYW13cxWdC+ZGAfdXNMBy5Rotj8gvYVjNTwu9NR049AiEAntq96fPdi8tGxhYI1OXSczopw48mAqtfjifMdQCZapM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjUtExACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqf0Q/9HNmNwn1uqc2q9u191QxXNiHE8wXqJ+EYlxEryTI/xIMSC+41\r\nN1knQt41d86pKV9+l5QVqCT7tazwLo0xQJ5e2GQPnXE5yT7b3xANHvT1HVnA\r\n/ilwT9up6FvQldS6C84lfozMA5vxRtauVGLslD4KT8SCUcQmMn4KQGuJ66EC\r\ntYGBua6qqOUaerKcJMDiNSgANOqX4+1p68HPLcBbGJdiQY6NKMkCS74Ml9M7\r\nJHQpz1oJawfz5yeHw5bX+lyzV0ygsP7+v1isgHOxTXdwYBiPRDBeiSSxnDhl\r\nd7YoktPX3hILsRZChk8a635Xyn/+2ujZeGlt5JRF4ibXRYtk7OcDi74378va\r\nebyyh6UVovJN5wWlhNwpaFGkbz7jirZNbWHnNwIAVFj9mfwPuff58A5eaGLE\r\n/vrR8C/2GW+3MZrGFwORZ8jDUC+mEX523tBS4VMwyo2miH8AqWWYDhFXEsgR\r\nOQNzamz0e2qLdPCdUYqbwQbHCB2uoVA+v9zsdco/Sw6dfpf0rKyB3Ip3HQ3/\r\n2cvBB5Q9d+Y+T9BSoxCIPRvF+DQgPSvYohfcdZDxmhfzBUaJxFQwot8aGAxF\r\nbhFBNEQRRTvbbMuuqLM37dq7QnPP20iFI0sG5XHATIza3aMoL4hqEy8M9ZNB\r\nwS0zPY0jjMDDXSZxIVSHwC8lFulrbOjRjSs=\r\n=Pofk\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"e30e36776ed9bc98d53938cfb5e48bf5d2cc67c4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.e74b7ba7e.0_1666371889341_0.4626617440692904","host":"s3://npm-registry-packages"}},"15.0.0-canary.ab55c07d2.0":{"name":"@material/density","version":"15.0.0-canary.ab55c07d2.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.ab55c07d2.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f6ec148747c747cb945699ea8dd61daedbf28968","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.ab55c07d2.0.tgz","fileCount":10,"integrity":"sha512-c5X5woJRP+/HDiUZz3fnslH6YY4ZTolanhtbHwsV9qWC18AimU+UXZXGuhShgecV0JhYyD+jhU1CpVoF7f/VjQ==","signatures":[{"sig":"MEUCIQCOaIiHpwRh8k8ei56IsAKKu15/uTBl74MTEJ+8vYrq4AIgMqeTLpQWYGNsvs1IZg56NC1GBABo8mFxN1BL2I+DMeo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjVDPmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqHuhAAn2STBgkuGuQfRNigbJsrel7t+8DXyKxNHd1toD5tMCPy1TaP\r\nCuJMOl4tDxRRRp1i/zEXbZPZsQj3x+PgvhC2Myq0ilpLN607xt6HMCO4ZAhs\r\nBhpMOEyEScOalfoYcIcI9s63iNgK9UqiKc8QrkR2+vN5C98X2zx4dzwxMnLV\r\nL1COUh/93ZujxuRaf8Psm3Sn+fcqTI1EZ4Z97c4qcsAOkijvjPwetiWYY/IN\r\nGfRXF7HU9ab1wAIYLN+6tDe3LSGhVwwC9+ll5PiQPtwJV7QfmrDIvHY3Ytbk\r\ndVVtHTV3P5ZDGioJYHA7aWNts2i263w1b9e6B65BbTRp+4OCORm/G2sWxTNP\r\nsk+nHQW225PPYNmf9oqEncdtKhnnvfT4AlARg+9UZ5HbHsIH+FbbyrvUExfe\r\nVlrTs58wwlM5utmhxAnlzhSxyRQh7wASa4yxGoWjVRGV2sqPPYf7tWUlKcqJ\r\nsZude6K78eecfDceyYDD7KoGB5BmFMW15a7XRRKQmo+uK2GA/PnH2yE5Mjt5\r\nDoYKlNzuNMQ0J0eha7niUvde9aGSTH3dTp4nQZTjw/THJxxmjPXpJsCL9gUR\r\n6YilA7HWustA5oH/9lGr3irNcG4BQO8v2JRsVlhyJAQVtLv8/WSkHgqsWu1M\r\ntnLrn+f5c7hF63Hqo9uigtEOz4H/NBF1Q68=\r\n=EGG6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"7fb32c724b7903a8060cb457aca1f150a15590dd","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.ab55c07d2.0_1666462693979_0.7586391220048692","host":"s3://npm-registry-packages"}},"15.0.0-canary.fc539db34.0":{"name":"@material/density","version":"15.0.0-canary.fc539db34.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.fc539db34.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4bbf5cf269ea4639da96435229f2697849d4b947","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.fc539db34.0.tgz","fileCount":10,"integrity":"sha512-GYUMAoATLVYsNcVAWmNNglHynsECx4cwrrDcODYRptZwD9J62r0e1nAxjzDqUrMe8iBw2ORJWTPymx67mNeu7w==","signatures":[{"sig":"MEUCIEgaGaSX4c7zBb3RE4tL5bKJXrOVBXNOCadSaTqEM4T0AiEAwG66jhrRdzyJAYFgTiPZg5maQfC5MhnKMJPjhTqJ3EY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjVuBDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrxeRAAgQg1XDafGMOVEIJHNI8h7hZ7ocKwTMtHu0QXjZN0k3fXiKlm\r\nhymiS3t7Z61U1zem9+EJJ0GXdHPED6nksEPPqJ/Rek/qOmP6MeWJmg/XWNZw\r\n01GMGvm3Vx1MJb3pXdsyi3CDLjfbVwZoWN8N2cyuknea4jQVM7YWuPC89lmf\r\nP/5++lAQHYrkOJ35KgC692kVHmRWqxCtA8uDMW+vdA9/6H1AyZZq/ZNWUl6b\r\no80qnnEnuGBi3z1QXYlMe6pzI61ahYskwYe5EY9decyjlLF/yDDqgfPzhJX8\r\ngsnUYubAERLAHJMlH2ittzhGHzne/Sr048i4Ph3f/1jhTR2EF+BeH0XgtG57\r\nbWYqT5rTjw7NhFm4aYZDOzJAAfZHzip3GOUkm2+Lo3Y6SZYBOBQ+GaETr9rn\r\nqIVtrO6H69AfsVqtWgqxRdN9vXytIiK1W5T3ouAZBwQSlsjAoz00JR6iWKG7\r\nURLy5zxPzdtAEtO8LZUvlJ4uesnoN/8EZDFz6uxHyY6TpLlaWaocKMFaSi++\r\nZ8PcOyJaiUVLcQVszmboYsL2gRCzYQeda8A6AQiCgz4JHdR1U7Et/lXONViN\r\neBH30fzk5JaAtLiBy05BUwu5sIFSZK9Q3ysAhuFqgGT+67b7ZbFH+58T1DDl\r\ntDlI8t7DCvqP7D6fO9GU8UFFI2fFbidjVak=\r\n=cSew\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"18c679c73aa42d66117f8f1a88ab7cbde6f2a201","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.fc539db34.0_1666637890849_0.7826311732311213","host":"s3://npm-registry-packages"}},"15.0.0-canary.e340b04c5.0":{"name":"@material/density","version":"15.0.0-canary.e340b04c5.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.e340b04c5.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0912142eef7b73cc306255e7cf44b7a828fcf4ff","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.e340b04c5.0.tgz","fileCount":10,"integrity":"sha512-rvbSME/yTfqL7Cphkrf+sJWIDtO/Nxj3nzsCqoc7iWGo1gJ3x1hr2WB4MG9ymBHOOwgj93TYBjCICmiWofJvTg==","signatures":[{"sig":"MEUCIBM9MWtFCGM/+YfqE/v2ZEPpp/N42xJgFUSkY0SDhvPeAiEAsdn5ZOYe2D4aAZFWE0cmxWSrjAFU9FwV28njtR3aaf8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjWHTCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoNUQ//Q9zdWL6gmUW6EqfDYMbk/pVfb3cHY4BTxKPjKXq878VyQjc4\r\nWbKG3ML7l95qmbRAW7m+b+GirWVaFD+t7sbJqKBdcWgW6h/mZtehEcLt/ZX7\r\nH4oVjT3xI1H/dwhXZAEkVeLNCXI3DSJz10dO8gZhLwjC+06tmEELtOCE05Ui\r\n8s3PdJ+NQ3MvSZdHOjoPFU451MEeF6Ck9YqA39zQtz6CMyg1oUNG/P0GwFNr\r\n6u05fvpNnMXKihB0v3iMasqE/EH3DLBcjIJ2p9dTfXzpe3ipw/uYec2aqeWU\r\nsZ4EA/1QY2t3LPrad8AnP65mkXdWeePsn77QsFg8/UNPNux2x87p1KkpI/nd\r\nUST8Zuv9+kFUIMp6x3d3cH/9Gsi8f+LG07RRz3O9Bd4O+G0LqwEJafvH0mVE\r\nII3AtPuHokpzmd8YqfMq5Y9QQALlu7jUGLBb25/Ak0R7wQR+RSKuMI5CSZDL\r\nbLAR+v24m5GXufDjAMig4WsVu+GWFRf6qg5prFkwh+XwRNkaLRtZaydrmROj\r\ngVWhALCLpSCfcfLHlLZMI4edc7kgBFkhzpcnrUCoC6PPqYURwhJ1UwbhIa6W\r\n2SssYGZLvUajuGkN8rHo+nJ7RrW8345b7cogJxjjEp51SrKtfDJIS/3cpatj\r\nFotA/W7C6xnwv0vnvlmYy2bvzmP7xgLl2tA=\r\n=qipb\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"f3e39db57f42dc19c08bf6e97cd6918a3ce32dcc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.e340b04c5.0_1666741442191_0.6858652720445035","host":"s3://npm-registry-packages"}},"15.0.0-canary.2c1a8f8fd.0":{"name":"@material/density","version":"15.0.0-canary.2c1a8f8fd.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.2c1a8f8fd.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6fc29bd72baacb6451d74c1f23b8eece13fdcb0a","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.2c1a8f8fd.0.tgz","fileCount":10,"integrity":"sha512-jlnzmByXNv7gFfUNq63Gvn/uFtpBdztTOVAcE3k5QrFknkzhkj5Ruy9L8WWGpKLgLEDd2J5MYGbYBAYFPvi6OA==","signatures":[{"sig":"MEUCIC8LpWMlwZKwmMd90NsKXhVpQD7zUrlF83i7IXQkBXtGAiEA6hfwdF3x2fi2pwF+ZJ5vKXwcqUi9BMh+Hbh94A8dYDM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjWW5tACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpo+g/9GvO7bKELeON4S2NdAPzTbswSIETkTo6+URQZWZ2BjG1IXSVT\r\nk+s7ucBrYlCcZV+8UXKT/xEebSDF4TjvKEdu2Ujpaf0qJYxBaGlDB+yiz8qW\r\np03xJW+/l7QUIqJUt3acotRXByhKx3NSqA3DGN60iTFKeYYkivdVD36T4qKk\r\n53mQOXUFd2xMeowjF/ry3YTcetVLzZIiMSFhwLD0MUJKv0r3Su0aXOxm+8vS\r\n3DaNV9XvCrTDcP2u4q56ECnLTDIC3e5CjgMaj4QVcoh+POqpNCqELSxjfouG\r\n6jDQajdHNdHMMORAHjw4aO2LrByO9EsWoBFKqzNEDX4tNJiZSm225iXzBBfX\r\n7H6iZonmixBzDwE9Uh7WFCagmbnAm3Djy0TSAUX8bXJ1o7DtXbVd6mmMnNQJ\r\nhZmGDotKdAC6xd8OipgnyedHlxx6ZQSXtyofKxU9n46Ao0jUA3HNHMUtRGkY\r\nK2zFLqkgcnP2apL3Brn+0nlxwKrwNa4R42IgoIjiUp5yEz7TKerxitUQjzzt\r\nGboU5L442Uauii/N5KjniRYK0csAZ1ltGW3qcyLlpNZzw9hIhdfE9KEv4irh\r\nnZWY/LwMS5YHniHIvlDVZpmaI90MMmIYsD3LROlPDhT1tBZLfUo5ebWs9zMX\r\nUABTAVx8Nj6hBvRZr5Pu91P83Rpml9pC9tI=\r\n=nzAD\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"dbee023b5e37423b8695520d95f2d00d884bfd5a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.2c1a8f8fd.0_1666805357104_0.4783659645055305","host":"s3://npm-registry-packages"}},"15.0.0-canary.ecfee946f.0":{"name":"@material/density","version":"15.0.0-canary.ecfee946f.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.ecfee946f.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c7bc8664a5c98421bc0b9118c706bf3c5fbd02ae","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.ecfee946f.0.tgz","fileCount":10,"integrity":"sha512-WhhAb1jt+1VCKMbHD3XDmgbEAAzVjOjJcmmA59rQA1lbXvKn7ZSDYPK5meRIFUjGBjWh11B05tdkMOHbizeI5Q==","signatures":[{"sig":"MEYCIQCZ58fJvf8Wi18ASRT1dB9kb5f+T89fWgObm4x/NxBvWQIhANdzmGXHCry6u94jIfwZOb76E2/KSjekmdOUXJ7NH5BM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjWZULACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpS0w//Rpx9VwE9xtANiMBqzQcIUhu5iJODqKHJ8zeKBfZnCmSjdEjR\r\nzHu42L50X6G3bwOkMEHljiu0497xALudPuJSodcee3F4HRCC7q8pNUDfKE9T\r\nd72eKkTSn32qlvBlxXNS1VJS059TdJqCbJ1S3FG4QzPUY1AcryCYjBppvCXO\r\nmGpmOTzSr8raSK5TN6Ms+RHrKcYbGvjjMhEFtHTH1T0F/DEXAJCDrhB6RCGu\r\nW6uAutI0kwwopJMEkOCd9NQ3GDpmDn49c2oB8oR53J3Bb7o5jbs6yDmMSn1B\r\n7TadcWvpHot8OoCLWFOtQfMPRoNJGffm51wGZihiSZlYRUYCM/fRRaGGhJ8Z\r\nEFm2XXppa+jOVZeKVrk2x9ooEZBvI5q+87K8+RI7EvBUPQBoIZDsuQHCmyJH\r\nrmnaikkFI/DWrdElxAUqOLWDKx1FU/yhGBCFWKoNBLmyInLqqqiaxk8sj/FK\r\nAjs0PnWz1l4pL99+st0+R3oNGBzfWMHd+CTRXXVJjrSerGMRZvB1sWo1PIPv\r\n7wEQ26JdkCcgQ36y/zYLPkAUBUU2PXeVb+VAXGXv2lBG4ObsL+bn3jcnrr66\r\nJDc1+viLxKhishIqWNBrFsCZWyy5rZVOzTR3aqpFI8fYzlM3Qs2dVirexeqO\r\nK7OQLeV47O2yy5I8uKXMJuyMjuSzqzcIkw8=\r\n=LZ0E\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"dbe05d725a401275de1e88f9d5bd6cd2079a0047","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.ecfee946f.0_1666815243503_0.4401342499042218","host":"s3://npm-registry-packages"}},"15.0.0-canary.73ca9dbb0.0":{"name":"@material/density","version":"15.0.0-canary.73ca9dbb0.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.73ca9dbb0.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fb9fbfab50ba19c59132b42a0dbc672689b74b1c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.73ca9dbb0.0.tgz","fileCount":10,"integrity":"sha512-bQts5jT0eG5ofMu76eVkngLKBXp/udtUBYzHRx2A51T1Zgbq94tkKMtv34GgVz3TfYUDfb6lpnEb8zobluokWw==","signatures":[{"sig":"MEQCIGvVfCon1x+J550j1E4Da/u8AudH5xbCTHpE3bB0eGA4AiAF7kzXp74EvmmwtaSJ3cOhyIN23f6PlJ2VQtz8ZaBsHg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYAZrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrzyQ//Xxql8682lpi2fM4UGFHsyeOWWMjOoa859YCabT/OD/Q0eoPE\r\nM7WkG2bW8uCN/sRbYvAlUuSbIxfIPqjL4EX4yF/kBsoFPAHoz2Is2Gsd320Z\r\nJyVrZ7FAlnoVq0seDr8AYeeWvdQeOFQ2OfCykaF46bauPxk+SRxwSPurXgkd\r\nBnUfdSY+F3wtFb6RHRC4vfVZNE58xlD1FZzb0QOiqIy48/jvd+vi45ZYBw9P\r\nHFIlhyXkkJn/wKfNdgB8w9ZVAlwnXSPfg4wO0nbgZR3E/MiTllT+vhK4BqLQ\r\nNGd3x7JYAwZaZdl6u/Ev3rVMK25HF8212Bv0/b+J8vmiK0byXkw5pxoVZFnz\r\n9Sdrigk40wUl3ZzpEWKPdxQGA3u2U/D2tnXA6BKuF+tLrKSn+/deFRhNU+PO\r\nRFom+zS0Jh7A4PoB1jVNyOGXYj1oYSGHIXYRIwrfJ3XO6Ht5DmcoQvIUF5yd\r\n51/zXyGax1t9bz+Ww7dIz9CJPL8+T6YHjJ7LMKv6BXuOXEH9PUoGnfvYkXxq\r\nxAxth+CpabPD2P7Wco1ll+aJ1+KLRg8OXrFz+wz+bVXAHexNk4iGA3xP5WiT\r\nxeJo44gftGq1Su4VS0nI0vSuCy9WNrG7fuKToHFnBHvHUcf7CsudkUBKzqJZ\r\naG2YvDSWpoENKgpwhn6RfoNpQKp/EVHv7FM=\r\n=sGos\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"3b1ecde6148e6e8d98c4b0c8a4dd2ba56e95586a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.73ca9dbb0.0_1667237483532_0.2087747620172944","host":"s3://npm-registry-packages"}},"15.0.0-canary.357f2e5f1.0":{"name":"@material/density","version":"15.0.0-canary.357f2e5f1.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.357f2e5f1.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"264f7440881162a798d81eb5675220f813fea68c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.357f2e5f1.0.tgz","fileCount":10,"integrity":"sha512-tPCvzVKQOOTgrFBQh40JDXEvw/CaQO2qr19IS/daBZ2rXjlAE+oAZdlY5zHIQG75/LHg/d5E1SkgCWRiQkUDWw==","signatures":[{"sig":"MEYCIQDqfiveWueVJbUwfscAMoEKUJ8EdTYIJFN1HbwfA5gxhQIhALVV2czJGFHNcqdqBOCYc9phojQoMt4mYOxSV1ggo3rq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYBhsACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr3zRAAn2xi8SKyRTaOCU4/STbUl+O6S4zJiZ8OfWxvoeZluExCpJA9\r\nLr7R8ta+6tRzUqneYimolm0DJG5Dy0KYTtpc0KBQ5xlbx6zRyuFQ1hLzKavy\r\noB9ZMMriZm8+q7/PoORTROMvuTx5L+szW4ZQxdqAlNjeDmFHyI2GYlpJ057h\r\nvsBTlDdkuo3VfUQOegXUmvQcVfZdWxbP6jNS9M6PQhJ8ulAs+NAg947W6V2b\r\nmZRo0rB2PMduaGoFLNw+zKX2Oc/97LoGqzRu7lKuiWbsBh+K9RCekvEZKNe2\r\n5fBMoam5R7KikgghhGK4PvitIYjBb15+90pvQPvHxlHO0qRFsYhKYUWn/hUv\r\nTKiilaeVwqc5cqjQ+zUO9VT5ffkzDO0fm7sDh8xEeQsmoboD0UQ3hwsI/ykl\r\n4M6cx2NU1Fszs76ZE1vKVrmOhEt02+zf5BPxsj4ZjfGE04Jk7dAzlKrjxfZL\r\nw4Abiaawek9ayUzTZBSW4+Jsp5pp3u+jSW3IIHA2mSsr2GG1JJEMIMFXuBcr\r\nnWH5wR34yt8IBLepARXcuuFaVA6hhUC2zNGYBvDLyQMnONRURKRMPINew7nH\r\nOItq8ndR9guURnwuvxXbANPQYrb+tEhGgBIswRdLLBdrrySpPI0aEEv9P/na\r\nu9a2va2+vzNpEnFgbfceDlYG2hnKz69RPY8=\r\n=wJRp\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"7f8af87642d395b497ff80efe06544dd459b947f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.357f2e5f1.0_1667242092044_0.393488141321126","host":"s3://npm-registry-packages"}},"15.0.0-canary.eb103d4b5.0":{"name":"@material/density","version":"15.0.0-canary.eb103d4b5.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.eb103d4b5.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e18628099d061434fe496b873df088cd0054de19","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.eb103d4b5.0.tgz","fileCount":10,"integrity":"sha512-OfO0X1Bc0+oef6PZe213WHXA6nGd8TMojCt422LldkMyvUBFELydVag+hU8CRPO1tonHUC9S71USDrs0rs5BlQ==","signatures":[{"sig":"MEUCIFhoy4RQdhJl8a6Y3cun4HKRdo4oEJDrCJA0S1Y2STwkAiEAl/+L5mE7ws9i3paRr2++rCAfauo9fpW4sqDZo0FIFTI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYCgpACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrAGQ/9G2peSCDJ8Q018wwDAjlCCGR70+Pc+q1pRDSR/7GHlsO2XCY8\r\ng2h//ZaQdhXefelG4Sij58sbj+8FEcg8cW4w8pIzZWKGyLDszdu5Kf464p4z\r\nGlIhloBBU06+tZ1Kb8p+/thSnCVJiumZhpGZBCoywxeNvfPTro25tlppxs5G\r\nIyr0ttiuGytX7NkYnrDv8Epzmy71pbaGpgFjoegy+zw5VWAxxGqxmIJigkAY\r\nYUB9JpNILV7sG6zjsAiw50TDkxJIXZCKY5+jhinE8OlMNsDMYVWkLP6kjEWb\r\nwlQLwWKut101u4nLclhuuiX5LmnEp+zrYFDBcpwg6FPm1byvBwhPI9ccQ1TX\r\nvjihLLKJgR3R2FKP5qZLAxCkFkPNpNR/7Ya+0QLcJcPb/dipoK19dRcXJKwH\r\nqhyHeEA+Xl1kU2HoJNXd7PDGdolT3t7OA+XFyZGsDJwMjVimnlM0jqWNs/JU\r\n7ZQojSxywcmM2a61pU3KMdCCNXIwbpO28BR6bV3jH/vjbmXt4lnwftJ8pBx0\r\nMW0bbluE+o8A279m48aKMyI/RfGZsLhQJPS2n6M7cK2VydlGzEp8JHK7y9Fn\r\n37t9GL17K8iTbev9Z/U/hWmFgr3bQd/yBazLOAPNWKoV9aZyPplIO9u9TIvA\r\n9RgescbtcEGZQXfSGPVanjHdots59YdqA78=\r\n=SSk1\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"6fd82c2abdb8567ca00c6847142375ca8ac18b90","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.eb103d4b5.0_1667246121806_0.13308937577664381","host":"s3://npm-registry-packages"}},"15.0.0-canary.af5f01223.0":{"name":"@material/density","version":"15.0.0-canary.af5f01223.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.af5f01223.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"18aca366d6f40f52d9b935876103cde1815c92bb","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.af5f01223.0.tgz","fileCount":10,"integrity":"sha512-AgXT5ZZFThwtQmtnF1fm4FiU51d2w6HWnPqHXwUiQyhG9zP64k1CRrbJ8wF0ftB9Jl7IK9Rs1ecyC3fIaI8dfg==","signatures":[{"sig":"MEQCIADU1KyIZJMwIJCiShUarLbQusFmq5USsa+pN5hv9IvbAiAo8MJUL8UA7ugOen8Cc/v9ll/GSdgV9tennS4R60egmQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYWcHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqp/Q//XD+ShahKwIkLm7Mxz+w7w1nqMhfaO0rEzOQ/C0WW8Xu+YxG5\r\nb/lpkyReJjlGuI3wx+i2WEPEET/mkaZgZJgDbrDtnxcPI74Be9tCbgx3nTSQ\r\n7WVB9eBNYMPsKn2iZcRj4U/wJXzIDlBSb2T+IJbb+pTVCyiSYokrbfR1wxdQ\r\nyUHRYe1ENkIpVPpS8zyqKZc1YIULyKb6Jb9yJujou8Hdzt3PBT7Vkom/I2nW\r\nNAw/bB0BYAArgsa1Fi9ZzyimJ+wWvg8FSQQo2zhAds5GYmDHGyb+OVtf71J8\r\nAylYCjCg1Z/5r7woq1sblQSEqTjmSaRl5L1K2mQWd3jfa7SYRkAm9RmHpwCK\r\nD2kJX+yW0TFUGJ0g4b5qHIEdxv6p6/LvkEUg4vTfDFATAzVj5hNNQZvkBggE\r\nZht0dIZwhMc3pNG5URlQB+gVtkNppfsCq5nTGkpG5WNuQ+NB6Gzmp4Ul/Gi+\r\nIZ3r5UqYKModRIMsL37V4nKZ35GK34OPUQFicJ2W941u4N3pzw2ijqSwxWQa\r\nu+iEKlIDJ+wMo3BFV22k06didem0yghoQ5uWoXrWzTrzrS/oxuPfx78a7qFx\r\nTJ3sNQ+l7qroGY0kTVljQcB5Ez+Cx1AXjTYigvJe+8T6W+o/3amd9chWVHvn\r\n2K67lCXpPY83SLRdKDmFgtNeNC/+3KY5fxM=\r\n=XcFG\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"cc7d8ea77d18e30bad947332164ac02701e1ed9d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.af5f01223.0_1667327751636_0.9467904291986102","host":"s3://npm-registry-packages"}},"15.0.0-canary.58733ef41.0":{"name":"@material/density","version":"15.0.0-canary.58733ef41.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.58733ef41.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"586b90b1d8224c42bd3aec55f2cf997d9a03bbe1","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.58733ef41.0.tgz","fileCount":10,"integrity":"sha512-Phvf15lhvnTPh8WyIRJn3rih5J8vGzuDSzNGJtuqT1gQ0ukNbWvNFpNArc7Wf55+Kel2A145rHtWE9/NOcPQGw==","signatures":[{"sig":"MEQCICViX3R0Q8lM1+aLWwITYvYPUFuwpt5qIqiaMu7jThQAAiBMnLJ7xyLHT+QCEavkyCJkbApi+NufI9uEbMJF/rW2Fg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYrJlACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr5mw/9G4aOMmDuhlEtGqJuxt/NlBT33Sva+FnhhA13TvDU5BEVAS2j\r\n9Ez8lUhbh817m0lYMDydMazX4GEACrUajfYGYzXtdul7kHgdmM8SpEXW9QPo\r\nxC7OQLsZjtiIgQ6xacfJ4N3TWYXLH6340dGtMYPCVC/yrjLl/V+YqXQ68tOo\r\nDnXT8rzI7nkRwI4EexBJK0OiCWRWeoH0Qe4KqSAM2qHqpb09Z10aHwrMgRiT\r\n/ndPtL+oNaOVVJuLJ83+BVBJKvT+12zO0md0Hk13gZJohvcFxcSE3gTpb3h6\r\n9PkWyUVPuD18qaJdlhmoZ4JWDF0I/nND1ltw/J8IxIJjDOvnpcj89sG688fd\r\nKTyc8mptKE9URABqCX/bdLh0VrgKX1v4UBV6LS9iN9NcxK8HjLOwalkIj6/K\r\nHgpOPI1/wMgViiqr469VuzWRv9W1WVj3rOx8Ri8cctgwouLbe2pdgZPnH4R3\r\nWX/f9H5uYJFJFELTvVE+vWryXxWKM8rij02IgKkFXHRpMHi+PgGO7+gEPSjW\r\nQMmTVm+VcFTNcacm5k1C8+CPw376S5y51KtH5M70HiHcyu2/Ivy1gFFNJJoW\r\nJB/VlvOz9H+I97rN1dXwSBOIjnHowN8SgAzJGOHlj19s0Kh6KHOYOLqrvgt5\r\nQ6/lPViRO/WJwJhpEWgkYaZsEELI1D8UHDY=\r\n=2q5G\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"7754bbdf66b8fd61976d3dbbe04b991d9dbc0caa","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.58733ef41.0_1667412581495_0.8116934767895987","host":"s3://npm-registry-packages"}},"15.0.0-canary.909b48215.0":{"name":"@material/density","version":"15.0.0-canary.909b48215.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.909b48215.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"154759eaa96bb2bc55542ddf31c4bf418f837123","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.909b48215.0.tgz","fileCount":10,"integrity":"sha512-cuv2jCP7e+pr4FcOlhzkjAsWTLLCC94JwdKEAxgCuQO0R+EC8XtHcoU/Uq67weDbvDb4EUKVqluQGwA/Uya5LA==","signatures":[{"sig":"MEUCIQDrA8Tv1AwFxPTCADsvUPIFXWY5AYxPtitrpM8IWNHCVAIgBwudeXCDjVNOrvnwQmpfC8dQpo+KVvaBgUOnFWIGUl4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYz5TACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrN/Q/9FRE//mjKRMj0oP9292yVI2f56uyKcoci4wFU1Sif1NS1bRvo\r\nP7wINHy8ArsfZs9sSTO8YN4iax3Hfg2hVUEYv5tVGG5aZu3CMwVmCyb6FZwL\r\nNHP1FjfU6WO/WWdhQTrmv7MUlbpW65GcAE7cwOj2nGMKC73S2dAcj/FOjzCt\r\nRuPbUNEC/Al0H48G/b97PO2nyxQG/+mJGHDAkSMVP9YM1T8DOzpTBfyCuyYy\r\nSO2f4/YLHH3jsdH5hjaz0PIP4HE8djyhlzYa3ZUtU5D9pcTB8wQWYJkzKVen\r\n+jxUD+uvDLCTK3AExCfoJwERNFgKKsPB6YXVwmn2hwiTTNaNV9t4vPgqtFNY\r\nMi6l1AxtOskZjfMzS9qAh4wNXU16eP77MLIsqg6vprQ5381cNZVWYLtlMRkg\r\nkuAnv9QeoXHdWXHdopdGDMHMgxqUIdHREXLFewQqXtHIVfttqBvkWDE7y70N\r\n7JxTnJTPYWQZdu7zN2RgmgHeg9FxHeFiYLWsziI/JtKfG+hF+FgywZJWQFcJ\r\np1a1oEhQGFcbjLZZ1Empjam5WAxZn4F0hrarvGFTF/Cyi3Eu0JPeW2kFhVke\r\nvqXsesSC4pDDlGF9a8zZ9CSbdVNmFXDLFk8qLg/grUHK34DDpxpLVi4kL+KD\r\nPxmjO+yAl2mc3VNqCiPjeRiU30pwPVidw8E=\r\n=5cb0\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"68d372ae12d017bf28fa2ad3c86cad4f70609116","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.909b48215.0_1667448402804_0.5755165974150398","host":"s3://npm-registry-packages"}},"15.0.0-canary.7f17127d5.0":{"name":"@material/density","version":"15.0.0-canary.7f17127d5.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.7f17127d5.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cd0a2310b85219dd6e9ffd25065462144cf6fe71","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.7f17127d5.0.tgz","fileCount":10,"integrity":"sha512-x+1uordkZohI9UmmGGCRv+AaOtRlZcBEgUYGZ1L4N6BXZgOoL+0ny1oszzTWXaNP3qhye9Vbow2/RitkOIvnDw==","signatures":[{"sig":"MEUCIQDdsTQhFznx0fbq/n/rUEKAEYY5nArptCQqAXdOOHxF2QIgJfDbmUTFhgJ40Z2TaaNCVPfZWq7Rxn5X8//GcPiZDtQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZAXZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpcfA//a2gP2HQ6INu8RM0uVU7gEzkI5ipeoPTHq9ldJeg/5xbSMF6E\r\nqwQ82AWtmbFMxHb9p8xEXMj5JuI7Pt5iEgupIxs4n94XwFnJRCPaFf/J/blI\r\n1m5s/m5epsVx0xBzuEQ1y8AK4KEatCsprv2ZQ6oKvpvO/b42k7m9ARZhg0IE\r\n/rUxHErJS9d0tRNGC8D2iJk9N3GbL2EfC88KzB7qRfmCnKOxceU7I4kEToch\r\ndcWuNDlqaKoUi2eI7wkZuckA5zwJEkHAvzk0oqcgzRKJ48OANOUd2MJxm0w/\r\nLJiHRQ4XOn1PeLhrod+A4teG2p7tNLChZssPn7b9gIoELovULnkuBmnJWXIa\r\nSuClgciFZoNefbXQ5wIzics9usdBPslbDIHD7f5wFgrR73341+PuFDSpmma6\r\nf6Xt69eZcxPf0mdQ+3sGlgDt9fZU9wUKfyCw2DB6NjeC/UaikwjBXlGO93u+\r\nkAA2E1jrq5MCJ/3fFgC4wsJX4iAKQnRHacavdlDkdsDHNz6zBTFF3k4bmimD\r\nIKO4nk1V/5Q+mvpYbeDU6TiX5g7p+a94v5m2gLswfPvirIakIJxDKrvJzigl\r\nk+uDa4rwLY0yJ43yQmIymBQIe82ckErJohX6X5ludXXo2mxFtIKTSqW28685\r\nkP6Ys53wKs5RzpYBqMMPS0uBnrH7j9YtRVM=\r\n=dxzJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"26e22af93057c0fa00e7fa9eb104abdc96131eec","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.7f17127d5.0_1667499481627_0.9092596037048535","host":"s3://npm-registry-packages"}},"15.0.0-canary.da95e2a05.0":{"name":"@material/density","version":"15.0.0-canary.da95e2a05.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.da95e2a05.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9ed5ca33c477b650574cf22b5ea4aa13bbbbf8a7","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.da95e2a05.0.tgz","fileCount":10,"integrity":"sha512-bUxnEgjvqtYySWpu+Alyft+ff1jwzgcVdLCNNq8aeA7r+o3ow3+gKY05btoX8i3VRjFZU0gwM0T386FFamT5ow==","signatures":[{"sig":"MEQCIAWRRSeFgNoooHRVWIb8Q83c7VUaY7U280k9/OK9N0pWAiBeCeId/BBpsQx2oL7Sj2HCm2w/qI6auduwVe7f5z0SeQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZUSYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrwLg//WQ47/AZo48t4x5kfYhFoxchlOP83rlZzM6AfFa9KcDLH3xnt\r\nGhN5i0s8RAmO/fWcKrE4BizWWmy9Xy/S3lTZtEw8dnrDyKsmLnBFSpnDsWQp\r\nxklEwu5SJ9FFwOlSO3qaH8VqyjleRDWC/y8kbbF2TnNvOc8rwoPu+THMTHT3\r\nFxcq1iY9GrmOFsQRW7VRRDdAKJ6Zk7XCS4rRQi781nkNLakhF9HzxP42OUPW\r\n50yP+voWiw2As6BDymoXc6LY848Bm7Yu3KTDwFZu/N7sf2ig700TKL0JeSgQ\r\n5ny60RXyc3BODudC0sHnz2HPzEWwfF4ssofx9c2zSMQoMa36xWAjn9JICvGH\r\nLYSjj4L2RcogxCFcVL6YjkK5yE8DhSYuVU0nsYOxEaXbKiRXtf2srqVU4mD5\r\n82egqEX4alxagPIsddQDI/AyTlov7Qwu4EqAScdgANeniRqmcUjb/OAyddFD\r\nLJF7AD//9/SqJL+6qeUwjkVbq9+KEjPdrVjSsch6svjhDHe0WyK9EjdBnqZS\r\n0R8jAGUoo7zQlIc1FLszCNt8FSA/uMilEC2uXR0ByGxVc2rDVwYo4aH7lPyA\r\ni5N0CHlPQ/E+kAuWR2SK1Z7dOsHXPUM6XZo9ecaL2vjDydfnT8fdd8YcKF7J\r\nYdfCgmm71+ORHvBHzufbdZdZyrIgvOkLBhc=\r\n=6OmU\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"eb47dc6e824d05fe1a33c55066101c99ce1fe241","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.da95e2a05.0_1667581080632_0.42557929456958776","host":"s3://npm-registry-packages"}},"15.0.0-canary.4832e2750.0":{"name":"@material/density","version":"15.0.0-canary.4832e2750.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.4832e2750.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f47a8e5dbaefc417ab265f07e9611acb884488d2","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.4832e2750.0.tgz","fileCount":10,"integrity":"sha512-II+pyG9ml8NgttR7plliRlat/Ip4Msv+s0mUog9QQiNxw9pFp0LCEcLy/c+wiepRGAT+sA+BL3VMYTZFBI4GqA==","signatures":[{"sig":"MEUCIFfqs4JVuAdAWhm+UUCJfow+sm9XcCtyDaMois22/PoiAiEA1UwByKI7jHoh2FmNmmtLLY4RrHmu/jhMZ0KHFNgVgBI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZXxhACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqsyg//cjWkjn0NZmBms3Ci9mCOWQaiGONsi5HeV+TPAt7NnCollI5j\r\nmfbehQHKS4rE19jpgW4NSQUK9tB9uVUrJP6o7I+Z48QkS2nIzmRHcCdTCWFI\r\nM5XGrXSuOKWppZ+oGdrOLt6XzKA2eo19PIu7AmMx4yi63h38Jhsn4RM7njsQ\r\nwys0FDlFAj7AmJC/BkxVFnmjlHHkSk7//quBykp2PstLSTgp1pclDpRpRSUR\r\nezpr1NzkQz60ncFFBJvHbs+dqql3qoij/bZhSW5ma01rRuQFv/NxN8hSg78e\r\n3ESWzUfzgQuravRYqLjYAgvXJ+OSVozBpHkt2FsqxOlII3VJQQylU5SCFR5O\r\n3Dgjb4a0Rrcd3mzQt9FYNEt/YYdpoLmYPpojNTnWw4FmVd7Lmk1G5o9HNeWs\r\nP4muxYl05W1Ai994DjwV9/kpAnMus7J8cUfbOSqL8dkFbzDsxUNnWFY0ZSii\r\nkVNp3lNKQVBIvbKpsE1MNsO6nrr/zeRftQVkHTeYNVhjpjarJ1e2t0HL8KFf\r\n1zKNYMxC35ggj0EpW7cihByw9BWlUShVHT1JTnv03mjDaSPOF+5Ns9Feq42X\r\nIUUu3aKAqwDOA8Xdy17k/t5Eo4lNZ/Zu+692Xo7lyEF7W6FhCRGZ8jXgLLKF\r\nE7Zbb5G3ahG6d92se0xUI1eFO256Nr6avSk=\r\n=3bfc\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"258def578bdd5ff3b52dbbfbe6f06e14b2b74045","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.4832e2750.0_1667595361756_0.923733862824236","host":"s3://npm-registry-packages"}},"15.0.0-canary.215506426.0":{"name":"@material/density","version":"15.0.0-canary.215506426.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.215506426.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"31be93cb4d78b67024fc4cffd2b0442aaf5c90ad","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.215506426.0.tgz","fileCount":10,"integrity":"sha512-C2jPJixgEyzdiwrXZTFYUhsva+xdPdDq6yLMMdB6BOKnpPXedi+qfG9UoW3mbwpGGX7TV31uLm2SS0BHL/IXew==","signatures":[{"sig":"MEQCICbNIgpT+L4DoPS9j113YD4EwRwRnG0MaNBkJiR3sdfxAiBZ6BHGW0rZRy/Pw20GXjg//Xym9EnedAmFOuwdYgrPZg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZba7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoEIBAAnWkPIGmGObGc3QGiMbsY0CiTaOQ3+pi0Np2p6wpez8DVy3O9\r\nJ3vnDdp1JfSvH+fEBkgqiiGAdx+cIXZBU3j2dsCL2Scs55eLMAgVhwun89sV\r\nxNKO8ER52QQTizV7v0mfnnYXj9otmwwtCm1UfxsSs2Z1l7hK0JxCrJ7jgNrV\r\nZST/jKKLXKVg/XC/75YMbPsbkdcZkuOSHVs1i9PlDenyAturUAFXLCDxj+jd\r\nI6naGAoL7S8UETppSg6oJbVTXeGolYwspgB+U2lRYfm/fSE3+Kj0hq/1jGCu\r\nNEKxayTOuVib1dD9ktiQBKwWtXqG0VRkaoW4cUlmS72QVmRtw+WiyT1k7OWl\r\nGp9/anu6dO+1S0da0mAXlQqQlTyjBVtGXuX4eO6vC7SWUs+DADirlyTT360F\r\nR5F2Pn5dzoTNYcby4tsBUdGnnbsfdoFZ561qBf5Fpp7tmTAmZraj1FJV8fkO\r\n8GwVZlLNWdQ2lFb1/L+WpcyofWrPPNrXTF7czMEEMkKdNoqoSJq2tdeUE4cX\r\n5yJn6ULHWuPgJtEDjIIW99VeVnE5P0LpXXLvkaJlS3dRubc1kmQRnN3wn6JN\r\nW45Ou/kyWNjeC/uqAZnQbucAtxA7NInCaf+W4C8l4vts9csiliMBcOu3O/7t\r\n6+O1Ac/kZaouC+OdQT9bXmpqFD17SdZDLsY=\r\n=HOc7\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"c7da5104ce280eebfc1b0cab2279b8acb906babd","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.215506426.0_1667610299275_0.19513416622967128","host":"s3://npm-registry-packages"}},"15.0.0-canary.4cf917476.0":{"name":"@material/density","version":"15.0.0-canary.4cf917476.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.4cf917476.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"04acc22e614fc26f706241ea07f3ca147a4f08c8","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.4cf917476.0.tgz","fileCount":10,"integrity":"sha512-+NYTGwTs0frks+0yZbZw3ZrAerU7KCD6Du2/jCt7fjdlAE910f6SegX98BdnOIcF5xMlRrFRuxUx9wXsUVn67w==","signatures":[{"sig":"MEQCIDpSzD/LWOyzBwigy6Osx8Hjj6ac0q8vn8bw6lIshgBNAiB0lAzTafAHd7/WI78/vJlRbk2qlXhAn5uxUHoYpyhWpA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZqVXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqXjw//TECWNARiw05ArpYvN4h26bJM7XzYQqM36Bz4IsKnO6e8IAbT\r\nRNs0oOvX1bOjRqq+1nIyPRktMy4vN3cKHn2pK5BAaqNZgVfdKRgapHt9teq2\r\nKGEkDTIFDRylI9eQwCuek7BPNH3Zvf17ULnnpAAIvOZsKJ+mTd8XYTg92m4r\r\n+MEzy4tRIaduMTmrbouHT0h1joRcGVSliWy2byWSZ1boVsRq4FqDI3y+BO++\r\ndDcKeHjDFqO3dlrPCMrd5ncr0A8haq0NuU3TmhhBbVR862D+e+uT9tP9+uXB\r\nDOblRXL3BgD6t+7LEy3QlOUNVq6YOPiObps1zqx0fCVyJlhbGeCL76zIuQEZ\r\nnOHaFyin0NWYbPqaQSNL2aieTvKZVaWuDnX9r7DObrX9hhhMOtmBq7VJanBT\r\ngCMiBaKaehx9NjMB8ElyadNsCUXMEYeQoGi8vDLbxSfHhNSvkimFhphiIQtd\r\nKKPHYDslPCghH3CH3fGfjnPZEDsfnHyf5dhmbIg67v/neXyK7nwqezDT/YJp\r\nV10XA8/fVHTjzZh7fggTHW8eNRF1OOam/nB+anvD1E3n0llupB83t1HNSJ2F\r\n56SRWA03G246y/OTf7w7dOnHoVdY1Lp6yn3Wm4Z46J4Vr1ZWidSjgoZn7vZA\r\nCBoL07OJ+EhQ+9kf1CMKnkqA0HIFcoPTHeA=\r\n=nXqB\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"c7ef38a54cc085b34eea4d38f143f3b65dc649e2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.4cf917476.0_1667671382940_0.7137846306753661","host":"s3://npm-registry-packages"}},"15.0.0-canary.eef14bd32.0":{"name":"@material/density","version":"15.0.0-canary.eef14bd32.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.eef14bd32.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1bc0a49e73a38ba55e0ac2f6464d98a4c107445a","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.eef14bd32.0.tgz","fileCount":10,"integrity":"sha512-FMlv3CEvWj4M1eo0NqJS4Lv0gQRLyujYAAy6cDLSDQn65AJEHE40z39fztTqiwGINH0IAbLNwGNzy/72ms69fg==","signatures":[{"sig":"MEUCIQCc6JmO6zkoDqsqQXDHhed9KOCzvPMUgimYdSaCzQRXNgIgHXRRG8+m1cTT54jwVNuHiJk7z9KbJtpgHqkr4OvNmTM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZ+2YACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrHnQ/+ONY0ZSfnqwByK67NSEST2lth2KPcfxpRbe8MLmGgQhTU2W4q\r\nO7uaYwmlyxr2j3bGbDDk9lPzoZ7oI6GxsD7enP7r964iFCaQ4sPGMGhpCjIP\r\nqJzETzCeCLlJBOPcyivPdlRsLk0YPjokOsflWfE5layguXPV2vaLBDs0vklX\r\nol83uuPeNrDivBU04+fFpwtgUpTC+uPBDqszomnAYpWAdFeUMG7cb2aruJ2g\r\nP+tUisELa6SHekjOcaW8NlVxGVfaU1Zc0jGsIZnc/LQBKWQMF+5bE5/tWbBP\r\nQZhrkFBE/vQY8ZUusiK2KFY7Vw2cmJvzNzCpd5rB7bJ2o2tCMc+tKJW0C6Gc\r\nta6F0w7GqTykVDvLqphjvZwMxADdLGpZaVlQhqvhy+syAfdSun1YRlLqPpnJ\r\ni+9Xc0WiX/Ecrc7pLmQjqiUHAqkV4I7lX4yB2+RgQuVpX/GLvYjznosbJM7M\r\nSmZw+2zKkY8rrOEAMi5boHlxlmS6Viix33zc+5tJ6xpfByGFA5hONj5Am6KN\r\nMzabS+S6W/57Vg6eDtFya1l4g8ZUvzcADOqmPmmkIXyAJnrer4smpH+e3mm+\r\neZ11yRcxPy8xThsvvqTOFYJc7vI2/oN86fmOssTT1kRjD9iyd3oSUgJ/4Uqe\r\nJZKyVNdV2YAsJXLxlvYWuiBYvbZG/NRploo=\r\n=R+5W\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"40acb6cbe1201f5ef758bfb96da3145ae3c4c1a5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.eef14bd32.0_1667755416034_0.1968386131821538","host":"s3://npm-registry-packages"}},"15.0.0-canary.6faa29fe9.0":{"name":"@material/density","version":"15.0.0-canary.6faa29fe9.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.6faa29fe9.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e91d9db10c0aea5e9fea1d28243e7fe8bfb83330","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.6faa29fe9.0.tgz","fileCount":10,"integrity":"sha512-0a5clwm6vGhoOQgfwVRglXLEIveGOz2+tMCu3FKT2Ad2UltCslpoz3I38RtB7hNoypvzKHG8esgKbaQrCwBlsg==","signatures":[{"sig":"MEYCIQCWJ6Monm4nRbKFITBlDoZNutWrnxEuF9IRM3fmY6V33gIhAKLIYnKf23w46Epm5yAKnXar4KX8y0ahvViFpeu0RS1F","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjaHeaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoWaw//WUDfFapOHVK449KI0ITfXEUfzlUe6XzIa2YfHeGftPA2gqTX\r\nzwvHlswPgOvqZ7tlx9H5lwOGr/RCXYm2qd6rbhn7vXwmMLw3O/ELGaHNUgGC\r\nwT2P4mI+u5WEPdFo3EFpHTSVXS1oejRrU3MqRRJtKknkChwNSxkIu3RtsYHg\r\npMAp1J5MfRIKAt5UAC8GoZkd+u8x2jaKh6Y6LL6gQl8BCiiODlJdH7rXF05K\r\ndfyfjPyFhLdumaTbBFqCxYZZ/WomzORcsR2eMYMv3Ddr0lAumhhF8wH9SmSQ\r\nePk4LIwOkslLkXf6qON6ZH0XvRUGekLuF9C85QyguaUudr8w6x+xzU1AWUbw\r\nLZJw5v7a++l0Xkkr+ELX/5w/BJRCR3s2o2wGLVj8LUp8BPQI+ppnuzaHQpma\r\nf/N6WfSEke51FtpVHXrViSfbVVxs7dnpoMrpmAwh5O46Co3mIJdVXRHUI/lk\r\n8GUCnpNBBS/CsGZvOIOoS6TFJQ/obnF7axH6yBiQpFNuTZGcvGeFh2aQf5T9\r\nnd9jNHcMQ92TaRtt7wEEz3DSMPpwv15QN74Ckbdx1qJFJ8wN8h8fSmFpJikp\r\n353Lkn6BHjDJjgdN8UMb1VKddMv+zK0gPZ0fbpT4B2uuSTtZngvyZdUKgq7V\r\nX/mhiKUS2kezTdIasmTozXB3aQDf+4Amtb4=\r\n=2+1H\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"1403858386443f73c0593105b5654b6ad8596a9a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.6faa29fe9.0_1667790746429_0.9621794537786557","host":"s3://npm-registry-packages"}},"15.0.0-canary.9af09b967.0":{"name":"@material/density","version":"15.0.0-canary.9af09b967.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.9af09b967.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d4920d90009d354680c47c7b05d8b46051f72c51","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.9af09b967.0.tgz","fileCount":10,"integrity":"sha512-0Cx/zFRGCNZZC+7TJ8mCiEeU/eQdEdPAcTLRylt/OzBdh7Ce5KwM/sBYfkdEY/BTLJJ2HUJdtubT6sMYTf+8Og==","signatures":[{"sig":"MEUCIASpuNWneGjX+VulHuvrQV7uFvRhQT6TVl3lH9nRQehwAiEA/K/VgtDpcGQ1PZmJsiKSVdNOs5D9kNygv8JLOi+MycE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjaU3ZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoqTQ//Xjd52pF2yhYBSLrpZaIyW7N081vcxs+h26h2bwPWySDiGTfe\r\nXvdhEq7iASYG/BuCGZf/uny1r4bEGlccN0qbQJ0G8/qJ0TXbwdJzk8IFMVXG\r\n7xV5PxWwti/LnmfUsuWZaeSjpR/tZ57XokSq526Kbh3wtOezzB76r2Pk3LyU\r\nFITFOSNw8pRP7RbbHRH4+ryuMrfWJWibS3Nub9zSvxezW2beKgBFjtAi+VRI\r\nZrWVRVJPfqVWSDQSuwR0M1Plpej01CR9AYzMQyc8oI+95GLtS22lf3hNQ2gO\r\nNbjxh7Z/sysHGh+ciVMxwXtVOMY2vWFLxOyRpXiKcGAemSaImzj0geJ8LUDM\r\n9d0U2umt9NIHxrHWDW036evv8HUvJqEPPwfoDrg0FHPELhMSgT49d3upYdEG\r\nNo1MSv14JHMND/cI9C0+DBEDrWKHz/rwhEAJYYYSG8zcXw1zECRiduj3rmsm\r\nYDvw1bjIr5QkMffXOL0XVFgmos64VV+h1OtoXZVheWq68EEFXUo+kMXo033A\r\nYDi9QLqXXFnsNetzJmuKZpEdk0KIpOUTjd9vvoFrKEkfoLv65ELxD05Bl9qJ\r\n+GdxNZD3GCl/tcbhcgWe0vnAM07HYup+0Y+RiHH4ExOd/CfRAZ58W6DXb0ZZ\r\nSO/SgBP6FQu35yO65w8/SwWQo6aSOusB9A4=\r\n=kf/y\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"745e702463a22f4c5de6e94b3527530a9bdcc9d9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.9af09b967.0_1667845593548_0.37477966856498","host":"s3://npm-registry-packages"}},"15.0.0-canary.0f54fbb93.0":{"name":"@material/density","version":"15.0.0-canary.0f54fbb93.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.0f54fbb93.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1dcf39f54a802fd712f995cd335717f9f19ebc55","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.0f54fbb93.0.tgz","fileCount":10,"integrity":"sha512-5F8cxJhttWUGwrxBgjXC/aruj0a3ZOP0W0LPb3dcXT0aCdus7soRqV0bug1x1hRqfGEQK6N2XQlLofTUt7VR+g==","signatures":[{"sig":"MEQCIAgJUK44hgboIKvgXpWz4tM3bJvri0dzOG3u/12Yc9OuAiA7DWz3UlipS9LOrUUKoXZyhwWISaGaavkAcVN7XB8bnQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjatBZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrG6g//YRa+Agv/FsYfCSiFGlXj4HF7xVyEWCZRAVe2Hrl44CjQtT98\r\niPsX4woc8YSZ7LKC0lAFDnkqJoy+DXMIyKTizXnldyirwFZMyserFaWmkxB4\r\nSG5voLnL3ooymCoFCEmXwTkzlAEVwlAmpU4ZdYXlgRJ8LD6WEuDDQaNbL2Zg\r\nPzYL5a8Bz+U1pjeBahwSiUzeD61zgqA8I8lkJphjpevVh5N7cl2EXvO+Gdzk\r\nvnqnDvs9D7vbMriYuKwi835BBaqGEEGFDuL0csYYAoe2fhP89zwl9MWcx5IM\r\nwDPMCsz8v/R7f6Xc7RkaBPhi3RSdWnGdCXTR51CNY+ewOKra0+clDT3+9Jnu\r\np7ooEzb9LVY7P5Ma4JYXH7CuS3qaH81lKymFxoVJdkt9i4awkvMUMre1c0R+\r\njB+bcNgykiP+2Qo6/HqXDmYl1r2QHn3nll76lspCUdJBTVh6n9Dciahm2L4g\r\nOLCBZZAkXVs/39nb6LOqG4FwT7F17WczbfADfeaQqRjHxNosK5ToLix7YUsx\r\nfW4h8HQ7cJUWNV34vLG01cfwL5qY4Cp82d5dtlJzh0xiBJMu/6prrCseT9rw\r\nyoDP57k2x7UQT4Zbi8A1JB0JgrOfAEa2XjlgvT2AL9U7thm6WXFc0/82onG3\r\nOP29TvPQeI2LVehzbNpPgX0uRwMNLKOIPLw=\r\n=NbbU\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"5d2d1814fad8065dd869bd95c156c04ad45926f7","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.0f54fbb93.0_1667944537678_0.21863507403004712","host":"s3://npm-registry-packages"}},"15.0.0-canary.a8d47f9fe.0":{"name":"@material/density","version":"15.0.0-canary.a8d47f9fe.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.a8d47f9fe.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ebad23c27cb770961b7539797a01bc33f021e598","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.a8d47f9fe.0.tgz","fileCount":10,"integrity":"sha512-mXo63R4PRPHvB8Q3qmSmb/I7FFtnkeUBWMHSdLUjP5UvDD5+Ocv82Rnv/ohazhIyFkX8ZAFZka04RqW6Q41V6A==","signatures":[{"sig":"MEQCIHMudjTYzUrqDzcpZEFIMnWDzK0ukEHCGcECrSErL8ilAiAoAH6jLQpv4qK4zyZcLqB0T4MUnuWRopr7hCzNH+AOlw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjaymiACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoLkBAAg0J7xLR76A87Ib9mTK7axa3PXzOGdnVFK15WayeccdZi0N+e\r\n5R9Jyr6h26DBmlXyJq0PjUYzhjsxxmgS42u0d88LoOENXNJl1KXI/cfwfM3j\r\n/xaXcuJkuaQFHh9iOV7fnXHjPayr6HIcCDcpNSzFxDZtAHA+zGeeTcA9DTW7\r\nChaYJqVXrVkGIoTcL1XtRj/k6B0ftbV9ZC65xEpYRGok4Ifesc2JM3g3qPc2\r\npFVr6C7B4BNfLmVaj/xym5XqTkfaAWIu30YeGsiDrWufsW+UqSLexV1gQQYM\r\nwp2vaQT26zti+kRUL8MNSNYlNCbMBTKV3W8FEdaLwM+Nmn3pt55KI/omBMx9\r\nlHnd4BcQRCyxqEhRVpXxQDh5JF78ebFI4qiCDNg0SiLV9cvaIdY6ET+9sZyy\r\nadz5FY3CWZ9gn6GgA6k3TFHonigS4XsINyG1E1Vok9kyMsWLzJAFTeIhdZTV\r\n3d0UTJ5B8MKa/mQ716wEFOhCc5X3WUUSJUOqYvO3xxFT5WB3rbuf3BJTPWVd\r\n9O0ImcCI27bSnpA1ZsK6A93uxnoZza/dpjhZVsTLE47PRJd51sPaD7ONENBX\r\nJjtMilihGYd8MAYP+yiLbWPV1JQxREAHTZulEG+Ojrau9fJ11VGsuEFVVYYk\r\nkWwxWgqIUgUbm63TORv3sCCnUvSgUta+Sso=\r\n=RsaU\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"37662af94525622cb00ae2dd17f31f6a93b4eed8","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.a8d47f9fe.0_1667967394672_0.7610408611961959","host":"s3://npm-registry-packages"}},"15.0.0-canary.66a1e75e6.0":{"name":"@material/density","version":"15.0.0-canary.66a1e75e6.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.66a1e75e6.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c0daf9a3d5075c5f7d92d3de72207e113e24a96a","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.66a1e75e6.0.tgz","fileCount":10,"integrity":"sha512-Ogdwo4IlsMCSxpyfnYfvm6ghIB3o54KKxG2PiqATnoXRhIClDHuLMrzfwiO3ao62aINBOpCUtYWS+PbaSQ0FUg==","signatures":[{"sig":"MEUCID+VKClXg80PUWfKWgGK3YF1ZiQBJn6PBDQPihz4dwhbAiEApU2FExSyX56I7f5RWZ2dH2Mo6ukpvjcfOLdd+tggwMY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJja3QoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrNLQ//e/Fshd7/37mU78qbx70hUS5W5GVqQJ4LheoioDLsO1vHP7jb\r\nYHukpCwdH556AdE4s9EtkPW8DrfGdmMPl2LDXQkNW6c0/8nntCB/wY+Pqsf+\r\nM29rd/OHpvSet6YLxkX7qaDAFcJyo4FXOp6XlX5SkOhD4tuWKoDq+sZ2Nkfq\r\nF71IX6XUvxcUAM+dIHPsDCwdnPguBkrpyFENvlKQTj6s+bwfJhv6PHr2NPLC\r\nTeARh9WGCw1BoxR5oPztJXUm/d6XzL3zKjsWojUhffY3Jt2RXX6ahzO33f1z\r\nvlk8HkjuQhMYgRAO54S48uGKcQtPilXzID+mNT0Way4OUHUeaS7rhVDQBvTV\r\ngo64aX4J/+yS4V0ZkTVT5YHE7l3RlSJ2665YAZBQacxdkPiKjC5SdiCbi1+Y\r\nLWDxVWEqEvlh80/OEGa7Pez4UDKEQtILR4CEK8Lb9s2HgIOmT9BKxuElhwEt\r\n8o/BAV2IYIc7XfxVJhP+UbqHgmEvMKfGvhq5EMCaiDFgYtAJEECymyFJ9xSv\r\niMfP2+jI5wtuxP9FS8Ff8CdP2Rl6OZrn8GnBeVRO8mRo3tNCX3TJ3CLZ7OIh\r\nQLpzRbBvyX9nxE88oXxyfHi/Ip+fMNndL/vya0xfedH5B40bXVvyHlwHubtC\r\nyjCH7bGEST9TMlCm2wcKVyv8FQUkKYzfN9g=\r\n=3yuB\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"8ed0cca778858904bcff29669c6dca407f25ef98","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.66a1e75e6.0_1667986472550_0.9928272819786987","host":"s3://npm-registry-packages"}},"15.0.0-canary.5e5c2afc0.0":{"name":"@material/density","version":"15.0.0-canary.5e5c2afc0.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.5e5c2afc0.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bdb29dc42c7ee7ec9e7a3139fe458e58365c0a75","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.5e5c2afc0.0.tgz","fileCount":10,"integrity":"sha512-76g1IMr09IUpJcvOrLp20TZ8iQAGTf+KFJdK80SbVIM3utyOglN23awNrtV5e4VkSSm2CoYDmC472n/ri8Lcsw==","signatures":[{"sig":"MEUCIQDNoknCk10JDghkAExDO4oTqCbsa9Hj2sVY02ffm8eWrgIgY0LKpkJwug08zVlZTyr6GbuiHloGN/tDTbjMiw++a4s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJja5RuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpFJQ/+PKGPuvTFgZuil3xqt6OEnL7LAcUscO5+u1Na9WXcI6p/Xi3i\r\nSqt7w+CrYz0JBqfZ2LoaynIq190F/jOHiRI4WUF4/JTCpdxeuEzDDjU/POR1\r\nVUuahRVtjeKKJt9z9PdhLjqHjYd6RGUcaPvQpxvddK01b1OftVeLyJ2VgfLq\r\ndhWJUBcQp+UVhoIIPTWBpHGOqZ1slSF+qza/PWB3yRKD7/38RAuCm2b6XeVY\r\nYcbSMhXB269EVUmdVpj2LsJ7HSqKR8TBt9NCSXefvzZ0pj5BbxS8P3qJ1CYC\r\nmls5BZ/URfDIuoOTyf82LMwnTTFzkeHGkZyzHP8MXTE6H/hDeEgI8IHY4jK5\r\nuOpKzuBvf0Y/Vunblebzd+tzpC42jo7CDIKt9ZqGk4XG2CtxF1vj7yxeX380\r\nWG1pPVC1IZdgA40VhiuXIfshKefLKjsyMpPFq2Tgp1NSGuk3nWDUi0ts5tSU\r\nThoqnZb7zUmx7utXwq2/TIwZPOUoyuSDPLKy5n1R7I6qWhQoJsz0vSo7KEPI\r\neIPBQ04CWz52VEexFiwn3qTIKP8x0fmfzVAb94XzQw0bd/068jLnwFfvUWyj\r\nxQ5asyxIoGM2/1aDkA81Q9POFOQjomDBg4FE0fRyFuwj0LAT8oIkV5Je8Co4\r\nFYBTdFjo5kq/RdIIAs5ThC71rr3x7OhSYpA=\r\n=S5sZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"f14204a01be3c79ff286a8287a0ab731c371492c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.5e5c2afc0.0_1667994734048_0.44769093288484507","host":"s3://npm-registry-packages"}},"15.0.0-canary.3e3f43359.0":{"name":"@material/density","version":"15.0.0-canary.3e3f43359.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.3e3f43359.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fadc27fcff07d13db6bc275fadfb1dc3e861e2e8","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.3e3f43359.0.tgz","fileCount":10,"integrity":"sha512-6DBJC+K8/1ROqo4VfasQPQZEiehKrKUU4LovXVqoU6gGk1gGBJnPF7ngvVWAL6maDrjySkCuQLn2DfRlMEj/+A==","signatures":[{"sig":"MEUCIQCRia3U16xqiW66qw3ScZk4d8Mfh2dcMSUnnDIG9be/xgIgf/aWGmIvNbNbf0wwnNNQu1I/TgN5AxUgAl6bnHUSsrE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjbAcoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqXug//YPIhRX/WFi/hBLFTGV3e3BIpb/3MHBIpVHigQ94zNxxOaefT\r\na0Y8gLvJ8ZgDZPtWN+6o4EWDPKslMmwIAdJg9zQgXAumgUgv7ZoLedl9RjOa\r\n8TKVKFwppWH7VDNleM3ilBbw0AeMUuuTVMKC+aVKBEFMTC/J+qwM2EqLKOhp\r\nMn3xJAD4+gMT4WReKScVvrj65IpLLKw/GBWhzlOUu3N+lvEWcWM91kr0o4SY\r\nGacGlWb8GpjHk7jIlEJRrO9ClKOsKwt72XZZcnq3U5pF0f4XiLN7FcsSynaY\r\n/n7rzekbNY+c0rB9QvzObNNdkKz5ETcl6oWjGs+nzxKNdI4jeRJtrHWMtkRs\r\nwiWgJsi7CsztDv6PUQfv2svDwE1wJkMOG6qD+Ft14XdpNtOI2u4pJeXGZOGz\r\nM8l/SLz6HQkE3ZBuQa5USfq9iF40YkRkP3n5lGzD4h4j8QGSpQSJaYQKBKds\r\nXufpkjufx3NLqvQWS1bMzrmj8hRzYNC39JVAiCO4iZZq/1wFpDtpVSGwHs3u\r\ne5x2Wg/SDTCXLpT2LAgyun5JiNVB6WukDnPnjQp5VsP0ATe/eu1FPpIfkTlt\r\nPFOFtAOe7hTkXxuFQQc2x2Nm4YALO/orCp3Sl9N/WHHldp22LqWB69WIPUCh\r\naD8doRAmys/Jw5QZZvkyAoDovQMpM2aHWCU=\r\n=IijP\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"722326ecc6026aea1f22d8b4e1c9901bc13141e3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.3e3f43359.0_1668024104517_0.24664765171459435","host":"s3://npm-registry-packages"}},"15.0.0-canary.3f667fac6.0":{"name":"@material/density","version":"15.0.0-canary.3f667fac6.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.3f667fac6.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a222c720438072ddde75201b96ff4792a9d22214","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.3f667fac6.0.tgz","fileCount":10,"integrity":"sha512-EdKlPh8AM+jN87qnzJmRGksPRkOeE1q+/qlY6vH1gUYMf10yfcXrv7sDTYZCtq41ULRdZzAjhe6Bp9InpSf8Bw==","signatures":[{"sig":"MEUCIQC3GU70d6n24HLhZIZWNhkJ6sPs1GYIn5zn5lCO0VIt+wIgI5RV7Jd5mVArt0oEUz3/bojJaWyynYOCFGrnFLS4FM0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjbCQIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpiLw/7Bjk/zalNlp11yB9ZQKhHvk+TWIh0YCW4Qiq35kg/Y50ZTPwk\r\nfxoHQHmN0wenehyUfNNio5aILkWWIb171RgGzjislG2fpk7grveWUhNNOX0H\r\nZnhlU4oc+fvNuZDCpLSLG+XDTQXhkbAFKHL9qQK2JjUBAR9SzfLmyWe1Iuj3\r\ndaBYXIvy6fVPrh0ygEdno8AayXYGcV1NU+jMjVcCz80rAqCbHeBrKpzxZxXJ\r\nYwv/jCVRnOv+8F+oOx/1nUIKCE6gIHtTwcj7G02v+zuapTRqq9oCWXCDkh5k\r\nk4AUNG3A4A15wyx5YUZVdVflkD2APabTLFShuNX4q50IgZ6utAP+/WyRH94E\r\nxhM9RjZi83RlnSCg4WydugVpU+eESxsaF5B54oFkIxHgp6v9apRbPUt7anOV\r\nP6mYGEvZC9Lvg+GKmPx9hkWJeeBxF+IJFJH6fmidxXsZHOyz9IPNvUlUCIR1\r\nAcsgefuz/ittM120VgsjE2faWZvhVrtVRRMS/vlgoIMYUi427IORlXD/XoHq\r\nyThkOeXbSzA1e8gTcsIrF7TQXqRwqZpHTzEBQHuniPaT5GmKnRErdO5DPwQ7\r\nf7yrHmwOMTKhDdcEmwRHRu+ud5Oeny/SQGzclfGexVySyptGZGdty+JVUkla\r\nQ2cPk2aaLi2kVIeau3d/+38/Lo9/uA9A7vs=\r\n=aNUE\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"0980467335d47e19b4ec72e32644ba0a08bc0c34","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.3f667fac6.0_1668031496037_0.6593684998754055","host":"s3://npm-registry-packages"}},"15.0.0-canary.faa28c1c5.0":{"name":"@material/density","version":"15.0.0-canary.faa28c1c5.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.faa28c1c5.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eb577af230656d927fac11af426907556a6100e1","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.faa28c1c5.0.tgz","fileCount":10,"integrity":"sha512-cab0yrLw2xo0l3XMItsPPYqbDk6N6bsUWPhsEOxG9b7UUBeYmI+F+Kvlhk5/2RxGwdHLPO7y4zqzbjhR1kYB5g==","signatures":[{"sig":"MEUCIDAeUSMUhb4uSYLiGAIdWE0EMsB7mVHxiSoD7LkK6lK8AiEAiV5B2lybgPqpLYPHnRK+61FwX2BSgLykusu6cKTUyX0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjbnmaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoTqg//RDL8GX0yw8oJTAMBnPM8Tu5wZRenepxlMmP8trKnAWN+8wFI\r\ntvMUoWdudAX+jA39xTnEjsZtKwvcY8hoT+2bneSAPUCTnb56Mv1pucw3ySnf\r\nITT/9sHduJEOBwUEGN4VvqAKDmAtac555wJhnHHBLgGjs38PA6Y77tHKB7nR\r\n8u+Pui2A8pvi0IH+VUN5ZbpmxfxNFBqt1q9LcAOXyteHr5fuoczSACsb20Ex\r\n7l1KwCi56vzL/fpsup/leHvH7EP2n32v/bofpHzGPGwNKefvop7TwSPubERN\r\nBqfziPCLVr0kW4kjxilpYluiTnuFp7J10+rp8TqZKMkK6XRS9vu0yP8jdNCn\r\nbc77UKnlW7oYpUSybZmivPe8EmdKqXbaMOnl0g1jH9KTd4ET3WOl3UFZmvYs\r\n8SbQApqcFx0mZF3CoFAusA2CKEzfgBmtQCOm9HmC33Zth/Ibcawe9/N6sspt\r\nw9rFqh0n1bv0xuYuWnN6cOSD3PnKyKvAqJn05kSnBbxz9cN8VrqWTE9STewL\r\nnywytWLPyn6AeaIKMPa2hhEFVtVb91RG+109eszznnZeBdWXgeYUY6XhjwcI\r\ngPOQM3wwnpASecHMD8fHwwWrjx4gTs2tiwhMI1bfhS8l7AqduIglDyBI/8PW\r\n+UJ3fZeTB08Q8N+qUNFWy3avRwBJfkKLeDg=\r\n=U+ff\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"d36350ee1c0fb11d053acc0cd521939199fd696f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.faa28c1c5.0_1668184474641_0.6851720174006539","host":"s3://npm-registry-packages"}},"15.0.0-canary.a868c7866.0":{"name":"@material/density","version":"15.0.0-canary.a868c7866.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.a868c7866.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"96476392fb8dd2dabe572e7e30c54e9e12d95835","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.a868c7866.0.tgz","fileCount":10,"integrity":"sha512-eygirAp7eZcHzhacWgxJwXaeMoh4fQL38/jHvM93waKqn42WKpqbDi1wICZbiQ2gIoPfJt3cnvBS7Ogw8bVjBg==","signatures":[{"sig":"MEUCIF7EWIoK+buaZrbq2nQzQasx/Iwg5Mx/Fhq7E1EO0hYgAiEA5MLrhqYO19JMxT7XMRZIZR4+vXgXz1MakVIBkAM4UO0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjbnnPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoUew//aEbit32IaGDm+fiGvfHsQhHc9g0VggN2rJ/QT2HSyZ+iuo+U\r\nlVJZxL+BLh3BhGAGkxRmX741esXiJRJr1h264FSm7qPS/cYdzauPo0wW5rXK\r\n8km5Qdacu+HlBS5A3vUbRuInIomzQ41QGAxc/aYXgRGQltWwj+gi3aNM24Gs\r\ncihoZyTZLSEyzGmLUH62cUfuXAJE44cVAV+ezhjlem8dluwlEVTHtj3+erJL\r\n6Fqi9sL3DQrkop8KZgkCCPz1MniuK0uBjS0lj7tn+M15Gwpn07lNDtUVeDfT\r\n2xEbcLiy9xQbvUIDMsSLI8sA4YfV4bfRdh7nIRlUKhAjucsoFN5yFmcwia0+\r\nkEldKVhJY4bByiGOx3OVsINCQDwzoswuXc27/VhESBPoVhp1l+CBkKsdL+94\r\nwDv7Kvj3bQUuRQ/qIrsy3lVOkotRJymE+zOfXcaaj7UsbCa0dqnz83AIV3ZO\r\n49BHRqSxvju8rXvWRr8YrB5HlLqDHFTjC2oXeG5/OSpaf1MoR22mQZu4ep5U\r\nW7dqCgOeTtUBQsyMtePVf/4+nK5qhMHiLuA6iQz/U1QqF9nhtZyggZ1QT9Dl\r\nt/PqQ/NQIPmxiaEvBJC2hcO/O4ZmsBJ2It73O/yUn5WRYBkvzCCB5bP6FGgn\r\nE2rXFUOZfHh9a/pvDJN5qzW9+PfyKoI/NcE=\r\n=DBpB\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"d35416d7d3365898437e980f43ade48e60904e85","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.a868c7866.0_1668184527469_0.08732682401297942","host":"s3://npm-registry-packages"}},"15.0.0-canary.602fe8efa.0":{"name":"@material/density","version":"15.0.0-canary.602fe8efa.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.602fe8efa.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e01ab2a7142e8792c5bb32d7e4c30c32293f6c75","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.602fe8efa.0.tgz","fileCount":10,"integrity":"sha512-9+LJjMyhVM2FOj2vMDUUzCzjE9T3AM2H1C0MCVjx9TOw1a8t3Ld1mfHvoY3rRqdUJp9kWanvF531hwKt2+itdA==","signatures":[{"sig":"MEQCIHPuuuxlktzfIoFiQs5bvs4Y7CKqTDfyrwY8ZT2QDzUuAiAUpRa9zwtFaM4RQ15uIRQfMbYetKGmKS0jNaiat1cVrA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjboIYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoOnA//YkiUYvRPorJcdzrfp0pegSdBEWqpgsBcohRE6sXLUZEmbZ/L\r\nUd2C1d/Yy6f05dH+82quAkbHfAQ8LuTi6z8NJ9NIg4Ru00P4dTD3G8kofyom\r\nnZK/rDd2ZUv36U6je0RQU0tun5GuiGNg13jometX0toC/pzRCXW4OT0IBkNM\r\n8evEo2Lt2CpawVkCNhxrYaFPUx4R3i14kiwt9z499TGZhsT7Qsjk2qAE2Wzd\r\nE60ZSDSKd364yov2zc+W0WiBoWKqCmrsoQg8uSPsLeoQGoMQw4em2mFm6xqH\r\naAxRQg5cqlUuPS4naz2hqTNy0Prc8b/25apnQYvoFFC81gFBNlY5bwfS5L3/\r\nce63D3gEUuWagAfW4S0KHlXQLgpqCx25CRHS+yFrMyWw2hgYkhQFJp71JFUM\r\nyPX/AKsn6ZQU5aaDR3it5ey6LMZv2i8EZtCd+AaIUUytsPNICe4K5gOMB06P\r\nh7lAH55ib77kD+yn89kvO2Fyl/xIBgJPC2okxB0p7Va0jzM3t9qvdsjuepl8\r\n+rBByqBqESAekAY5vp1A5vPPOTG5uckzSel+VOMaVHlVirZt8ls3WSSzREPX\r\nyw2SLdU8+ci3Zq1M3dNUUmtUvLNkJ/6bCFV8EkhT5QvQtuCxutTEzb0nPsLF\r\n9Vj7n0sydli4+vRYn32V0RrumBoJjKO3wXY=\r\n=bPyF\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"6bdfaf09ca41b2fd7e3db4797bc2f536f8fbbade","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.602fe8efa.0_1668186648309_0.22307504830165992","host":"s3://npm-registry-packages"}},"15.0.0-canary.558c2be62.0":{"name":"@material/density","version":"15.0.0-canary.558c2be62.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.558c2be62.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"06c71a1742a4b118436d4e6d0f8c4dc0d4a8a477","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.558c2be62.0.tgz","fileCount":10,"integrity":"sha512-aC8XVp1OwRuj24XBgU578kWi3CIFt/ru6/28B1UawGqAg90gtjndJuYD4eCXGXQHxfjf7JsGNRHWWfF2GoeKag==","signatures":[{"sig":"MEYCIQDW4ITk1IdjMonOl7nXLeK7K9tzV3O817ie2wL+4X+4zQIhAJR72+MqcCwIUVzvd8nlfW+vClV3QS4nbdtxNUIBUiBJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjbtBBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpv0xAAjGiBdGJPytOAwRUB+wYeWPVgBeDO3rerUwH9jU9Qj0C0NJiA\r\nDnf4os15vR7qac0uRV8mZM+u4U9RJOoegLGFLb/bVlLjJ6eYi3I2zQ017f0+\r\n8LvhBtbAagxLx6nVNk7FOA3AuKiO1KxUzOOMu2UL81/cd3/+RNm6tqlXodhB\r\nME+Hwz4GzlK/K7KzxFPx/aX9LzCEQf6Baxv/h8DyGQssGRsZe6nSou24Hji2\r\nZl/4k4HgdUdC5pKxZtzxTLOoisU2pzaBM5BKTeOYsT17uUcO/F+4/T/eb821\r\nnaqpor339U7Qd4Yqm3+WXh7Sai02OSJ4B6O5ew9vCkR/u3jUaLyUgtFj0m7p\r\nQCs7M4lZRIucjJ4l33wzM7YjNJW4Ldp77LATbFJNxLcPWDhMva2pbEbXb1IA\r\nPs2zDje137QWevI46BEJxWXYkzXSQBP4zf6tdC4XPpRRVMnwSSlo4c+otEl7\r\nAbnJr86DCO4wBmPoL2n2ndDK+BUpwI/lneZWyGmDg6Qp8vZ38ilHwWZ4wGXA\r\n2FVvsY52W0ARy80eNsHyn+K10BpzzdYYAZn1uYhCChU4hz8Bc86xmeejgnJU\r\nFScdF+I52lL8vJmGcRuk4/+fqCKnZOVlYiLJAQKQSf1llswfXgjF82SJPt4M\r\nhF+oWjEReG2rj8/GEUTsYBp5Y8kmzFVzVp4=\r\n=45af\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"64666caf2aacf562ab6ab5b701e89f28a9bb5c74","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.558c2be62.0_1668206657634_0.7109998935848345","host":"s3://npm-registry-packages"}},"15.0.0-canary.b5c13a7a8.0":{"name":"@material/density","version":"15.0.0-canary.b5c13a7a8.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.b5c13a7a8.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4f9afd1a960aaf14322a0c9c099694cdd10c45a7","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.b5c13a7a8.0.tgz","fileCount":10,"integrity":"sha512-RGGDr2Nvx/M7sp30MuYmYhL3pQ/KWN5WkV8Yx7UQ2c+gYqClduBxV42qtr3OriPXhFwInw7djGTR+UAnGYbNxQ==","signatures":[{"sig":"MEUCIFI0g9t+gaNkzJ2OMy1Jl0UeF4N2f1Jm7cVYwGBfDq0cAiEA+VJwnk6iaTl67YsIoAPoNzx1gcDjoOigopcvYVeeR/Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjcmVkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmocFA//WBqDSzrGx+ZS2XYEJG9TcXgnk+FdRsOop7/IykmNqfAyE8pA\r\nwybrCBu63AN+rugwBMBq/gp+ixN9GUn2fjPG8HmanFVZrJulnHtsA9Sdbcli\r\ntRU9n5gNXCMlfgAhoXcsf42RHpVDVns9gkZhqTsYrnrPO9guqbYjKpTTmoN7\r\ndiCvgTtbyShBbwVT0jC50u1v2nc0GEcIYGPBf3TtsRQW1ktJGl8HxaWzCfFP\r\nHQvRDysVLsBzdhjKeHlb9ZIaZW8DfmtZHTuQBK9XBnFaRpEkftkgtxGdHTYd\r\n5owbzoVji4TGW5jjlJuLgwF2DS6A6WnEI7Q50BheCDTXFIFhwI2gVqRazj2M\r\nIYCTaOznOM19GOOiKl7Oxbno6P1+j3BaLytB08qDDkkWvSKqyPmqekUe1r8V\r\nY58S8ICpoK3axcOKf78azGa75htRW1i8Jy8OMSGUwKpKCw+85vKpp7Uv9o+t\r\nfEkfi/XyLXTOuoFjdKN9m27y7IwnoKom5h6bdGfK4GIwE2VeAwolne+2Dbrj\r\n+Bnb7lztphxeNFDMSHqWGQH36OiK1jZDGzb4YWyI48hX1K3Dc7zpM4c1txvh\r\nUEhUtp8zfoc3n/ij6BOtAx9plHg3YaZgmeXv07Mb1298hyNkIUpwBqUb/zFz\r\nFZLtWADK5Sv5+iRTmAOGZYswdN6KwtsuolE=\r\n=iyhF\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"d7e326425877e3ba53b64755680e3503090a01cc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.b5c13a7a8.0_1668441444111_0.05692365549994216","host":"s3://npm-registry-packages"}},"15.0.0-canary.a6e1c0702.0":{"name":"@material/density","version":"15.0.0-canary.a6e1c0702.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.a6e1c0702.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"33a21798e2f224bf079e1a3cb4c9ce0f8e650ecd","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.a6e1c0702.0.tgz","fileCount":10,"integrity":"sha512-2MFcNG/9iYmXNXc/2PbxQFcHQaQbpYchHyjpgnqt38ZgXoEVDN7FJ7+CkQESblhZ+UBo8OFgVtgIMRTvo6BerQ==","signatures":[{"sig":"MEUCICLqGewxXkYNYnATscaubdG5e7P4XGuT7Pt0U6XqUHZ7AiEAzkF2ZqMVqFgjFN6Qh6OGwBJiDVi1f7r3DNJEfXZty3c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjcnomACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqJew//fAovMOWsknndzPVcSbzSn4M1dJXFFMjV8GIvueEtyUhZIrmC\r\nZrS+ajc9teOHEOkPH/F5Ezah7hLYYvmL3XBHnvxzshN+u1i118aEDi4fp/+K\r\naC3UNmqBMLiBZa7wYUVDNPmaV/+cExaNWggTgc1x6r7nUGaX9hEvfka3CXQV\r\n1juwVh97RBZRbZ+C8r8eL1c9ld/UK86qdVmkhKJhIJNkOYo7YrDBM3hPP6Rr\r\nkxYuFeb5gwaXPiB0oUtAi4zt7PbJLaHwj1jwHGMTj0RvEYT6W3OjicOKUk74\r\nSWazqCO/AaEwW/VTa+IEAYRSapL78FsnUuouWlv3ZZ7926E371RhVPAp/uXN\r\nlNFILC2jbLi8RHV3iNNoLy0JgKrBtTwpLAokZnqyVQlqyx1lBtLzOhBpLWtr\r\nCMjSO3TlUpuqte7bm6X6IYjTs7Va5Msj5WgGAAEAsgw5B9oCboQmdiLT0ekr\r\n/472Tuv2DB9K1X08X8Sk66/rpTLzvtdej1iNYt9MVnVm+pPiuJWPVPRNbbwn\r\n1iHsPCXgnI6HDIcrvupx87kNGby6kzuq/0hPW/21m7WbKoDwjWcTTZUJTAMP\r\n7aAUMCQgMzu4APBlhZeUONt+pG/ARaNnGo8Jg68ARy9JWfTAEg/kOdFKkeeo\r\nlMZCDvNPy4R67DGS5JWwq0pj/37+FfPZFIQ=\r\n=wOPh\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"3c1ee7333cad68ece747437d4bab1a737d6ea96f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.a6e1c0702.0_1668446758342_0.666633408087052","host":"s3://npm-registry-packages"}},"15.0.0-canary.b6f8a06de.0":{"name":"@material/density","version":"15.0.0-canary.b6f8a06de.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.b6f8a06de.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ec2c12c804c74bb6d49e989280e65e4d34a22018","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.b6f8a06de.0.tgz","fileCount":10,"integrity":"sha512-c9fEotEo7IoVcxfjfDrLHPFGtONaaeZfj0wqQY+IvpZ/FeiGTqk7W6TGKSQwVsR55ignSXXekMN5Z0+v21PMlg==","signatures":[{"sig":"MEUCIQD24eTMZ68yBb03riIPti3zWo9LElCRFPGIGEinnthiTQIgU6pM5s5fR8awvyiNbF8aD+Jv22LJURlG/z7OGiEQaZs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjc1tzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrW7w//fC1LNcvpYBVrvrHvvIV+XwRbOEjjB7KQuZb1Xy+pG7jVM/rf\r\nAXgU6QNk0iFrXbgxBa5jsWB1+EENgfBtNIePABUiV2E4kOU+J0qAyN0JTDKH\r\nZmOedFBYeq4VYiORtokBIcKHVyvbdaeizUqSdYYJb/fmMs9NigN0izQBNyPU\r\nkhLCTARie4ekLQ+jhdLcMf8xpGzELc1lnGfb5+CYOXkymWrPn5D42NSDepxM\r\nqK3DdYklCZoJ9yQJAnHF8lEb3g9JrThhtsajPwQU12XDGOQO3QZudNckKLqb\r\nXRACtq0g3FEn/PiQewgcdLK21fa/mG5Hs00E+xiL6gUQndOYBpFgSIjIiiA3\r\nQcZwx206YSG3GM5nzFgcV+Dt7IFVZYa9XVsO2nu4wCo9qje7oT6lmp3Ido5h\r\nxtMMlpGY/r2rU9Q+q9gRIQQzPfFA8SJp4Avnf8Qpb3vVS7I4BmGd1t9SHPFF\r\nERnWuNXFZwQyocYgUPtMyGUYvUji3DT44v9Uo0m9UJ3WNNtkHRzPsJ463pTB\r\nyXYjnSm2PpTxkOd6NY4R4q1fsljf4GhUDHMX4RQZsoGWf/9MPAsHIAHASglm\r\nFfQIaYnBlJzFmp1Ncpdf5Y9c5ndfokBvhKix5utFEqq/LieAUq5Mhc8yt5yH\r\nwNvQEkl7rA49ajvAcO8fq85FweLW21uxbrc=\r\n=FoND\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"92681882b16f14e6a94df4b1ac983fa86e242640","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.b6f8a06de.0_1668504435407_0.9883400892268608","host":"s3://npm-registry-packages"}},"15.0.0-canary.0163f3ba5.0":{"name":"@material/density","version":"15.0.0-canary.0163f3ba5.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.0163f3ba5.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2ecb74d544ef7d4e243683ade963710023a58ecf","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.0163f3ba5.0.tgz","fileCount":10,"integrity":"sha512-E1EQThaG+4/ZE0rP9P/fADXgHLXjceUPzLu6SFRjv+uspgevRqE53dADL834nQOdNC+YvDtcxKupKkoZTROdoQ==","signatures":[{"sig":"MEYCIQCY7fdSTLAjYmiG+YntKs4nP1YoyFs6z1JWqgL08aINZAIhAPTWkTwKOxvMOoKKY4aq+baeqyI1C/lwKPaJ7A+ksYOZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjc9PVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoagRAAo1wwKr0eLKVU6MJJuqDWoGSs0ZR5ygs/HoCnC6GScTCS/56m\r\n7H4L0vtyDyUTHPh5AqMq5rTWeKOUwxNSNQu/IiBp5i7rOEg3qwrbZrONBzr6\r\n017Ny9qr3lgvnlQoqF9hVP8IUwcaorbQnlGMbrAJEXwIWqzZNXABvq0j7vK/\r\nwcZG9JhMn3d/PzRcWy8Wxl9fB0fQbh8jrdhl4EN3+kQSpjy4Ec1oP0sTaRS0\r\nf60VzzXIFedyExQ2rQzR0wpNXyzy2F62xnp/wIp7HbIcZtQ+y9sl/QIEVzji\r\nEgOxgfaF0NUJML+PjnQH20UayBWNAHa/ii5d6qvsCvTJp63/784TfpI33hby\r\nPmMl4Z8I5cjv16fIhVrUHQkLfGbA62y42oBAuStzTCjGLEiPrVE4Sy0QruUt\r\nyG7zQdbNMSGU+gX4PZMFgUR+cW6UkObdtJXbmrHuoPPE+dhXLSqM6LGocxMZ\r\n7c9nztFtUQ7jg1rAAjOp9O038bjuRPj/Y+m8O2Gu138DH6SxsGaJS9AFLpOn\r\nVDa0cwyjdUzWfJBBTm4OasKtGHgOS4tv7XddhxMHkBfSkn1EaCVR5LMC/c9U\r\nzolCw1jiW0NVV4M5LMW0E6+AayMV/9cJ1LafzDHu9a4d9jnwCzuw+xFryiwM\r\nJvOow4QeLzC1FX/Q8dC74R/skhinXMp0Fi8=\r\n=ojEe\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"4198cde77ba33a68c74eb5e814d92df422f464c8","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.0163f3ba5.0_1668535253283_0.2558692913511733","host":"s3://npm-registry-packages"}},"15.0.0-canary.66c5cbb94.0":{"name":"@material/density","version":"15.0.0-canary.66c5cbb94.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.66c5cbb94.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"88c3191d0ed6ee0e55157331c8d5fc9846514df8","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.66c5cbb94.0.tgz","fileCount":10,"integrity":"sha512-LweIDhTA2k31fM7VlWaQg13a1KbxUS5M0PyYQuFZNCKifgO+jorfUV5FY81lXZeN07Xvj8uylVsV8c0eCmd0IA==","signatures":[{"sig":"MEUCIQD5SCmwGTJzIs/UCHsiGxCtfPCPCdM0I7AowEH9YZMIogIgRXe6RYXT3hSVCkJ8B5DKS7XLU82dDrwpXmFvLJUJ7RY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjc+hyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo9+A/9GLCmn2xh/yjKUQVmm35zOPOKCWGAlTvH1SNaYHOlacjLTE/k\r\nUqP9ONeSJiRVsASXBVZA65IsSUUiHbF55jksq9m2EXIVdeuJJeudrezwL04Y\r\nBxTttbYVxTp33qP+HmXCVtH4YvShBovkMA56XYH/dD2gzKIE87am3xJ5bez3\r\nH4ed+ZAi17b0wSw5TJD145eCuFy6ysiCOeV+91wEhWj33J540j34zjU73jZn\r\ngUH7fhkhsPHXeh+0RJclwRfYfFfQFEOznXfDg8RdTweAJXfqHjjQ0K3zSpfE\r\njjgOSO3kiBVUh4ksfzxIH2PL5WdDk8ZeeqiXLSqj9bLCwGSQwT9ea+db6J/W\r\ndilRbZFoLlbXrfXQJy5bWPkEOvUomsyHFcCASmFbtGSB0qlKeiFanTbFgLqn\r\n9RlKNJaX1akdWYv7OmArSil5s978jaiatoaiQyAtsFwuoxkMQvg+l23x5+39\r\n7UfGZOlogRTHqS8PzGs32okXlqeEeCtf4cuZUF7LbgoZ82o81iGRhLlKbxgU\r\nD2v4zx86683MSJdCazbi6VBO94K9aK4Bly7gpf8od3P2JTH8SQ5MHPAmL3ch\r\nZ/jrPsMnFijPCPb+RtLa6SoO5eQT3da8dfMPOBV2Ds69+KyEQ9B82jnEOn7/\r\nE2hfcGj1/MCY2kXRZcdaiYSdEiZJ0FWesh4=\r\n=gZ1y\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"5d01716a4e4556657b2c4ebb469b826660673327","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.66c5cbb94.0_1668540530566_0.8954981254458194","host":"s3://npm-registry-packages"}},"15.0.0-canary.b01136063.0":{"name":"@material/density","version":"15.0.0-canary.b01136063.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.b01136063.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"497a01a483b3316aa43f44d78857a2656daa61b8","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.b01136063.0.tgz","fileCount":10,"integrity":"sha512-y6791nkzHeHK1Rlw0oTtMMrjnIBXyv0roXh4foTEEhkzOJ1wQdnqCsKdf3WtdbX6ul6SgNIpSxetLHrcq/RvJw==","signatures":[{"sig":"MEUCIQDIYF4/aoeDrQm0q61Pxrc8v2EOTA58qIGwHWucpNSiygIgEyGtZnWD5kO/Bs55gycZQPlV4NSAXAsVsHyTHPDn6Nk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdCtvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrEUw//ZoEu0+s6B4TjgciygDPfHd1EpzmTaNclgvdIvml7GeCgXSA2\r\nznrR4goPHnpOkGMOY1SihW9X2ceW/jO4TL3EfUu4Rqbdi4BqhpUqmvQfRSvs\r\nAK3PsIzrLt96ChZctKAYQtZg4if0uBt1VYLDf1ChAMtwvmsAOQrFvCRVJW23\r\nTwgWtUkOkU71JB/kZoQrkUhQzgAzqSmDFLV8Ev6lmq0nbSlbmBYu6ohx0Npu\r\nXfqc44CEfVpvgY4ogmhtbmEGTPr5vTqtPdhXPpdGCsk14ZVjBgTSE+gTSH9d\r\nV2NsJVTA1syqDt1eLK4Awxr18nevIN2WrZOMYjnbsPsOt3Mj+3zNhXgRocjl\r\nbYl/zcmPW4jRZC/1OFTfN0+j1/mPfbxp+/kRP3EgFzRUbQJcMoYlA0ua3SiT\r\n6leDkjcb/6lqxmUuFM6OgWso7neSky9C5crenST0s4kLTGq1ko4zaw3Mmi3X\r\nn538glFCwvMBIg4/GG/F/1S0cUDu4/0SUPMSukJVPQh9NEBAsPhi7je1CRRC\r\nbtsitzVex4Hvb/DRM2jcsZ7gtrmsxcjBzFydHpgHxg2YuRcydIRpab3js51T\r\nGIEnFQWobnwpZh12PsIly7cC340AntXXDzLyWSpUxVDUONRSO1VdrMvJQ6aO\r\ndtYkCTh+J/RGD75az6P6WSJ4G6lQkj3iobk=\r\n=h7J5\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"125921cea459cbed7dbe3e1c938761a0cc03a263","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.b01136063.0_1668557679344_0.39975355087636144","host":"s3://npm-registry-packages"}},"15.0.0-canary.01da0cabb.0":{"name":"@material/density","version":"15.0.0-canary.01da0cabb.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.01da0cabb.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4e4efeb5c961b976fa098a965e95cbb78e644f5a","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.01da0cabb.0.tgz","fileCount":10,"integrity":"sha512-Y3W4+W+cSrayJ1+91k0A1m12jjRC3SUs9A0AXmpF0M7ESCVEpMyhB0yRVzYOOuTTULWvNoCHOb6C+MzMAsdtTw==","signatures":[{"sig":"MEUCIQCflqudCP9MAdl1KESZr7VNmoJuPorykfmgBjwHm974YQIgTHRTvz68cffR6h7qgMIvJeGIQw+834uYVGhfV0r6ZOc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdKlmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoFWxAAlj9/GP6ldHaG5gK9h3vhGPrp/6ietA3fLpqHZzDgkrdSTTCd\r\nR5YwiyGwnh+HSZaNov7j6i7D7v9gnnRtK4CsJ5bYpadbubZUKo23BS4gi+/4\r\nK5oqAsYHjM8zRi0DFc/ihmmTSxbiVXAlFrZ8jeools5leNz4wjXo02b/huBR\r\nIccfNzCKm3hpoldv/wqlPJnw5kz7ye+2dpHQlQbsF50c0ari6ATCAG0+7yga\r\nAJrEYwflUVPrY4eD0SrCFzm4kctlvLZ+KttSCe+bEpH6KZavsSfxKLwDhzVV\r\n2z1R4XpisjJS2Fy1Q7XP7PcncKNLP0+NRCwwvtfHfybFcb/a05ayYsoYXZ/Y\r\nMTVAUlaxZ6ES3Pmzf+l/E5yv+TBNFbQnCocEU/1+FL+C/VqGwCLI5eC0Jadl\r\n1l1EiHctwVO9TNOuMt9YRmnkDBV3BKd5cJp9laVtfuyWQGx/tlM5wXjD5wFt\r\n6HxlmRZh41SPtAE0SiJZ9iCaFuRMC0nBtseLuV/BEpjEsBQZQgC+skMcn+Gi\r\nL+bafuaszjfyRAvNrJ94dt7NOGDYemB2+Yhc5/bOz/G004xGN/9guSdncR9W\r\nWokps3FJP+suR61BnPNdwq6idOhzTHS2tWZOpdRZ7zRvww9/TobpxjgN24jJ\r\nutZgd3wyrlpTxJTsnce9Bpkho+0x43esPB4=\r\n=1Asg\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"63a5ccdac9b23a6c70c2bc776e20ab703cd1dbfc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.01da0cabb.0_1668589926217_0.29924252847355715","host":"s3://npm-registry-packages"}},"15.0.0-canary.4ac393164.0":{"name":"@material/density","version":"15.0.0-canary.4ac393164.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.4ac393164.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dd3cd92e0b495e609371fd519acd6fad1e55b756","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.4ac393164.0.tgz","fileCount":10,"integrity":"sha512-iSSBwkqZlJiZzP/wTPBXdQgcgG7leoxvxL0Fi//qJkujLhNt3tLIjQHBmnTFnCGFauVVsC51zTeojqNdNEF88A==","signatures":[{"sig":"MEYCIQCR0NPirNw2uJObl+niSGl9WGnHjLmSsfSVUL43IouzoQIhAOoLns6iscc8jQ8e7ttk20ctFN+eQHWbOeA/ZCg2Tq/E","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdQxJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqi5Q//U8WS+IyhbG62RLokjYUmHdbqfvLQWlFwfTccFhTrvADczk55\r\nO3yaWYUAfZ0AU1sBJnkbdnomychT8Dyc2tZbxkODSI+xzwRH8tLPEC74Xhec\r\nYG1s0/zi1E5EMCPgP2rsnvk/qfazP9jUy98ULZ6+SWlzXddVRnwPeWPkoZoD\r\nmErab3pNIh820kgT8kKEC1ROg/fuwP5fe0EPdsvM3xtjUOBK0QM30p/n5tBA\r\nRg2u+QKEN+xRoi/cf47HPHKgE+Nfp2HEc8h0WWZolUBbsfSrutUNYDpMcPll\r\nml8yMTs6bjvzz/dYrmKb+TMcihO1wbHvqaCLp7hd5l1ygV9AbsiwwtMQadAQ\r\nUOLDDK9xDiniTtQZ6H8JSurSNXsWc2LSpWNpaS1p7VDf3tzCow35vLKCuoj/\r\n5urjSDqm4ps6KlIlJXa8O9zx/y5G4Z84oP4EGV0HUp3BwdYymaVwDuObIEMW\r\nKiJPGcu4CKAekBYKWCR4zb32rq7b61ly9ouzj8/3TVC4AprVz+/48tVA8vCw\r\nATAHX5NreyUNl9w28g3Mwri/ZpNGSLQH4pnTfKc1sKOHZfFboQVgy5CxNJcu\r\nuDQKpMfoQu8zJQeP/Luuq+5Ji/RNpEZ6OM2z3+Wu8INwpJqjYB+PL22YEpBX\r\n1xtd5bkDIv+IJQ/owA6JvkuB3tVI04f8Ioo=\r\n=l1w6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"f14d3444d266ac4c6c92142c377275be3fbc5d0a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.4ac393164.0_1668615240931_0.7561098981138137","host":"s3://npm-registry-packages"}},"15.0.0-canary.6048fb563.0":{"name":"@material/density","version":"15.0.0-canary.6048fb563.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.6048fb563.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1d64171c7e8399e82479aaf0c7e9ce2441cdfb2e","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.6048fb563.0.tgz","fileCount":10,"integrity":"sha512-w/e8ET5GsmxSH0092N3U4wQLFriOZ6055o9M6eiLQ4CGfWF6IL4huBqKIE7J+L0hW6JjGogwQ/Z8XVzLAGOYZg==","signatures":[{"sig":"MEQCIB+v0abmuEhHf8saiqfx7Zrk8Bemrn8M3AxGmX6PcyXTAiAL31+K6+OfyAjvHdI73PsU9rSsk6ycZSuQCH0CijcEeQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdQzXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrJVg//RUZbRrZUmMtQBOPaXZk1nlxdnVBtljfvEXvtKn92PnVQwxvn\r\nIVy6VToCleWKJ58LIbPJ8wtkCNiQGw3ZUuDaJaaLHZDtXIRYubo1o5ilcMzO\r\nhcy9TFvAIzYbwTcgeV12CkX+5eOfE8DGYefgCahzLgunSrnk+obReLSQUMkt\r\n3jR576prNzgA4RKRNyJigtiMc72WLV6Sti16yYjHqRrRjJVYTUKVXzQFCXXQ\r\nLeko2wdCBCqtn38G9UoDhLdnuF9Xo4gyC4yIAGQMI9cXIDjKPpg0hhaYgu0V\r\n9xSnPhlWNcp7Dy9pMOcvTMfqKPAs82YHuFdA38qjk/S7s3y6xok7HHUiG4b5\r\nnfsyckd9U0kjikUsFWzIYXE0PIWFr7X20tmx1tS9cTHdN68xboX2eK2+Ovnw\r\nW7SaLJ/gny43SNF9XUHxBC/b6/MVN0yBZGoSaw1O7guwyFAw4pFv0413fTVA\r\nlLtShXgrPQVO+ufoc/wwJMZJa1AIEjBatI/hpugvR1MwMqngEVOvD55Bv6Vc\r\nh44KKyUC51e6Au5pz5iMePT5V9BdAoQRZRxZgZXaae7RwWvnvN5VUqnEE2eD\r\nWB5fHTPgClEf3sY97/2gbT/q7jIthnRLktO/caR8VinUV8OboiaS2CKdqiyq\r\nbNEzQe7CQIterGFsS8clZLcozjtl7i8cpmo=\r\n=cq/t\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"590020431978794ff2128a91f19756dff9dbc37b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.6048fb563.0_1668615383271_0.8757906551178205","host":"s3://npm-registry-packages"}},"15.0.0-canary.3777b03cb.0":{"name":"@material/density","version":"15.0.0-canary.3777b03cb.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.3777b03cb.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5c3cbc47353b9503c4acdc9970d1eb49c58981c9","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.3777b03cb.0.tgz","fileCount":10,"integrity":"sha512-DaHmLLEh/yvoYV8BEqjIb8ysJWg+6fSgoldDOWMcHqIP/qhhHGb3T7Lq/gbMp7uQ79C8iSAinVRtiJw9/PSe6A==","signatures":[{"sig":"MEUCIQCENKqCxPRLSmqJP5QSazx1zF3utdl0QMq0efH4uFkoKgIgEfoSVJUVhdQu8ngR/QUPSgg1tqRFsB4i/vKDFh9YpPc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdS6GACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpAwg/+PsXUkDnC77DWinAEEdeM8GIkTT+XZu2UNScqIRw/AGTOlLqV\r\nS1fem0aBTfP+etiFX8rhDL/mUJiZffRUjF0oEygZlRqjgUAWQKmwUwokUyny\r\nkJsxf4xXIzQMwrw18JRKae8Zxw4ge6wp+lftaYqOsp5Qlq9EB/ci+FIQlsgY\r\njIOi6hIAFle3BGKaI6Tb+1SbD+lAypZE3P2G8KR/u6dQw5AgGPV9CbInUiE5\r\n5bukXWdBdq8HxiPGGYHZRpZ2Nw/XE3zDgllvjr6hmQtx1LR8H4zlIxAkE46G\r\nsjstwoD9C1yETyOyeWRoGsHQL+VqVyvA4uT6/X+DNCBZlcCH4RuYJYOExV2Z\r\nupMPzPbDWsmfbiLEi4PoTEbNoHqY6cIHvkn9zYXPqT/t9u15xyaEMxUOMk9s\r\n/1UFEvesco0zyvKy4KmcjkHBwBz2Jic6GVIG3tEO+kJpKoohtf4pSHLrjxxL\r\nbzguOHh8T8IgqOpM/g3PRheRFG3bLlpErUrRb+sOUXefEckmjRJTur0Co127\r\njYpZJObvfpTPhDM3m2qXMvtkJJ3xeDwkC9ANMrNlQNKrHN6fW5TV8KXXikYH\r\nh7X0cT4IgPO+ZiiDTTxzSLK1Mf3PJNRouC+vjC+MQ1EEOUiirXnaV188BgDD\r\nprZofwIIDEVyQSOUKpJDeG395Zo3yBuy/VY=\r\n=m3ij\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"e02f6251b19559b874fd1998a9f0bea7d651e41f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.3777b03cb.0_1668624005748_0.011565777426994162","host":"s3://npm-registry-packages"}},"15.0.0-canary.f7f56fff7.0":{"name":"@material/density","version":"15.0.0-canary.f7f56fff7.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.f7f56fff7.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0a37c4dc408019ab8118ddd4c5261a2c8aad4089","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.f7f56fff7.0.tgz","fileCount":10,"integrity":"sha512-U/GrKwhIwxPvD2Y+DLQERwfHFDfzNJ7GHo2aHFYYChQsPWk18B5mynIC77ey+Dt3CIbfmtRsWOB24Lt8ahhXdA==","signatures":[{"sig":"MEUCIFgqI9Fp8ZWho9fW5a44ai1g8UEEPAhGA36ijyp3z2GGAiEA7mgFU+Iu1c0oFPnKy9AU4uH0ir9BFQKrFoVaBtrKXOI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdUANACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpzGRAAlqGwIH9+y6ManXRxX41frbYLxe//6DGpu9f3LdjbcGmPbKkf\r\n8s7snMXMFipsUZUOoDNyI1UQIRHx6QEKfvQgQ05S8oxrWUKFOsm1+unnwUiS\r\ntE3CrE7BIVLCgbZGuvrLJjmVRT9N6ktxEpvawSVVPCiGt7uw7AU1b9n2bpW+\r\ny+8NDaDqU3X4LSTVNHC8RHg0s5AVaHaESMOst8TKpbbIrPftqwYOTjLjxM3D\r\nr8BOiUrab6rNajUJzZgfwWFVo1tM5YVjI8zS+H1P8waO1UUs+eJJbGXR29ys\r\nLzOop0BzL5HtVQlpcPg/XLlqjU9u5ntHDJBuIXPxl0JzdmlCSvmjZsyUAGS0\r\nrHIZGDAwYu94O2DBb8pSThRVHsDcyzu8k0xnnV+COiIC33Ntc0zfJTIgLFw0\r\nHwFz/S7JTHkBe9/CHGAaLK65zT7w1Z7H7xBOuswpGunyXAKYBH6yMCIog/yp\r\nxRAedcvV++/cjaJrkhIHA5O5tM/6X+sJjR9CqkPaz7iI9XcoNIGZE7dU0jud\r\nEMIE2GEUAuTD3o8NBjGsxTaxXVVRtFme20Ruy0ZQjxDh+vJVNkmgmJlwMuT+\r\nWrvVdqY1LA4QyTdm3Rmbks7NPv5uVygG4NPEX+6rZqUb2agUuhLX40Em1AUM\r\nSz+L0Jsrya98yGHNKEmTXKTuxOZY72g9mK0=\r\n=U1O5\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"bc90613e754d04f738197ec3f3f4602e9b362d8d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.f7f56fff7.0_1668628493320_0.06721774402647518","host":"s3://npm-registry-packages"}},"15.0.0-canary.7c73f6134.0":{"name":"@material/density","version":"15.0.0-canary.7c73f6134.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.7c73f6134.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d04f2b3416f4457e25530bc9d41869d91f10796f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.7c73f6134.0.tgz","fileCount":10,"integrity":"sha512-auVuog8R83Bo178AVy5R3LYxzL8JZCzlQIbtYMnJH3GqkgStkCRr4kAr/oRsRV9rs806ulYstZE7juqnQULjzw==","signatures":[{"sig":"MEUCIHaRTvUIhd5KVUiRi4Iv8ho01TUHvkRnoTIrpF1M1uIqAiEA2D4mYMfeZyXIQkY2/5Gip2Cv0wunYy6hHUaXGV6Jfp8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdUDgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr6NQ//a9X9qCS5bzr/83yH3XgerPQGF1e8JjH9jZJzMzRdpZ7u0iLJ\r\nYwWKj7kaRPvfJ4PLKal1+fV4HUYbRtYKcRuEICtgwhK7U21dCNrKf5YasNyp\r\n0lKpO+u/127XKQx83UqKlpNWvB5eRLpKCsNzTwpBNJje4sPFgh6V49I6kKOQ\r\nw4isvxFdMgra8IfxEfJE+tFjU9DFB0s07JGOoNmS1WyDCgGOfQ8xFbrHyUGo\r\nFtEt9N3E6CO3uHK+AeUOL+JZcFwRkEEdQ6ZS2eEjGddQ2cyDlD4MGCOVM2R3\r\nK2P4zJJGmlLARX9Hc/4oEBxPA2AUQE9Ukw2kwoKzZrpMKLpcv1kA6Kk6ztG0\r\nMg+9qmReV27Mdn46BaBB2ULpvNcPR+PJShaN05AG2qDSAHgpOPz8RttPv5Ts\r\nEyMBPylv+/KcEeX92QbtoQ6xD84CzAiYdWvKZsCQXSmp2wKyhvTaqCBe8V5x\r\ncdcIY0dFpRaOcSjWpUOWTmk3TjNVDcymSqMmO5UMudA/y3qUZXjAnZoSWnUc\r\nyypxmfc9D6P7d9ShcQQMvcn65Iuw6FPdt/bQdORVgGLTV7LaOp216ZW9thsQ\r\n+F19elDg0WBYCwjDUbf45T1szkvr91arcV6a4svwkZs7ZTfLNO9ejpRQJMuu\r\nE6E/0GHz9cljkMnxEsPhrUTfejph5PT7jnY=\r\n=SyM7\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"14f53e565ed77defe907254a486b9ecce4b45146","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.7c73f6134.0_1668628703944_0.5207934513303278","host":"s3://npm-registry-packages"}},"15.0.0-canary.f1e037150.0":{"name":"@material/density","version":"15.0.0-canary.f1e037150.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.f1e037150.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d481f5a1238833ec899e171d52dcaaf710b0d1f2","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.f1e037150.0.tgz","fileCount":10,"integrity":"sha512-1dVSaPVVA4WfHppm6pDCBskDUQweNq5fWqeXHPxakkc9WMoJE3ba8ma7EV9FhNSR4AUbbIw+ggjqSERmTzo3ug==","signatures":[{"sig":"MEQCIHYQkRWruW59I3MlVLoLUn0NTdCcq+MyhvrCnWotdUAyAiAaqLnOHAR8UwB9JkdpZgIWrUJGRsKoT7jsUlcsHI5sGg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdUIkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp/Aw/9HWoYP5pzvnsD/DWmIMBRjNcnmRjov9ynSrBmjtHlRmiEE01S\r\nwLS67TrH4uBlSn3frf4cC3a79hi1NtVX9U+T8BF1Yjc0CCXWrtTp3uujgyEg\r\nptCI5TOEYLI/BRUbN9b0C8DgPHUJXtNGOLDesPp5ROgs/mQAA9c0Rbyrr1Jg\r\n9k4IcEj/1Jqd09bvAdUm9D9wCy3t0GjLE8Vi28UP/KTqmyMvxTw2OmhniRHU\r\naP2Ic3Et3h5t/CUsSYc4+N8xyvF/sFCCQsdUDhs0j57zyPF6E0U8+hOORAx6\r\n1ldYwKMBaTPfmLrLmBoUqmBDafcg0e954TrxmWDV6A+u37rpbkm8sTsdOUqo\r\nBeeAU7L5WieMJrS66R35CRwp21MeZXDudE2OIc0Mi6YW16n9AH6H+0iLDdhP\r\nIbxZK21xu2T3mhkwAO7NLFBQLeoJJdnY7ytKMc+MkGTJDPWcNf6dd54ELlAE\r\n2fAmrlq1vnYbRv9Rsl4I+j0iEws+WRHuh/p8lHTc95W8FS6to1Zt8h+abjeC\r\nzi4E4AHLReib2nCjDwFwbOuFG4VHnH9BzCPwBsfoSkxvBDxXAEplYsOn+zNF\r\nFxe/xO/hzrXsfBc2xBLAwBwgwe0VIN1ygGU/Xmqt8U+OQowkbPm4wF9+RGLv\r\nLM4WWk4IvwrHsFWcOJqSgazxOqeYA2KVQwk=\r\n=AfX5\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"a639195febefa28bbed957ef46942b3da6a4cecb","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.f1e037150.0_1668629028173_0.5268965339602962","host":"s3://npm-registry-packages"}},"15.0.0-canary.40b18d043.0":{"name":"@material/density","version":"15.0.0-canary.40b18d043.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.40b18d043.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7aae51be9099aed46931bea1e6c95b5818c3030e","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.40b18d043.0.tgz","fileCount":10,"integrity":"sha512-8Tu7d1f57Ygpsl/5Tj8WxU/HXU4gshW5EcxQZsATCEm0rgRUObDsqybq7AZlG3ejCxekxz2QL/VIz+r2Vf48Yg==","signatures":[{"sig":"MEUCIALRk8RRE8vaTPH1pKVzPEvrDVWX6STRy+t4oBxe9ULeAiEA+Dbk5T7vGCuF8LE6KoW3aFFat5sFMCj1VgXu1lxg5z0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdWrlACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqSfw/5AFLFefAwCBB9rklVXxvTztnqsR+lCGMDD3Ugzd/Xd//BXPsA\r\n4ECB1rH57MRigsMqafeYWkTkX7a0BBGDqrGAqD8poSsj2vIdnimOIdb+fcvb\r\nVTJjjpsJ0HyNZtu1+YvKJFJw6vMQJwliHaFu/Hl3kYT8iNOApS3RPRKsBKKh\r\nziAAqkvQ3qrEEwmy4LtPMhr7Tiw2bQNCPQHIjvSsFfa0gTUiIAR0l80WvT+F\r\nH3Ey5Q0WJ3YamMqiDjqTZ+ZeSGEW3nNYt3HyGvBbCxa2lYk9MLLba7TKOYj6\r\nxoMNEiwqKQvoT6wz3Grq6T9lAIKnYAfGnniRx20acjOgRmOU+DxOq0DyKRP6\r\nfAqFOEzYPY8cBR2MY4FF8vKFmAqcUgluSg+XZyyxZM7yzqMp34RKL/CaMpnd\r\nvVS5kBBtY+DEszhH4yu3qfXh7k9AuT/f0b+ySZmK+/rvsNeyG7j27jGM/2X8\r\nS3asxOQ5wJwZdtVZluIRR/nLRkGLX4wKHnmXucCq6LJCm8ScQ0Y7EURLxrvS\r\nu79ECGwJxW764ssBDjfduJEdgxpb9U3WH846x1Oy82LsNv2VIH2c/2BF/RpL\r\njFV25/tRTXBCjmn2OIQ2DbB++HPlX/TRIxVotMNe5i/KyEXqBDyWeOqORvmQ\r\nXMJhPyw2W/h5ZH1pJdjh/32uPGwvdhk10M4=\r\n=1w12\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"9ccfc97518c89cfcc2b5e776dafe81024d137f31","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.40b18d043.0_1668639461202_0.39665769077368185","host":"s3://npm-registry-packages"}},"15.0.0-canary.86bde5c06.0":{"name":"@material/density","version":"15.0.0-canary.86bde5c06.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.86bde5c06.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"16e25c951509bb7d408459d144ca5ec09fd5725c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.86bde5c06.0.tgz","fileCount":10,"integrity":"sha512-ShabqAnHZEMv3WxD7+CzbTI8Hl7hJg/M8xpsCHh5duvW9bgGS8Vtof36wiK/ikgzVc1/XKjPWVlZDDYHw+upbQ==","signatures":[{"sig":"MEQCIAUP/SdzCiQ4GpTnDnP9facRFCzmVXNTukfo7qRW6Bu2AiBJz1BiuvW8Re7Q1wfDqfuOGtqN9U7ep+rpVy0igcP0JA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdW1GACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq3+BAAo4YsnN6Y4g339x8aw+Se03iGfChD6H4EzRiYQS0tS0EBU7//\r\nv4SyUdHKyufqLQOUraaMZGJn1f/iRFZLm8kFTdzF6jqz+/dnNNAuXpdmxYMr\r\n9xVpk3XFcQTjhLSWKnS+6bLNjR0O4+t8GAiY7oNbAaRUprV0xZ4F5W/miqKZ\r\ny3aWjig0dbe+7kT/ndv9woX/xCyeU5AH0Kn/157hnN3gR3eWwC0SnaXikQdo\r\nQxIEEXMsrYc/2K6XCMcATRQf+mP5GAF4quuI3AcJCeVfkD66WO8Sg4IQzKi8\r\nlqew2q5oCQMO6GTCXfB56sjHPgNkYw7ptNS5jQosQiWk44nY42vTvXnQAQNl\r\nGDAPcnMF/2ir8xuUqzXc8cmW8klpwvCimTCJFFOH7njt/OQS3tQlzigL9k6J\r\nWGuw984UsWXDJC0CxlhGSynNuLkLx2+zKKhhDkFUaPAkMe1oU4oyq69fGZ7m\r\n0We6clx8Wv7sCYbZBzJwldBZOnN/DcAsuCRhb42nPgFQRG+NaVIoMMU1iMwu\r\nxPAnjJ4v+em37yT+gAoekR1xaYcNZkJtEsccBf70bAxLancCd0YzBmlkb3DD\r\nbxE4Hqb55H8hEFLDu6J1aRf3SXTng3SpoJiGsESks0/BEGUXIdl/bPIGM/Yw\r\nqmqk3hkUihWnhL+7sHMrR2Pxp5GdH9v3BNs=\r\n=ynOI\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"b9cd39d4936a1961536e39eb1df855c5164d5840","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.86bde5c06.0_1668640070789_0.8144235736855439","host":"s3://npm-registry-packages"}},"15.0.0-canary.bb7751002.0":{"name":"@material/density","version":"15.0.0-canary.bb7751002.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.bb7751002.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"305b9e5cc9e4d39ccae48200f06070f238c3a54a","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.bb7751002.0.tgz","fileCount":10,"integrity":"sha512-gp+YGKdeIXMGeTZOxPbZjfjNwvrRQQX4eXgt7lvdyTdZICpACHWWEx9UiEEvLsz6GeTjqQN2Qp6lJL8mRPm/6w==","signatures":[{"sig":"MEYCIQDt7UZc8s96uqFRB8QFZJh3zKJh96SDD7+7Lclsi+W9vwIhALsu8alBOwOY/fObnByongqk7qKEs0hk+OiGsirBO1Y3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdXlHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpb9A//fugRYn3zTm1v9LSnN7aMG6/XurPrj4+lMvHS2rfS5j9FIHGv\r\nYvwMymg68NAEurJQnSrkHt9zBO2e5H6Ya0cVbdSHiEoXy/XImo4+2VjeOYbm\r\njzw2IX3Xj7+41rWX35u35MMDcyLfkj/NrbDzIQLDVoSnxWEFXjrh7LnwQTN6\r\nE7BkI6qf4S5mas1AgY/Tl44cmYopI34gLAknEL4MfAYJBPMwYRo085QgDabW\r\no8mPqVPsrYTdR+xtvJXAizR1YDW+BXWUkobBPxvAD0TCWqJ5637rdHsGbIgf\r\npFovsC0Y31t1FqWRil4jkO0VhnoZJ8b5jYaBNJWFMNrjEd7qcjb2lnCQph1m\r\npP69fxPF7qT3VarwS/Hi3VhVFT02P2VlWx/vjldMN10pLYh5sl5QpJbKmI+V\r\nbrpUsRFqTaksl7x521lTBHm2T8OAyvtuQTTYhJYd3SFqDPJIlxrjiMRR0VCG\r\nxDALrngvtqhAj0wMiM6vAYysyBpF2MMzSOyBkbkg37Whja3Ks7PX4Qj/8jz3\r\n+NPUD9Side3BA2H+m12fSg6WmdOUBYhvxJunY+2hxvYXaSIYSAHEgAhLToht\r\n5a72mxlbrGr3fC4KzjwS2QUidZ1eGnfLadtrKjdqji3jfPW9vq70w0xrEZXW\r\n3Xg1esu119cTYUAW2xPR925kkPKIfA/teVM=\r\n=JF8L\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"f83cadc3a1330a69930926dacdce7fdf10432f98","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.bb7751002.0_1668643142930_0.3419951506494603","host":"s3://npm-registry-packages"}},"15.0.0-canary.63aca9af6.0":{"name":"@material/density","version":"15.0.0-canary.63aca9af6.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.63aca9af6.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c962df47eacc645fba132fe8362fbfd58b044a54","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.63aca9af6.0.tgz","fileCount":10,"integrity":"sha512-46XxwdmjizO/96vsHp9c7F+SVVoi5EKObihXk1UUgzEyua5/Z5DnAVIK6zYxYFAm6271A8JipX3vmpkV20RU1A==","signatures":[{"sig":"MEQCIDUzrSgSk231+2rMiwISZR7PXFkZCQD+oBiFdyRT0S+bAiB7SldUsWINKXEjkfD75VQhKfBQeXks24ZPmWrRVIqjug==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdoS4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmogmhAAnyBYNHdf1YC+u+sg08HkUgBsTfR1wKM8Z+AFtpsgdYFhqZ8r\r\nnycLIMmrM/rKE4JkB1gxwRBi8k84G6wxyKfy3v0rqRTkSOcjP+Cc/+SoOHu0\r\nz+fKq7Gn/ahYGOaO2eGnqfB60cZA10jdPDp2UI0neQwt1A6UgL/9dgPwhPcR\r\nFDaPAh2dP3nF3XEbtlBaYWl5IwPFgXSm7PMVrmCQeu0FJFWv/MN4ZuJ/IEMJ\r\n/i2r2SiP7jEAS63cQBE1AF1L/jJYRGtcmyt1kAKGkH+2PJSn6sy4DqUQK40o\r\nh3KjkQ3nu5HK7JJlFPQSrWR4fP09jplH9xfAqsgoZtr+IAqk76NtbTJrsqZ0\r\nQvC1wZdEBA4xckDqMzjiAEkmXQKqTUEFdGNwiGwDhVV9WaTlEwmKiWdSpira\r\nPKKMINTZVll7H0G3aCIY8ujwhZ7hs6nTLKCfWn04UFmpry+vZNQK2lP2W8r+\r\n42BzxC+XkrSH2WZ1ZuuHUbFMTn9ImgoWhQktE3aKyMyALYScmp9epamABnAP\r\nc+KQP72lqRB36bLcGQ/7AdKwO9S9c96vJ8cGvmg3R2DGRM3BhAhc2XF2lffn\r\niiXIfz05JefsbiRlPad7nSxgDhkL+puehfgx7NkP2F7gS4Z+zFuYT/LR6oIV\r\nZ1uuoi9W3eb5BoTDwNCYrE9pngKl3Wf23F0=\r\n=Lg1S\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"c2c841973403116b6a405bb9aad3ae8476bc028f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.63aca9af6.0_1668711608050_0.7697399858762028","host":"s3://npm-registry-packages"}},"15.0.0-canary.56482dc2e.0":{"name":"@material/density","version":"15.0.0-canary.56482dc2e.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.56482dc2e.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e83147d937f92ae4d31f5d3049f60bb6b93a2c6f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.56482dc2e.0.tgz","fileCount":10,"integrity":"sha512-TegrkmyjLNSMKgNpEqU3pw5kTO95vbEqkWRzJVxjSK4jHS5qDSaqI3WOpZ8LOrRSoTvhD2XaVduE+hXnD8HEJQ==","signatures":[{"sig":"MEYCIQCAmgNlpwQU1YeguuVtqprotorxgADUC6TMK7ayhqx4uAIhALqKp0wNFv/TocASQEQs1Zg6REazXP3ytSRnmoZFmijw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdq2EACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrziw//aoY/dAxBUqKl5TWecS54q4Xph5wS4uoItBpXpDUHxB5Tg+UM\r\nr4s+grJImkG+TWjoIDOaHn2etCgClE6GpkunCxhn0tGE7VC3YrhL6F+jXGdO\r\nXx4D+/E1zV4ZnV5rnLCOMY8vOKh55o0veZ1qPofTX+mdDCzMe2ECDpdMyB/S\r\niqiFPtaOLuo9lFQ38rseDLN5Jr+EePKWLu+QGJITSuPRPM6Mk6RxEZI20vI8\r\nz+/GG1bEAZdBkWxLk9XMp7QefsuhqYkXZ/GWl+8Lvt9CHhfiDHEAZqg0gX9d\r\nFj1jTNge64gXQ/QDQBD/4X+iulzPBpFtYUdxh6Dh2r+pfPflAYgZU56+CbWT\r\nWW8P/zPRNUDnpBQoWHVPtjybcm9EKiv50x2JpaQAZWW487Aefg/osoYCKPAw\r\n6Ahdu7ZSG6zcoV/15UETcA5OZWdmvEggsscTo0B5M03jfNgPhgV+uE2daL/k\r\nh733saqLpQ46Xqsf4W+YZdNMx5GTm1r8Ovd3Uurq9kWMq09zDAnomZJjbn8w\r\nlSE8eww2sqLQlmIcwk8ESzfYKviPDABYRDJ5hrghT4+EsjMmS1uxt9k5+G/6\r\nhxB5wLvVWV3HOKz43Ku79/yRp1Qwuwsx+kIFdbgH3Zf7MjKq2/xbqT9IhYsC\r\naEpuZkb+pEem0+Q1fkjTBkVcPk274Klb/f8=\r\n=Hs13\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"c65945fd8948c8e5ada035d0f2538dc2ced7a28f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.56482dc2e.0_1668722052213_0.42728643697381474","host":"s3://npm-registry-packages"}},"15.0.0-canary.953e689f3.0":{"name":"@material/density","version":"15.0.0-canary.953e689f3.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.953e689f3.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8f0a35262f420e56fc7a27ba9ae8d79cd877eacd","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.953e689f3.0.tgz","fileCount":10,"integrity":"sha512-XWeqzaxReZ9URPLgNxNAVeZxnGGTNw7RsNUhXSjnycCddCeddinr7WYLf5fDIuUcBdDSzfo29OYIgN+yUPWbuQ==","signatures":[{"sig":"MEYCIQChm5dJU/G7P1J5igeXCfVhAzfl2F33OiUyq5+9xqrRfQIhALrpZ0u7/qEL/JyUsg68iZP/1qeUZvvkWm0RLHvvEW8b","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdq+5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrVfg/9FNWYJVOgRm6YQvL3mx+JCH8n/KNmDgdwwsMSLk8kLllegNbJ\r\nU3UbFDSq+OrcXz087h7J4JMWiLPPpsWZI3m1dO+Uhc4s+36/HTwV3Yh2pxKx\r\nUairufDXGfjfDKsuTZfLF4Jdhv//9paPpGqDz6wnjR4KEJNsvg+/zUjXxWBD\r\nsVUv4B0+PJGbY69+Y7+26n7MwhvGeREJ+CatXiSbVQhhoKBWMDwuQHzrO44M\r\nCB60Uk/KZAY0PPOmky3DRearNLbAkKGYiwcr7EucDDIWnhRM3HR7YobSEXal\r\n2NSzBhhtGkxy8eI5EzXbXermjoqGeN+lg7ADdLNPD/2hU4SDGPii7gfoU8Kb\r\n/fW8fPaJKqDvQqwLjp/ar1U9Prxvai6AgBBqJQChc6bSQVP2o3nLFiIQsDS2\r\nobpcBX7zogKnu3Ijol7o9Uy13ozexMIZIgop0xypAxvzlg6wcsc68IvLbsIr\r\njlyoBSvflXX7LpHnk84OxpPG+A0A0AWbhV1MZ4Fwb4pmbVTmAHx10z1fpEue\r\nXfeUQL4Q3TDP6Zcg9xzCRTTqU0M+ysu6C6lX5o4N/eTbFNJGvJExKKt3okRM\r\nSr+RmzX7ZkGkm1hzcDC4ToVaF2GKjJ7Plisn7mgNm94ae/OAL51ghSaVAyJd\r\n17B9561+PdoBIcfxyxjft8MQ5zomPAh0hkQ=\r\n=shKL\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"9b9adee0b4f10a2d6d77fc10e9291c3aac8be42c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.953e689f3.0_1668722617742_0.2718771030921938","host":"s3://npm-registry-packages"}},"15.0.0-canary.b5606a793.0":{"name":"@material/density","version":"15.0.0-canary.b5606a793.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.b5606a793.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6cbd54d1d7072da3042eabfbcd29c16481aa11d0","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.b5606a793.0.tgz","fileCount":10,"integrity":"sha512-0zZPHCGxdKRNLX5b4GYGW10M7HPQ0OtSBLwk2PF+/BcGv0M5ALEiSZIB8ZeCSwTMUFsnx9so45NsC5Tpy2r6tA==","signatures":[{"sig":"MEQCIBQQVCJhSR4/TLdLahGETfA7hktlSndhZnjJUAbmRl7MAiBdx5c0h5055N05DAaymFbw190/jTEQLrTHXzseMuNh+A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjd1xMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpNuBAAgLIvf7I4L28OUe/LJ1oY2VlGlZbqjIBW0BaeFvEDReNJkGQa\r\nzsNBHavhl1t36HPlCuipVuB3K1nkXSUAjQ99C/kcIQtJ8l3BJ6Qr70QWH0Qk\r\n36IPo+L4k7G/mT1zaPS6AxNxigA6loiNTUFt7wEZ1xKVUvXoGwx4Vtoj6JtV\r\n1WExsflFPckU6hzfNaok72dGJdzbrxbUoLa0ORoUBgUFFD7WaMLdwEhBIln9\r\nr4by1FyC4KRIVY1rj9LzazOiv3teRbm+uiPq6Y4Z2nZ+UJAYUhevtuLog1hY\r\n4qMdMSHRzF15RnpQnK8aP1yLWAVJHyredSmml7a07BeqOIIMja5ARJF/f64Y\r\n9f6zFzh6D5yqdT+4G/AdQX0vTiszvbXfn3KILIC2m9xI+MqRWkTfj06G6rfR\r\nFNgR4ZYwY1q3smzd5khSnBlfNGTQxTHt0NuqOXak9drF7BmxUgvBUv4YdLdm\r\nLORsyeDb4afS2UjMP1tSvtdkChx/3d/YiSfsQ/22qQPch+j8E+9tDT/j9JPF\r\n1P0mwU6vl1DFN5YuimC6+nrunSKdRlqsqx0uUk41BnwyRsQdIMkPbEbPcEkW\r\nm9RQLL+Tev+IDyvWi6jepvkRCCiZvomhlUCOMqN7eVAL9Hl++wDyAdpeEOj+\r\ndVoOSywYWeNueXY0bidS/Xzoox2qBvJG8QE=\r\n=Z1l1\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"681685532cfc9993a6190aedd85bf5cd1b3f80e3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.b5606a793.0_1668766795963_0.9512167549013213","host":"s3://npm-registry-packages"}},"15.0.0-canary.8c5675942.0":{"name":"@material/density","version":"15.0.0-canary.8c5675942.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.8c5675942.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2449301d85bf9513b90021b99a2d87b97dba8575","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.8c5675942.0.tgz","fileCount":10,"integrity":"sha512-QrPHzF3B7ULC1TbRlP9ZSuwW8ISjlNUdncp5OdZmHhGYw5UkOC00TZaYYHRzYufqOfcPtDiZOd8AVyNRsXhpVA==","signatures":[{"sig":"MEYCIQCN8+fGwJxOxWbiTaJef0BnIdurYkOgVsMCC0Tw4spO8wIhAJhU1nXLdlFxUIQCwurzzukmg7EeT1G3i83LRocuArTT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjd6F3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqt+g/+PknramYCRs9Hhr8nlnC5fE5/bnDmyRVU4j+fswhwYyGc3Pmp\r\ndd6u9Jnxhkf+9CRqFkJE+KrAFu3/7b+pi0UmpZShjqAIIe/6Ya0eGDsHDcMQ\r\nH0XMSXHiAJDIJn1mdSPNj2Siq8yZcX+t5yOHJVccMZuD3oKpZoHBw6S3DCXK\r\n89GQXbrDK4mMHIZSUDgNU5oMhpVKpO5KmjK7KiYJpjY7g+HA5lYmBbjY5iiK\r\n8Gb52hhWW1nkIjaJaW7Y6SJtd6/pSnRpg1opTir8GA3epzTZ7+WcspqsaS3r\r\noSO10g+LOVQA5nV0nJVNeLxXTgQNTBGzr85uuosrhbjhFfDOuX5GJlGH0AGL\r\nhoI0d+P3hquTkmxcWQxlwmu7Tms49+oXWB9JhQ6SN83w6a1f4FvACIgS9wV5\r\nruD9xy7kL9KxaExLlDEj0T3VWolT6vKkjTqD1vvN9ME+WmcPwVSno9x9Oi7O\r\nVsgQ57wmGzukyxdqFyIjdcAac2kqFlvMRrhk5nJMTvw2wdUfNwsizqXAmZad\r\n1IxmlhQ8rNcs3D7CA9JCjRTyLhA7IAHEawtMkuvXnonWys9w3K/k1b+ZSqoK\r\nQ781QAeezZ1CT5h4LNU5CwUfoJqEBTiXS5MdB34H9be+isaAIfIYy+zc6bFA\r\nK3PIGEz8t+rBEiRhpLKdNCA+7KQIoPirff8=\r\n=kLQW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"46367ab28a14e7ab75dbddad4b3a00d97443debb","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.8c5675942.0_1668784503288_0.5767025105387686","host":"s3://npm-registry-packages"}},"15.0.0-canary.697fbdebd.0":{"name":"@material/density","version":"15.0.0-canary.697fbdebd.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.697fbdebd.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2a03bdb44977a9291190ba7b5835a4fa2987a378","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.697fbdebd.0.tgz","fileCount":10,"integrity":"sha512-kalnMmVqPg7UzlM7tr4VelSuyglNd74MpjT42/iubAN//J9zFk+KmdsZsLYKwAzfO7DMKIYhnrdDfTwUhZgYNg==","signatures":[{"sig":"MEUCIQCBVngQh3NundBnD/66pyLteK0TfsenUtV5BIxpilLj4gIgGB3pgfMWlIaBNNeda3STW/ZcMHynQRlYbz0+BKJVfWg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjd7nyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqJOQ//Q7/0zB/y3ihN7X++o/RKCe6KvmB+MI72QBgCerWx5NVXiMjt\r\nkP0Nlm+tji1wHXOh2xl4ZaFos82LVvj4XYdvB9RAVV//iXOOyNy9MM5k+eG5\r\n2FzV660yNwgCguqQuGXRiwKPhZ40vAdv1qTSklw8C6PM+lPWQ04OxL3D/Y8L\r\nwaaToAjnJ71QH14PijZn+9TcX8UHpYc9sf/Z/CS1pJdrkeo78PDYVIEXrm6v\r\nOxeUpWP8SSBeCOZ82o99FB4+dguRg5aFFjRRYa8hIL6A5kF3biZkBi3fKGFk\r\nI1p7RDM0Gm/qC4rOHU8D5q6AQWvQc8AbR7LUCmEZayHYsxz90WW/dlkCcPNc\r\n+IFj94jcCiQ56smmn55jvQa6WZfT4usjTgEuPmYx8FuCpLanYCyVputMdBBc\r\nHt0N2oe66Lqed70yIfIshEQ85xLzTzbmry5rLR/ga/0SLtCRYIEVxguB7Djr\r\ng+ufNzmKyY26OoeOUaNTtSveLLo65L5/s8MewMnnYe1v9+OlMJoTe7H+10rF\r\nRynihGC//QalSorVVhMj00tKEULdTrRgPr7rjtIh4c2XH1xrzsmIuUm478SQ\r\n094FmvKU03v7T9oTp1MY96FYFxkcfYzIYoctvimuR+p7qrkObOEZEjLjA8eY\r\nDUR7+85g3EmM4tMlq5F0GxCThqbByh3/00Q=\r\n=C4Lr\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"633705dd01d68334d80bad5e354eb7e71d9fa30b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.697fbdebd.0_1668790770299_0.25334589960513143","host":"s3://npm-registry-packages"}},"15.0.0-canary.d58410453.0":{"name":"@material/density","version":"15.0.0-canary.d58410453.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.d58410453.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b2a977215b748a43c237f89f02dc15b1bf8b3c8c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.d58410453.0.tgz","fileCount":10,"integrity":"sha512-0ylzDsaIM02Hvb4s7xiOXKeifYM5kGEVCVk52y0JW2VvO8F1+WG4i7OuAsa1SJA+qupI5iggzo2p63G6VpwPaQ==","signatures":[{"sig":"MEYCIQCJYqYF3KmMkFyY1a3ioM20+KWq9yJjhM7oaUbJLz1SxwIhALRGXaqc/N2u/YsLyil25S6gnkYTuhvDLT4scUUMcMxh","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjd9vHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqGwQ//TxCJqUSi0m5GRFY4IUINgGPpZB78Thrw8CFQ0+O7oGxO7yJl\r\nalBpvngcuk+0F2ZAputkDuPC7dBFe3daq5KpA2vJhBh2hc2SZiH2GUlv9m39\r\nSaBzfeffPZ8RlQV9N0hIg/9Kl6rNnqRhGGbgytl5wcOZjO4GQyO+fOmLYDOr\r\nT5GaU67QUunhc/OOFIdlGX6Ys3Elf9tAlf9adnxsfM69H5JGale0zYI2Y1xN\r\naK/aSNyv1QjFD96MXD06DlbUuughfNfwJpPVO/3NS2YQYVMIfbac16UibY5h\r\nW3V6YZcI/yCuZTXxffOqG2fEkQi2svbAJlAauaNaWwhv4FbpKDURi+4AUvIM\r\nJdleDcwXUeViG5GawBNFKhYmmIMPjoASm0XSFoTdEaGnPwMomlByL1kL1Ava\r\n2pjYSNt5/elUtP0cv7DJlycDuNRcbkax4ro8QgeGQCxpNyC5VQStIr27qUIL\r\nvFnetGrZ8wSRUY6MmGK20dLDqV2Xrtb3IJzdG1QcI3LYZYi+A4Idizw3mYFP\r\nMpUTM1XXfU1cRWfyB/751wrEPLTz8qDNbI35sKKaUGng5YfRWqXigsgRXwtG\r\nCCrtu8jCrdJs1cu8VkNnYJ1DyBdVLNCLKbOwdDqfB6bl1zrIwwqSHIpwg+1T\r\n+swpqwrKgodFNB2gqd+V9MgDJEvePjWmV8Q=\r\n=cBr2\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"65248afd9a1318b7afdd324f3def6a9c8e67c90b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.d58410453.0_1668799430987_0.4874978114582753","host":"s3://npm-registry-packages"}},"15.0.0-canary.7971d6ad5.0":{"name":"@material/density","version":"15.0.0-canary.7971d6ad5.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.7971d6ad5.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"049319a0597296d54a3b3de97431d3df09148fbb","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.7971d6ad5.0.tgz","fileCount":10,"integrity":"sha512-JfRRdyewKuVGDLTxm0Bn/5MFgkPHo5fZ0JU6kCqI+SdOER/ceRti6xJtNfgV/lBPqstftARcKv116nQRy2085Q==","signatures":[{"sig":"MEUCIQCMaEC852nLBC2fLGxK5yYX/8RK1suMIN+6kBeNb3TDvgIgevnB+Gp1t2zSnGqP87ANgtdnHkoXBUKfDr6yefE9GvQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjeJdeACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo+XQ//QanDTKEfdf0qIC7nRkx76ztxnOTvOeKXjxY0eLoijnrwdqJB\r\nPgATUKQq5sLnv9P93TTwPnvsiowUGYql0T3BiJBBj1BLxxydYKeZL1BABhwY\r\nIENNsUe8TE2j3V/hK3kzrZAd1eikjRaEMwyS+CUgHDio6WnrJsPtMi3yw6MC\r\nEWzHa3Ma8RWwDeaqZH1GSRwXjfiNBfx4fmohyP9jZciAAoJLjFxc7ykzZ0pQ\r\ntbmTv9w0jQHFn7cT/Ii/68wEDPIjHbpiUxV8iXGo8Ul2XWrXU9Spt6lVfjQE\r\nt4/JP1og/HMYGPx8rS3rpVt9w2+4/rYpc6EYkADR6mb/eN53A30afH8GsFM6\r\nQd0P2tHDfjc+3yER5z4+lrASDWXbM3FuU057LfD0FJFG97em7+/CDuO8UaUG\r\n0vMQWG89nUktTAE5Iah0eQoBa/Lpcpty94Tl0Rubp+rYF/aUly3H6rx4QVmS\r\niZahYpySHZNI3aZuqS2yVlT4dpFYCWWI5VhJDAvXrnunU1vg+RxHM+71oiVC\r\nY5sIYooqzJCAj7P6F6/D6WL0lbUwha0k7hvdcK893K2m44AOPqOEF8k9+OhW\r\n66ZbebBTYk5IMZdC2qz6YSqk6HJI7xy84IWqT6exnejiOQiAG4LRYo3Kv0rK\r\nwEPG07sR9XSJnBmXHmMKJ0dskdKcfbbykIA=\r\n=M5xF\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"caa68cd6e7b5cf4d64e037521bea18e312048e69","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.7971d6ad5.0_1668847454078_0.7197589050382893","host":"s3://npm-registry-packages"}},"15.0.0-canary.a0ae73b0e.0":{"name":"@material/density","version":"15.0.0-canary.a0ae73b0e.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.a0ae73b0e.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8d9acdd2c201cb1ce356a46a7c86f52393e1f2c9","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.a0ae73b0e.0.tgz","fileCount":10,"integrity":"sha512-MH9mb2w3RZDEwBieazMMbB417iQLL5fzYptXCkAP03XoCTPPHvIPpUuwmxejS70CjyHTpyI1q24bLrsfnHOUBQ==","signatures":[{"sig":"MEQCIHK4CV7V6TymiErPFpiwkPOOE6ta6JXiHkryHMD1UXmbAiBctrex2I6F4ykOHgu2gvmZkEGEHFj1lb2laETp5mtiNg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJje1h2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpjpQ//Wt9i5sZlSqcmyG2LROdYDtXChQAPnDZdKIuWObDUhR8pRUA8\r\nzZTqxV6hHCMkE+1kmq345q7+IKH2SHkGUxMfU2aeHV7+mYpytdsgC8+Gs/5Z\r\nUoaHfbm6tMrft28eXBJRJixCYHIG8XSyRNhtzFgTGtp3GiM/Ay3agQLkfDtb\r\nToQUwPHh6nR6NlO7tVwiuvuL0Z8M+b4nqSlEPVCz21y6GNZ9jNEWE4ZQ4KMg\r\nml2HnDeiEUcETe2CflHX6qtIjmY09JCtteL9x7+NHsMtALgtGcFr3ZnBXoUd\r\n708KPB5FfZc0+RkZCrZzKcSjKiKUHTE7T6pGK4dOm2/RBrh4sOGlwxsXvTKu\r\nXGfNnPxYeFiIN+keNTqVIlyqZxvZxkgDJcPDGWU/MuX0+cCEHyfz3EITzZ27\r\nttvaxofxqGqACXmaGX+9txduf6+QyFl8vTN4XEiOswfFVN1AIyOjtIfQBvps\r\nThEvTTOeWcKH55Nmcm6c+8D/1R1oZ07WKTxWNMwaY4Te6GDF9HFuxCOUPpeC\r\n+BjTzZkZKih4p8T8mw6RmCQpsWSbMTzzbuifPXUnp807YbYOSZROy0urOaH9\r\nLjiTtdAQeEqECwg2RIA5iCYYOsb0JsB3U3Uhus+JxIjFXvzisEG3TTK78jc2\r\ncZvaka2zv0Ocg/mW6GJ/Xvy62vBGSmORbMA=\r\n=VYPF\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"92b496120a9385203165ec42657a2edf41099000","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.a0ae73b0e.0_1669027958103_0.33540556451465675","host":"s3://npm-registry-packages"}},"15.0.0-canary.96f472604.0":{"name":"@material/density","version":"15.0.0-canary.96f472604.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.96f472604.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6fbcf81db78b1c21d5ec8548c585565fa48df126","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.96f472604.0.tgz","fileCount":10,"integrity":"sha512-CFoG37EBjtQwTvuMhyZD/HUZu4SG6u37YXzIE/r0oUI1JG7fO/BGTRFEIUO1qxAEfHVYN4PHXse5POVCaf5WXA==","signatures":[{"sig":"MEYCIQCdQDcm3OYL8iZFVQ/4LTpZlxTlVXO94aCuJHnKDUTvMgIhAMVsJGN6szL+4xYQbWRXPcjDB5W9OUFoX9pAozbe18tq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJje3RZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoGsw/8CLozG86bgDgL3KA/uGOk63Zr/RXy4/z2HDTg1zCWPv3/WCai\r\njsB3edZmeyMDJzejTImP0NAiBEvY17d3yW8o9LfOW1zYz8eG2oD2BpmY1Zon\r\ngysjeHwa3jls+TdYYvc2duyI4PmuLnJTHTg9ua+4QhBl05v1CyI92NOvhY50\r\nRSuQmCUBu3HYDdF22g7z5p1RuUR5ownjxhKhxdmXPAamcTAlGpgoUO3Aumo3\r\n3lfOrgsaGJ3MC1Wq6NWlo0nvS6UW3XJqOBkAeGL/VUrk+i52kV32cf+KoLe6\r\nDQ8r8UvciWeIsjwhZ/ogqJe4tQTu2NLcwPZiYrEh2uX3YaLQGS1rTJR2lXYh\r\nXRsxFrmINI0gMFXZDbodVOkTgsEtN44zs8t3ZK/zs7joGKSTwpSjQRJiXgZ9\r\njsSSxIhr6aL+ldhGR6vz6+a7DLv2FZQyyShw1ffKHh6oNg6dfZ7UtjuSoz9U\r\nfsPs1YTE5F/+BOs6ymAjd0epKkI4kSzNp2iO2RdD7o7bka96NRP8/P+bCswa\r\nqgUttCA3sqahiB+Y9z0U0zd0SZ0CxFXMjmDAEuLnjPnifw/lq1zo7Uf+gYR9\r\ndVXJjTZMp624aR+2ayRKVrKunucXl7+2Gb33lPA11fUA3iy/LjBi9gxBNdla\r\nDIBUHZfAGUoekFgiTV5T69zl8juveTMQOjQ=\r\n=EwxX\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"28f313542547c982f69fc57b98811983600931fa","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.96f472604.0_1669035097663_0.13869734992720728","host":"s3://npm-registry-packages"}},"15.0.0-canary.18b8f31e1.0":{"name":"@material/density","version":"15.0.0-canary.18b8f31e1.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.18b8f31e1.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4178f7d08e9cc3aeb8e6a304bec3615d409c2daf","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.18b8f31e1.0.tgz","fileCount":10,"integrity":"sha512-3g/CuATnRMkSMj9qtnJstumGerpBxLVkfPDs0ZgUkgpBZam6lKyQfYulcRtv8dgrAdDv1jbhzEYQhX3TDOPGTw==","signatures":[{"sig":"MEUCIFw6n/yDoTmt729MPoJxfOQ3dWeVhfUYPL6EpNaHwJJtAiEA9MB47AwVwsuaUn1ZKeVjBW09mYUK/wPLsdT04ThYZOQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJje6DOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpzLA/9FF1v0uEnaEjAz4898qGOplWhBAUjQaKN3ht1ULLLNn8xVxq4\r\ntWYHSjBJE55O1b0bfoLokyikifZOwbsIDGPzunzOxzIpJt8dJJ4KxD8xc5Kr\r\nqZCY02kDyWBecCZlc7gXIzriz2ughG3ZxQpbAdbFojcLk3gbGZFaQZ3If6SP\r\nVuAVYuYZO+YlYkWOAl8ZEuoE2hjtbRNDy7EyQzn551d5RUHLtfbtj0NCTM8L\r\nNtlWJZ7rkBAnQ/jUxS+36MRFB43c/XxfDKi01IKx5/N77mHVndY6azi9WT8P\r\ny2DEwZ0WSL6n2Vsnaa64GlUaceR8Ndg3adM9RyVjxKnYnpcgwGPo+Whyt3io\r\naxyZ1vxEIcebmTVJ+05gN+E6m12TVT6H+AENif5gQrU1CJT+AjsKb4zsPeWh\r\nqO4fBDeLqQTb37sExSqT6PVaQQqOm2VOvfZDjGlcKrJQrbwX6pNDfOjZ2YTb\r\nOoc8RfM3gxq0PDW+O/SJZC+Ro++J2P41M/RZkh5uxc9bio2R1sSEFwEjxyZ6\r\nTHriEU+N448NzoDmaQh5U1GXZ7ICH9s6iULcc8z8mGCPfG9aSmxoxKE0ILQR\r\nPVfFZn6AYjF0CqDfP+ZdKq3bZERdOMxZjTHTjMv6WYmBt43J9KpHMNmiwD8B\r\nEWLSwWg1/+JOjF365uoJVnuEraKgzFueqLY=\r\n=oJP2\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"99a6c50dcaf8c9db8b49ca9378d7bcc70fa3d276","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.18b8f31e1.0_1669046478216_0.8106466453273342","host":"s3://npm-registry-packages"}},"15.0.0-canary.912f33ce4.0":{"name":"@material/density","version":"15.0.0-canary.912f33ce4.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.912f33ce4.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"242750852837beefd342b3a041e023f89001b72d","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.912f33ce4.0.tgz","fileCount":10,"integrity":"sha512-QMMyuAYaIim3iQ1q5m/yuS0FjE2TtChILu3597VkaRy3COVhGEj9CLgDrS35CMt1l3K8C+KCtWcr+kjSMALcMQ==","signatures":[{"sig":"MEQCID/ulb4Z2fRwK/7/lSd6J1kBdJykBlfiv0pprn4mKN2xAiBcwjCqINql5QgzP6E/8jxgN14H1rrpcWiYVDatYC31hg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJje7r1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrNDw/9GRUho0ihnsm9sX/DDagcsEYE4z2h5d6mAR8NJNcN+KH+1Yhy\r\nh5cRHrX6yd8Kqv4T1VI7qx5dhdGcsy5fJlts6QAGyPO9azaLy7MuORp/G7mT\r\nRUipy+NZf2oXrV2MD4PVDQ+A6DcXHBl1ridtfBD3W9719b5j+Zg07yNK3dRL\r\n7PPZKLLegbpuWaNTYkvdkxHZ0irHMqlOWEDNITiRWqVhFAUAbEp4H8B8dXsK\r\ngrjpTrLmrWEyY/tr28g2nTQcQqifg++n6e/oakW1b0bMwC8F47dfQSa1MTsX\r\ne2BAQrfwjpWDMhNvlr301EQ1T8lulTrtMMgUmhwcFUeB/JEszBpraXUUXhnv\r\nTWM7hGHR5s6AgbJKm+1TNGAcMSgJBlleyyaG70S7e2Y2KnsqSc83FNitRtRH\r\nTYNSgktt2v2Z50to2AmpfvoELtl4JUybAzgQ4qbMiL7gRlHo3SeNfEk93LRw\r\nybQ6HAfczb4NzgM6k9hrVZCw2exFQn9iFNhx8a6ija5BW2Z8iWcPAhI3Fpt1\r\ngHAPtUGKkAFPXhDrcnefY9Kx5zyLQjO5D+08Sijsjc6d8EZcCdT0FWa2WhN5\r\nJ/rIZtQ0AM/ZdVQCZkCpKCC+geX1+s4tAjWXOAFcWqgnHuyNGd9mFAzFU/Dh\r\nuBbUUZCdjAwdO8y2R5MQ5gUTUDVZDl0zqM0=\r\n=IFz8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"cbdf5145fa19b6681004b6c2d5de771b50f5b6f9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.912f33ce4.0_1669053173405_0.03588585716198711","host":"s3://npm-registry-packages"}},"15.0.0-canary.1e1b1c369.0":{"name":"@material/density","version":"15.0.0-canary.1e1b1c369.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.1e1b1c369.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4ee5e983b5095b481eb5cf22bdb415baf47cd48a","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.1e1b1c369.0.tgz","fileCount":10,"integrity":"sha512-vjHPBLNBkXtqi8Ft4jaemGxukzVxvBjwOgQm1v4ms+v4Otr73j9RTe4/pR8t6uYmXwoVMgDlFtgIv53Z5ftLbw==","signatures":[{"sig":"MEUCIQCe0p8CGHqleM926cypAYR5f5I3RH/acQ1nBOwkDg1c+gIgVvw7Lm5IRjf7lTLxXjgs6gZafD6yPTjpEzOxbmxoJRI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjfm2RACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqNKQ//aFxpIbDwNDI/8OZVfhQiNP79DZTD57rStQ3wvAHleZjDlrCR\r\nFWOKloPmBKiP4kkkq/7P/NUbqbRDf747N1eMjf7Eux0ikKiJvAi/5ZkYgnaK\r\nffaVdKEb29SVyE5nT8WMIpnKTeOIBSw7J5MhCHSs2JDG8X2PF1Mu+fm1yYEH\r\n0X17J8slEEbsaQpiE+IZRgpoOO2B2QLqYl614iw86CBi8zu+VJxJjKwTiTvc\r\nkRyQIpppxGyaXrA3fMBrCfZXr341kfNiOqVOYWIAPd9M8zRqalNcgQTPSYzq\r\nSZVSZtMFQgNodzGxqcpaKLrb8RekKo+I/wP2+S2ikxvqFtMKIwg0OAGY92t3\r\ndGeo3bVSGfgNyov7x6tWoK2wz3iYT7ify+gXKU2hKELldgNeOLB/W+dXc9fg\r\ny3rT7pdu1CTOQBMRu35ps97Ix/WbiuHAIpz3R/vvzwMjhnWM1nnCFCJnzPKN\r\nDFBoyngCNSibi/QPIHKil8hiJHsukWD/5Hy/VfYX81pyqV5gNBmNAl+aV0n3\r\nMyvTSTxRY7GUeqylGLMUkhCysVltw8QNCIN67FErRnX06Cjbze79ECSPuipU\r\nLlMJsRBq3Y55cTvOesIrrsTmT3J/rPWnF+zYVkod5m8ojUbKFzP2LxRwiWHQ\r\n1dht4qxlYxYSJ5VVp5Fg3lqSpfq1P8yzYXk=\r\n=9w6b\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"b59baa6ec6a8114401e616de0c9d3675a34e4206","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.1e1b1c369.0_1669229969012_0.9489276895432017","host":"s3://npm-registry-packages"}},"15.0.0-canary.a2ec49244.0":{"name":"@material/density","version":"15.0.0-canary.a2ec49244.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.a2ec49244.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a0fcffa9eb6d0b65b947d6b9cbb3f8a6c9342d37","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.a2ec49244.0.tgz","fileCount":10,"integrity":"sha512-t7BRJbmJ31X2e59wyQAyfeI2AT2pkAzNB6uHIgNDV0MBRas8UXk6NWrtR2yCrd9xImGunX+6f0I4ikt44CvtIg==","signatures":[{"sig":"MEUCIEb1p6EZswEgltasEFS/tCumzQ6rdsNMOHFjhpEWM+lpAiEA64Z3qaR7lljasMjkrBn/uSk3bcUL9Po57iLGxAp5gCA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjfnSuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmruew/9EyPyMGxRXQFmPcSxp48TjDGm47p6Awy0iCRZevB/Gj2egJlJ\r\nMHEXTcFlp8PLU4TkG/1Gwi7E+cRzx4QJXcJ64Oxz6ZZuaomez/U7z+YCZGn7\r\nu0EN562mgKrxg+vkYBfgIH1aKhoBR9oamxEcKX6qGGVXPtLiOeIMg92NvDx+\r\nIAiKQ9GrvWl7MHARosanIVtuabEmkudpOzPUnHXwAvaf2yVGZvBFSh19lN5n\r\nr7vQnwCzOdx0PCCaRosaTVL09yHvvNiKbYgHkmTbu05kFy3G3m4JlA00qG4f\r\n7TmPJsgHUDEu96gZ8LMD0FOhkrMGneCcz+BvdfrnXn0Pftu/KBU/XJlvWApW\r\nuf7n9bDpYp6fsP4spdvFWIGEBAn3G5sEcm7k94e3O594JUrl2bz4UbwMBwhs\r\n+g6WSnZQ6JxxPtM4s6YlDqbs58LLLnQD2E92k6Q3WtE28oJyARaCqsX5e9lu\r\nNiFskpLipirqcZt2hveY9pNemTe2dpEijY7f1GxCCu41LIk2vvDw+Y0G/cHI\r\nw5C8yh8xV0Un0ECkuoOyFb5nxJGjMHzQqjvl2OjwoRjCaNCUAoBrVhTPebHG\r\nloCf32UvGBNIlR+Uc6jbs7ExFgF06/H+eOhmRCDk13EgCmyEyI5MpJJnyy++\r\nAvBNyQTR8BD4CmYzdgKNwB/jPhJ1EhHZ9DM=\r\n=gmZH\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"fc59d471222d0010e05a636e8c3a9a5a9abe2b3e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.a2ec49244.0_1669231790758_0.06703689377981137","host":"s3://npm-registry-packages"}},"15.0.0-canary.a7458ba0b.0":{"name":"@material/density","version":"15.0.0-canary.a7458ba0b.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.a7458ba0b.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0a62829f09126ef6cf6f04895d702344fd40c38b","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.a7458ba0b.0.tgz","fileCount":10,"integrity":"sha512-ijgCvg7XUuUvcTFj2QXWF7j07XGchkgvCFbFMJfoCv8khKSI0Jn8XNsLuXHCTWdzxoDnRevj9NBBWamvZBhszQ==","signatures":[{"sig":"MEQCIFpruId1fbbvJAOjbjJ31NkcUpXV5r/5OuxlxdpoAusHAiBp73nUfrCuRjJcBcIanzICStl1FmLJykegFtrmnxw6gQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjfn9cACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoV2w//WWFcuyJ4g1F6WyenNLNAtQzkaGyzFuTqiSqMwBtbaT9YiVtZ\r\ncpscequuKsb16Gg6dkwNiKE+GdoD54eEnG0OKhzRPYCmwvoRJUUo1EMFP2U/\r\n9/DzcxaKYYUkdvZVY8zsrR1SBtnylOhYWMLzMMG1/4xTwH0lKFq4OEJS00Cr\r\nC+Vwt7DwJHa73WMOV+ftaqGSYS4DRwWgh+LbC9SQs19rkFmvkPXB8D4JLT24\r\niDuqbMIukZhvTCkblaerCVQAzUua564EpLTtM0iRcuXOKWnknwAQTpth2jKe\r\nMAEAdUiOHlcuGeYBqLjXweAKHY+nkMCOdpe0iNWMBAl69GiARo61GfZVbVxO\r\nKMCvlOKnASzwRRpG4JNjenPqwOHNxGIJ5ezxDtwGqk9NKr3eCASfjVmuCdzc\r\nwMW0PM0GozMewt8fE2Xop8pHTm9uur6PxZreQaHSlYUoURofaTLZUalAPdUw\r\n1u7Tlns8TumdBtZWcmy+oyo5xqn1/lI/0DbmgPFyPuWwk3oGr/Nu22v3l6i0\r\nytw2beN+rVXzYGghKj0gLUVnOh6m2gEy9wsbN269Hata2P/UKcMyM/Wtwoht\r\nyLK7KHY3imTwcWWwYYi40lWwkQ9WnQCrmVMNYRpFCXk652nQrVWuepVKTD5Z\r\nqBASicKAYDli6R3ApFJmHjcJEj3Ij+Bo24c=\r\n=dAyy\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"62e6a15e0784982b77df0a1d824f81d5a15cb6f4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.a7458ba0b.0_1669234523998_0.5058551999833905","host":"s3://npm-registry-packages"}},"15.0.0-canary.7c35e5036.0":{"name":"@material/density","version":"15.0.0-canary.7c35e5036.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.7c35e5036.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e6188351f147c1b28a3b361a4531973f7676c7a8","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.7c35e5036.0.tgz","fileCount":10,"integrity":"sha512-1KEUNYK1T+Vvos653cidHubJULKgTzVu/clwDTay+cXgd3TkGnvE7y+2tWoHwGaSfvBvm9AbKI99qd2ZotBVkA==","signatures":[{"sig":"MEYCIQCcwOU3Ej4bUWhJIDCLDFUp2KRURwh3PCFHK2HXazAmGAIhAOaoJMy1Y5Pewi46wazgH/LuUKATqmE7VQCgDQjNNt3t","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjfy13ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoNkw/9HRubXZCDTAnQwYFaXvDI1EJ4T57DaObIZS6lE/mBx81mxrXo\r\nTvieQsQtqm41lISgQNa59YvYoBOcusfzSCme5j07Futvdc8uoCrzwad06BMl\r\nu1kzKxSDYWR7PmrDbXyWrtEKJhlVcF2M/BCHwlo/cNiM0BoS1bCPvXkeoe+g\r\nUFaDtjyB4/xv3OyptsPPYjvW+0PEkF6h6cZieHvythG29hmAWxm8aMhcS9fJ\r\nwQOgase1x9pvqc1P1edjMEA8ES7I9KL9fzp938nojhF083mUfE1Ja+iEiMsj\r\nUiOSB0RntUj9duGY/5mGy16LFbAqNre0vdN+Sdx+GMXPRnmGHo4v2jeVIbjL\r\n3z28nHBFNIygTozcJ6xo1MKY9L/YcPwnqeaYCn8Dhv91jQ9w4zA4INftD1LI\r\n1cOcsEWXW81jirj5njC0XE6ht9ABaFDGH9Ctx9fJdZ/7T6eqVZbClX0/gAqJ\r\nBAvBWDTXHirF3sEVIs2r1mtG+DHrYi53Din7+jsNjGzXVpdMhCSyJoB/WpiU\r\n2O+A4dG2MD7KiIL9Z6bHqoIxPDUDv6so/JQsJry3ljQVuywXOuGkFcFsHxhX\r\nf3pqJkjEF+Nn3XzMAnPQzov/KcY5M6GTogaB8zIXr7nXqdVcd9bd00qoC/92\r\nfdPx6JdJUB54r+9pB2SbAfsVj5iQ5csp6YI=\r\n=AQou\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"bb1e9aff747feef28ef92f415776fe33dc1216c2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.7c35e5036.0_1669279095500_0.8663701073080059","host":"s3://npm-registry-packages"}},"15.0.0-canary.4356e05c5.0":{"name":"@material/density","version":"15.0.0-canary.4356e05c5.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.4356e05c5.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"957d1f4cc060581dd69009802073f3706b0afdd7","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.4356e05c5.0.tgz","fileCount":10,"integrity":"sha512-/TAjK8dDSoPcA208x7BchQ6lNkKYeY6M14zOJnRRuqGcEs2IzJbyNj2gJ0mvDEwdPj8AeWjwrsbX+2l0Tpzo1w==","signatures":[{"sig":"MEYCIQCxyUyo1NBh5mC3VaJJGoXQUmLrIMMh17AWzb17EOfS6wIhAPRjj2ygRdKdMZjK7RtxzalO4GXcxCh0v6POoSnj1aJT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjfz+cACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqerA/+K+C+e/6nAilN0rxStiVJFBQ2G2N67mBb3ddh6QUjFU+Gd7Fc\r\nefGY6GuXsmgDhx1/B6EffJu92dSD3dYwGgFw8+Z5QNT3zyaJfBLJMbiIaWS8\r\nyNntm/W8i+mQATGCVBqF2LI8kJOYt0vVCTBe0QUHuE0jwKxwH21OO4xmdTs0\r\nHqbKN9bY6pw8KjWuW8Ie1ravYWAUTr1Js1kXxb30cFTKDncg67q+iYFjrqPd\r\nKMA3sNL4A1zAg3WSBkwl9k06RkJEOVpw6L4KA5Fz5BHO0p0+iOOyqG2FskFD\r\nnk9Al7iyw69hDOufVlQDwlNmWCk4066XkPBD/DnuRrb3l88SLIYekwa0K7lk\r\ni1vvzm+v6WGnVsMo8KIfq/uOZYUUS05fyPAG9fYoqU5nPt/gr7BXYqEOCpQ9\r\nySuL9b1XYl1edDuYUy8D8laf5rWdRkGHikF+zbSf2aT5hpLIiujjKKfyeANT\r\nIHt3lpK8RUX/vLyBMWwRUEuc8KaWRVh5pqc5b29sHFB74gYBtd3ZE1T3ss9W\r\n9YThd9yCSuIcGZ0dxMLe51M0IDBnQFNk4vkREFtiEpwDS1OuMTy8bQ5MT7FA\r\niy6tFObkpbKiPXBDha9lO9kt0RcmbFGM7edVECaPRNDXCoiasoUtZNyMpvD6\r\nRFaHASk2Oq9YQD4L1DsHBYiilM5uYs3QSDU=\r\n=ZKGx\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"8f21a6abb8b52fe9aa5804b940eac0cd94256fd9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.4356e05c5.0_1669283740063_0.9890774901312878","host":"s3://npm-registry-packages"}},"15.0.0-canary.cb605f8af.0":{"name":"@material/density","version":"15.0.0-canary.cb605f8af.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.cb605f8af.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c8044361cf2666c6fd9d7a871b210494efe8135f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.cb605f8af.0.tgz","fileCount":10,"integrity":"sha512-0zm0/+I0FjCbh5VFdW+xvpThVb0RJqr/lVX3iqeMnaa7/XpNOJazsfkvnKNhETGtf70CzG7SRVyLm+aGU5/chg==","signatures":[{"sig":"MEUCIQCuIADrgjIlC2m6zKbVVQwud/H0kJT7AitZZecXpFhe9gIgVmrHOhWY/h5HqD38C+bAD5MUs6ALF21zvpqO/wEnP7E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjf0P3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr7sA//T01XuOzUPtyG7gyFrczB2LezYEXRB/ug1Ot85Vk7JnKBJbGk\r\nY80ZJjA5uYN5KUE31A+IdgDBiu5jP7Pn4EpP1pd7lMkkNaoF7fmm9gauGNaf\r\n8m4WgisIyPfDjX6aneqKMShRtXQdHfcC87N0taRXM0+WvnunqqmdYl8/Xo/S\r\n3sJho9cLKw3IGDmbP4qerq9uHCb5RCTqUtDYPZE4JjQ36r6PUhM3L5rqikR/\r\nqAAvQwx/u5+gwvFWpM9qnZxzCGCWWargVJ4G228HTvznYMgDP1bdDej/U7DK\r\ne9wu5c2bNwv4gVDDXgssWkTRkeD3Y8HjXm/nAi8zrlkwCrAi8Axsv8fAlOAC\r\n6ELsGmz7NrA5kolWUfWgvE+hwAsTejWNHXtkf8Fghlu91GVD5eiCT5HxfxUE\r\ndOTaHavfx+NS+Ccw8jfiWy07dn91AACSmCMiGvhzojqdT1UXYvNcXYnl1KxD\r\n/Gq+jTOifcdz1s2qzXshAlfUBkJcz/5sjtfMrWtqWORyhLnytmS0yhf6wzyy\r\nClo9Y0LalYBAzv2c0mi+YRlSwhY9AlbgzhNg6xH3dAQW7fFcimMmkCzX66gT\r\n48zMK6WUS3IFPiS1TvWrLZAE2qcu1Jyt1lTbJdQYRG0F0lWzT1lNblZ6x9lf\r\nXVPzm3/uK/z6+6l4xWS8KX2L5am/cehTccE=\r\n=1Fcx\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"9d617d11bc1506bf595e8a4f05413067775d3880","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.cb605f8af.0_1669284855372_0.6503853096339265","host":"s3://npm-registry-packages"}},"15.0.0-canary.05fb07f9f.0":{"name":"@material/density","version":"15.0.0-canary.05fb07f9f.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.05fb07f9f.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b600d1fe35745b55a0994b615ef55ab432d882bb","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.05fb07f9f.0.tgz","fileCount":10,"integrity":"sha512-6tcY/XWpP2S8NP6Vfw/brvcm4883/+gmfdXNsLAl0eZiEf4tKdd0Lkzb8qYNQjt5QAbbFxcfIYgFQc3wCyVIsg==","signatures":[{"sig":"MEUCIAXpDfQ2LIkYUWUWzvM8Vrl98w2VHJI/2T+7zE3rrOmNAiEAm1x9eAqYrAKLS7b34wNoIvwzeSRGFxBPPU9xV2JMZvg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjf6YJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmotxw//X8bwB/CnoqOJKwtM+A6GAEYzvMcQizwSzSzDgVAq0/IjSSr4\r\n6VRFdo0Vd/0NV+wQntlrSEVfPu9wIbNonqyuGJDl4pHrkQmYr9qdcBmzNeES\r\n62Tg5XRarhSEf11ESXl7FSx8CnK1iaQHJswZ7DdpZx6hbU7YxwYW9OSCa72Q\r\nRbgQZ9aEtIDHAQICTfyalvw0Q4G/OSG5So06VQnVe4HoMdpY/e6igZQpHkqx\r\n5NG6Z40QxA6AqQgRlKZfh+palBqFq11+bXHbDhNlVHBCbAo+yNxWLHjiUdHq\r\nl7U4umTYHQP52AOo91tqVAKBVMYec+LDkz9d/4GWW4QFTMlc+BqZa/nM0EIf\r\n7btokRCHi79Co01ToOxjz01K1sO5W0RZwsKAYzqHLh/KT8r9TaOBLf1FyTA2\r\nmoc/wqyBjkOf/fLEREL/Wp2HJHlLbeCkGbNmjhsFA15sRX/O4C1V8OD43eWt\r\nNS4amv5gKa2UrDarMUokT2l/8fVRcBZG4eibL9nbhp3DXyQwTRpzBD4imw1v\r\nLxriOFU+kAalPz5ZSd8RfGWHv++bYXEmGTxK9OIaPqbYPiAlSLGvFtpB6KRv\r\n8dmVOhtlTzD022OlmZ8rDLwBLtPFrctTvWAAn8GrxbP8PbAOBPnXGUMWO30T\r\nPvJ5JNyQc1/Xgv/TTX5fsr9CmqBABv2lzmY=\r\n=3dch\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"fbbdaff1715be513be46d4628f7aff9d8f7e27fe","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.05fb07f9f.0_1669309961223_0.30131730494933606","host":"s3://npm-registry-packages"}},"15.0.0-canary.a911b386b.0":{"name":"@material/density","version":"15.0.0-canary.a911b386b.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.a911b386b.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0ed06930cd852530d0ce0770ab8fd6c56e4b6bd1","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.a911b386b.0.tgz","fileCount":10,"integrity":"sha512-eXCOiyROMUS12/5gCuaW2wCkslnZdWFiZ0SaLFPvFCEYb+roTYO26DLgvDV185ACQ+/Fzm26sqixrxvpS1yMFQ==","signatures":[{"sig":"MEQCIGYFjl5+/wqNPxEYtM4vjnNV4c9p0qxfDrt5kOb+MVI3AiAHLodXpA0Wc/GIAI6sMYH7dcwFZu7xAoYE57i8+0nm9g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhOXaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq4CQ//aK5Q9Y9Xa075r/MgiheVppo420x0F3kfEUUzJdo6GuY1oNoC\r\n5y+d/phdDu2g7cziql4RNJWbMRBwnfYKvRYr1Xk9VgJCYl/r5WXjm6MCfmZX\r\nDqSk5ib3mFRuIIM55nMABfVdpuRhpHdyn0JFX4bnBos2U0AtU/RKvPndOY4J\r\niL09jWeqK7gVjMpGQ4gJwePtsuknun4/dj5WvR/9/YkAMpSgHkOOhdrlqWIH\r\nvD51gl7kXN09BBRIpKQf/GKSnL0aL3Y830I/reXtCW3MeVBIn4RE/BvYuyir\r\n5D/X1RW12rzUj8O5NbQghcGK1FQ9/BdccmpQ9MN5J2qsZAsSZM+rB2dr2+KT\r\n/qieptamh6VSP7NrAd1b3BkfSJ1MRfatKCuePHyt4/LbWoqWuVuEBamnQ1DP\r\nEaTNwunz9xybo82YCADmVpbWiFzRiYs8vaknvVWn1QqIHUHINgU7+Zq9A+1T\r\n4SWANDyaBcwhJ+0VBgQH9mcewWPiP30eTbZNZ6RpubnrXu3TcRIG/r7CZ3T3\r\nxDqqqll1BSkfdIEm+jUJguTgiXe3qvMOUCTTl10sfbTZ3YmOnLTTaJ07yG2R\r\nGs0x+IpeHvvzKsENXO92howWdZf/X4UmE4UIdEzZyCLBEGaAUGcx03YCpDMh\r\nQ2EqqvoSiZ7aoFFSNAcKsGuLJR5yVeDCelM=\r\n=RKwz\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"2487492bf1103f4c82913b328eb64ca5b71b9f5b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.a911b386b.0_1669653978653_0.3781223242204812","host":"s3://npm-registry-packages"}},"15.0.0-canary.2aa8050b4.0":{"name":"@material/density","version":"15.0.0-canary.2aa8050b4.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.2aa8050b4.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2234441344f8a6b3d4a38fc5dde430d1dd968456","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.2aa8050b4.0.tgz","fileCount":10,"integrity":"sha512-DEEPenBQD8jZwJVzqZt/INc+MlIxNPmUJNnf57s7QR2OUlpRFK6zrn5ZUckAY8Tl78Q7iRN0UjLuVHpi7O5MNQ==","signatures":[{"sig":"MEUCIBef2ZUPnV8OJgvMMGBj3W4hygQa34oQV0IZURAtrPjVAiEAhP7Znp6NWEMYGRLlrBQhJftAz1CYweYCELoBMbRzSpk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhQemACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpr+A/+Li2arpuQDOa7/ub/ETtxOkEN5UPlhFqc+ToRefhMcZ8z9Io/\r\n48Ve+DOCpsKTG/YSNaQ5/X25JelauCxHGkGUrrfju5AqwkosjfUpwNKbRP6S\r\n3yOnCYXRltnHp9M3ZK8z30rEbqYsgvCx1ShN77tTWDh/Vg6p1mM2u4MDm++l\r\nqHHHXsmBSF79HpB5lr9gsf6QX03k9svePlmOC+gw6kZAOLa8Nu8oGQL9PPot\r\nBgwFHWAuxdQaIvJtXsgYv0eZK3rqqzP+cfG4tUFukBTdVoiZBhlVNJeApLrq\r\nJMCbFjSU4GXQoF9kcfj7MetjV4J8lY6kP/orMVmqpHNkZLW0UV8aoi3NU3Bo\r\nupVhbeGxefmedXj/QbhklYjaCvZ8k+OIicxnVNdoS5qtvx4XjhXgVs/CeYUE\r\nwX/Yp8AUm/af1NRkYYeHgQoIcLOyLgrIoIGyQ9lq8XF7BM+gF0dA+hFeuhMu\r\nwBxbu3dQ1otgLRybNPNU+LEtx1ArNTfVCsxY5BvCyFYm9kNSMBwisPpA9sep\r\nhEMQzzcAeRIpkXwbflIZNrEfJYIE63vWPQ6d8yXvWM7q+jW65z20btZyOGUd\r\n9AtHqQyBaUuyrPRjQpEU27kwDspc+SuQXl8P8gwyC42lbwcBrj1FkhH8sI6g\r\nQK2IN6ToGKSQqdz2Ik8BS0lvWriRlhN1Fu0=\r\n=bppp\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"7ea9b47d90d470adeb6f1cbc0c1c98b88392e56b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.2aa8050b4.0_1669662630149_0.1774037780366522","host":"s3://npm-registry-packages"}},"15.0.0-canary.323904a9f.0":{"name":"@material/density","version":"15.0.0-canary.323904a9f.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.323904a9f.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"952cf29572682f3fc3caadc1f4626d3c368da426","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.323904a9f.0.tgz","fileCount":10,"integrity":"sha512-lHn3FwS3QG2H1BByNRqmp3gkX8XYBi4vbS0+vLPSM7saQPBD8/WYyV66rNfkeVLJvgExr57OMWWwZpCetTTEHA==","signatures":[{"sig":"MEQCIHpMcDPaWgnneGLexN31uzsMxlA4g9b/PmDvjmeg0aduAiBcVghTDLqjBldg9ZUUGUf5VWUfr5VbeyGF3FHCeXcOXQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhiYeACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqf2BAAlLJK24R+k+w0ChBcBfu8Nxwo/3ZK84n88+pm+EN3by8+XCjU\r\nKOzE9fg+f5P1nF9pP17n/2Gj1OxGjqI3p1P7dbvv95Rt75AQSj4csrh6tf+v\r\nvu+QsmlCZVCWqN9+Cs87drSB4V+thv58om6HPzbEt1HGW3AvWfaAi7yOHNAY\r\nMru9yA6sf2fshJL3vJd1n9o9vgyokmDE7RmqXBSejTS2TiFVdZ/w7dwuRYBS\r\n861JP0gRrxDhMD6PabjFAWsBYOnaIIk8Ew2VYg5pu/1gUH1Edn5zqIzbUH3m\r\n3Dx0ifeKys/orGTQlX6D2PSnB8alkwNyVP6EAjIxlWm0lZUx6J30NLZyPtfd\r\nlDYcKlsSbBhT8rWt1RhaD7cRAyz9nMza7nFA7o98sHCgv/0y3VhqLsLNB1fR\r\n7/LWsfpHkhXxCoBSpqvTyp0jWHDFyI2BMlvO/JSKNM5gUUgR1sVW0ka6m9uF\r\nRiEAKBbZrGUWBsM9AnmTpdkDryBaFIsdzTF8r/ISuxqsXOMXiCjr37cNaVz+\r\niHsC2NK3ARvVlMNlTfZU5/5DGIMvR3aELJ+FPnKLV0+/019tWXdFlW4W2PED\r\ndtVGwmWfAWLb3RSdWW/+xH/G4BKJxTIrK2csfSGvnmLRAakC1E8KyrHaE580\r\n3wOfZnR95fmzDPr50mRyCnyFbWjoWo8Z7Dw=\r\n=i8Ts\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"a69fa8c7160aaa07d868f5bc365076bdb159bf99","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.323904a9f.0_1669735966350_0.09668753675391417","host":"s3://npm-registry-packages"}},"15.0.0-canary.168a629a4.0":{"name":"@material/density","version":"15.0.0-canary.168a629a4.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.168a629a4.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ed4707a27c7f4fb66f3ee8e0cfb7fc478cd9bf79","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.168a629a4.0.tgz","fileCount":10,"integrity":"sha512-k64/E515oqP9Fzdr2jp/cQ9+Qfu2xGMYPDA72qR1x3WTwdqN1p5niSDJl0vqC/l5hBX/1dDo+7Bzm3SdDoiLsQ==","signatures":[{"sig":"MEUCIFhKSpSt/6gUWjkA2OvAjUPcBInq1SkvcSz47ueuQADvAiEA4Vv+Gk+tBRfOI/5bgqqAGygxsr0hvSbq4iBrNcBzvOI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhjetACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoRig//U01YRmcDFW9YIhXH7ckmn+EzFG3lJ8WOwXKJGmAJjwwJFH/k\r\nM4jBN9Y23ETBNQg4j3DZ87fGz/VW6KReqj6qkdAsXgp0BghzxaYzIxmAEDOV\r\nWNcGj9mRVWdEGIVetrL9uXQuTvBsh4A6PlKMfjmpWg165f720/+rAu1i5dkP\r\nfXUL6GtyA7WDbLl31ukXYSrM4GmfqUmw2XrXDvG2RtcJpe+XUQQwGC0FRQJA\r\n1B1tN8CJc35XEgl1bQf2yFphynpKToy7sDjQSTxpLzIoy5n1pXuwwegtMo+b\r\n+05uEiL/ErAb85EyAumqthbBT6/OjfboA5XsDT70EUi70MrgCWTrl8Rh/m/A\r\njb3My3yNqlfGMt+nhkWU6lC48nJGaSqUMEZizjzC9s0McsxMntmpwIQU96WB\r\nKRFUHxX2ZCHKWvQ5iUhhQfE7aj0uyDoa8aVUR1+IiCMgzMqwDfb/Xcuq2D/W\r\nuNdLkp5BxU7wCRitM8OsFWVtnwBQ80CpzL9LyvO05EUmSZl8L4yv2mOCbdDP\r\nHkV0hR16Tp/IS9HmgUXB4Pz03ymfBSZnGmqbX5NXG7fN/WnmEfwe/DI0GrCb\r\ntTeQl7W+Lzj94R/47O1A6Z4Hdwv0PLH0FXrovLtw4qizt0F/Gps9IOMbEwc2\r\nITix39gzEfCKS/NpQ39SwJV1Cj1gOKO78Bc=\r\n=a664\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"3091b344799132cce493f92839da8e544fec7c05","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.168a629a4.0_1669740461068_0.7222756286288132","host":"s3://npm-registry-packages"}},"15.0.0-canary.65c411674.0":{"name":"@material/density","version":"15.0.0-canary.65c411674.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.65c411674.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"10b71c6b99c590bfcad786e2527291bb829ade3d","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.65c411674.0.tgz","fileCount":10,"integrity":"sha512-J3lUpp2aBRxg56Md+OrzFfJ+aI0NOwfpq5SOoZJTGoJoKVIAH5y96mYrzXQ6BEh7CX80dcuRc7NiD6+utAMr1g==","signatures":[{"sig":"MEQCIEYuUxU2WmO9AXbvvOzi4JsCGLjQLpKkIaUhjmcPFeTwAiAIucd/t2hA8LXehy1TV6Hcq7ka/SbLozKoE9L0+JHWOw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhkNGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmohpw//Qo5eD12GR1ky/jqqJsoR9uhP1mw9TIuaYt+kuRLI3ZcSttRD\r\ntgIeeVgyCxoPzYX1BYoFnJCllQapkcQz62n+7ii1dnWG66cLONdNHtr35z+3\r\nirIBIgAw0+xzYULMU6e6VNnAAvuACHGQ6UM4JXSDUz1RPVWSgsEnfcYR2H8y\r\nSP0IxOa1UHpbW+QLuce3clKzZ6J0/WJxY014ioPt3GkFN3MUGVxgvE2Q+Vr4\r\n2Jy4xuxPs/1KfgU4n573n0eLHPkG/6nXcu5HyghDhpOk8Q36e4xFuIDMmMa3\r\nvagz/AZeWmMrUEYQmc5AzRe4YdU2DhxQJncZCQYgiXu5IHzpJFj8VoYJDUGt\r\nvicA7Q8dv+thq7h3jt6pGmBeHDwrrIGR2LNCLu0HIMSKQcp249/8yxY2fiEe\r\nuJ+kGdMV7fAZSfPUN1ens8bujI6P57kcI9hFKl70rZwQl2ZYp27Ab31aQ+/h\r\na37Yn0Hn3s2MULdAH/nvbg3vs/j8eWy+X/wvKHp1X9/tT1BIOEkfBrfO1GoH\r\nFv3IydFrnB0J2PPFqpwlTL6tO9su7TZ0jIWcWzf/fN2ZrmiS4PP/f4sGgsHu\r\nSWacwOrc30fLeB/NcScO78IAIaPzOPNOjkABmU7eaiPfFj1ERTlI8hc41jYB\r\nuwicc6HHaJ3j+n5ml1uR6sqZvj2kK/UR78c=\r\n=eiDD\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"d80879a8c467caf0f52227ec97481bf5b7f2cb16","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.65c411674.0_1669743430521_0.3189600716968255","host":"s3://npm-registry-packages"}},"15.0.0-canary.a86d36fd2.0":{"name":"@material/density","version":"15.0.0-canary.a86d36fd2.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.a86d36fd2.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e6776e0bd369102c02b52a66c32b57d7d8b3727e","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.a86d36fd2.0.tgz","fileCount":10,"integrity":"sha512-C5nrxh+Y3+KI/6xfutMd7la5oDI63pfqdnbLYEvG9IS5UATWw3hJgHWnty83x+72EI+aWs6eCeL3XG0OYdZbIA==","signatures":[{"sig":"MEUCIG2B73y2qb9j86jLrTEMwd3birYZUOAxGN+/GrYt9O+FAiEA8aiCkEbGlcObQhdgbxY0ahierjQhiunJ1ADo+iPK7V4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhrw1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq/WhAAltJuEOhGffeIiNGlxadm/J3A3YH2rZ2LBCFv2GRvEdZ6UWRU\r\n85uGEQ4g63DrsULZA8mnQlF6UJpNC3Kl8rhycpuaj+6H9gFIV/vPObkIKT9i\r\n7v0d6AlqUGNqSKa3DUjW+7tWPnmOa3YNbFowfvy/s/+UhZQNcSpoJOapgt7T\r\n7fEoaNEld/BEHMP4k0unZRmqWdJBfWgD0i+5j8HF+Fj39VUlJoePObk81Yqq\r\nSsk/UI+mdy7O3IFV6zRVK5cX1VJI5VkH/nlIb9+nss5aqLpBUgABZg79trNN\r\nTfX6NfkjIdu0zqzQqBtwAfRbPIKMOr0/CpA0OJ1n6HnJmW7lur2mTC+FB+kr\r\nxMRrXQzni8KI0oJAyunA8fADvbA2FWO8Covy/ZA6wreM9WoZEt/sFsvOmqJD\r\nX43yHQFyofWwV/Wk5CtlUd3Fk0413zXgODghoPmgMFsRo39sb5d+SrK6f3PC\r\nKlHGKvMxrwk+0c6BhFcSxJ2BTL1ysPaajwIYFnVzZPqeyTlI6Qgzta+rqV+U\r\nZ65qTBWiXVAZisOYlEvXzlsD3SUIkwUlhKDb93GpeghVsV5JZzVuUIhy8Vga\r\nhxY8+v/SbJr3IFmTBYv0+C/21/QrI7BBVWv+eJyMTDBGlMTUDwkHcUaZc3u1\r\nNFZfDYmziCtZTU9mHWY6S/LNSSuYb8IRfGg=\r\n=Zkj0\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"85d3ff6d42516ecc839fe336441543c8df62326b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.a86d36fd2.0_1669774389061_0.383602855486201","host":"s3://npm-registry-packages"}},"15.0.0-canary.3a1f46c66.0":{"name":"@material/density","version":"15.0.0-canary.3a1f46c66.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.3a1f46c66.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ea7ab7235764c0d1ca2b32c59cbe114983cb0e05","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.3a1f46c66.0.tgz","fileCount":10,"integrity":"sha512-owOAn+1bEEUMztqg7FfVm0d/UIrN2EvY5U9gmvV9hJRbEfYl2PoXe5tb1QE7p2VMRzBTfNWHKUocO8+IkhGQKQ==","signatures":[{"sig":"MEUCIQDin3+Y3GDkTzlHVOsw+Lxj0mw+NiNwCXWwqPKZPqNsSAIgH+eG305/odgMv7a3wa1dWGO6jHsfXjZheab+ac+2rb4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjh0cYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoxTQ//RaqTfi/3650CiowoHLoiVeWpkm4FcQ8wc7eqGKVherMVitIJ\r\nqT8yMhqI0/Lk2kfdBBNzqj7w+U8WLtTb5ik4I53rAGIaVxtXyNXpyvlNMykH\r\ncs7nc6dnrYK9RiIRqoNHAhUrPwLzsGjbCa751I0eFrn41wSyLy8cdP+i3ANN\r\nanZueK12vbS+/rngjadctby0L+mlcBw83Jl6Te/ddyxepwhdcqyqQ8lokqJP\r\nP0UK6JBlxycfXwObxAaCIfW4KIwvoWqGBsawyUgPamePGPKF3Pq/RxbRX4xp\r\nSS3i3VUYkTfzUA03gJDGxYFzNAV7qXTzWEokQ+wDIG0K8R3TmsaqRyN6nSxt\r\nvEWKTG1Z/V70iGu+EoSXxavxloSAdyMA+P8OWrN4oAkAx7rs6O+h1OJY2AFU\r\nOqY2fKCl4jdP5IKHWd1UMjsKljh2JETqWTWbYcfGCKsY8ragcL0W6ENDWdfE\r\n9ysme1lg+RP/9y73eo5wPBhpbDKF3Y3us/Ayg33KcpJfxjZRvCZC5Iqcg5gH\r\nlYHmyTuq0xBUs/Et+FNwBO5Hduzo85kEiyvFfjQDs55/Ldvb3Kju3yOkyuab\r\nnwv5Q3Oc/mHo7HurAaMJVQb/iOEjFB3xJAotEUmGsWOFSvmSega53r5ZpZef\r\n4raLBOa0+o2a8+G04dzphMbzI+cAVIISDIg=\r\n=2iwC\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"c3f9c47a1b8fbcf554e1fce6da44837b6d412e2f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.3a1f46c66.0_1669809944805_0.7444242727126646","host":"s3://npm-registry-packages"}},"15.0.0-canary.32d8a9648.0":{"name":"@material/density","version":"15.0.0-canary.32d8a9648.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.32d8a9648.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"73882129468f0e131e5478915cb7d2d765ac389f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.32d8a9648.0.tgz","fileCount":10,"integrity":"sha512-21UCcS7sljJES0cV86i1YIxbDpMEZ/dYvGOJqKwsM8nsZyFIyUGPFHPtgQusBBsCCPSe0hxDMmDeTklwaEgcmg==","signatures":[{"sig":"MEUCIQDH/+D34Yxr9sBQuGpcLvBecVUGn6LXRB2h6lowJNDN0AIgazlEpScEY9pe5ROqzy4vUUxytuqP0GDPXE610yQzwQM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjiOQVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpqExAAoTjiv9+hSJb0x5LYNtGkFiiSZeYKNNF4efYnIDEQ2M3aAxS7\r\njiMK5duUo6dU5cEqNc0bBBPugZF+vTs+FIOz9NQlUfAp+te3Wmw8CYUqUSfe\r\nOGNNmvcL1dW7uCAnC20eMWXH6mVEQ/VREkJUGfJbNQEBjVLlxPakBve95dee\r\nHCPozalimzJPU4R48tCR5K43pX56CVb9oKGi35bRBCyguvlWE/DhWY+WuLE5\r\nyGIgkDzR+semyEH1qjqeDO0CdQUVNGH4/ffER8Y8oZSNCZ6dANdmRFlkE1yn\r\n7EJ7HpF3Mfwj0v5XfzU4KIprpidYwyNBXmOAmbJlTwH0Axyy9hIDP/iVg33W\r\nVQPYx/99gIsBDaw9YLApQj+v43G5pM9C+QH2e8rEloQhabCxO3DcSB/aN/jQ\r\nPi7WTgY75Rcdmi7bpubFzfH6nghVYcMPGVFs8gMGNx29S3xY+JdBGIWNmaFt\r\nBeGHIN/Es17X07txIC4OSSLkAVT4T+Ux0xMmOJHBlF5tAVxdwcMyU37cXOrg\r\naOgOa8X+uKiL2nAYyS/xTiX+HlySwEkdqQohY/f2uyQZQMm5SLA9PNPgthws\r\nqX4w9FA3yewxZJ3qJBO4NW6YwiOzWrSSBO9NwUEhjGLgS+TO+tlIuO4fYDHh\r\nH1fuvPYx+9TccVASvtMy6x6OwEAZ72kff4k=\r\n=P55G\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"5833a540d2f362be3d86a707323bbeb6cee2c627","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.32d8a9648.0_1669915669375_0.7187953321932092","host":"s3://npm-registry-packages"}},"15.0.0-canary.03618ab70.0":{"name":"@material/density","version":"15.0.0-canary.03618ab70.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.03618ab70.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c1d7876c912aa070cb41e134847c14213e822e04","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.03618ab70.0.tgz","fileCount":10,"integrity":"sha512-Iu1u/hwS4552TxccfmUlhtiCiuvQqj3O7MqIsomzTye4e7CaBiQnna47lYY7OLY6e51UDgT8ng1Nw1b72VBQeA==","signatures":[{"sig":"MEUCIQDAXrJGi2xSLnSNyGgu895QZKVaoQ8dm34F4o4RF0beKwIgU8s1BmN0WawkIbXZzStRWijBivndL8OXm0uuwnZ+5XQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjiRRJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoBZg//bH23SOVmfgMH0r69kBBkFgUQSvs2jjHmLbtvKs1U9ugj5cRE\r\nr7phC3x69gzoNEidyB/Om6LekUfo+NaDFu4SJcwfJafo8VMcTN/g5VYm4GrJ\r\nxDqxJkM9gYCTxE5mWv0hTBboVX9+o4qg4zqWy9HTecKM4MT9ou79u7k/zf7y\r\nVvznYIUQH7LyhkuP9zoc0OppIbWkOG6cevHIWZxfpMEr2iYWbjXwejQZpgUs\r\nM1JqtlAIvGq48pwTILcS8UM7yJYn3YKhcre67/J4lCjr/AKPxndfmU0xM9eG\r\nxO6t7KZhAI7IGVO5Ob0xnk8oSLhhsDUaC9rPucH15Ju86ri1bbEuclm0oY31\r\ndIkYXwWHiQVc+GjykT4MYi5vTQF/9dU5I6ADJMnPlqbnTPkSKZ+NVd/N7ROC\r\neDEW4g5uQyPMMmMQzRdoQ86VCXrndsCMMaPgMocMsWFm++MYRQlYVwTCWoUA\r\nuc8avQyTRsbESu2sqnv7awHklbTZPfn5NVBlkR8xrlyPPGKGaALCzV2woYoj\r\n9isOvB7MRDGRzksYvjBSopf+u38wpsxcnqv2X4/9B79u2xgOcQENtBkqOhFD\r\nYLX1WLStPZ82sGJDJO5IbCYqqTbN7SiC58IfBkvbTTk7ObXCxLAkNygL8o1o\r\nT/N+/pUdZ+fbhvcXr8ZMemQtmzqrWlIMl1M=\r\n=ERF6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"b7755627c14a2cf095b6ee87d1ad15c14430ebad","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.03618ab70.0_1669928009523_0.7863323494619696","host":"s3://npm-registry-packages"}},"15.0.0-canary.68aaed940.0":{"name":"@material/density","version":"15.0.0-canary.68aaed940.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.68aaed940.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d2aa2a39a64b075f10dcfcf82b24a262974f798a","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.68aaed940.0.tgz","fileCount":10,"integrity":"sha512-FuVmtcw+y3C3hIdZP/6wpNWIgEvkNfu9df0+WYZGXaoZ38w+fjqB9DMj0DB1HNjj8XE7BcIUq00Ztra6UyFuqA==","signatures":[{"sig":"MEUCIHgQcHh/ZSyRRfJOgB9M94obDIxLrp8CxsK3iCZbw+kFAiEA3iuNZU0Y2N3lDD6LNKw9Ui2JhUxNS8C5vdBeMLzIj5A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjiRswACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr3/A/9H7tqJ8lcCWtZMcpzTE1r1XdDxnHAUA2bwiECIaWjvPF81gv5\r\nWNdLWV1Qwa4ZcjqdkV1a4OC1S6c+V9qD9Qy/8tFbA+x98U1p37w+h40V916p\r\ngn6PZbtG62pRx4xfIX6OOIuGNNHPCwoaaf68ojCgu1y32LBCXs9Bmz5mLNFz\r\nBMl2n1aK4a7t+YO8LwwGPmwbpghNLb+KK2DojwfHgx1YGwY8wMlwb2dIhpXs\r\nDISNIxkaH68K93T+38kGp9ixL6RRovOvV8jC/Dwqj/VP2YtzfBIlWI8E8eX3\r\nUeZu1yaVrk8M8WGe5sSqcTGT+eJzryLjCESIKq5HmZfCI8M4YToDWKsM07xt\r\n+jjbR5GnnNqMJ4JKKuvn9oi27y3wXQN5YZcBrysL8DRMOQhIW5zLwHtgc1Ys\r\nX8EroBIed4rthPThuHhxxs2w8JL0wzJNZQJkkFHCIFURXFrQOUrcpgyxqnLg\r\nqk29ATH6rdjjdLj7XptV36mWagcpN9U3aoOHN7JIphYrF3mHMeb7RCVs7cC4\r\nYmOZSkpMRH7sdauCg4B8x3sMc7HSCm+Bg7Gy/U85+t79axvAD9Eb2/zhDznT\r\nS61nz1mPGReBL8uQFjavNuSjRFIoIzMVEWCZTx0IPzFk0wjvku5v9Qurd5Q1\r\nW+mmvCFu2uTqSU+ZhIjRCTH2VHue0essu9Q=\r\n=5fvq\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"6092c4f3bcdf41ae7f55d37c6ad51793eb8f040d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.68aaed940.0_1669929776548_0.06595577958181176","host":"s3://npm-registry-packages"}},"15.0.0-canary.f0a0bbc75.0":{"name":"@material/density","version":"15.0.0-canary.f0a0bbc75.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.f0a0bbc75.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aa73b9e0bd71201815214ede1cb400a5a5b32e4a","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.f0a0bbc75.0.tgz","fileCount":10,"integrity":"sha512-uxiGaHdEKmbixPbiQ8QdS2NTOwPgpFCqkRTzG0yoaSMBDN2P29xlBbeZbr4g5cq/oTowPl+WwXcF1lDVFycooQ==","signatures":[{"sig":"MEYCIQDtPV5jZj0vme9xHSRZs7lOfpvzg4ed0NXF45SdxP3uJAIhAMjtuQXzl00qNqPWT5gWOA5aXbj/15MEuIRNrjx6voY+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjib66ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmreZhAAhzk9ZdJ+Nt0LUKfwXoZdRil/WblUPS/8C1/DDz3YlxQDS7SC\r\nGX9IRErxwjavMFkM6DuKlaPS8teiSM/5vyPJzJowO+cJQn/InS4Ff0b4v3fw\r\nOxZtKo/6xQL3dvspW7e9okTR85Ae971y3qb1sPFKl89c5sFZomSL23VAYRlu\r\nxOvLYIsVVTM3XudvzH58BX9dOHt951q/FBdgw0BPqp+FvL+OFwlRO6LVG8s9\r\n3IGg6qs56OJwwhwv10BZATslGLrX09xfruG8guok7WRceSCP1ttP3G4uyyFG\r\nhtz4KNEEG2eW16XkWBBV7gjj8y/q3KC+A0LF1TzzQlSQC6XaPsgo6t8Szj7I\r\nGAbSySqqSgz9+Dp2/h08iyjHG+2osVRq12T2pE5dQ6mhlnd5TYurTWurSTYz\r\nFLp3u99rTnoB6qtWXg52TeRjDAanXypNdY67mwM1ClfJ0d8rXdI1oXQu2wbf\r\n8ilXtZ4aSPN3O2Kel8/qVOa2xgR4qsSpSkxp3yaK4+50+yFK85XRVS4B9H+R\r\nPv8Ip8JvbFUhpx11oJ9mccOkx38sWcUwAsHXvBb7yCLBrm99EAGf6EPUPlKP\r\nLyHLXITNJJqLyYzqj/SKjtoPY4MJIn7tiv+/k6CrfhEkD1aizQ368jOYb04S\r\nTpBE1RSN1LgmWVDrH1/iGijK7fhGsUikttQ=\r\n=Gfjz\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"5111125522be9e3847929d9bbaf323f31e9057c9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.f0a0bbc75.0_1669971642457_0.2883955732097292","host":"s3://npm-registry-packages"}},"15.0.0-canary.dd99c8764.0":{"name":"@material/density","version":"15.0.0-canary.dd99c8764.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.dd99c8764.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"36deba7c62215f4fcd4eb4fd73f4edb27d8f9062","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.dd99c8764.0.tgz","fileCount":10,"integrity":"sha512-Px+e/OcJmbFbX7Edl0zWE22PIi/HbwYGDklb3svPF0tibURydjLzhagCzMKEOUUvDa7qS4aX/CNQNN7qC3UGZA==","signatures":[{"sig":"MEUCIG/X3AFgYEd7Mo8aY5Sg4MLeNAAtC27MpuWbXKTBkBsQAiEAlPuy9mAvGmh2O1Q9l4gZTLuPw4iEzbXrQOhtyv6poJE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjigTcACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqcwQ/9GjjBuGJ0O5DN7/qd1Z9140XvxbOsrYvXs1PYi1ZERF1wQuo2\r\nq1rPFkW1MaL9x7nIZMbp8eektrF6wTmW5sf1eGiBp3YTV42h7ZUsB+sCBaFo\r\n8LnWHxLwt7XEGlIzyDQC0ldKslvyR5b2jcV218yI6uR9Efw7Nc2yrvxqQCP1\r\nAjJIAx/JnyEND8wrSHjPfGU0e6EEPextcqWM9M0U5QMWy9nprxydoO7R5Ki6\r\n/pMZ6sOv04NfvAgEFwboVuERQG4IZyvnn/NhkLdrUIdy2X2LpZ17zkhbOc+7\r\nx6OulCsAZKYCReZqYPNGS3bABDzX528tWoDcTVCqRyVUKPK1LAl0ktEsKivm\r\npzkWBrRxsihG44WrEGbDwyboKpS9eCB3Z8iyDmQ/lVCCL2XOLD55dL4Xo5w5\r\nmpHha1MWVbunAzQOPZl74El9TIHKoQSplktloDoDJrSzyuTPMvVGQTGSsiT2\r\nJmi0r2ffzrb1333pdCiaYlJSOfGsx+jzqZkxKXYswHfkU2byY4ZkWpniaMkF\r\n69BY1fY5Tet6x2AF146xw7PgWUxKuuN+HK8V/kdW0eoArbOfEhpIVyws6QBZ\r\nH2T64isgN5zt2I185Gak2q2LwPDtGovYQqgzxFVI4eDM8GEM7UhmMhjYnV7X\r\nSBa3/MWWMW/Fgt1uPgJZ64lGBMnMw0C8pOM=\r\n=aEhB\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"a9ff7973c7dab53b620d5be8d56e0c491cc5e7ed","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.dd99c8764.0_1669989596571_0.09296129037656065","host":"s3://npm-registry-packages"}},"15.0.0-canary.fabdcca3a.0":{"name":"@material/density","version":"15.0.0-canary.fabdcca3a.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.fabdcca3a.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"239c9a4d99816fe766d44f3e68bde20b6c829feb","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.fabdcca3a.0.tgz","fileCount":10,"integrity":"sha512-c904Arz/G4Bxm85xSnKhT7SOO+9243AN3qh1Bqc8rK2biLCR8a3JwPV3QvEYVfybBm0NV02UPm/ieVxt0ZVbQw==","signatures":[{"sig":"MEQCIG3xyRAn26Wv91apqhiyM7Jw/QmgSQCyUTBc9wAip+hoAiA5QbM93PPLTbK4cFpj2/n72qpOo8C57n3nOuIUek2T3A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjihREACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmriBA//eogF4bfzhVYL5kPNxiFU3kvtGXN2NWgLVZI/SlPn4kYkJqOe\r\no5r7jWp6+D0X9cHECRK40Oy3PxLW3+t5FSuUR/jmT3Lrf0zZujSwQGHt5ACo\r\ns5JuW7Tvi71Xfb2V9l3Y8AOKwgblzuqmJWHpdiMliGnnZlNB5H2NjBw+V6w5\r\nrz14qhWjCZdIDjZXTHtWtcVn5QvhCV4L+/AwWHFHoikXQygHQNrIc+dK74pJ\r\nTqHf22dyBEhC+VID/FULCohJOtBCPBjcx7x0vfDLyK+4rfQE8dwVvsCikH6H\r\nQlVuVnbmc3O1YQwvZ9JZ+Il3x3bNNZtvVn2p+5xKulJ04y2/9ZGShrKVhv5f\r\nGH3Kb5bFDIIJ9+d+t6ZaIctTURS0WgxYsQgLA11AagpAAVM2QzvvPvCfyUtr\r\nH7P4wfvTbx2RqYtpwkmxLKqurWILthN3iImG0w/PW/y40ZEFFpVa5EK6A/tb\r\nIm2G88VIwmHBk6Ucva2UzMVdeKRhzNuN4Tp6brsjofUfRdoOKLiyKbaZ9Vfz\r\nn2brMqXtkcwktsgS5vEvfPOBMRJIKstC7MRIpaVylZFbNzMsfMY118ymKm8s\r\nLDnLanGArNLKhffLNGEVmgzbOTprzh7+sR4qx4AcijVQzFb/CuTKmmx3B7ra\r\nfeutyg9NSb01GqdSEVtgsT8y4tmpygDw/Ng=\r\n=peLQ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"18ea36a1261419acae3218fc917dab4ca111bb9d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.fabdcca3a.0_1669993540738_0.21502798312888016","host":"s3://npm-registry-packages"}},"15.0.0-canary.2d26722d2.0":{"name":"@material/density","version":"15.0.0-canary.2d26722d2.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.2d26722d2.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cd7c9f2ab2beb7797496fb2b96d41ec3dd434c81","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.2d26722d2.0.tgz","fileCount":10,"integrity":"sha512-Oq4nrChu9xWWBupEKpzxM749zw40b7YeoE/g7VObqvZnXLKVq0JUrtqN2c6X+SVXrG+yI3CeMELIlUKG4Brnww==","signatures":[{"sig":"MEUCIQCAcq6AdsWBSsP5+GevukIl6GYQcMBGN2hJSG/2TFuFowIgfWccWdNsiSorCuZaG6+gFEZxpRUJXST3wisVWQkfLEc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjiib2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrmkxAAl7EjPbz39RkH/lFn/JfmbANgSpFxOBydqDA0JvLX13xDRkNl\r\nN07KQUUmU/Cw/lHkAqDff1+Y9QYHqPDKBrwzrKAL3t8SgW5Yps8m7gvqDm5c\r\nkfyvuL5/AnM5ybVv0UZInSxfQHjpXF8Dv1JoToMxjOA91kNONVew91Ga4jXY\r\nQWrYe4gtM68QKaauEeK6MdZyy1mAO3nk55D+okf8+25bV4Qp3Tox01+EAC+y\r\n5cR4MnV0DW9kUiRx0H2jAg6d+ygjY6yUvUiffBtIkyMq0bHxgfuEdYziqawO\r\nilob2jNhO1mbp6RbymCgNtm/5p6JTi8IEsoRl6xli01Z30o13Ne1WcpCH/On\r\nHgEyHBayE0sjlCbjS6IJp4OfBw3QyKkFESEcKueKJ1KxXjB8Mt3i1unFYkCr\r\n/7wappudm7Awf9VAhUBR5BqV39SO1/l93p5n5IAgmKZO4cag8+6wnxNz/auC\r\nX0ubBm+FNLAFVnedyaeVwtMdNuMUPaGkY1G0erIC2QSPX/s45gjN3WL/A/TH\r\nIFap/6tfJL3RIFd32FtwKg/dNTw0qEA2xZLYHhDBqaYvvUxVZmbK34iB3bhO\r\nCrgDYq1fyt4Y9IYMQ66B56T7IboEga79sU+tz2hrR7IiF2tULVVVWPRtqg5j\r\nnV5yCS4TNx8bv6XDGPyJb85GVwHFFdoJjak=\r\n=k2lK\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"76df2659d7f71f74a86512b38245422ca356fe12","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.2d26722d2.0_1669998326539_0.9636996414980303","host":"s3://npm-registry-packages"}},"15.0.0-canary.eaa0c3a86.0":{"name":"@material/density","version":"15.0.0-canary.eaa0c3a86.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.eaa0c3a86.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f00278184a0521c47ae1347e4256d0be5ad89223","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.eaa0c3a86.0.tgz","fileCount":10,"integrity":"sha512-Ba1ysOR9WzZkEYuLtKTmblOnz8py/Kb93ec7r9EA4QI4fgejU2XDPOwHTOXHMHaPsbzQOt4K5bVTICGb7cbFxw==","signatures":[{"sig":"MEUCIAXQMvNC9CZOO9+86GntPoKulMVtyG/WkVVLhe+lPCdwAiEAmstM1xlwia7f7An0Q1N7rQeLQNRBPVSobED8xrKK1ac=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjijjLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmquihAAnlf0/tJQX1FUER5JyaIS1/Yote9ql90TfPcT/YPjm6Yu9M8E\r\n3lhNnmqtEI6yIBhsMTWZ7dmkTbbMb010LCtT5Sb2aG9sWZDJYlwRJciOitpM\r\nIzwdNzsbZ9r/i+dPpjXj5VRi/zlMektassSFRDteAsrmZrv2OT/CwBJ9QE0Q\r\nuyMCU7c4CWkyVojyDVq4eqAouj+wuURbxPeOGgFzMeoKZO+ZAx7Qi0ZbwlMv\r\nTBo2zXorhm35imSUJoV7aSidJjnVGdezjfoiSJc7lQ9ARYGah9T5hTChV0Ph\r\nMeurm93Jj0iJTDvIkWh9LH4fwcYAZDKLpQQwkZDKj76ESMe3Yzdcw1hpshl+\r\n0bZRwpws5Gce24bKpSDjt8MnqbunJpP1f4B5ywM1N1xct9hP845eafza+KZF\r\nsHRHtYP5u6RNp+wzgCgqs0PWCaMciIoFIHGQaZpGjG91BAl5znw9SwTHZD0B\r\nG36Mk8eNlQ/zdWpnl9r1P9CL8pTpJ3BrDsOTj9ks0/pGgz134qT1jvsR2dYm\r\nHN3ckS2iWJKCOkKblofCa6+G5ia9cpZvo9whpcWTdEje8idXv4ofk+e4awoE\r\nGsAPDxDBCVtJee1nxFnPZCgVc0Yfgp+rQ69unVFIZz/Xy23r2/DJQUt6Im9v\r\nieQT41vY4WCohV5TDVrKMBUjfFEE0vWLF2Y=\r\n=mBZL\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"c54316c7c60bacf8254758124c9235dc48d44064","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.eaa0c3a86.0_1670002891223_0.3850978436661654","host":"s3://npm-registry-packages"}},"15.0.0-canary.79a613bbd.0":{"name":"@material/density","version":"15.0.0-canary.79a613bbd.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.79a613bbd.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5b18d1c1d3c99c410a756d7dfa694c5d153394de","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.79a613bbd.0.tgz","fileCount":10,"integrity":"sha512-gBLBPQicQ+9d4nkeKmRCXo5G1Wta88KxguXWL1cGF7JnqadaSmjnp4iyCZBQYpf9QQw3iMAOUrqpyICGDWqb9Q==","signatures":[{"sig":"MEUCIGb0TcSmjCO6HkReZJwk3IktML+WJU9yv2XseftBsnMgAiEAtrHYUs3HwbCoGLt7n1tQcvS0fSLhM0RHSJr+oYnIjy0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjj1ClACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrxWRAAhVZFA/PlsZgu0hNZEEgTEVk6OvMcOJD7FbgVMZImf5CfBhbR\r\nC2XcTZ/pf4XuQfuyifSz5/i7dP6Kf5drSv10FGZ5EpaPWqYSfPdDgSy+ykVW\r\nnxGGNBDl+v2BTFbmOC+uO0fVmvxz2EGvnAAsMAZWMHIlS/MLKT5nfpkijXxI\r\nN0huLRHm4lAYgjTcz85up6pw77RAVliEZ3FAtyjwiOYKDNJVbLDtQxKUGCW3\r\nCuy/4XucbWQnFuhrD3sucQ6ezcsCPGtJzEZrmT/IwLO8ttauDG1iRgGuLg6V\r\n8tWBv6EcTkeJjdP+ZTLXmebDa8yytNlsbDXJujgiSDITBw3TEb5bj4s57WMu\r\nLUMQkGo6H5zFu+MpT+2c8Xnd3afkjm20Z4IgK6Iin+CXzSrGLBMpOj4OOfkH\r\nyCSHs+xXzVUWF/IXb7hNZ5hYczgdRnm48TrFEsjl+5SPv5U4m8JjeSyzndeq\r\ncPWo0w3CV0QBct9dh8OijMfmsn1COrUoEioEQVRedunJcpE4lB+qc4slyJ5f\r\n0vYgRZCtbn3CKH1dZIF3ZfttP2EYAstpR8/9otScVYQm5wTcftt+wFrFD2e+\r\n8wW1iwG3iRQMvU6XQgrr1XI4Siv5l4+rz3o/M/KUj17CkxdIbAVjAQV6ne/E\r\n8sJLrw6qlh8rrPQvUrK3GcnL5q55wTy5akI=\r\n=1ynC\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"755ec1ef0b2cccdcb0c8b888d199b4748e3ba10a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.79a613bbd.0_1670336677281_0.16955486573793777","host":"s3://npm-registry-packages"}},"15.0.0-canary.c871fe61e.0":{"name":"@material/density","version":"15.0.0-canary.c871fe61e.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.c871fe61e.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"af1cde3da3b1bbe0984dc8cc60a2fd719efb5ff1","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.c871fe61e.0.tgz","fileCount":10,"integrity":"sha512-pDhCljvBXKxdmLo5MqQgv1M4CNFfm3dkkRuohxOUbi8ApVb8JbFAsdz0w0eOVjD2rSrcyP6PJ7vWYx/49NbXkA==","signatures":[{"sig":"MEUCIQDVFoS2izJwWfXrbpa+E5UlSOj3WxRGW7Qk7Vxiku22vAIgTczy7yAX6qWS21Xap+OpFFGRAupq7tFTPdxvxunVPjs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjkEXiACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqyGw/9FYKWwrqoTxvtblg3TIEPzQIPlHx22WWHcNhr15hmuep4skyO\r\n3F9j2kPnbEXp3bkooFFjpY0oyj7HFilgMHe9BrHA+GptQ40JDDHJguVgFq4N\r\n5J+OTLHGALw+wMv98FOrzzE/8VwzHeMF9tZvI17PK7w4+UwFzWVQSZNKyu77\r\nYYSd22UcRWiwexPIUzagdNxLDHGCcReXrpWxMDLn6yzPLP+8w63vMErV7j48\r\nQM8Lhbf0oZFKvU6nIegPejTqx6TT9clwko53W/4MbpA0Le93YJcPvQgCCisV\r\nvU7iQddjXKONLPu5JJcRHsknQT9uduFyUK3ADyL94XgiUVSTvTcZs7Ey7Ag8\r\nGJjndYw9Orf8VD9J2+1gavQiO2oCrg6hCJZsyIP8M/0V4GeE+/nE2cUbVM+b\r\nXyZ3ybQ9myX9pJ63jqNZeXT/xblhThiVMZtSbj2hK+qZ/IWwesZUEpk0alSZ\r\npQG03J2y175crrelQFdIa6U13MmTx+bN3tmDVpfc/JrvwLzakI2hs9rx0q1e\r\nqZsK8e+YRTBBXi6c21uShA5nfv0VrsWfqTHjv4GZp3RFY8BEcHhDbj8pGf/p\r\nSbEHELtMdLiwJTVdVqExaHZdSOFk1aVsjI76ogy1CaqpK5QMt7JtV/FpRPGd\r\nKDuZjin/Fvkuk3JZ/Z0W6GlcrY4IO4YMQyQ=\r\n=d8ew\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"e69be4936d1304c30ff7b83af8488b43c0ad5fef","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.c871fe61e.0_1670399457940_0.773020882503288","host":"s3://npm-registry-packages"}},"15.0.0-canary.9eaee7936.0":{"name":"@material/density","version":"15.0.0-canary.9eaee7936.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.9eaee7936.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6bc2bb006acf5373b3348f84568536b8112823ab","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.9eaee7936.0.tgz","fileCount":10,"integrity":"sha512-8P3xkwHvXy9mfloPRuV11LoyO0BkCL+WIY+yslX48OLdCz4c9yGdho1Gx0B/Oy5kxfyUWG75dNY9zgvMyDWPeA==","signatures":[{"sig":"MEUCIQC+0At/gfkn9HQgcT8d2oA25BGMYIin4/D8u2dPuVcsGwIgJVLrJqDzVu1H3WppGYrddAaU9L4P1kOCUsRbtOtVzZI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjkPEsACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpK7w//ZIBUY/6LkCkZXkuP6vzveNVFZNwcP1+gtcgsvp22ztoJULFK\r\nFGKSX3VnXk5YHWdJOL/Bj5PJ03W7v2SS4bbvk6c0JkHs29AaeWA3OqbMRU3O\r\nLpoQfX7bCqdjgYmU1IaYTzL6rSIPu/OFKvSyAlB2iuNvSnj2nbSry9Y0pDzc\r\nK/hrMkmrTM8A91pNGFtZQYEYJ5xxKy4yUvv3IbfCLFjlbFcPmhet/iJMwaz4\r\ncGLL43hnZDKvWRYY2MFycdckAHUnn9MVq4CQuHK8Hv+Pu07Wls1RDOuGqSO3\r\n7xyO+dgoHNXKUIeyy72W4HAhlkn3Ouo3wew3vgam52XUwQsGIKa6yEhHjNNZ\r\nua67hcm0ziGrHX+DjdhZbAAZYlg9vBmFmJUWCKPs8v2nNWPhEtcQo7eLPGMW\r\ng2cKIyhCIX6WYuBWq3GWj+X+54Vzb4naVbz9W7RgtN7j+gmAkdPPjvY+QyqH\r\nCNue64FTPGo5FId9xbdNhwwyvSvCfVp4f+5weISxlxf4emWUj7iqGce+DJOJ\r\nPeQdyRGM0K9B8wiUMC/un3+pIjc5yeSD2f8s1OuKq1sLWR7yEc+sXjAiL0e5\r\n6eyK/aAYgD5FS+AeqanTATuTd89p+sEzppS348rQCcPHzbdI3XJIv14Q4Odo\r\nexVysbbi5So7hRSgOjzRaOMhavj+q78y0bw=\r\n=FkjL\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"b1b576e68a716d1a80dcdbde7a572c11ca937fef","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.9eaee7936.0_1670443308426_0.19599493442603366","host":"s3://npm-registry-packages"}},"15.0.0-canary.1d37bf601.0":{"name":"@material/density","version":"15.0.0-canary.1d37bf601.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.1d37bf601.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1dd8683ca596b0da178f94fbe540cf2acebf9c52","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.1d37bf601.0.tgz","fileCount":10,"integrity":"sha512-aGlzNXZ18EKKn4HeityUFHmAaPREicDhfIHxyDMtBI5PrI8+lr9U4zRthuvd2fcUOCeRHYm6tfbEaDsFGzAjiw==","signatures":[{"sig":"MEUCIHPT9suZaN/rIlEDG0fNQjGtn42vY6cf+7DZYXICFhp1AiEAhEDGIuzobrU/oSrsgucC6s5C8wPgeqROXvxMmeYJHqQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjkPowACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrG0g/8Cxl0wwk/H7SiLhO0I0TR5s7ouNyCqWS2v+U5ztvAOxX0dGlt\r\n7UmfexA9E8zPfeZCt7WDLFfbHiBLhdHj4ehj24/VzFVny6lGnpC/UC55YSPw\r\n2kTnWLMGQ727jfFHmD/Ne+ELxJJmBPoG/MFQzjDFKmLv8dblofHFlff5U2qf\r\ncY8sD/B1LLYqsq78LzUkd3h3Qed+0nyWLhbu1GbkU3icOI4TNwJJqJMCsqT+\r\nd9vf4yOg1MF91qSiVdEi7gjNwQfQ8tgtHOJanXigUKGeanfYSISE2cUDlfsz\r\nifAf9DxkrSUHIKXKrBCqx/7zxMoG9GePXtokCkSPKnvWJwE0ZscHTU/DbkxE\r\nSaMTtYjvlF5JEGsKtsEz9NVOQVebAGttWHyEyMGZOELhpvALwIa3qgC3eVOT\r\nR6PXjFX5q1jv4DyaWOpPgo7ZdnBxpksoKyqdWD/eexUsr5YXk3yJMRNFvPv7\r\n82Q3jNalIjobZVObH2I2vMpf+Q2qWsBOIe6URQdTQ0EkzcuahqR/w0sTuC0g\r\n4PWOZ7G+GxFxNYjqO7bvxuNwzZnjfVOuFTkd4zyHt8Pp3wTlzjqPrKcqWqgQ\r\n0kqapUHnmFqw+4j9iwloEwRQe/okvcC/Nt17lgcht0lHz9xIVzu3ycPyf+EJ\r\nEX65+xHtOada02DQfegvmMqDIWuGOGj8akQ=\r\n=TGIz\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"747a03f19fc88f7a2358a382989e729013e06df4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.1d37bf601.0_1670445615756_0.9345898389933645","host":"s3://npm-registry-packages"}},"15.0.0-canary.a5fe069d5.0":{"name":"@material/density","version":"15.0.0-canary.a5fe069d5.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.a5fe069d5.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"98244c3eee22b52eeb5207a1eaae78e335542edb","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.a5fe069d5.0.tgz","fileCount":10,"integrity":"sha512-3xYqDIcxBmDa9JmG9gEMzs8Vf37EcrWtlR2R/o+QQSSD1D2fP0lQy09Dp8MpRqclDcwKudJieb3vurFekizI4w==","signatures":[{"sig":"MEUCIQC9T6udzoUi0BsggbTnWEGViEgdr7oKouE0j6MFn8jmhAIgB+JpGU7iBP7dGJFqSvj/QBre0KlfZ1BY3iGeBt9a9aU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjk4G7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqbVBAAidOeKgwXXfO0gbvZWBYxF1SYHrtylQJrwrR0lADFM3i8st7z\r\n5VgnilIhhCqrBNRuzMJL+HLih5WzSNTSV+wRxg3oCFjs7fIR9IcBO+Z8w6jC\r\nP9/hAx4mogPo8fCY9P9rpp4rNMWmAa7IJqyLAeTFazWcSxX0LLDvIwTcZMbU\r\nHxKmkzCG4TfzdZjc9wUGStSqbqstHMk4WyTd7OdZEQkT82zATvLQoc2JvjA+\r\nn17CLVe3NHvvVdojp6DaiTBRc8HFzzozuBQpn6itzBSvaRXqiS+U5kGznXkh\r\nYLQ/rnfDHgP0Vt0aQMGp+1nqcbrNpqAonTni+POSkjafUNXluBBsRvCNWcNK\r\niTuamnPz/icxfO+grQj3/lEM8kNXF8fJpSm4ZgD628lj40tKxjpVE/Ipmh+f\r\n6nCLNEbzdVwBBBmDIjbKfnYHxj4HmyXiwQWEk5jm15KzO7pe8F160sdpkjiN\r\nkHZ6p+8KPrUG/18ez5cyR/7Y0UYksj3muo4CebkQVOfYGor/fmaLlKmaWzc7\r\nmyLbUktMGsng7FAz4qyUG0o5vbi2pBRwV41KBh28fSq38Rj3E0kBYt3K3igC\r\nFNBIeRAYV8WeLrxadsVg9ci17+nBq+npUP8NnZez/6AiUOnzySZB6ZZQ7HSZ\r\neSxpJWWRacHX+UKJXaXX+v76e6+jkatx5Jk=\r\n=RZHg\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"c41dbe93704a7d03ea10d8f1b4de13fb8c6e19ab","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.a5fe069d5.0_1670611386853_0.9007144260379047","host":"s3://npm-registry-packages"}},"15.0.0-canary.ce8b5326f.0":{"name":"@material/density","version":"15.0.0-canary.ce8b5326f.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.ce8b5326f.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"55eac30b0d67499c334fcc438caba07e647ef6b3","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.ce8b5326f.0.tgz","fileCount":10,"integrity":"sha512-ZdFxD9vyAYKb7xKjkRYc8p2LI1FvFbp4XibZ09ViqbyediSy1Gtsb2GUfG+bvCVlyGo160oQPELETlJOJOQuQw==","signatures":[{"sig":"MEUCIAlzcw1gkyGas0PhMvFfjRp9i5JiMbALgxbN2Im5m00tAiEAsv1aygrSo9yq4OxNucfrzSgEusuuYFgWniRcUTtlzKo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjk8TrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq+tA/+JJF6MbOqcT99OQELDcqfoErx/I+mPYSbo0u5upz56h3GErSD\r\n31/Es+FEbZzV3srzBIPT7C0sC+BaHUxE/sSqLCHyNr0u9qSF9wpce9kM/a6a\r\nDVDE28ptWlfNhN2P9Y7YBJAt4mzMEOSRilmZ69oKuHdEJHYEniyQVZGhKdJc\r\nUpJZbw23hRvlgRGZy8pxHNZxxfYltwbHcnGsunK29x+cfYJ/qd6Nt0wXQKpn\r\nvGAgY0EAJ6LxbbOK7ssGmQmHQyPJr7BIkfq+sYjjcHJfroGvJNmANXye5Vza\r\nqlFUC4isNWgxbZ49e81Tcygms85+LH/CgYD1gFXn5EdH7Aaoa2kBKU1Jqx++\r\nLOJxHPanPOu4d0hPjK6haPFNfKqmfMQmYLxMd/hC+uhDbkyEZhZv0p0XC8Gl\r\nr0Js2alK4FravzrSz6XiGKvXkDdAy8XMzec7hmQ92FMAV6w6aW9GcZQU2lGy\r\nx/ufzji0fXiKx5I37nd/qS33TThRxFpibAQma4kBnb+xouK8yrw7NHTux0rj\r\nbTjPVU906S9lgw+A96IUvKpJqBy2MnNBXXKbGQcIgqyC9XTY/wG9d+g3dF/k\r\ngKyRQMeZVdlZjFVNE73Lr0ZhM0Id/mR4gt+JtcrH8acRCaEow34SIOHNVqbD\r\nmtdZimyN66rcxBfmweXZUXRdrra2VVyVEYM=\r\n=hIpZ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"8ff7f9974a16b8178376e943748356193d364587","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.ce8b5326f.0_1670628586829_0.6817038175444967","host":"s3://npm-registry-packages"}},"15.0.0-canary.43f5323bc.0":{"name":"@material/density","version":"15.0.0-canary.43f5323bc.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.43f5323bc.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f509650291b891f71d32a2f3470094996346e824","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.43f5323bc.0.tgz","fileCount":10,"integrity":"sha512-63FptP22CHJMg047TOZQYAItUJ5WCrKgO6mKgceJX/8b+boV+1N/oJVbAewG5D4qw7gw+YouhBawED4WR/2XOw==","signatures":[{"sig":"MEQCIB3aohPpiIfqxtd1ctr4pSys63gIUHIdDR8rB133SAy5AiAEv585K6RVvUUuMf39v4+8jbujPvs7yYnMAeDM96sHVg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjl1qYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq5Vg/+LCalCiBcqDbg5P3sYJrpmoWTV7HT5LdnvyOy70DzbSIXE0dI\r\n852+MW13srnilC+KKgDcgDdhRg0mNnOXBQsqIypZmbt1Wmfb7W/JBmGThXZB\r\nOxUTxo7+AX5eZzNrHC81iGqF7Mjw7EygugmiSN+bRE0L3EX5FxTysj3ddarR\r\ncNcpAJGgvxB7oFb+wFj0nCdvpzLDcqGjGHo701IFkaQ8y4uTBCsjkkhrRhwa\r\nEvhehFwB2UVL/+hpav8SDy1PEMErIATh6S+49/dAlpWgfIwShTFVzX7pA7Yr\r\nPAv17YkSxgbPAwhFyeWI1FS65VepiT9i8Yp2u1L1ef/KnmDxjqD38kvwLhG/\r\nDSAEsVTJarMSI5BjrJvin0YTIHS5KFmxbZtrpztBlCiJym7+jnhaF8WWK7Ic\r\nJD5RPe9g5GMS97wzUHsqGlWQy1t0yhLaSuoImVFj5xyjbvhm0jCXUnWhAVAl\r\ngWNW9O0nIGXW3JoxfAQfGzl8es/KqjFlOpI2KdEMGPMMhozsQ2ym61VoYMIY\r\ngvez1A1e7Fz3UWcra000oLFg1mUebCZkFJgvObOge0WkhaCJ28XCwsgO11Vk\r\nAZ52VCM2ZRw39V3Ndamq8keQCotL1YsrcdmxEXKZ9350JEN9BO8g4EA6wc5v\r\n8nMeMC5mw1E+assbD8jjJIV0XHd4jhMLM2A=\r\n=QbkU\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"00be798d56184d5daa74ad6f53d4992db90688bc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.43f5323bc.0_1670863512335_0.02423518676192593","host":"s3://npm-registry-packages"}},"15.0.0-canary.5490e32e7.0":{"name":"@material/density","version":"15.0.0-canary.5490e32e7.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.5490e32e7.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"68c849d89d786068abac122603db7b30122bc4c9","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.5490e32e7.0.tgz","fileCount":10,"integrity":"sha512-OauR4m5AsBgHey/PD9UD1ZegVVNxKjZZb+RWoRH/8HrQXZRHL0jooRE7vMuojTDEh9GgexCb9DZTYf5mnW+nZg==","signatures":[{"sig":"MEUCIQD3qZo2z6Ics3KJQ5Tmxwls4aafd+98ndonEMdL3XpRSQIgaocca5IYyzfOBQotjl4dkBnxK77goySab9cyJZcpmYc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjl15NACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpGYQ/+P4+UJlPZuTZOPhneUwwbttoJNGRbcAQaWU6JuA1M0aapHrCp\r\n/JrbMu3v7W1Li9A8N7nJ2gsk+8ROVAp9a5UkI9uPPClv6weAyssgz6QCAdMZ\r\nMKeL2hzTWdsCiaFBHvjxXaEw0q+w7ehr2V0KdmVPddSOk9M9tDw0sB4fig64\r\n89gi2s736EjL1dymhx5XDUAaYqjVxFB1ErnX/VoG1ktPlP+1vMaVTLAlMNNK\r\n0doWqknfcBJUEISCG685mB2ekpQP/hgTUkOOS23m/ooCYTw4yOeJBh5IdIaB\r\n3/rP8KM2Jl68QclRp0Uz7g/6t4NzxlkU0p1KErESzSbfBx6LNtqygqXqd/Qn\r\nyi0+WW/ovjFb9XDfg14BEFd42C0IA5h0VP7DqDOsYNdv0AIETe+d4ryMW9OM\r\n1w//bvi98a+D97XkkftCzBdxlS8mOXDW15oyl/9a0t64w2Za5ubYCGmCUFm9\r\nf2n0rrZ6FMHFPpmtuRKDHoqneJsAh7g+5F7a0XwZgbbgfyTzADDPQo1OfLTn\r\nJrzmCkANN+EibJjhSuZVM4mRnA0AwPfShZP0oFD4ascgnyW01ZiWSi/218zd\r\nJKdfJVyVdThJZMZaSaHiMHyB/VnFF1va/J98VnGmErzSpWZZexsr4UbQmbhW\r\n7WwK3AEZuyY7QPLl1LELpQe9Z7W6JlSK4mg=\r\n=tXW4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"968b84204c7a8626355569e2b90063abd574f7a8","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.5490e32e7.0_1670864461391_0.20406786810874267","host":"s3://npm-registry-packages"}},"15.0.0-canary.817002c29.0":{"name":"@material/density","version":"15.0.0-canary.817002c29.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.817002c29.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"39e0cedffcf556b06f59406a9cc4adbe2d10b2d1","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.817002c29.0.tgz","fileCount":10,"integrity":"sha512-toKaWo9bUELplmLzoJxYkZ6PKRX3BpigsAVtuBqKL2i7g0vQoCRzCX0ybzeHNC9ZGrto1QAQOXdhmDfBo16GXg==","signatures":[{"sig":"MEQCIGNDY4nUFLZ0gGkEPVA+PdYbjAqkz0I+zkIDHCarRhhWAiB+YMa7I0lSmPbbZ9AEwLOteAkpBVlIOo/qam/BDDtXEg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmPQ0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoKoA//UhWsdNHWkh79Th0eSyGzvHQel6ExBNjTDn+1w9Wenpt3af2t\r\nwcruu2zWiUMJ2xME+MgconofjakbgTIAOGycO7bDE2yFG+j6gG3s32GKnj/o\r\nIX2Uu87UHdoQpybVeIObo75Crzw0j5LJW+bdwPUNmgHCVWkr8TVpTfx196cf\r\nBd0SjrA21sb9oyBkDceHGx2Da5i6xxpnSwu2ghigbkhT3wEyeLwG9pdKy1Ml\r\natf7de+VUAWgrZ+5Ed2KgpD3arUEWotQjBrNe5rKfei6AJndppQWXOVWkjTn\r\nXLIRJvcjcZKxXxsynRSj7AYFfvrtlOWNxW4CR3GMqjxPJZxJZacp7ry/ktj2\r\nslHvCwWAIR/t9LxvyV28vyWy45C031TiQK7V9ItvdPoGxWmKjugMq1qR0cLQ\r\nYJVrz19UKDV5yDRC+U2JrZo+IWrOaQDnvYsKVsv+CXGHLR8QJRDMZQOCpoEK\r\nhcN3q0waWK6pnR7Dzfm2tvhegVar0bC/UKxTlRsnfRCaSAofQt7eBGSAlE/y\r\nK92nX60NDCXl15/2ShFMFilhbbXV+tMBoZtcHhEailtbXKu08KLcrDnMrU9W\r\n0xYdHhBYPqDXXM7KnacvPnBI/OldyRlwKNZhPM4Yl7Cus/4iBFv5VO5eHCux\r\n6XZsAbp13ZTZLqUxTQ+TEU9tH9ILu7gwXlU=\r\n=w2MW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"8a85122d0f4bac7142c66fa54e2fe9a569e7c4a3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.817002c29.0_1670968372367_0.22670272384743329","host":"s3://npm-registry-packages"}},"15.0.0-canary.313a1326a.0":{"name":"@material/density","version":"15.0.0-canary.313a1326a.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.313a1326a.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4c775a7e49b714a4bd41751ca62d04d17f531530","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.313a1326a.0.tgz","fileCount":10,"integrity":"sha512-wt0S35mpvlebTEEv4o7R+rq6U/GzmHhWEwkothrzk7teiYXRC3w2l/1Oca9b8mlX49WilDNoNpaV7j/KB+Ucbg==","signatures":[{"sig":"MEYCIQC0EKdN832ajBSLt4QwMv7944vwPivqgMqcL68Ym3WkugIhANwO8i9YwIZvqJGrsMIseN5pbZz5snvTZJK5FqVKXX0N","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmaUaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqYUQ/+LdH3OO3Y9tDec8wP/JmTgDFzeQ+yfP38poVo11vUov59kZh2\r\nA7ThmuggagcvrR8d6yOeG97HwdwUoMC3NahjNNeodYf/u5qZd1IswrhMQPfm\r\ncnsZKMPQjEL6VmRtAYOmgXA1oN357U8qpw63+B8tIDYAykwGDzXGEIMYmY7L\r\nxHA1GnLm+E3FOG7BTLt4z6lRXLj3LkyyrPlHfYkf7WlBF9aOWVD2HYizTJUE\r\nz1sgTcl+roe0fdDJGFXljVz9kSWnNx950ssA3qz2qk1++m/T5ekyLRq5B5yY\r\nI1wmkUwyUG4o3VpkRQPBW0SIQSg8yN38itzHsRWV2adJdVrvbMBsZgxtiHjW\r\nqmFbtP9F3HYsxfuruBnGrvvY8BvJKDFE31GeWi4LYnyUKoUyfzsHLT+0hyBY\r\nIelqqXfjfp7jW7OgyLeNQP5A+US0mCiaKlfqJ2QyjArs8TWumOsXPuz8mivc\r\n4oZOvKIyc0A+efNZr6UcabN+59S5/PTTSqAVJaFAAO1k07w49EiMr2YqN8o2\r\nO7ie9+bDy4OwFsKIY2Xy5v6cLV8w+KV7ASCQJJ6J/2XIWvHSzFrB6Z/LhhRI\r\nyui41JyNGVEpQ8BR6GDAEsdLZYheHfLHfklf+EXn+/yY1YrEcGKh3hVFPvJ7\r\nAvRgxEJCATrcQL03F5HB5f9OBPvigrbJGw0=\r\n=ZbGI\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"899522d523dc8a23968f530bb4de8698a5b0e78a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.313a1326a.0_1671013658140_0.24254939153751764","host":"s3://npm-registry-packages"}},"15.0.0-canary.a69c14e10.0":{"name":"@material/density","version":"15.0.0-canary.a69c14e10.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.a69c14e10.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6d917b9ffb7375d9ceae561e0db97a9acdca0070","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.a69c14e10.0.tgz","fileCount":10,"integrity":"sha512-028RpBieOIrnejEVclXeSikmSd0zL37obQt3rPAzkfhgfqMp//iF+RfoYrxmbFj+6bKxnI5Z7ezzOtmcBdoHiA==","signatures":[{"sig":"MEYCIQCOSrgPAv2JZQXr+WniAbsl5uzIAk0hZrPXpca7V7smFwIhAIzNj/ojfzmqUKcpuDnaUB7tYCAtkjbezzi+4YirFihF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmbDeACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrelA//cgWibw/EE4O3QPg0rCxcDKtJUPvq9+w/YCcY8jgpPxjz60Kb\r\newoSsM0CsNXzHsUPli8r79/Ww2w0f9BLFwr3xD796x8ZjjahGzkJ1Eg4F5p6\r\nkzbpsrsEq2tjQ0SbTfLqw8g2CwPQ+q6hCiREmWpo4SYcmJNAIx6wzwuKevQ2\r\n7qUTRGwan5lwa6Nfiodg9xOwnHt9/N/4TznnElPJORKrS4wBMbR4CtgjySd+\r\n1CzWnlQKgD0I2GoVdSQrML8XatahRm4OGC4cUYxl2zdZ2OIfLcQ+rG8J7gtv\r\nMuE1XnW9OqEYxwC1z+8dSeitbo2ljN+bbWjTOP5sL6JVEFdqWCEmelG0ncqI\r\nq/3qPTmN2xYX1w/IM5F2EU0lVxpteMX3bLm0OYiMU3W6NiJU7mpP7kW/zLtQ\r\n7jI9gEo92Lp/72L1Qy4h7hojWgM0Z4cF85RrILLbm2r+RXrcaDMCt/BPLtFu\r\npOX6Ug8Tj+kbNprMhJcq6mU5La49y4GHqR984Zqw+JhlQ83ta9BXFzgFuxxR\r\nPrnVYqTa7grv0Vx1UMQU8hYgkZH2UM60+9JI15QRJps/aPMTs9KXUsbgqjtq\r\nXDxLwKBGOljzQwToUffMVChmLaDMPcuovzwwAg6crMeWZvPNP5r/H2Rk1hJg\r\n+ELji5bgFlDM1qWjTpCeseut7xWewGZCS/s=\r\n=HCA/\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"39b456415cb22d1c1b4de3d505f0e2412c1f5316","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.a69c14e10.0_1671016670191_0.131072700915412","host":"s3://npm-registry-packages"}},"15.0.0-canary.f43e0ceb5.0":{"name":"@material/density","version":"15.0.0-canary.f43e0ceb5.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.f43e0ceb5.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5383aec18519b76f039c6f31128b417ce42edf10","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.f43e0ceb5.0.tgz","fileCount":10,"integrity":"sha512-KXe8A4yoZUquym1tiT8AnYn3ekn6woFx0CgWV48p0fVIpHQu414n34aAwMThqDN8t/eCJKgcn5OmE90EYmgvHg==","signatures":[{"sig":"MEUCIQCmqulAaNp2MX0JykhCvf4BxaDrGXbm+Tj6V/ycyyz/+QIgP7BWF8DHbmAKSQf4kOiIu+V30WnpfdMrvnt08KytYFM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmf1BACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpX2BAAj6hriYbvLsWwnxVLLjEhUgY++Smngov5ke+8XONpLAJdOEzA\r\nn5k5jBKp/6LEjLfn1pJp6N/+lAKYN5ORBXDQQaanJyVOqsutQyftA2GHYcmI\r\nCE+6v6ecIGuuY+C8noc4pozcNv5fQo8x/8aXXPb/PlTdckqzqBMMvB0xHdaq\r\nJeCs3ABJ4dPZX4s4IzYzwssI73fFE3uLIXQoPVfIqrX7q/0MRoGspdSZfbng\r\nfqni24snf9CpsOCpr3L2atJSmTjErEAyFY80MyzZywIHm77ImtHDSPec/OZ9\r\n5+fGPFKwKDmzaQtgKVBU0zG1Ao6s4W+hxfaBVaHMlaRO3xdeMryL0jUJ/DAm\r\npk3jMsEDvrknJ3BNNmAirPz2jwffp7dtE012NkuZsCz8mgesrtSeZkLAychw\r\ntZCFFmUUYb7VkCeyXI+QdwpQtPUZcBqh4qWXj+mAqKDyi0N46iYAsgQdI5it\r\nyRUatAPinV6REfRBM3LwN8ru+AxRxSA0+NB42e/NIH2fQGcujjxz8f51w+0n\r\nPbuInY6Xp4w6CHASchJ1pDz0W1T05S1drxJS3FUKR0ooyMQ/jtG8wgLf+88L\r\ndiz90hfs9Va7SfVg8zeurKEpwFPidGhSapUlteMnw3q692jBBJecTI40Ewmw\r\na+i5a0049jQ4ce9iASbCflpYhmm2RZfQ2z4=\r\n=hM5E\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"35662ba23c37e102fa09f72d61e38e5ce3b10881","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.f43e0ceb5.0_1671036225572_0.8864954655561452","host":"s3://npm-registry-packages"}},"15.0.0-canary.34767110.0":{"name":"@material/density","version":"15.0.0-canary.34767110.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.34767110.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1d3f68c95d2e1dd2e3ebca788e8ff212e7ffafb3","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.34767110.0.tgz","fileCount":10,"integrity":"sha512-HKMx+NQ4E5LH+gqFFYlfGEJdekP67QywMNe+VExUBYLSah4bKENzblpi+liIX4s7L3lJitzXDoCFr+OjgCAjWw==","signatures":[{"sig":"MEQCICyzOV9O7Bq2NnpKryJIbi3HBQgcVM6Hp4hYxNIuKVBYAiBflh2eXRmCUxHU2LVnu56FxRad/G8fnpEAotUiKeggEA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13772,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmgXHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmryLg//UzB9hbwRYVKpg7DGfgAZxAnTIhS45r5UZ3OcxZAoDurfcbCP\r\n/ll/TRZL3bRJPT1D7sru4plWwnYlfIu7AscF7LTGxv/NsYQcl8fwkztPqAW1\r\neqWAQnQUV6REj7kejO+eTDFvvKFTe8xzLKp+UmJagy7P8U0T2wOSWKH6R+ky\r\nTgzPde2jeG4F0a2UIswRv/IGfPcH0CKvaXqm0JVQ5jGROLENsg5hqO4JoH7+\r\natrOzwZvoZIRMQuQl3twqffWJnmhfJeBgZx3YHwgbpz8RTl5O9ZtkS/PI2Vq\r\nLtSxpnfMXrnLYf8HEFmPPVR/O3SzQHfDMewBwa0XvNV5Pgbv0Lnzepj7UgN7\r\nCxVs0eJkUvJTUqVqRDzjV994e1i5JSRcvP4zaIGEeJGnMwDqTThaBzQwunyn\r\nRpIWC2uJAEiO3nPmROgoxgh6j2M5ef3BUs3kNOLhGeI/FmO0edS0A2qEt84U\r\ndv3lwf6bgiY+aamRvoUhE2Q9RaYz1uLsBn/OL6julaBnCLnl50tqBgN4uLZI\r\nQp8zTrH5VKuAj8G9t+kJYgyOE+c5GJvjTjsgJwOAIAw55U2wJbS8fd9AIB8m\r\nr2tqGgy+UzKWv5ewe4PZyfEr8aTQD6v93OZFPBGaTNCEnIiEpuC/gKy/WhAg\r\nFefQvOFd/NyIle3mrpaUvH+WYmRgEptoR74=\r\n=HaMr\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"ed8adbbccdff96503e43dbe6291e95b5d2bca2c8","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.34767110.0_1671038407017_0.13117024108125164","host":"s3://npm-registry-packages"}},"15.0.0-canary.1f99f3c50.0":{"name":"@material/density","version":"15.0.0-canary.1f99f3c50.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.1f99f3c50.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8cd827b274dd26fc94038795ab70dca0d4c5c65b","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.1f99f3c50.0.tgz","fileCount":10,"integrity":"sha512-dS5hdHtSyhkqH3vXRXv8NGJS5eshb2Q1VChnd8Rv+lxLjOYNpMtRA7zzr6ad4aq8iTyoazWVpFc2DuwPDF7oPQ==","signatures":[{"sig":"MEUCIQCwCewhql75+Wv9DvQMfLhzjjGSzX1CFe9ImisQtseSUAIgdOu4lNzSuxsj1EZlIRoJCO1pynELEiuz29VPwaAeDfo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmy4bACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq2PA//WvK8Y4BBJI/eKcNTamJsjGkNUf9zJkJLEHhytouycNfFcDDN\r\nWhMzijXXBNWDfVWu8jXqcAbMKEHvqByncsf0cqP6OWm8uTalOqSSoYdutuiM\r\nXDvY/Xn3x98Z/nkbV1dgBi8uTOhtGPO9fcqV5+SDmkvHSuA1Y8kEEERwEboM\r\n94/GjEuV3VucfWp0NUMF6Hku0ctoyTr1IMG3PGD5NBzMKZ/EFmE0NBlKyrZn\r\naM3fmpVBcw5BodQ9JXd1+wuQAmz/vX1qYGLVncHnXbV3weCrSy4he6+P2KbV\r\nB0ORT2c7Un8hK7umMCHJkwLt04yIFA/j5CnEPve8lr8DVZPE6ozzAqIMLgmE\r\nN7LjDentAAUoxdUoNOZhEgTHyIKjSOwLKYGo9sGija6gY64k1Tb4cSkuDrfz\r\n5kbEHzysh73zDuhm0reRpEX/RAuJzVM7T6Y1UTpHiPScLrHZoKqdLrtDsKgq\r\nIK85306ASYHxAfs3rPC4TJJ8asddgJrVTC4QlOrSxXtNlmeZy5bfSoZR/Yb+\r\nFQN8MqZ6msBUWkMvhL3pXESQruNRA7ElNXSprMoQl2GfXcSebtm4wjNe3Dwh\r\nvHQo35Y+EC/eNre8Hun27tJWE43+vL+tzTkgZslqA60WPL6OtoWf33JB0gJK\r\nVxubP49tqCPt/+cX3fTtzyFW43oBxgq7FAM=\r\n=fXHS\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"c9094e8faca1eaab158d26f7ca8ee4b42fb54bdb","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.1f99f3c50.0_1671114267204_0.6048350252242347","host":"s3://npm-registry-packages"}},"15.0.0-canary.cfd69490f.0":{"name":"@material/density","version":"15.0.0-canary.cfd69490f.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.cfd69490f.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5c987e04ac7f3688949a4431598bd6535673f404","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.cfd69490f.0.tgz","fileCount":10,"integrity":"sha512-KA5dOuyf0+ZA1RSymeNKaGarY3FVXGiL1aLluOmYbOMuBfjOpT8Qo5X+BefA5ZLwkjvW0Ic8zssf1MOrTvU6Ig==","signatures":[{"sig":"MEQCIAHtZxee24gpxkXs/rNlu81AEwJxX6LGh/kcgRxkl4xjAiB9qkFssSMmnKI4gdMz5JwoM4XduQJelC+iV6/J1X4Uxw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjnM/8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrArA//csSJprTOR+HLSABN2KXi/AQhNqy8T3wPQJNoopcoXZ7v8rtR\r\nM0CR1lBAF7F7dpTbhO6BWvF4eF1hMSjx2+yswkGV49G3DSnSU6lEAkmfw7JA\r\nG8FesMwGEFUdZXJTxP/MrW9Ow0N5W1YH3kCG/XvLHfqZ1OdzPhYBU3HmC/Wo\r\n1LJJurwZniVmE+OKTZkZu9Klij1DiFW3PD9Q6mbj745FGDN2uFpR8SIMYoy/\r\nNSGbUTAm3Sz4zoTPehXgG0vunDjwQe8ChGHxroQrWi3SkvjN2O6oiB+ZxGRR\r\nXM/bB46/FzppIuc3cVKT3z4GH2uOv1lUKWueWsdJJB7P8RIPwAQkfV9T0F0n\r\nTZpqS2s1yeGUTpOwvG01nTWssyNUwmmTTAHHmvHVrx/MoQALqY6RtGewCFYa\r\nuNgJma158+uSVRGxlwXWd9RU237TsHmJOdGrFrQbGnP/oudwy65j1sKyC8kl\r\nOdVgFSw6Fbqw0JTw3+a/DDx0nzSr+NQQHH2z4q65d8HsmCWbVf/RLO5PeQgB\r\n3Hdku0oqfYNKnWgBGlSrNPnH7/Ehd9BhccOaDOxWOYiI//6qU0+jfFqtvsMb\r\nuc5PY9GR0Ijv/8/JNn7kaLF1KIxadoVpNyHc2sCE3+qOWB4ChmhrFf0bH1gu\r\nKvkcLOkWNvEsRRFkc3BY04TSKYZo5mfiqOs=\r\n=fJgJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"a7b9218e1ea7572b08b54629159e6f3a98970096","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.cfd69490f.0_1671221244657_0.3652738056020848","host":"s3://npm-registry-packages"}},"15.0.0-canary.94ad8d986.0":{"name":"@material/density","version":"15.0.0-canary.94ad8d986.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.94ad8d986.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fa2f6703a743f9572bbb52d51a1970c2a93c1273","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.94ad8d986.0.tgz","fileCount":10,"integrity":"sha512-LBuYjxVu3dezXQl44gz6ci/mJCRsCL41h4BsZkCLsjhm3pNenTVJddQiW4exILjqeX8qJwGAd7+HMNz0u/JOAA==","signatures":[{"sig":"MEYCIQDtrPzg8bFau0tVsSj+G+5O5Vr8UGw6SjeuD5qWNskkgwIhALXvZ+gCQKjdPo2IsrrDxaB6imXezua2vj4xPOpj60nr","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjoLrHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpmmRAAjiIcQZoQU/Vth8kjVNWT/tvNx3dnCkp3ErviwrInVOVvKS3/\r\nFdFGPSwJFQBWEFSIdppfK2STdeHWOG/KE0DyHywihE1WB8MFVcPj2BTTaM9B\r\nEXISid0KLxcLiRxI9D6WN4zrBLvp0hETpN4LaWby9AIrV4eSs/ci1BK8q6ER\r\ndio5/TVkTx0PxF5Py2ovJh26uLBK5zkYpVhUXQas6BPKQVy3BebuFvcc1zyv\r\nfjPN4Tp8c7O4M/NRaCki91/wa1GMonAIt9U0fMUBijM2ro5ycU5W/HVlbbIY\r\neFzdmhFbLRcvNc0SbP1q/hQgeKsq54My/MGVykCHF9ROdjh8WLlereS+oqbU\r\nqfNc3Xw0QAR3eUEs8P+Y005JEVrMY8uBS7uf+X49tdJ0zd6O+4JTCbmF9i8a\r\nKcUz4L0LbY+FctKXoFGGLBTkZLVD66vj4qogV9OZ4BjYhbLF/fBB6iotU7Cb\r\nT2FXXo1UP/hUlPXQAgKGyGyNeMz1gt4U0doQVidqCPIF8ztKJijJqTSBAR4U\r\nj/S+/hQkk1ak8lKe+Mmn1W2ocOFCOreBxrPZkw+dQDhA5gcIL9hodEet8BtK\r\nQfdwA83yRdWAYc4/TjBshZz+lpbfPwsGfeTP41yvV4A+bdFyAxv0euEufx8/\r\ntRipZ1/CGExrH0m9KIsSI57tvRJY2oGdAWQ=\r\n=WAUK\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"8e8a69afb313ffa8badca57ca15ad4a464b9f718","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.94ad8d986.0_1671477959034_0.6959098494765259","host":"s3://npm-registry-packages"}},"15.0.0-canary.604264203.0":{"name":"@material/density","version":"15.0.0-canary.604264203.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.604264203.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3f4b49087d07742d419b927732afd614781ce2b7","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.604264203.0.tgz","fileCount":10,"integrity":"sha512-4QT83/+jGxJJqGJkUwcpKJddOXg6qU+dFIuv5WNIDi60LkxnB78a7Obzq4VvAGYCffOuNjHn7OGkaLG8SSQh3A==","signatures":[{"sig":"MEQCIAoNLtmwxWhm3u8v5nE6Lo1VIniCnhjqp3jaWLtYEjDbAiAWQ/7vHvaR9/Jmc7DpSXEo0kKCOhvspLj/3vZ5y6O9kQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjo30kACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp9ow/7BZqpeQbAJgSm76nJxZTu54yJL2Pg3rpGCabHyp++Jj9ZpM4N\r\nHw7w1RUm3zOV33aXwfiL6HmU4wQDSpb/KeZUTPrHrLK+fDFWwjPkcXD82Osz\r\n3SXxeUFBgNfOKz6adlVmC17XsTZYAg/R7yBjklpBdLQ+UWxdO0OtnlAIkee7\r\nSOYNSc9gHa9Ax2Iz7t8G+eO0wXxqa8w0a0R2Qm3kXlRSwGZ2bDwQFMtxyW+1\r\nkdRvo6VsoFLRgPgMvdTF4KSgtc/iOJkNvRErX+W1J69LB4N+40G0jWW68sGM\r\nQmBNThDtRucEDOQXsQcW0/yNuHhgBCHkMKU+lx29kgUXOP4kVw6TnkxtqAzr\r\ng78xmM2rAjNAbMK1umcD31CGeNoYQCGnYy/deUP0ev6+ELmdPB1bkXrLOrPz\r\nWUUTgnim4mpyh6n4jC4n1kyuOar6nDaxIq41O8QNvZjEknIhvjQ5Q7TSF+Wi\r\nCJ6/TOy5NhLUhiGX+KABDZnS9nSlaDYI0QiE0QpMQDK83fBzNSfeeS/tUbzA\r\nB8hr/6OrkHm7TXAjt1nHpQ1+W6A0Wj8Mv3gMsTrW0AW4vVKww74/lepJejz5\r\n8w9J3M9LRwyrCB7CQqjztalRYjdsW/eqnSPVCEOv4Rxj2BR0a1U1QP3GnzMi\r\nm/CRvux2VIOIhBno1L95FKMFLGaMxNjIPx8=\r\n=E2/s\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"e37bb80002397246ad3ebd1bf11a465b2eb763e8","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.604264203.0_1671658788126_0.6090914679820616","host":"s3://npm-registry-packages"}},"15.0.0-canary.85bcff6af.0":{"name":"@material/density","version":"15.0.0-canary.85bcff6af.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.85bcff6af.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d17e0a5d83ba3171f4e2135716b6eafa1ae1f6d3","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.85bcff6af.0.tgz","fileCount":10,"integrity":"sha512-wpOF6SINTX/kiO8k3eDo0b4tSKP522J4VR8RLtq/cfjp4B9Boelj0rYYCZQx5YOR+mIsCcsWLXqDcy/nzFEmWg==","signatures":[{"sig":"MEQCIF8KR6LlkU8A3c3p4Q3O0a6wxjbA2SkPy305WdiQy+leAiB8y4MAagXySxmfuvXEUy7R28rgrKwZ49PnbvvzcLI2mg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjpDBHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp/fA/+MqxkVteFWx+MAhtQAOFV1R03EqAhPJ2jjvrMe7uZL/MrpwD/\r\nL08W7PdbwkLK8d33hPe2JFdgkU8rM+8rc4CxzuRBKBRRJw+61eRE99qN5KAO\r\noV0kFicN9WpAaaYBBWZmpfU24SQ63AkncioNfpZPDNwoULn2gP2DV4vclXjP\r\nMa4Rjr1Qt7N5dbk+U7Ocp8IIYXdX+3Qqcq4HDgNvYgFill/sNKVO7ngm4qv1\r\n1iR549K0sO2paSZS2c6ZQoN2CvBoO0SscuxOwg/3DcuzSJTO02K6YgNTSuLk\r\nFpkKCOyVLMxCEm+y5dtMk691X2Gvs5q3Iet6SqG9UC0NfZHcZ55QrRuoAC0t\r\nQxOrFaf2j4nXcC2iHMMMj4zN5KuIrAjz9muIwTMpJBohTYyEpjGPtM5rWIUk\r\nv63EYlxtJS4oge8twXxfdPn5oR/bR+b7JFpEO7zlTz4zAwqFPTrJm2m1cf9d\r\nPTHXIQLHhC3BptJXpUaOv4wEmAI/rF2OU428xa72sEGd8enrLIDzX9wXTgXA\r\nNc2zQI0Ih1NA+HYkucNZlWdYgX5o2JruIAfoAUuRONqzsz9to0cdOHeGDZbd\r\noFE9H049nORBJ8SY7s3o0zXnsFZmttTwWPzT2qxFBTOeyf1qE0LpOh2+fOoK\r\nmtz9AyFnrHcqeeOHN1IVYMKzY11XkOQcpng=\r\n=Rb/s\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"ccd1f76fc7f93266cd894275969c05a833a002b0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.85bcff6af.0_1671704647010_0.7894671900260377","host":"s3://npm-registry-packages"}},"15.0.0-canary.ece3e8d21.0":{"name":"@material/density","version":"15.0.0-canary.ece3e8d21.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.ece3e8d21.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c35eca333d96897fc2d149bf4f6ffe1f654ee840","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.ece3e8d21.0.tgz","fileCount":10,"integrity":"sha512-W4TdtmFM8cH1lQKoqUJd/uRcu7q1WCRQT17Mayo76RVVAHcT13cBjk+0mTxW0TlmqP1Pn4o8741y9g2Go+Y/Mw==","signatures":[{"sig":"MEUCIQD5qms5CcWl20XYw0Et9K8s8mbET2ZJ4ByxruazjArgHwIgKWvh1IxvjWi9Hrz/4bSzwSF7wPesORgARyYLEZ4xmIQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjpI+vACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqOOQ//d8LCaDe6017CRz1zgFgMLEDO+CqkEk4m8Lr1TJm70zyF6zLl\r\nQHRKEIdEuX//l+oDGBSW8F4vKM+c/1eTZpt/XalIbtomSrVla7TZ7YKL+T5V\r\nUOFu45nxuisu5uisS9KkEManab5EulY3SN3onBio5B/YmnyfZ1EFu/gejk8b\r\noDhhKSyVoXizqmrvx/zChvlPoAdzvlrwpr1ZtM3pSWptObjeQXoRgB/+/rPO\r\n/6B31Al24ATxmTpnVvjooRI5w2vDvVDG61XBWqxR8Bq5LJ4GcyGbS8QokgEh\r\neX/BTw1ZqqZ/GPwnp54lXhPoAD8tm/ZPW8Kw15mA5U9yeVhKqAlZYdDwJyTt\r\nyFj4N76KaoMdYj5nz/Qx623SQgIAZXRA/kk7jii04ErMLKbDczwKi9NXStiX\r\nrxt6wtyN6LDhr9JweL+PoEaoGdit/lJ7VSEuWzA+kgDxcUhpj4xEOpYR7QdE\r\naO8fIlhYIciWfumPYQRpiEkdRu0ZvIRtG0yQKhBMNhPhRbp/ZiOcylO3nAv4\r\nsqEHyosaxUUTnvkU3LVRQp41GyX4JPQxVD6zlEGgnlKS9Z5NWgwIHPSTyW+S\r\nD7yC/ordfVJElS9rSxrAfFfoA1GHqCgAJdvamJ/QhBNOf6Uu3vI+jDYFwBhN\r\ndEwQWQ9mi8EmdNyaMxE5MEQYOIgECOUvMa0=\r\n=xUGF\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"1a4efd7042befb584384fcbb35f1ca445adaf1d4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.ece3e8d21.0_1671729071084_0.5429159118519566","host":"s3://npm-registry-packages"}},"15.0.0-canary.278ad53d1.0":{"name":"@material/density","version":"15.0.0-canary.278ad53d1.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.278ad53d1.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e5f6f90af82cd0c8850e6a5c55e7339c45df38b9","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.278ad53d1.0.tgz","fileCount":10,"integrity":"sha512-AHETIVfSZFlbSRc8sqa+a/ZLpvFi6eD59XYopD7we709T+iU9rdAaoplqyzIMCXdJD+K6GcWKcxwzCuck6lJgA==","signatures":[{"sig":"MEUCIFhlfKfaDvk5ABylKfJFe6Zp8pNMTQOilauTmEA409nVAiEA39xYCksoo25Mxmqrarkbnfj1O86y+7N4H9S1DrZHmPY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjqyV5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmquzw/9HXk0cfvIeWR2McgUA8QlSoRBGSO5F7lssZkF1LRrw2pvRDtM\r\nsAz0KOVywtBG/FWcobrpBa0lOpe3OapsgGjOrKhHsUjO1ZgbOTXBX7TvheUc\r\nyfQworQCg+/GnbvP6juxe0qZ8p5HDLWufoRj5lu7zVx6WyHvLLgI9Q3Nysq/\r\nRNwoUdfre0D7B8nU/BkGR9+dUrQkrMjdOcBJHtGL7R2gYG4SMTrfNqNE/BEe\r\nGQmL+mltTmG+bhvxOefSZUnpk0Jsk4FiEWk6w/rimqcie0Zb7LXgK8exMheG\r\npj8nPiPTNRBP6Mk8o9Fn0/nq06QB3UmagiIMlrZhH+QH68prC6SKGaA/1OOE\r\nQKcNoB+/D+cZJD5Dnzz6zLEWB0as1c4o4O4/iHGwMAXwp1N9f9HDp1xyDZV2\r\ndUn6AvFZPjmfhlIvJx9QS4WThJvgdxB7PW0iPk/wrDYKErbbmQBvuKKIdcFF\r\nE3gmg4umxg0c+Vh3Ksa0ZLfJpdWyL34ooZ0dqVH3iX5iQpHK6p7ukmSlIHW8\r\nIKvsZLA1z6EPimqEuA95vThSg1d3gfGsh6ThtBFQXc570SZ9LtXfXvXzlMPw\r\nW9L+whWhMvXFqZc0+csbdAmg9RXO0WUGIcpxhcj58EtwnTn7ipmY2/uIkm6e\r\nZS8Iuzl+/JuD4uqgeDmyRz/D+Gqi9bhLlGo=\r\n=igDU\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"967cf83d2b9fa8a3e6bd992aa107c66182e0c65b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.278ad53d1.0_1672160633441_0.40223167924034264","host":"s3://npm-registry-packages"}},"15.0.0-canary.a7d8389e1.0":{"name":"@material/density","version":"15.0.0-canary.a7d8389e1.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.a7d8389e1.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7dd6078f33a5e946e9bf6ca24ec6926a1bc114d6","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.a7d8389e1.0.tgz","fileCount":10,"integrity":"sha512-DEWPbTl9d1Bu/WsQJaV2sUi9RO3koJDHkb753CsNv9ZP98b/EhH27oGoTgCle+0a2ZUvZbv8Ax5+PYemjFX2nQ==","signatures":[{"sig":"MEUCIQCBPiMjEfBuLL+mceYWwUw1zNPfhESj6BWi8l+/4SREwQIgYY57R/LNlVv4Q5ifbH85hI+u6CzC0BSjGhwwVZlNxdU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjq0FNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqLhA/+LgcRtwPIpY0r0tU1+631S53SY3TnFdHVuM8ctAbwxq0I40DT\r\ntvfm4fqKbvhA3iDotbmRb8q0n/HxGkLY4aPvW7/uzUd9EzfYglK1B2aeYWgC\r\nPFRZfQMijny/7iym6CDhFG3UI0ntonaAkcUqEjfiqPJyJnsUJNE+uqIQdytX\r\nunyJBFBHf7Imqnm0OOWtimhoQOQlv9PvGeZeDF9Cod2th8Lb/xFoMIPcQldE\r\nHBIicij9OXjJv7164l/iTXPwbbTZuygUCH40Cez+Lz9ino7pYsYvMaMw8yGO\r\nKB/Xz9CvPChiW+k0xtbUcx5u7SN9jovjFK6Ffd1j+lM3fRKmu9eKx3e+muja\r\nGEfqpPiNawxx1oOxdZI+O7+UMHAgCa6m1K6ZMNa1DcgaZT6TPNZLLHOjxS6A\r\nVX8KivJ4OEmAkZV1BimwFWI4yLtQBnbd+iXsnoCTba2GNgZkUOS3Hd7bfA+R\r\nsrJ5E7uGOF0gFta1ZQN9C2ewj6fFLK3OKXhJ3ua1/jPmPEyTaKb1GxvbmIFL\r\n4Hgd8jCzn8eA1mncWoSJP/PhL+b1Vl4rlGKogK6cJS/kCbKAUzHQQdp9GixN\r\n+khfn33wrCogeirHjiRiQppLhdfAuTpMexpP+rh8MANn71M0Zv6RB3o4tQ/F\r\nci876lHEEyS6eiJFfIh9I4wA8PU61yvwb5U=\r\n=OgP9\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"f9b27084bc44ecd4530cd2252389b0dd8116709e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.a7d8389e1.0_1672167757642_0.008370991618277701","host":"s3://npm-registry-packages"}},"15.0.0-canary.8175d5eff.0":{"name":"@material/density","version":"15.0.0-canary.8175d5eff.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.8175d5eff.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d1d6a08061fb6bf1c67ccad760b26cfd24f7b956","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.8175d5eff.0.tgz","fileCount":10,"integrity":"sha512-otoZUlqLcWNruglVMzQlnP/MU1Kzfd/+jiLZAq712uDD0Afs6KYB9WuLPKSTT3reoVr48bHFXPlZH0kHTAWp7A==","signatures":[{"sig":"MEUCIQC3+gfLcgecqKI0mT5pu7dwMzV6G1+df3XMJuKL+rERSgIgeh6uVzyP5bgI4iltz+hZsnWCmWZm1tpFM+iBZql0A5o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjq6DnACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqI/g//YcFqAxNosK7bKiKDTnn9xYk38DvH52ZeuLqwrjm41pAOLD2n\r\neopqoVD+9Tvj8Hn8An8sY15Zav8EZArY034GAcuLyqsJqlXyTScu2WoAnRxg\r\nF4CdACZrPjSpTfTe43dcvB8DCbmuujMF3zvgmVZTwrz/u5AlLN0iYt1qhqat\r\nqqzcVUOLQWf6ERD86yfI7DVERNiynoLFjv0CMdh0YvRvfd7F5sBtztBMv6G7\r\nLesCQ3zmLqT1OE3CCqOLIwIypfC2VuwMDbhSMJ8KDty3PQoknrif+pqkb54q\r\n28ZAIuFKOmHwrJ0W+1YTyziavr/u9e5hFoUXtTmKS4a5WtOKKsnlva/3RM4+\r\n4oCai6JXbzK4sRhrQm7h8xqFRf0tL87Jhn8cGHf+jnY8787lt0QT506lHN4M\r\nJn/sY5q9fe4ENgpWXYRafpIEKJAUQehAj0Su2dHQUIjo4mYDcMHa8kZzAyu/\r\nqEEc6VdsuW1HlSrWTNEj3bI3nX2/qzIpOAO3y5PH33ZjI60z7KcGj60Je6ft\r\nzv0pZ4KoeCHkJJpFx6zjuaFRjkC0MrcleEfOibzNxpv+vFQVeiPCOK0BOBWC\r\nirqfGkVwT3EG1+QF0KI68QA2HgRy5C44SPlAyzML0YtT2nc2d3rUudXB82Am\r\nPEy2v/jycLR5vngK/iiiUFlykIqEpIc/3kI=\r\n=Zax2\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"c3bb551a6b32480853dcc8e29f7f8513d62154a2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.8175d5eff.0_1672192231134_0.683442776236793","host":"s3://npm-registry-packages"}},"15.0.0-canary.16abb41ed.0":{"name":"@material/density","version":"15.0.0-canary.16abb41ed.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.16abb41ed.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8ba0be2a6c4e9a19cc696399e7dff1cfde1ea6dc","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.16abb41ed.0.tgz","fileCount":10,"integrity":"sha512-jZq/ztyO2uqusvZTo13XK+1/U757ma4Sogqy73mEIG9SEApLyE1eZDQ6P4IJWaT7SDpKFGAUMM7wY3VXBKSbTQ==","signatures":[{"sig":"MEUCIQCSiBARyKhSoYWwEsV+WYFbjZcMdjgIiDXRCN1xAYPcfAIgMkAZ9uc7vET1Fyje+fpb3QstX31JUjP9U38/U3lls1U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjrJr1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqERBAAnKwtjD8LEz1i3AaekOEBn6yXu2IbsDc1JrfGpTAxKfAj3fRt\r\nxovQsjJzMGSkggoCeyS3PE3cIDvh0IOsBKQT1N/IBreHqItPZaLuehiRya81\r\nklk/KjmLGJNJyKFZpwdFCo0fVnX6QE6BkXYUFkBuB9AvcFuMU6IzctuDi5XH\r\nARmN8bbZ+hGe2dDBHIZurpjO2yfjl8uO2YmQENeQe23ScRool67d4dSNJ2Mf\r\noY6Ce/o01CUS27ieDBKR5v+Ngg5Ok37/BoJbxFM9cOe5aPT+ysHcDVj6m/O0\r\noILRTIiN9Gv3OExz+JTFkE1N0qgfCoZCPbqVIIQXFhRUtiUBitJvGnKPlZd2\r\nEXcSaA+1FLve7QrRnNVrcNykF+IGgaYTI7kfHtjly9R+allPnffi4jz/4JaW\r\nSMNnNd+0U2dczHXd6h64tLSCn8QVlQBc/q+0KmdqI9hrLCSGZCZ7uuc1sOZP\r\n8B4z0jG4BjeCXbnCsb0rs0f9rFqAzdZHhMpnbXXKVq9+UZHiujRq1Mkq4NpA\r\n1941MMLOobvoTgQVg06lFyzzfbwANOsscSnc8EBF6qvSwLLxHiYt/ksQAol7\r\nEnro7gZkhpPMKTTmsuabsmyGpMSBUHOsvfQL6VduF/Cbh8XDBIQm/R/kkCnM\r\nqqHz4mhOmbBx9x1qUQ7X648AbvNljdyTre4=\r\n=Ygy8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"d76b7c826f30ccda72f622ff722cc7585648dc34","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.16abb41ed.0_1672256245574_0.28981283120090096","host":"s3://npm-registry-packages"}},"15.0.0-canary.e21dcb86d.0":{"name":"@material/density","version":"15.0.0-canary.e21dcb86d.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.e21dcb86d.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3b2844a9caca7b56d360a5bbc449b30deaba566d","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.e21dcb86d.0.tgz","fileCount":10,"integrity":"sha512-zEWTnjbf5DrabTAsNvS7vNHnEA2LkwJPQ0kuuXvLB54UTlHwchX8SX4QGNe0S/u/zN3yPoiVfDf0YkZBWA/Ipw==","signatures":[{"sig":"MEQCIDfTOSxb0cfNSRf//ssx/hbNb4MHg47od4Lqt+cGhtTNAiA8KfHBrjSFhhIv37r/XzGsLvwgKqmO7qqhlGSpjRJF9Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjrZ2hACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrnpA//ffPl3LOiCuTsEllugbwW4vxxDEtgVC8z8khpY8f0sqWCULy1\r\nI+9YPCfQTBh9vR1CMEPGNPQvmUezHlLOcLbdKYHy35WyaaWVOVV8rlgnPrWV\r\nPxKDO0L3LS6EwCZ58oD67JidnGkYutgNTMw+1CsjtQcBM3Qnd0906x9XPxmJ\r\npnk9OzvrAyOXBR0Sc4JhgT4oKce8VeQBYFNk0mjLvVzve/2zw20XM4e56fZS\r\nudPMtCMAdQ2PKv5i7RkYofM3UGlySnkU/y8H/vBGdpNS90iodUi2ARy/xnO2\r\nxNXt2gIEkiZaPndRTdaujV+FfPbUWkoe/D2IBapcuSXt7GlD1MOGSEgnaI+j\r\nAS6agxafa+cXxbWiCEhRKA6cWUmldthwkQGcLYVs70/2LmQVvPEw6gNHcMz9\r\nY9+vUfjlnKvJqg2mF51yf3yxhmy6miGKF/3JXcEdFCK3T7V/z73pYoH4Tw34\r\nfAVT2Az9giQxW4G30pmqYFMnMZtyb8rHgv6RVL69EM4sJKw5L6PnJaBS7fm4\r\nVCPD8JQSntgsXkUeQydax3frdGSsdjIBiQeJDVw9EmdS3aPcUQ2nQwtTpWXn\r\nayxj2u+1TBokdgZhf2G0fn1ySyjxs9yDppyvp0skfd/tMLsmNnHyvKJBI3h8\r\nJkz0NJGuySYiXzjA0tn4MecuytfHjF5+Ckg=\r\n=mtO5\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"a32b4ac6d2bad60870533296fbc4acf050735b8f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.e21dcb86d.0_1672322465561_0.6552343654223609","host":"s3://npm-registry-packages"}},"15.0.0-canary.20ab6f5a8.0":{"name":"@material/density","version":"15.0.0-canary.20ab6f5a8.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.20ab6f5a8.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2bd69fabb1137f8c5b33daad941c03fa72c65dbd","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.20ab6f5a8.0.tgz","fileCount":10,"integrity":"sha512-5XLhJrlOOaj0Lo9sb1eNQAwLz+FnhurKwBnn9KO2rc7umwb78WOAu/ZET39UiVqcD24x0FuJ6JZmHRYG1OlCrw==","signatures":[{"sig":"MEUCIQCHDJAARWtZA4nS+3GqJjzDWHxohp3crd7TiWostiBabAIgZr/WGrraltRY6OAOmbwiZxy0aixQWc6LLvQFl0VmAVc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjre0KACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpmLg//Y2BmtAt0k4ND7B3K626Jq3DKUBg9K13QebAdXp8aaXPwXi9z\r\nWCiDbZCQoTj21pO8NFP+uWVVMehde5XDTDDTrSQYTr+iW7H88zFr+WWKtEGE\r\nftSRPoOukTjdOhNqthK7sQ6hfJlTXryzQdCTob4iGOPz3UNhgxoq0Sax51gA\r\nQFUYI7AF0T4mT9kG0Cq6Q6iDqGT+G8FAADyxcn1DngWIMzJFYBKlqP4XQpPm\r\n1LQC2h0n5mKRct5bJtyW3iikrK52g874cEVBRMzD3i0iET+Ce0YJhSH2Ldyk\r\n/jtSaDuj+M1HXPJb/93Jtb0OlJnDWei/Yjo7CAEQ+R7uV6nTfv45v2RkhdYY\r\n0vMfZU8ObwHS03T6ft3zg0aOUpB+S+kvXX/viK3LRdn5jaH2bnFrHubA5HFJ\r\nRp7O21GNQs0dsGJKt94MIsWVseKl/nrH/SmtX3eKrz3LL24ux58bNln08/Js\r\nlA8BnNabgxeBON5SlDdF3AK8wqDhHFjWbyXrpQuvegvAqwN1H6Mda9HmLuvp\r\nERlx4BcZ4yfVWQ2YPJgSZ8n/oH/rAE6/2sxAFydYhUYWpbEcypANvRLYsTiL\r\n+ygm+TFTKAE66jUXAVZ4x+kTR6aK6mzalGRGPlSxK9bs5VoPr7aB2XSMOAZQ\r\nMSxN8QAaPvfe2TqbafjCdLTSdnCDM92AZIY=\r\n=gBRk\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"abf2135af6e71ea44b6e6a4de17493e5923f7255","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.20ab6f5a8.0_1672342794031_0.9283676867929622","host":"s3://npm-registry-packages"}},"15.0.0-canary.b9806f623.0":{"name":"@material/density","version":"15.0.0-canary.b9806f623.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.b9806f623.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"37b62572eb07d466b3025b75979333bf96217de8","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.b9806f623.0.tgz","fileCount":10,"integrity":"sha512-8qMGLxYxQksvAh7oIcwz/s6homjgf9oQtOeWRxxxiJbGlo5FGd5FOXY3624u0zgSv1rgZJHGyy/sgDEcFQpdyg==","signatures":[{"sig":"MEUCIEfkC5LkahOuDAWipU7LgqNU/T4Rb6CZt5msl63gQiQvAiEA9vxOb32+uNIDFbKBqr24IaMM28LEx74e6FSunr5jufU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjrh0RACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq8FA/+JL6vtjbTpdXGMjQLEZkxUk0l8h5D+bbeIjxuuq99HtDjTTpX\r\nolhAH5EB2WMYrj5HPOdNI1eyE0C+3jkJoOt2LPNYvxCejv3AD9PWTTZgCcAQ\r\n0BY2YqWCXsa2Q9GVqy96Ww41Dpg5p4Uy6gWZnBKfR6pLg6FXFGq1X/iXKFfz\r\nDaEh8jAEFACnC870wRG69kmpBv4vqFYcerqLZcMN1KaEKqd1ydMFhWcJ18A1\r\n7HbLyA2NMcYMswzb+amc2ttpkRy/hOHjsZLFKrwCLTrVGyj5f4BuOX1NXlyj\r\n0JXsj+nhmEgzEcGhicpvozF6jchAElMP8uyv+XmU9SrOyIcWr2FtQHAywW6J\r\naHKySYYayZnvvIxzqFAZp7etowck1JnzEbgMQrLTUilzRvfHFRvklbeZHO3G\r\nkyRPGX/R1tqwV5GiS2C2WC8ZQHNKPNWHj+hLH7FmtHbhNMwsj3VDEErMvKkn\r\niZDQl+SB82M2b7c/nsas1Ur7Ravv+nUTnxdtjKUS4oWfK9DgW4hl0YzD7hd5\r\niizFdMQCh55F8imMUz8+Dga0WW7AXwp0vFfUw+Gu4Wm1bD5DoaAR2cJOkKFR\r\nGFHaLcKaThMZFVkjbZIIW9RlutBOJyLRLw8o5a3EHX+EsG4E8mQVEDs3SI9V\r\nFpP4aZBoE1I9M568OxzaUZ7B0kvTtag8uL8=\r\n=DNjG\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"0eb4b8fcbfba4d68dffe3a2b5c7478e69e2e2eb9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.b9806f623.0_1672355089765_0.9471875020255933","host":"s3://npm-registry-packages"}},"15.0.0-canary.50c9f550e.0":{"name":"@material/density","version":"15.0.0-canary.50c9f550e.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.50c9f550e.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3b75095bc1d5896f4c1064cea9df724c96f37d3c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.50c9f550e.0.tgz","fileCount":10,"integrity":"sha512-osxjGOS3pOoglGG+jIu7W7sjwp2dIdf4K7LXvVwSnqyiykFNX76yGgrJfI2hb40MIlG4YYkoFoVnG+QCgXGoBQ==","signatures":[{"sig":"MEUCIQChcWysSWgJzl63T/RXD5SdiO25Tg2s5SgI6XdKjB27PQIgT8KVMZmRA8KWYiCIkjBbs5xSVQXF1NFhfelIEQR3+l0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtE3jACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqErBAAgVX77hd1Tdt9odZ1FSc0MVm1MJb53I0eTvE8BMncS3xXFWbs\r\nudzTYsRY778gKi9mv/HEOXwO0Y78i4+3SdhJbtXV3OhwLgeigcqAW5nBp2Cc\r\nRdegWFVmpm9Pei3Hq0avEEeLK45EHxvQflaqRvfu7qzhYhWAIYArmf72JC34\r\nlzq8o2dxvL9FiRbLA1v6vsVNFvcmYg0MDpTO6qJMzpzoQHVKTk2KBOsHl1Kp\r\nC2kUKFxDnC0ura8Cp4WW8/IE+NBQchpwSA3qAOya4If8nc3cWBhzX7A3QXk7\r\nbTLIQcDeJ2kE1qx/mo/scTPctRf0iK65wX49qhNMsuNqyY/fBL4BkgJgNlhp\r\n7dHNteevJpvUzq+Kl8kdtukik9IZr8eKYgH19IO93ePZvQIIZALbhD6brajW\r\nILMg4PhT1KMowRRwpohCF4dT2fXpkuCcv0TsxlqQhEGN/LHXcxQ+vqMbZ0Eo\r\nDqr5F7SpiMHHLNOBmKoPZoDqQx5y6Bd0RlFNNFFKbgf7lrNxZNFIh3jf9uYZ\r\ndpUqtqRy0OryLS3QGSXv1o7eFRHdG/iNVw+ZAxlSY8oqU9hOGMS0L6Ov6/mP\r\nTeg4OlX5j07yxxHcXJNYXGUELG7QGNU3JT2PR6Y1dR+b3OoOQmwW+N4GN+6n\r\nr2oaPcIjvRhvpj+mZG8+SIDjUuQXWaw4pzw=\r\n=sAxz\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"d020b19d0ab5525ccca1f803a00e184efafb15e3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.50c9f550e.0_1672760802868_0.37667906194575806","host":"s3://npm-registry-packages"}},"15.0.0-canary.af490a848.0":{"name":"@material/density","version":"15.0.0-canary.af490a848.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.af490a848.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9b46a87ba5ba2d88c180a0d15ebddd6c37303be8","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.af490a848.0.tgz","fileCount":10,"integrity":"sha512-SpIzcKikCpWRJ66Rega8I80AeFsF8n5v8so5ySmvU4OXwRpx3qFjMQ3/kW/J0suBvIXS0/avS334+Pip3/hrUQ==","signatures":[{"sig":"MEYCIQDZnbJxxJTrCUMuMCgkUUykTL50f1MWanIwic1lB7ZRDAIhAJi5kvqnrmyr7cK8J05KrZO/51pvm1k5Hv+wrw0QvD9c","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtFAIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqWWQ//dqnA2zDTbhm4J0DE0jOLbv3Ge/FWJkdxrMRFuxQtdVNP9+hA\r\nV4sIc2Nq+JKchAgloeBvRMgS+KMU7yLZDsIzcZSYXYPX45R54zh6uPqIiChE\r\n4rfsatgImBQQbzJCIdbtxI7SdmjS3XCzp0kwj4nuBXrPe4dCBQSy7Wc+84xD\r\nLqSoTP50J79cs3btz1SCdbKLFyynJNj6slVOPyws0zIiMkChQc79atfYLRhc\r\nSZK74eyaZln2ujbNYmvJ9SZgNub08DCTL9Ohp/32zaSZwvn8VtzTOOpP09S8\r\ngfDpWhjnM9IWe+xlnG4VGQuEBdyYFlvy4vobm/B5WVsbRhRoUj4BjFA5v9ej\r\n1eGzVSIL3MSPaV3td8YIa8zUU89y7iAFC+CG8Y4Azzqn4LFEWGDPBvhFa9nT\r\nvoqlbhc2H1CUY1nA0dq88ihJvX3edD3kYlaxH2GUhHGAdHUq2sMTDPlmH+RI\r\nCd9ZDbMmuol21zm22I9kcbg2GZhRBMmTDMe7Ig7EXWM91NiFXQq9xwC9lApA\r\n8FMXpSX//e/GgVzPHqnKsGq48IZBnhDMFFQXa6ush6PAv/osKUtdxVeP8IEo\r\nw9GU2Vndxry1ryMca5ut6diXBMWKL8Wcak9iJsCcyFXbxRd43FymXE6wFp6e\r\n+DhQkaV6z62i7R7jYP5LkFBRdDTLxUS4Ofo=\r\n=9Use\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"95f5499a3dea1763e53574fb3b884e8e45cc974e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.af490a848.0_1672761351990_0.3451916111683966","host":"s3://npm-registry-packages"}},"15.0.0-canary.7cf487c98.0":{"name":"@material/density","version":"15.0.0-canary.7cf487c98.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.7cf487c98.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bec23c17deb544b27e411ad98b186f4e692a41cc","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.7cf487c98.0.tgz","fileCount":10,"integrity":"sha512-rS/P49U4b4yLf4kGUlCljef4AgbOCBNcc6TNZDnurIWB4KaILLGLZ0PvtotE4dt3OpaXzVMMNlZZS23JcZtb5g==","signatures":[{"sig":"MEYCIQDgDtWXBGXBkJ5Nvt7/ddaziw+YNC0pQJS9LKO20CBtkQIhANqGIp2vKjfovslI4KXbsYKANWDX0OPuCCaoWaJGvfPN","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtGfcACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp7IQ/9E7xG32LBeWADB5rFdtXu1PBFJ0/x0TMVQGYa/5zIGzdmURUz\r\nC4I+CH27S0y0TUIurfd2rwIUjkq6VorYPpL5I2vsehVnRKKpd6alhnQLzaJM\r\nNpn2yPggslgBgcs0sV5okdV8sCDbumG91tpF9bdmVWPoBI68kGYF1tXHgBmC\r\nNuAJHS0Xpo+is0MMxBJyfdAXLrVOHjF+8uDG96qggxHO3H5jU/qcVF5SkhET\r\nvKftDK2Ofnbs1p1ulcMmjYAkZHThMP+R4ouhCWQVwsMkHgGLxtq8aO9LfK++\r\nFOR7PPAx5W7mdtxYK9zKjHCdAOx5ewiaFGZniTyvvdgJZz0AS3JHgeGXj7cH\r\njbax0HL5i2/+LMouMv+NhQSRe+ncAHUj9ggSAhKKHQgiBG84KKTyeDR29imq\r\nAuXWydsG0g8pGlI0SfoohHHdljABUhC/WSiZtOHdN4gSMAZwm0qNZWGeMcZS\r\n0p0LZF1Ko0sxbQzAjCig1hGpQ3Ev4nki+m7+Q1b2YojKEccXn609usF7tPRP\r\nAIliKW4CW4kMUrHhAafhe5r6F0YDPAjkzGZixEr7adlHRhu0sCctyFfy2ftK\r\n8NVIhnriQjChN//hbwIhp5eD/mS1S4Ml6aDHxQxogFkJKr8O1lggoesLzEms\r\nRQmc4p1Ydhf31xq6m3JkBRT7Zo1jnX3DIdk=\r\n=KnFh\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"8d246270c785ca072651213aa63882309c7cd5ae","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.7cf487c98.0_1672767452437_0.9127031888633022","host":"s3://npm-registry-packages"}},"15.0.0-canary.a52be2d5e.0":{"name":"@material/density","version":"15.0.0-canary.a52be2d5e.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.a52be2d5e.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2ee4530cab4123df3917143d176c3a55b16c19e7","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.a52be2d5e.0.tgz","fileCount":10,"integrity":"sha512-eKh9CXD7yoP08lzNUNJmfrBsCPcp5/A2v+sT40o+4PIJaGCAtahwq5mpXRUQSowCwD622mNjzrZgGU+5y3E5wQ==","signatures":[{"sig":"MEUCIQCHfFqY+fBNzqdlqUJ9pl4e/LTePKvOCsaU8aFtoybylAIgB7c7AswIjwqgMvNDyP5FB/we8VzrwWUL8w+RVxo/TpY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtH4HACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrU1w//c46297L65Wt68tYkAqeLdpCpTEA83jR4NQWJ4J0BLSlMZ7qQ\r\nQNEj2FEEDd3x75IJAcLznYDCJ/j3Xx6TF5bi6dS+7/BVXyNdxxdHbmYFKe9g\r\n6GVXD5LgC9ovpxbIJIQ1g/FOYatHyelIEA9cSg9coSaatX0g5K2zQZDdl8RR\r\n5VSUTN52+sKIvUapjV8AmKR5fFTze+9Of7DHM99bu+txaCKanFhuNE80ZYvD\r\n6c0KMjqPLcEv5RgyWFGWgGjrihbJm1NMEt/x2hBUHXM5UyIJBAKvyssSfhc4\r\nOThum1OP4QHMn+eawNkS9IW6VcMVFf76gjjouh+Mem5fs0Z7jUlzrVtz57vs\r\n4Yprmiaj0+rUIL3KW1msCxp6iA1RT4ipY94JDxwgqcTTTc16f/WCLptSGL9R\r\nIEBC6cdoZxZrKut7oThcHJOIGbZ+kFX87wK7WKfbCZTU1nkRRPvyjS9JA/kE\r\nnJ94dHUFieRzDReBj43+aMYyGl+nWCkOQs97ZchIHYvMNPoN5THXpqYb8FGi\r\nGxBAbw5ZWOdnlTJ1NevnUQ7XpZTb0T9KrYfsJvmB2NuaO+pWjaMkqnfwjavN\r\noy+SEa4mETsh5Jm9fBJ98GEl2ig1KHNHnTb0SqRIDmpiVxe51QvxQ3t5bC2d\r\nYyiH0TxV0ThGfR9zidzzZUYrAPMcef5Of0k=\r\n=DV9w\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"6c2c2b2b16d0188fcfc620c5bd95622d34ab600e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.a52be2d5e.0_1672773127651_0.02797671577344385","host":"s3://npm-registry-packages"}},"15.0.0-canary.e38ba17c5.0":{"name":"@material/density","version":"15.0.0-canary.e38ba17c5.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.e38ba17c5.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4f51760719d7a91662d56e6b3f66c97e5462cd6f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.e38ba17c5.0.tgz","fileCount":10,"integrity":"sha512-7NRkFkIeYRe04XlKYoqYolGYcprqp8PR5Cv1e25nEwlE6hsJP9kuAk+S0/A7ib8+1u4hfzHVSIMqnoR3mehapA==","signatures":[{"sig":"MEUCIQDEB7Dc3VLlmo041Lau+WgfRJ7mCC51/+h2m5wX9VA2XwIgZlXbMplMcN8SjZm9tOMKHnK8x86wEZ0RXLjNqZEAq6A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtKzCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoXkhAAoikb0Lmul8m2paEuCepP8mRk4BARPM8R70e1VJEEWYv6CT2+\r\nvpXfnC93ryUStHTBU/KNplP/DtLhz9NIG9I0K3Sy4Um6Qvspmd2Z5Zzjb4PN\r\n7L0s8fshXEq59uBzrD8NFAKA+EieGEaj+t34ohWktjyo+bmDTRp7u4veT6sk\r\nib/QjhZU5W3ghaBol5rRYEJJ7v1HcBGUJJEnswnI87Cs9Z6UyQ4hNxwjP6AS\r\ndM7ZoDwKv2GVWwqVddrSP5qsfzP0ZuncBKOVwulygDSWNBW2VO1f1RvDS9vb\r\nrTEQgmA6qWyQ6gQCt4OC6qzuWRynwrm9DxkBOOIYvgrnub3zq86e/ZsG9QE7\r\nLZgMShY911TLpY3fgqjtQxptBqla1n08EGB9rMuaarh12ycSv5v2cqfDwYm4\r\nEhXEy+V5Ir51KZrZSNjUjbT0G6f28UTsVL8BdAn2UBftIutkpTs94ZOV+OwJ\r\nFafRNe8g27EYcNutkzc2VZylvRrQzH/G+sOKGcsdcFp//a1f085ZjuIacad0\r\nEAlu+F6jj5R+zWH0nb/fHlwKKLf4lresLOT2gNdbxX3+owzjSvdAcVBM1rhQ\r\nSetN65yfnccvO/ZRmp88twhu4JdCcgBQQb/b3H+eGgvapI2I681qc6uoPqzp\r\nxcETJd2N+nb1Kz+jtANhvBsEiBA45rjx1l0=\r\n=zd1i\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"d44100693c450240b468ed28efc3841fdde62da4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.e38ba17c5.0_1672785089851_0.09332570254739925","host":"s3://npm-registry-packages"}},"15.0.0-canary.49041a6c3.0":{"name":"@material/density","version":"15.0.0-canary.49041a6c3.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.49041a6c3.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c1a6cad021dc5f0cce70fd069d5d6b502f858916","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.49041a6c3.0.tgz","fileCount":10,"integrity":"sha512-jGldiksMBqNqRwQgQZTiUOJCIw8HabRF11CU69gE+4PSs2TUpnbeqkIlGrZWRR+Wk33qPcJ/fx+Mq7MxoGZMTg==","signatures":[{"sig":"MEUCIQDHQJ7/XfIzS7BxyrTwbHlSH64B4djFkhsXTXa5Fvc4xAIgRFwHAzAZRLgawBT5Pa2riKe/NSPcrmwi35Kzkvc+p38=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtZhPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr88hAAjx2fD89uNxx69V7XxXG2cmt8CBT75sF1A6Klsn2reyFwuK7+\r\nhehO/LCESmaV+mRRFRKLGjQgsfNx9h8uTl1sCx32VOixsC8j9ZkG5iRIIdnE\r\n8Z03EjQgK8hppCDjHi+UhwtmTs0QMI9hyKZyhgJspYfl4xO3rZ/laB6YkOO9\r\nLwHeTENu8eMbDKVOqLxXG0nw1yDUFxo3YgKE3YM+Zi2kF9MWSGkC2ZbaZ+rE\r\nV1S6deip5sFHsc1LSQgQDIkOHrguuo4t0Q38vkHBrsq7a/i5kqLc/0m3EWr7\r\nWjkG2Tpc5xbqyy402KELs7wOy+KbkBBc6PJ4L+wTmDPfEuA3KpknYUSFlm8o\r\nNL5XzOmhoXdVM79BjGID1LDBTVsWLToZ704+8REgm9i5NoPyjYEJNvvJ3zuG\r\nBwu3HjObWgRTmySPgZPpc+RS3qN59rZaTAJV+COnfpCJKbVbvHvn1UbCzKBJ\r\nD+LUef8gJRktULHVfdpzgYMZniTi+nLdHNBPqb9SDyF3We+mdYPKT+pkZOdE\r\nI5i9BUTvIFeXjVh7sDITfvKhABP8rdcmWFzYWfvQ2uXweY65YUvMFWm5Jqzn\r\nco8DPGxItoqa+46Wbk5JLfzs+dBtMJCSSdxbSOpScSPDRhoAnO0cwrOvsxlb\r\neLgBX3+aG31X5EFQPM44f6VSFpNJVODDyqU=\r\n=1i1N\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"f012497ba1285ac3de691b5e25afe7a21ff62bdf","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.49041a6c3.0_1672845391097_0.5417209276917314","host":"s3://npm-registry-packages"}},"15.0.0-canary.c492898c2.0":{"name":"@material/density","version":"15.0.0-canary.c492898c2.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.c492898c2.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8ca663be6938e77d980afcb8274f6b898d9dc45f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.c492898c2.0.tgz","fileCount":10,"integrity":"sha512-Isdm/AeGyEugdOatRpglNaXRrg/Qnal20SYCWYRdArhquu6mZo+84O2G8AyVgF6eljR7Id94pbIk7UKLXx25qA==","signatures":[{"sig":"MEUCIA4zgE/dYzKs7ET1Ee+AnNnCPvzupsyrlNbSydgIBRS3AiEAqC+V0VGr/CRjG5iTXA6ZEJ2L2MV/Ayjjy1gB+Mxtzeo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtbkDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo6Rg/9Fxp+6fOQi+Lq3htYNcRsB44mQ9s4h23im+LHtTyF0OMf2Ay7\r\nI4slMhKAZn/sWGmVpsIQqneKgtHW66aA/mr1zXnm6NOKOB0IjYYKjCSvr7TB\r\nHf+bbYQhRIG8mQH/n+NTIerWlichY8EZs6gsVU9dFfNQ6wQIM30VTuWfRQKB\r\nCgWD43J8c4ewlQk6jGWK5mYk7blxtqFDm3uKJ51eNE0TLA87m/2Xmgrgups0\r\nMWfIa/U+XraKsGGB8krb/mlSRuurXnADCyogCRZYU7F5eprX/eZ1RasypCMl\r\nIQ6KiKoA4cHAUk4dlmDRgmvsTnj5D5JNASaE0ZCZGqzuL+AminwpQ9FpM3kU\r\nf9gDEavTcLvK6i2QUuit4ay76TZTof4vASwIQOTsY8EhBeEm9vhrZ/u0UOfw\r\nmr93Z9x/uT+yF/Tirz/W3I2qwnrdZAI0VGqBQB6TDmZCCIN4qilzeySqA0St\r\nvEGoDfAFRR3FlakL7iFaaFMjo9ZM94LkxFUxxj+K4BmaUD7n/hogbbnUSlzz\r\n3KGr/u64jeR2O3JFk+uLIz5nSYoF4VjcAHhbKp6GtUcXPhvo+Fg5urZK2Lgn\r\nG0uhN+9UHcYoLokKGsUMPvB25TNiIYCzMu17XK6yPqVxIjanZY+6cPp96Ta7\r\nOVAauJf2HDQnUY+SYNFNmjyYdHE4vJ0+hyo=\r\n=7XJa\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"8f57d41cc546a15258de2fac7e4ddca48b2987ee","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.c492898c2.0_1672853762962_0.31316817098313265","host":"s3://npm-registry-packages"}},"15.0.0-canary.d7a2277de.0":{"name":"@material/density","version":"15.0.0-canary.d7a2277de.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.d7a2277de.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4bd473f7b8f0e04afac6f441fb5f68eb607b27a8","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.d7a2277de.0.tgz","fileCount":10,"integrity":"sha512-O2a4An5wtcqX/toukGPtVpIQlOaQfMlQSMU7mhfFxy2Xr2/5Vo8KnZQenGF9263xtp5rMNyljImS3ymH5rvCvg==","signatures":[{"sig":"MEQCIDpRLNN6sbFaTpIiE1Xzjg3NFlBOr1dRgT7Y6ECPbKDCAiBX/ZWg8owWJHVLHFDPMkR9R/Rt6usw2oJFKjtoybpVMg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtfDzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqhZhAAkjl8XYUpw8M2426I4ccJuFuhhmjvAxt24yGV2o20ULAwcVRI\r\nA2xNBFLyXxcphMlxQYw1/jWQUZyel8BLqmC6tbCbuyIlxF9LDa2AzGkDUaNa\r\n/q7ejEhWe+FZefh/OIIYDOPPAYvctoOGSPAndVyl8vUpKnxEvxh/DIQYhUSL\r\nPfUWPyjLqK4HVCGhC2treI57YQCPcnoIo1PHtZqfF6X/JEULDdB+sK9Eg6kt\r\nKsqELaa9I/ONnl29tbjGTYw1QgRQXjMJA3S28Ll8905VxnESPLW9nw11g2Wl\r\nafiOX11c8MJzwf+QyRgDBA4XpbwsVazEfDnmL+puT5r4CYdlu0/sOT6OpsTC\r\nATsFgQ6IttoZ5XyZ6/n8SPpnX8lx1qYLjVvHxscPKwj1lBv3cBHqtYoVL07i\r\nIvV8Y27EtWEvTG2u+VTtTFN32rIe9ggdNXKy7VE0LNGIKFPmbQOpF6A8RoRm\r\nd9qYOvwebWHQUD/9kX2iaxQWEMCExtOHbCstdrtt9CdUeb+Gm+/hnXUpwkhY\r\nPe4MQMpx4vpdPnP25JZ8MLQ9Gho46UayZbGb+Gr3iIuQSy8d9SLrB68hAC6E\r\nvZ5+K0JdLu5GxF5ZzFU9VS+GgCMyqz16RcOjnTX/KntrXkMIIM7gYHDb47JP\r\nkpqfpZf7qf+um7bdDxTysC6nSFrA9XPnzNk=\r\n=YMXd\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"f9c71e947019fdd0ca8837669de0401f3752d1f3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.d7a2277de.0_1672868083221_0.5117322304473759","host":"s3://npm-registry-packages"}},"15.0.0-canary.fd95ca7ef.0":{"name":"@material/density","version":"15.0.0-canary.fd95ca7ef.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.fd95ca7ef.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f48101678b27ec64170557d6d5e29a6d53156cc6","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.fd95ca7ef.0.tgz","fileCount":10,"integrity":"sha512-3scwdXi0xIVL6CZSGVWTxg935zomwMlqEBt0/BdxG96YJ0p+G0Rxb6TVfuzld/isD9Fx8XufV+wNkx0riZ30Vg==","signatures":[{"sig":"MEUCIQDnan9xIvTUmvb8Jd/JhBk3rjpZb3NIty8n3QPDkRsyAgIgMyzG1Uw0UCG3TsQ2LcVQ8/vF0NTtKP+Qfw7LX9au73E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtiF/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrczA/+LVCQva4nymtLUPavoVE1j6Ql02bwNshF/fNEdHh2FW3jI2gW\r\nCSgNY77Qk6S+v7aMdCt1kDwEfJT+sPiHWyzmFtt4XUqqmpfmpoEknf12wo3F\r\npm4pIXjoBQ16Cgz3OF/TE81nMqF90DKSVxCeJGlxra0U4h9X2ZZRLPe3Qt10\r\nsI4B8Jc+1GjSQd6+WHO3bzJ+vp29vyz9Nog+HNeXmDppVoiJ6SJSY14gfFUD\r\nmlw+MrqQSEYeMW3wHYA78O3qMApqXHSA9wfBT8SAgt2tFggbfGpENILFvEu2\r\n6bnNIu0SnQhcZl9eLGQyx2iztxQhiMeJ1cotUwsudHKgefxHZdDT9WiceLnq\r\nn9at/zCYzn5dYSTM33RqsHTA2VN4RnA0U5bddH3927Hj+eXqPjvBmGwXqwTc\r\nLYePuw5kWqcFJL5LzipALk+oLMex1U9lr/YymApMeHmYcGyTrBBsyOtQDDNJ\r\ngTouOFXrH5zmtONAQN6YNu4KPfSuQ/p0f5TlO1ElweojXiI/Evs0/myKdBbK\r\n1r6nWpvwS3j22dYcyHfKknElcMt9TJkIh3xsThwFYmtsmn5iZE98rRr2A0M1\r\n8DIZABxiBVRzofX9BndjBL11qHt3ycNnLsBcnETCkiDN3NQItMcoE+uoaly0\r\nit882Ag1M2mmw9QTDbctU5ypIDxoN9SWcis=\r\n=+mjG\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"b0d2fa371ec4a3d0a8a11e19d9753b1af5d2d62c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.fd95ca7ef.0_1672880511692_0.41791597404948755","host":"s3://npm-registry-packages"}},"15.0.0-canary.1eb44faf9.0":{"name":"@material/density","version":"15.0.0-canary.1eb44faf9.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.1eb44faf9.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8a2f32f131b82c6e1739430529ac52881db9ff6e","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.1eb44faf9.0.tgz","fileCount":10,"integrity":"sha512-rYhtiYwRMkHaZnnEcL3LqX2Ouuqyj5t6wm/benBVUTrZ94pbSft3hugtpJ3xR1h97vvOS/pxWUe5CyhAHQWIEg==","signatures":[{"sig":"MEUCIHFxZiUgkmZMLZOsbSCj/CI19hwIuHyPnLO2KGjwVq56AiEAjfStRjru01vFCCf7JPa1ocOw7YF3dhnal74rDpMb/Zc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtpOCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpoLg/+LJVInDDhTiBIjIFx9uR4yO1c1bzKXDUEo/Gioz7iSq3vkTgV\r\nOG3F1HbpxC4Ux39v9odW/EXLX/pEbFAJRuq5pwg9H9l90OdKPvSxM/+zo1Yr\r\nM11GodqVCVyqIsEHz78meTC+4GRlAW0Q9m7l24rE9OzSmtsIyYT9xGT+Y6n1\r\nv+uCQSzVhD8dN4QJ7JteusIWQMWXPvFw27zldNdIdBFRaXk2QetZQc7bY876\r\n9SEEjQi5ayeVGjRGNLxwkCQ+0BVcmRFnuHULti5lsXxYlgiN2ZVuUAwRD7LJ\r\nzndcoX2SbUaycDoIQIkbyxb13WkPXPhMrZHTQhNG7kaDUXN2EAixzPrizgal\r\nLoW8zyfcarSnxksdW62UeKTueGZHYnS58eF3qTihX32zjiaRXDpqz5m2dbru\r\nvvrMwHYvbJKrnvGeg7joHcxh00thFVON9gdGXGxeCxwLLEM6BA1SpT0YKbHt\r\nL/evA5L+2KQPG16QcFA8aYCiylHYIi0cnQGu5bJbPrjEvo4ilQN3EPverFhH\r\nPTKDm6xjg2nQCL+j6ZsXWfh3myNBjpZZiNSC3DqY1Mjci5JpU8x6llyvy5iX\r\nJqCdeE8+IJioFikjOvQlQDBdppBHhN+eKMuLsB4QMluZK35jHbxxMn/YtObt\r\nY3oybmF/rvA2LELz25SVEZHE064Yxr71mMo=\r\n=0gLw\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"e0eeb94598a14217ebc97ec3e249d126a29a13a5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.1eb44faf9.0_1672909698024_0.41769807028467776","host":"s3://npm-registry-packages"}},"15.0.0-canary.adcdb7db9.0":{"name":"@material/density","version":"15.0.0-canary.adcdb7db9.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.adcdb7db9.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"21971cd9b7d2911b498002fcb9669912699af752","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.adcdb7db9.0.tgz","fileCount":10,"integrity":"sha512-lAwQgo2NDjcsQzwQjseKLdCnHysH1UQHLY+4cnoBrMV1SnDTVRX9WspiVE/TrRmNBcp6K0zXLCbFrsjpmiNmBA==","signatures":[{"sig":"MEUCIQCFMa1H0VRZYszq4LtK3Tq8OMN7Sr1MsCoCaVpTrzbjQwIgSyTgm7u42gV4Nwcns/0pzb1KBQ+q83q6fTP5/ziYmZk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtvjMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmobew/9E/0iQfCHU9YA14Bf4wRn343/NySc9pLk4Z3Ya0B5w2++mgOW\r\nRrpyVwlfv7eigHtCHjh6hyC8bXps5S/q1I0hAXzcNBa6M/gfDvEAXIHVwG/B\r\nqHPC6Sf2DG5BnmcVyRABQtQemQVi16r2T21Suui6trgl8sI9ccggeK/y4EEA\r\nGupYrQKeLRNXuaZHJnU4a0kPFpEphIy0jnE6PuQ0DKF7fUujidKKYG54p+4e\r\n2GqLfAhWmQ4oevQc7ZiOb52HapyeeYxeFe/5DdI+n0Il3T5zPWPbV8G38Uwc\r\ndiU7+mhqmFJhd5/ultBJ5+X9uoX45LXxTm02wO+de36qZzp8K/cHLogPKsKS\r\nwpidFRkaZyISdPOfVn2+4emzwd40wuI9GU8Kyj4PgnyTcKG5Dt/VK8S2nmO5\r\nmvh205lc5bsP8CjAZHxLPfyg7ZWooCG4dxfOSqVfPPW+sIuhAxGA175++l5w\r\nevmkEW6AbshJwjEhjlbL800esMJVJ1PRVwqa8XOeyIzKxPiKTZYi1GyzW4ra\r\nDMB+evOXQMMdtQeH8gH2abiEdCp+tTYfnc10LDFZJpHV/QB/MWjMO6UnmGwC\r\nR1yA0TEfSwFiOxlE+35QjAelOcGknJ2yVpMXnldg+w+TqJ4oFAVBT/KT1sPz\r\nrk1KYzZfffbw8lQEKkjj32QKpM+6hmdXFvQ=\r\n=yKpG\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"2bb419da8b7b393c085616b6c5f28a3eebf832f6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.adcdb7db9.0_1672935628333_0.715569897943509","host":"s3://npm-registry-packages"}},"15.0.0-canary.067af7eff.0":{"name":"@material/density","version":"15.0.0-canary.067af7eff.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.067af7eff.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"27e70a0ee40b2ed48ec06648df9421d677ef3c25","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.067af7eff.0.tgz","fileCount":10,"integrity":"sha512-s9NpqYPO0aNsqdbI4Rv6wO9MtutNd6wzrErBC8GF90KwV1M3NLli6D3uvB+raCxF0tlw5TgC9XLEuLqUBAApbA==","signatures":[{"sig":"MEUCIQCUgnvcCS1oCd9d5xQoSNX0x9+K2GnfkKSorIw1Lhm6+QIgEwZcNXvgs/ZFyhzx1zp5NbljucgyzdONy3ez4fni3Fo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjuKt9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqOsw/+L/G4x0XtwrPovy1b02ukyUxhmSrPA0I5YVphYeITUeiQ2hNU\r\n4Mre/S+FF6DAJCnbm7sOak4gKwlgNkI+wpoDLrnP7NrZdWaaqL780vc4th2F\r\nEjimtu3OL7Bb4Ev1BMZqVpwPzdfjddpm8msvuoiAsdggpJ+P02UMDQ1HP1Yn\r\ngES4Ej5Nz+kvK2ri4CJZKmV2ict2putWb/5P8YwceIu2ihhxT0FdnHivt7d6\r\ned+lF9ZORX4nc/nxj1oDA6lNWhsOTGKiO6UWoG4KHcAvJYfI6SHAiNjVRDIG\r\ne20hCZN7xhYBlESKRx8pVhMbaVIqp/cTEy/wFROWvJg0pFogRUBxE04pEsAN\r\nVknuqimNRGgN8ugvsui5Y9xVTfgKQkIc4SWmriZH6vyqZrvYUNNdCNMrU+et\r\nbNNzFFKlAv2uOiucZwcrGA4WAQ8qHqd38liauZgtPy5Y6DJSTrouxn6sTkcu\r\nbBZc+HrVHIM/ouFgFCu97Wi8NuVr4vwXzKSx1YHG9Yz+pa8miGncuH7ZwPVr\r\n15okuowU5m58aEZCSiirarn7nG5drJW/QE1iXQSy7gedwickS3LeOniVG2JA\r\n27ucdx8q1RqSULfrbqm9/0ALWryrLJwa32ZmYvUa8sDP8jy7LXFbpVryONXi\r\nLz+fot7TnB4I+JIqWZdHl7mC5wIjRxHS3VU=\r\n=qsy2\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"1fae2c792ff8ce557995a8d5d858676b4355c7ae","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.067af7eff.0_1673046909593_0.6390588147224447","host":"s3://npm-registry-packages"}},"15.0.0-canary.21d1196a7.0":{"name":"@material/density","version":"15.0.0-canary.21d1196a7.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.21d1196a7.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2c9e8cb0e9a38e1751ebb3038bb27e3d6bc90c9b","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.21d1196a7.0.tgz","fileCount":10,"integrity":"sha512-JPVxfBTr/s5VKnOadLj6LlH8Fm9xCOI+EAmLcZKaJMe86FR514BXbGLwwmhmCQbVw9dWWwxPB2qzbaG0Dmk8sQ==","signatures":[{"sig":"MEQCIAR3g9V8hwaWlbCh+GPH9e5kkX+a/Ce9pfWbOGpiwpIuAiAA481Bfauut+AIPPX/jhhiy7aVfWqHGVJ1UP9qcDq7JA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJju+90ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoW2A/8DRnszVsB/OAqZeUfNhgxUAClYtkIaopzYjrPhCealRK4Hzv6\r\nMy1IlIEHKR/F6rYhQuSwotoGrUgnjznyCHdFxX6olpOCgJV5VqxQD4FzyLrg\r\nOXfBYE582F8MImnmFHkDFzQBrsZSzdg085RFWL9AsGJ+jxUMTnAXlDnhS78n\r\nf1Vnz89HPG0ukzlHAKUw46CbuciXmpqXZLtWPvyZbykxYc5P7J0UOMiUsBkX\r\n3IPzP0J5m/BPHlQnBodg0LI7SVKoAWU6nkp9wxGlv5h3VfoOsZXyk/M+0GA6\r\n24UDzeKAoUoV1+gTFSursbgNwDnLeC8RDIj94AchJE12A6jHfB3OaDBEMk4M\r\ntmthXVzqU9vX5n128EPLXVqiGv06hfCtDQ2kI72ENAxNhBbcjaMxlviIK2Rb\r\n8vXyHl2ZBFb+Nf4qzr72ax3c6xgZ8vUmbRS6PBRilsEhIAEkpp8KusZJJQMd\r\nVkVFj/C/rAfLzgrqjUDgFYnNrDymyYWn+aT1YvdeFu9kClsiXcAT5eJjUypk\r\nu3XrCpMUFnxJarOlE/KpVxLXxbzhiu8K3t29owOqVucZ0oxKR46huj9KLbgF\r\nbGTeMFOY5qrbAOtXO/D4633mRSb2H4LKu836vmzJgQtg2QhOkYwa1pYjljYP\r\nm9mPtB6tgjy5/4Siic/pPEVDA+cYF6cPsuI=\r\n=VqeW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"361e536c54e276112f021b419f666618a20599f6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.21d1196a7.0_1673260916344_0.008929228754428253","host":"s3://npm-registry-packages"}},"15.0.0-canary.8d2d8d3c4.0":{"name":"@material/density","version":"15.0.0-canary.8d2d8d3c4.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.8d2d8d3c4.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9eb431699090316ed4f5b9983803bbec162cdfa0","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.8d2d8d3c4.0.tgz","fileCount":10,"integrity":"sha512-a/NBWN/qBQPke/M4wUjA0kMME/qkqkQ6bsEe1i2sp9pWRsl1V27OrejGmoMf7V7JwN2hJYuPerO5Z7s7DoGJWA==","signatures":[{"sig":"MEYCIQD+ESOCsYsoD150yGmyqXfDa61zgU02677NgHG2iB6tKgIhALHc/QYrh2W4QF8KRVM34mxx7obH+Y/PsbK8wb6DUPus","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvJPCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoqvw//ZFlPTJW4LIEJ/SSQzYYrR4xXoaVLdbii199GhaqrKRBljp6h\r\njmAVPVW1WRcUEnw8Wg/bM8UJ9J+cnzC0AHikIaq1xehpO2e5TE3qTS1OY3XP\r\ncBjdVDZaGRrDNTk3YV+9U4qLNmswchzBSQSqbXZRF1WylFrYzdH+5lXzZcpY\r\n3LU18EINXO73hvcs2TLknhz1XXAwr4ZGjYerl8fZ7aShYS2FPOkAyGNmZ+Sq\r\n19ezIBd9nYWeT3K+pm5/nFodLCx6oHfumZ+4v1jTg3J0p9/ajAGpIaYuhHhW\r\no4rsV+wTCCjjGOqinmmRjC8hlvxEf4h4Nk8COL03aETG86hBSw+Wr3m5j7mx\r\nBjV4PktmNl6cnj2ZL2K0P6ea+tetdeehHZot7oVpWx3fUrmdf12Dg+ey/DBM\r\nG939Kfc1Y6kwNfVdQC+Ece96MJCBHSb4cUWtyxTKFFH+XEBcnu+GQRM+DFpy\r\nstZfFgpHTmF1GPrdMeBstUS+4cypRgw1YZocFPO3i6Zy1L47xduEmDtHtae0\r\nYtPPnrnrakjdtqF74ozZerbudd25tDznEwD249M89s07oZr7rW7D3JbMJVdp\r\n5q62ze61efRGDHWNo8l3KzflSFPwQW/5hjAO9hXl9MiPCo3RvPcoazm6EUlJ\r\nmwgHvkNYUkJjeMsLuNJyib8iwdGHt+oYzXI=\r\n=nukn\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"c2df4624468d99280d9dcb0894d04d839fc8673f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.8d2d8d3c4.0_1673302978701_0.8082287600720921","host":"s3://npm-registry-packages"}},"15.0.0-canary.f476fdece.0":{"name":"@material/density","version":"15.0.0-canary.f476fdece.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.f476fdece.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b43d880eac493e0678b333a5e1b8f0724f074f9f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.f476fdece.0.tgz","fileCount":10,"integrity":"sha512-KH6oHO6SkqewztXJBeT5SHyvBIaAt7L6Q2gQdA6aKjBh57JICnpTTf7nei7d5D9wLHiWeU/mEnCClzFaICVEuw==","signatures":[{"sig":"MEUCIQC4Z0KXVig9RxkPvyyb+fawFiiTNCwrAvG+McY1bZtiYwIgTVnIrQlXU9rilV2zGrBKiqWT7++7VEWHZdCUHVNi7xE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvY6oACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqngA//SH7SAY6sKhsotB5G2mmkyV9EoTLi/ChJTeodaavoHLRz4U84\r\ncBkAdrNgzUWPrrNA1iaacHxmGcZF4F8HlWCibs5OExBKnv5hd2dW2U/E89ec\r\nyMw4rFmuZCofmPJ8UxyyL8KpZI/9j0ZDl/CxzyraczWnGZ4dN5XRTyF0Ido4\r\n+zpudLbnx9qXBjCfIwnPpe1Ia84WRb6BrFlTkl+MQo7v3C/CS3qYhDhsJkT0\r\nJbfoo3rpfs111wZJNAKSbAO8iF/eTYrct1lRrCN+TEjaVmTuMuxits83JNGc\r\nQ7oEk8sbWc1I1Y2biSNZKkCfBGo0bvfwg6q1y0D8w8nCswDT1blXouOrJBPO\r\ntMn1e/hJHaFgRbnmiuytKpWU20j5o7I77botTXSlaxq3R9l8MOQOOyAGYCZo\r\n6naQoQybQkCeSP3XQ0c84vc+Dany/1TLnN0WKUBP/ijZiVwy1T0sHdEHvHLP\r\n9YaE1oiIhOp+0HCY7/D1LcH4f/qjSMzgfR24IK1v+kUJSKUekoHrxDGhSSrH\r\nV0nHX2LVXOWc1nJWTp9IWLcTlsFSse45isYnjukLTN4hcHv6Vj2+fQI7CH9F\r\nVE+PLZld0BqeV0jtphpRVbmFTlF7yi1cNjb4AKoRoHamN6nZywR9u89574PI\r\nZxixY5RhuqiM8hJmxzUvz83lBdDmDkAWotY=\r\n=iW0V\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"672d5b55da7c88d57180edf75e7ce65ca2fefe0f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.f476fdece.0_1673367208731_0.5018191139739181","host":"s3://npm-registry-packages"}},"15.0.0-canary.fc6ee6c32.0":{"name":"@material/density","version":"15.0.0-canary.fc6ee6c32.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.fc6ee6c32.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f00df22dbf7f0f3be4e7a234085cd9ded6462670","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.fc6ee6c32.0.tgz","fileCount":10,"integrity":"sha512-eYPp/cqKeQXw7EuuEvH2dLWVbsFapccr3d2cQrRBPt2jJYunXfncXlPdn9zpkfspE5SPatzzyz0CDQXwrAEAgQ==","signatures":[{"sig":"MEYCIQCMG2w1Oo1N+zkieFroRLODIRwSwRCySQCjTQeieTt48gIhALgINL6MtTMUJZIX3TjiRL/Ol4EWV9D50sysw3A4ZxjH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvZHRACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqNWw//fA/mQLyp5g9hubwmcsi+3ExbU1bC4MRVN0Ha2nCdSbbie3bZ\r\nFKSyEnqmzmlt8RuCJITsi/RVNFeS4umUd8jhvfO8jjOZ0hY2QxkwWOdMKF15\r\nXMcClxELmaVYiRyt+e3ZmykUKJGI2z91SMSZmv9FwoPNOBgDnWaGL+4O472J\r\ngdOXSm9YYluZUlAVr4LgrXDIAImOwM68TTDIgzt6hO76W1URPuvWdoDejchJ\r\n385e58J8HN9GM2t2yWFTK4HhnHGZBewPIftQqbG03v+NZkpEne7O78JQJvAF\r\n1zN1VNPoikdIneN6HEsG1WvnEmJBdg9Mt+ZA4PTj2wjmEVy7zyu3Wjed2iVL\r\nHDKi92tadZ0efW4PUkYWTKcNELkEV7Il0ooUiLg8T9eeGVjt+1DstAB5hGsz\r\n8/sT7tAIQAtwa5YEUUlC7UUJwaL6+Y8f//iVc3BmcRx8iI+2LebrHoH/PjWV\r\nbwfYG4nV+ur+hQTJ8mb71x48XbfYKiBWDsRcLze9Xt3iAMGvbNBD3T9rKKCl\r\nO3OhpqveDjRgMpN21w6dUA9xIlSavWHKlNWvF7yDJEvFI4qqvFnt6ZB1HxL2\r\ncPrx2wy+O+OgC6nSLKot0X6eIbsin+v2W4282dsiIcb/FAls1W70JHQtaewf\r\nNeKXQoTuv+Ie5uyOdQSqfZ30VQzXmiZ+jVo=\r\n=vxRL\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"225aabdf74bdefc3d2f70f268ddd04c501a821ba","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.fc6ee6c32.0_1673368016897_0.8357762953067998","host":"s3://npm-registry-packages"}},"15.0.0-canary.73537ab0f.0":{"name":"@material/density","version":"15.0.0-canary.73537ab0f.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.73537ab0f.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b96e6e4252049bf87d21f124791c21e75497f527","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.73537ab0f.0.tgz","fileCount":10,"integrity":"sha512-iEU/Mxa07QivGSanTGr+qMgHvy5Ksgk2cCmZseCnOfUJ52Ehc3xZsbu4pi4vcylT3KC8SCvr2ZyhDydJf5Tb3w==","signatures":[{"sig":"MEUCIQCuGSJjGSloTYl2XimxmXCdbKn8q5KvzUU/hSCYBl9UOwIgbhR2/dD3RvuINMlyVv0n+alMXcIoY/SXBVKH0QSCyKE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvaoYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoa/A//XMV8CkC4BjOb3sOLnE6jhxqrfumyKSyNRMpBlCEdCXgxDatV\r\nS7tbqGyawGOgoMCrzxdlMdXG3+jrk06SZxdhLPEn0PPvg2rzMVai3fvEf92O\r\nGl31BujpYvBHdiKYgG7dcuycf1ZhM9hGqsn1UGzVhIgX6sit01zCp7k1G+8z\r\nWAkRJSSvzf53yKkCWkjvNY0jfV0+Polo9FlfDNOlEEWSO9FWOfTDAbvFGN89\r\n96hob7XAu9YqS2jLPISMWS2BAQSAN3YgB0pElbzQ9xAANsBRUU0AVBauqYOT\r\ncnmHC23KKzPEgVKWyVu9TeNVCVuLah5zQPH/BtgcVmdb0C38lO+4KlUUN0cw\r\nV3BscdXKXuhTN+CgvZnFjsiqfgjPp787zFWe/ezMbwKtd8h1c4dD10e3NA6K\r\ncQqtOFCgl6F0YtIjcRvwVC0lzAM20d8xCe0rquU25sizt1VlFt010pC+LYVL\r\nYy4RvmbdFs6Nix6MIDVHGnQdFlWYpOmYxLpUTTfFRbD2jTkAYixrpUVTmez8\r\nBk9Gm7SRl/P9SWrEAnqTFAyf261JsittSt09rnxoQz/HRxT/JBqa7/MTqV18\r\nPoT61E8DW4E7X9XBinUv5P0QzTy+UJ2ggdgB6uW+KfcjNDZZGL50X6b3q7jk\r\nXajah+kM0lG/JlW7eAUW32ZEUwCtpPc2qhs=\r\n=m5m6\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"cb3a480e7be3c8c7bc8f8ee0acf1ee8145f266b3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.73537ab0f.0_1673374231841_0.3395116789976149","host":"s3://npm-registry-packages"}},"15.0.0-canary.684e33d25.0":{"name":"@material/density","version":"15.0.0-canary.684e33d25.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.684e33d25.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9af1ea0e8942341f76f032d42a4cd132050a007e","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.684e33d25.0.tgz","fileCount":10,"integrity":"sha512-661yEVRMGrlq6S6WuSbPRO+ZwpdUOg2glCc7y96doM6itSLOa3UEAldjOLfsYZVB74GnKCiuDp//QmfoRyYTfA==","signatures":[{"sig":"MEUCIQCctuU5+JyTrmYnJvwyuZgrXLiMooHN0Ep4NgiWc1HdrwIgPW8+/RJLyUT4sHO0X1xytJvaGna5qOv1KjCknAMvncs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvbnHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpxaw/8Cx3Fo2lBQND5C5QlZW+gLWfE/lrVebOQDjNPc2t+d1Dxw6ip\r\nmSpMIgDLyalXJGlRPB0uWO6ZYzaHc/FV49uPARUoEh5VAy8knwdmLUWKt7x+\r\nGq1WCNMAUgKZCeiY4V5EyzUtfRv/yOJbXfUrdK5oCNQt+6YPJ8J25gA5RQmj\r\niFKjlzTPmZ4pEkO82f7DqPdMkdxYGCcdyNE+ApEKdg6thtBOH3rUAin4rH0Z\r\nnJmeOck+hT6dEyYXK12UvsMsfQvTqyht/8QAtgyOugd5KyEn1f/qc5C2Qtig\r\nzlJGbyzSI5aGvm7w7N7cK8+JaPC+6hs6zBp0ZfrTK7iPegU6KeJN50TTxyaA\r\nSGepR88BM8lezFYGJN68qamurFKcHnE1ZmIj/8BcS7YBeCcM4cbg7XXOMprt\r\nrfKgehir/jAoSB1QnNibbfNEX4hgLGNJzoBRYIgGOOsO4ySICa349v6yu3/J\r\nvxx61wHmzxXFr3XQujbe3ox31+bGobuPLAmIUWCBHKamHCS/e00o2xoqXk3f\r\nJVns8u8oXX7y5F69jBxuvq1voSuufuhBEGOr7hx7mW7wKkARscHPPbC/G2Ep\r\n5wcwpi/CcwhuRIRdx0bnAHoXuJNW4i2VeeA+N5SsO1i9O7Vz9S31PL4NTP84\r\nQ0vJXZeC0udYddfs737yCpR/GqW0gDiEBQc=\r\n=KKlg\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"518d26a1e091925c1b3a87f4d4f4dc828580a863","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.684e33d25.0_1673378247581_0.17108351415971979","host":"s3://npm-registry-packages"}},"15.0.0-canary.0e89aab6b.0":{"name":"@material/density","version":"15.0.0-canary.0e89aab6b.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.0e89aab6b.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8e79f410bde66254d09a0725be7e0576e8d18123","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.0e89aab6b.0.tgz","fileCount":10,"integrity":"sha512-OdeaQJkiKDJ0K78uREKW1RwxMYR1CAddVQImcUnwE3maEGtvPCfY6R6HotDRHZ8oKDl/sjrBaNrpKd+VDZmHxA==","signatures":[{"sig":"MEUCIQDqxt4any78XB74KXrKY7shKswP5VwoYNYJsddTDnRyPwIgXfs6jeXwsiKFrc4aHgxNDdawyBfwiwUQpEmFjl4JeCU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvuDQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoP2w/+Nv+xUAV7dLJo7JVvG+zFVfaOngqXUysqgbKi7wQ/5pzGKs4Z\r\nsjVEPZgSipnR842k1TaWlHkwUpTxrlNu05/+wkgyCR9ddC4Z5CFo8nV7F8r4\r\nhZmXnkSGIbFRxePsnSRtJbr6pzPKcxStCbFanRntL5TCSXyf3sFaIe5wXNf4\r\nKxhG8d38piEQOwQ9G+JAAbqF0MjOsm68qlfxnMHasFer/3Oe9WZfPBQMITBQ\r\nUQv8IgxYaANxBshtGrdTaqfk81JgYQ3Kn0IxdSLwhy8SWsZ0jYpH+obloRUy\r\nN/7216Hz+oCMinIFEjKMeCJluXGtPjjwRG1g1Wz7c/KJ1PevlBfCVDIl8yqA\r\nElm3yqg9HOMCjCy1YQjpitDX1dT0/+gu/d9+fnWv5yoChIcMlHRz/nzLBclU\r\nft146aoYpBbPUphk8Tz+LABb+PV+GIGsSjd2l2YTXjMeQ4vPAd+eiBLOOY1j\r\nvrMZAmZr2v/JdMgy1VZpztQ7em0Q5qVcZ4jR3ZjqsbFAUyXQVgmj/olSS+Z4\r\nmA/Kuy9GwbEAKF2jaW4BRJuZQSaJZW9f7Ux22PTYFrjav0rMoGA6LfHVgFrP\r\nVjur8z9XkVVUCtLHdozRv9rHif2M1QXCmVcXu0X1uztY7e73NI4mWPM0Opb1\r\nU2yhNYiATPI1MWjA4Tw6N55N1vcdZRb/vrY=\r\n=EdAk\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"e4a9f0d636d7f4d6c0fbbf49a7016627715eb3b6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.0e89aab6b.0_1673453775819_0.4711638184181919","host":"s3://npm-registry-packages"}},"15.0.0-canary.b0103d10a.0":{"name":"@material/density","version":"15.0.0-canary.b0103d10a.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.b0103d10a.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aa70d8ad2a8d930b168c06e842480c06c88f705b","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.b0103d10a.0.tgz","fileCount":10,"integrity":"sha512-+t8mxMvH3AWgKBW03AKwMy+HYrlI1/DBP/YTW2HNpVjAebvCtVqTaN/rOYdZy6rK8zvBr3P9rmEBVeQ0uzOcTw==","signatures":[{"sig":"MEUCIQCJSlf+hXo7ZKtwOFwvf56JS0ZkfX7zPGdxMVpuarIkXQIgPzTUELuMiFQAGNgDR9sA+8HA9x1tXv1VKA5q++do+jw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvwnaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmonow//dSkmh5kQVQZWnsHp/fJixfZpytr88DSe38ySxmP0QIOX9O+6\r\nu6plVoDKr6JFrPGXbkp13Tn6+IQJHCvvFrYvpkzZ7u5lUWU8fWdaTuXXDMQK\r\njJvDK7dHYuKvIVRXGgThlnRGP8iM55OTx9xuZ7eDd/5dhXLFanpMxIsT1Dt6\r\n8lvOTfGfxdV7lBMrOnSABCk8Lokjb4CDsFu5+/nt5MXy4O8rqv5ZeYUmXViM\r\nKlaELLuRnZw6hHN8Oun7s6zilpPV4W2Ka9hXdoz+hyUzUezYo+i7PMJOSvCG\r\npKO29dGegPgL0nJtxesTaRW6eS+5aJ2C3d5LtvM7eJOD1W1QpKRLa2ftAu4h\r\n4aJac3dYjnIdO9nmGoRUxhYGmSnEb8RCDwVGZDd+5nGARy2u7jb/C46Dz1Wb\r\nWAVfckMx4FY/bKAPqtvekAUy8YNXO+6KtQcSK9wQFOfhsJTZSj8Fe6r7Ju6V\r\ngr5Mt11rwOia5wISEzEts/gv5RuL2ed814vABIGIGDqMPkB2r/TD3HMtu2Br\r\nmUALrw2UvEIYgoYTk/78o6ANrKtnFffbMON9TK3MUABuvgULDeFN0it8zKpK\r\nASQs7HBxIjdlK+W+u5EJXYfhn636ts1GmtgUt/HegunjKXc98NJPXWlBZ6/N\r\nmfK9tMGwYprH5tkJ9TSkN7kcjlx0ak5ocdE=\r\n=XmOr\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"0e133b89a4afcc8020dbafdd4d22c734080d2d17","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.b0103d10a.0_1673464282039_0.008444384924966908","host":"s3://npm-registry-packages"}},"15.0.0-canary.50e7a5312.0":{"name":"@material/density","version":"15.0.0-canary.50e7a5312.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.50e7a5312.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"680c7263861fb2e59224deb85fea44b253575d4c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.50e7a5312.0.tgz","fileCount":10,"integrity":"sha512-U/XNEOJTdFOQBS0JB+k3ZWlqoqYLQ+eMsoL03G+CTVoNkY9RAQEBLKPrwjtQbstw8JbZUyoPqrZWSNLerNjgCg==","signatures":[{"sig":"MEYCIQD4gIZGEWoyRM6Dty+RzaoOwtHSNeVdOT6hqtFaNDJjbAIhANKIKrimiFRQfdwhCgxjvxKowRKkW5fqzLpYmgzDNvil","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvyGvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrvbxAAo0FbSE4F+kO3hrBsqVDKwIsupPGXVgOhd9JUZ8XSkp5EtQ6y\r\nTdyn0D0cnsPjK6Nkm1bnjsentMPh8oQ9SEj1dYa+iOt39l4WwjFR24X1Ii2w\r\nHmSDhZHR4E58R4bgMMWEqOYFaMh0Encz/f9lCii0SZpyQtBlLDlARxmychMD\r\nlzSWjwaF+E9PFEET7kIBpom30FJyYWlSvQLAU126DZXYHh6c9MoHvkkfzsK9\r\nZmY80w8enuP6wb083/dxJNRVAHOZhJABIzJbMBeL/jqxDfbT9MnUBO7ViHRD\r\niuBfv6HC2tNVmjziSiFCBXIusRrud2LMU9xwE8krKwEXOqJ7YS7/qlK5M0mW\r\nc7/GSkT/w9ngEOzQf4bmjqZdsWU15qPlf95XQX25TA0pzJgrjiYVEv0yqGDc\r\nmAH9iv3gVhY0BBUKGNHNd0RIpn8RYpvExirCxPH3S6n7sVjNetwVGh9JCXUZ\r\nN44S5Y8mAALK0bvCGXcolryBZplZBUPuW66h9aDRaOyCQvEJuehtp6voZk9J\r\njdgH57HrmwY8boyP0ojdYIiMTm0wlkedJ2mumQuumn6J34EOBNkfbBwwVJjL\r\nDsUGgwykfL1mCZAqv/UEwkLiVOqTCfdZITLOHd2BBQ4YVTI3A+YXhet3zN5+\r\nFEPpXrtmwpMym6sHbloOjwQK2EUKpbnykNo=\r\n=y5eL\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"2d4b8df3edcb9b5e9fd8d8b6645dc9519d92f376","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.50e7a5312.0_1673470383090_0.7721893733075638","host":"s3://npm-registry-packages"}},"15.0.0-canary.202823f54.0":{"name":"@material/density","version":"15.0.0-canary.202823f54.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.202823f54.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"75fca9121fecbb6c6ec471f62b2bb38e098e03e6","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.202823f54.0.tgz","fileCount":10,"integrity":"sha512-UpdN1FG2zktMowJ8XBaf5Lh0SWgvk+/YEhp1lR3lbJg2on8MiGCxV63JEOQ8HrONEsNiuHbR1m4CMi+AUZbmCg==","signatures":[{"sig":"MEUCIBK3DBTliHmrJRYOzwPH5qQPF06ebCtwEPTQ5TvAklOVAiEAuqTqFwhbsryBTUGywDAbeStwioUg/sUj5YyP5HjjYMU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvytxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoPPxAAoQG9BVkVlsRkjHU25Dj3c71Bw/7d7QqC5UDfzw3Dfutp9ZHG\r\nOseZUC2CjHXywnd7q5D4nM91dNMqe/YLQZDLBQB/mxm1CBxKqKiX+6452Kd9\r\nayCmDpAPsL6K+4BKw1QqSzAhH6/19sJETqwWRs8dbukfidgVPxfM+I+hJDAo\r\nwQkq82LuRUcvaS9GC7r4n54o82haczgfazwk/L+WRwvQ+PXItwQURe2XbEAI\r\nyckundxrLSlVh3AcIWfN6Pplu9/ms8ajWrnQ3O8eOornfM2EhsBz+EsgkilH\r\nodLDZNxx35DcaxfODlPxwO+0t1VPFtInlHHUFPI55XFt8x+e8Qx2xk7hY9nF\r\nqMBX0n6hWUTMRpPbeT1svtteZ48w4lOZaj5Ft7Keze18La1N6o5C+ncdIFob\r\nnKXiNVli7aaI4XCrOVML0WGCvWvUKQ69aPOn5LImmP33IbRsQhlmGzePeUQQ\r\ncTGbjkEyOSFdJXf2revX1S5mTV4otfQDQBC0EUL8dtqhCCS28JZ/GoALA6F9\r\nVdqpDio74GynL6xEhubGCudrmUBQCyAdBT3+kENGyb/VaUEUH3pcj3YAz5FD\r\nYMAV2eyAatJPVuTZ7NKpwwEkcPSvAoNuxibkYH2gavyETW6MCMjnlrEYn7Vu\r\n7JQMobdzWIr34Aa/Uk+n3qBDkS58OOD/Gng=\r\n=C0BB\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"6a4dbcb0b4c7d96a85ebe59a5ff66d2469e177a0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.202823f54.0_1673472881093_0.11565413361369647","host":"s3://npm-registry-packages"}},"15.0.0-canary.199fe2a2a.0":{"name":"@material/density","version":"15.0.0-canary.199fe2a2a.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.199fe2a2a.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a839c092d40d748d709ebd0621923e0f3d6df6be","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.199fe2a2a.0.tgz","fileCount":10,"integrity":"sha512-rfSdzFffFIy0jU+X9rxlX1RV3TZV1E4+KG4ESq1qqoyQveWvfzzsoAFMhANdv5kTYp2+Wp0v3XH3/ypSK3PvOA==","signatures":[{"sig":"MEQCID6O8jnyqk1lfSB0JSKXxsF67exGhxzBqfuUG75Z9eAEAiBST9VaXPoXZrfsWK6GdmKJI+Ur5m7TEfxGRGIbCOYWQQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvzAYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpljg//Sb9mWI55QFtPptlBQ+qduPfIH9e7plrhIS6zXUIVv5r4ZBN7\r\nksp10JQ7e0PT3TRlEqIN8X9eGKmdD3ja2kis4KUdfmIC5jm2MkCU49/Dz4gw\r\n3cLeNuxr2AVNgNTunOKRE5oCaOFEiAO7pDsJcvE79ViMlvADwSbSJ3DmTLT+\r\nJ9WuT8lfthmJkbMhQ1PNF8+uOQqmPLVtR7qQYaTelPs1zm6x88h4pdjB+MJV\r\na7fJfe778FC8X2WfcmtV7avFdQttIX12Hqv8rovwea+qSfcicz4v/i66NTKR\r\nf2fA3tv3ryD5JiajCGSevf16CxErv584ewH9OqBA0+letUYDgsneVthxfXmA\r\n2GS95C7SvFkwn5YA8I9S8fCr+28vG74n74IBwrqCUHmKLk8wol/IzdO6XqRk\r\ndmPLo9nB4BECYO/Tc6ZRRecVyuW0BT8GME7nBRzXbbEb5oZxPMz/9pTsZpkp\r\nrzlviDYisvMPzzRzWWm4YSWdtieDTqPUEpSFgnGBUUGuZy2r/2SBt65nxsE3\r\nIK+yESp5nCfKez18P8/wVfJv+4w7FOmJNpyg5SsCmYUjtXeKGxMuUOWDbPiU\r\nEE5G1h2ajSMVPLdINuDt3ZsxgyqlzgwUNNvAzhhkvFG6TSW5rzgbwyXtqytv\r\nVaQftAUFwwG9UrlTSZ3ddZwiZ4Vs7waW1YQ=\r\n=t7vf\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"eb39fefbc3ca102a52db83ad19b42f1a2b52ecd1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.199fe2a2a.0_1673474071982_0.5301243746515036","host":"s3://npm-registry-packages"}},"15.0.0-canary.8c0786d6f.0":{"name":"@material/density","version":"15.0.0-canary.8c0786d6f.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.8c0786d6f.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"725db315a54c4d30e5cda1856b236c6d2783d7ae","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.8c0786d6f.0.tgz","fileCount":10,"integrity":"sha512-hEMj57aDdHuRFbBlvUVxsFGTtEn2mapCE0+xfbftoSI4N+0NXo4cRKR8bwrykD1KH06vugE1esVNCxBOYaxO3A==","signatures":[{"sig":"MEQCIA57Zh27tJ2vM3wy+XPO7P1BrHNEUev0H8esMFcRS831AiAqAlxh5zljFMme5dSbbTywBusYo0k2kcUE80/2wvcEqA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjwBqdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoVjA/9ESO6Yfi0lDKiEXrvT42Fxp2dKtM5cHt29nmFLZv6wXSEh9+f\r\nPF+CYidWTee6Xri0WDWJ64rBoOLrQKhBQRZef8OP6Nr+nFpAqpoXgUkVVYAZ\r\nJ0heuZNk6fxy9wwWvYkvQjhu14KELnFcYdeNCf3rzMjcfsxc1SuHHVKP534E\r\nKl2gJJByJHyM97JkYZ9Plyi2StV0u18NTdgOFfqFJZ3mBBQhlErAHDhOK2kz\r\nnMbplS36JfZIKHiUCS4UHAKhjDUD+ASLujlrr04S6L3emgzAj+B12nd84c8s\r\ncAbuoOOJOkhVNqb5f+M6iE5kGk4qBOOyB5RV4r4s6e/iGp1R5EgsS/8EDPWh\r\nNYSXeC1Fm+EUItYgVh+FKQqgaxhQtAsMbCSGDBMaa9cQRvDE0jiOEvkbCymf\r\nipzVf4eJoAgBAm6yCXjHLXcGc/uQREVcZ4ePolcO/MgCMjKW/hPHd6qLV7ZV\r\nqr8gLK/U/dqnKFtk8+HNtGMEGRt7STbJYj5ZQYBc/Tn7JEWAD44W3Z6/3p/A\r\nTtWbWKrsQW/XP5abDLItEOJKUtY5ExYzsitfibd7X97Nw/behcW97C8fwYe9\r\no7tN8B91O18IdPNs1oikbqrzPFb/kdThDksHwZN1JZWPb+pZJk+4rkqSDB9l\r\nZ4AI5Qv65G4HkZvlzEu3J5exSRerR1V/JNE=\r\n=mc0S\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"9016794346c3c3cab2cf31154ef6a35eb5598994","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.8c0786d6f.0_1673534109268_0.9094676365688028","host":"s3://npm-registry-packages"}},"15.0.0-canary.8a74f7c6d.0":{"name":"@material/density","version":"15.0.0-canary.8a74f7c6d.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.8a74f7c6d.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b19edc6e8b982ab7553600f1bcbffa3c373c03a3","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.8a74f7c6d.0.tgz","fileCount":10,"integrity":"sha512-Er6CKv+MmStftBALajKr3eJNJ2SXDnE+uvTui7Z/b7mTvHoX0Pu7dMHJ7UfAYp/nnuHJ4qNOdZC+JRXMVN4HYA==","signatures":[{"sig":"MEQCIBUBHHtOKtJcgGWanloG6pHnahr7ZGvrACQ3yYGldvoWAiBvGze5QE8948nsR2g50e9qwJERvPzD8gpLKrYlMWPpXA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjxvWvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrX9Q/+LytHeYEena9X9QzJPyuRRxra8oIGvWH+lET3D6dlIOTkS8eY\r\n4kiGCH7v1uTkQvNOBi24+i9Wmg+2dKavGLCH71qm3qwzxao0Q64WMpamq82n\r\nuwNszy2kP95DHHjMqF32oLIvLy+OMAfjKeAIZKeNtMIJPKU1J6/NIlIV8v8t\r\njJ9K1RgKhyjnJu/3/0m3MFnR51DHa8pgM6ui0ZP7K/W6JTGwVzxx/1e3UqUD\r\nHX2gy/5v8MlyYWTColW/7bAyQq4Zkn3z0exNmxhC8dlS2x+xySyqPvVDzvu6\r\nupr1r9cJPl5QdFEO1i0FAouGpQ4x5seRE/x+aE3nUJWW8vsyqkan87IyZ6Rv\r\nJ2Gw5WpyvyQErGYmmOSkG3TRHE0hrKuWnEnywxD50IOKUbFjFHxG1kzHoDNl\r\nLqlP0YKarq+TMAk4xbP4aW2sQrxUCdAVNGAOqMiXcoHwRNS34y0fJvHDxS47\r\no8z3KsGPq9IZsBQGgopLWHbtOFnKgO5BHsSCxzM+FIZvY7FnLj3PM68BsDad\r\nvHfGQSXlbYScSR3TmpDJ63u5bVcHA2LCboGjHSAxUsxwAHg5DV+0wqi4Ttd9\r\nWRaAGt4m86QPu/0fqNtTJX5NBwxGQxxkzyZUh9GNN8a1fM8cNsCQqDqe489m\r\no/P7bTcoHh5GI6pHaomtdP8hLpImsWp0E1Q=\r\n=NdS8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"9c676a1e4329c32508a9e7110198a336dc704f58","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.8a74f7c6d.0_1673983407666_0.5867134050199168","host":"s3://npm-registry-packages"}},"15.0.0-canary.b4687fdc1.0":{"name":"@material/density","version":"15.0.0-canary.b4687fdc1.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.b4687fdc1.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bfaed9e8671bb36e2e164cefb3f9e61469a01b1a","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.b4687fdc1.0.tgz","fileCount":10,"integrity":"sha512-dW6nQKu7jPaNJ4dz8Ibm4Q36G5TuE5EddYmialEc9hMeT4+UZ5xITSht3ANp+CIkT5hgQMewEcoXPjRxYKG71A==","signatures":[{"sig":"MEUCIQCe8QyJ5s6GGRj+0WBULWxNw1jBHEe9qHdZYYA9wf6lAAIgWBfE4MKyn6hG5Dx4LdSa4wgsaHKkjaGzDh6TQCSVh4M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjyZ5+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoxRw/+OmPOTXO5FinU2ZmmAkG0x9Bj5hHnGmxY4WM7Orha1DRMRqKc\r\nL+mJSRgwU0ldak5n9nsSIPR/pKky7pt84wDzkE7hoGCi82U+3uf4FEm8uYFM\r\nflCXj86Bhu/qq+qixxwCTZepbkJacMR+QJdp+gCaHB+6x7QFIFBXj9Jo/RTx\r\nztj45Auh85o+k8QgSIM2BYDDfhDKebxULR71CjMNUVe5D/ZUk77CSDDqTior\r\nv1RT1Dg71TyAM+Cnnpdf8EevGOvQPFJIfzpN8CCC/gxzBHyWqYFWPosgsLu3\r\n6X63SHwwcubzAzPeC/AZaYG2P7cIvll7H6K4DI5JHkFO1M3NOyZwGqGW1Fmy\r\nKLPcaiNt5t6bCEWOozFZhOLSHl82yNr1M2J+lHEenF3fKf/7TBInc2LrQGUX\r\nB5LGwwidTrnmKq8Xcm0rPsHADhad/6NY/gXmRPFa2eb6yaZ8Rhq301XUJXsT\r\njAG51UG1aojlquhaG3ui0a60dREoJAd3em4f7JAeObV1VWZt76N9PLU+bhhy\r\n0u+Ag4WU9k4UDTSt1aelT5kzseuWGvLTxi5PWzOftUIu4+JOV4TcIC1fJrnk\r\nRG29hdtlZaTTeIvVOUarOFIxc0WlCL8WnAy0uN9oOZ+gjCbheA77paCaAniK\r\nhZDus5qSQfFvChImCa5NInvM4pU8dIqPago=\r\n=Zppn\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"c9ec43c7d66a73ecf591f982a42a582e639a50b3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.b4687fdc1.0_1674157694375_0.6994929993227839","host":"s3://npm-registry-packages"}},"15.0.0-canary.b836b9892.0":{"name":"@material/density","version":"15.0.0-canary.b836b9892.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.b836b9892.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bc5a8cf9694b99a1422096affedac16e6aecd32f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.b836b9892.0.tgz","fileCount":10,"integrity":"sha512-ByBPqYnr2K7QpqtfUMAnt+uhR5yczOHSyCfEcT2hWVvrk/+vjwgiTYn2GssNaZlTSzTg1YBL5og91DB2Z/Czvw==","signatures":[{"sig":"MEUCIGUtG0m/WDeQLlQNvbT2ykoVclrpjL/BbnRitxB7i6HlAiEAyB4JU/jjjAcmbI9LNZTp2D9OIAuN+Alk7t05u1XLNpI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj0F3TACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqjgA//VnWgtR7lE6jhiv0ed3R0cpv04Q7tD0vTiW/uraVZZf+WS5bp\r\niPPJ+EP0XGzyOD5v28aviYsVpT+UtBwBLqH+IF+K8YQKEOaoGXb4TwjFh32R\r\ndoQgU3BYP/oaJ97gqxrXo/sBz9pM3mvtTT/gyYaFkdllv2iV+l/xVKunUxDS\r\nt/6g1ocQAZAh6Q2V6ewtxWEP3vDry75T7WV1QELw0iMwwltYLENawjGo5uYD\r\nCLmGyrd6bFw4LikI2ZUJ1GxVdimOADbl/mFPsinR3pmgKKWSYHMxRQNJejC8\r\nJbApDbB4WsDepwuHOPpq1uKXMJ/ER4o7jliP7GUWqFsOhxjalXXDRdsZ41kI\r\nyzlod8QPaU+oQmxTqNiL+1TgI+aXV5maG2n/J4g2SByTICK0eeBkAmcroL4p\r\nOyZCNHsRDb/N9wpRKxWktgpP9J252OeHofHrhKLSEvDGsAzaypperuX1OTIh\r\nBtcJmhCjyCfJDXrR3SesUpk7mdJZ581DKcKYUrdqp5MbaJURcwSnzOAncVOR\r\n+WeePD8J901nY8QeNyz8TUUpC+WLEjJNg9GA+Er9UTOMFtg0iBg42/7Q+Amp\r\nGLH7PNUGvUSVTjkGU5X1l89p8rVW96rvjvaDcoa2rAMu2d4dpaYMWWhwfu+D\r\nCKIy61wsMfw59+pO+v5VWTdSagJ+wUFSWrY=\r\n=n8Yt\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"3a9a0b2e64227ef1f8979cd5b82be3767b100551","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.b836b9892.0_1674599891370_0.3720333947522676","host":"s3://npm-registry-packages"}},"15.0.0-canary.e8912fd37.0":{"name":"@material/density","version":"15.0.0-canary.e8912fd37.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.e8912fd37.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"65375bc66299e6e03bcac2bad7e8b913b81229aa","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.e8912fd37.0.tgz","fileCount":10,"integrity":"sha512-K/5dcGr76DbNcjDF1ZyS88kNtGWCXfMFdA1WLajjU4Mj16HTbOphzrmBaCSq6PisuCjb2t+WlVp3CFXoW3uaKw==","signatures":[{"sig":"MEUCIBJt0llNxWlEGzatj9G+7fzPyYAdQBZkgy2nqJf0ONx7AiEAlLJ3AQjb3CyM9yeaaanPl/WE3dhtOsMsFcbZf5uKqis=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj0sZaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqYKA/8CM7jCVsVwY+LhqcQJi1Q0L56nzjlBo4z6haUSj4AZIk82BcK\r\nZvmqPUT/+nkt0hoSbikDEmF55vwSNs3j34k/6/Xfy18PlfTIEA+9Sok7A59y\r\n8M2FIIRV1jkt22R6uT39G1ANc4/FnBCaiudxoNy4qOG/BLPVqxcmhqZn+Q8j\r\nt1NxUG62zyoibzcEtkkbhmfv/rHAj3HHm+yL5SIdS4PNwsAV7AwLL+Er+0+Q\r\n9bVEysUV3T5yl6tqx4MJE8fVEK6CB7hsR94Kk6ncxWhQnyOk6r8QrzM18R4U\r\n3/IxYlhwYRIkB6REwGubnR/Vgi4nFUY/K/aiydBNhjZJJE4jgK34KJEP93Hj\r\n3YRc4EHy29z0taHm1OOKqBOCl6z7fKuI0TeJBkCQkKFm9YnYTc85PAEnKuO+\r\nKdU9KfiyvmCbeFqkkmjZrZTG3MdROxdtWzChJoSWio6xJBfVVqTVIDJz4e2X\r\nwsNktjjOtky+EQVrDULIoxC67fbTdXZT/6j/JgG82ObfbWBMYbCITHrPPA37\r\nYuDoSRNl/EKOwrtaz+52vbFTgw2G6bkQ3QGvn9JaWDAuBHdY4P0XhHbZfmRH\r\nELB1BkNZtXWXpEMA1f9UQZDyC9Iw9mRlemW8fGEemA8qMwOBTdaZodTB/sWt\r\nu7BXf3OcyGJYKpUI5Cr69Bs2ZsCTzBNsKnE=\r\n=6272\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"72b44fe55689bb591aeaddf242920ba73a6e5bb6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.e8912fd37.0_1674757722097_0.49414133053378206","host":"s3://npm-registry-packages"}},"15.0.0-canary.16fbd30ff.0":{"name":"@material/density","version":"15.0.0-canary.16fbd30ff.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.16fbd30ff.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6847ccbe31c9bd3c77815f3c4cf284b4f187408d","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.16fbd30ff.0.tgz","fileCount":10,"integrity":"sha512-JZjAgwwtMFMz516RYTVpYa0D4QIwbnpABSsEmO4rQF3K2qIUqNUsSVwqXiIas78vICJf0Cgw0BTzxgrTEz8rUQ==","signatures":[{"sig":"MEQCIH9YjsA2jQrBohadxepn6oTwcQBh00kuIzQr5OUGat24AiB1ejGN1K4vGy6oQrcYerR24i8jFO8xHJc6gmV4T8vsjA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj0seOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqMfg//Y1V7aK9LdYH5mH0xovDccre3HyjbXPwrzdBY7m9opk6qzLmW\r\nLsbfnSj57j5B7mf/xM3B4EoSR40CRZc4mo5FExqw+B1PLAeYbUFHScwq2QlB\r\nBfshUhAawJwI+4plK4HUsPmwR9OI98NdiSFflwyWwqiud/bVN0xNg7KkKQJM\r\nEcQJ+0ReXD/7rfYrksEP/6asX947J0r5m9KsvMOn3h3NZsz5mURx1yz05VfG\r\n9ZxEDZNVgCu5+QR5c9JNa3/R8tIhc7ZOWdHpo8na9P1kLxSFLnIcfUNafzXX\r\n6TZXNXmx0V9OcuiARp15y4kJw0Nhny1UH2ClnNcGX/n52gLOWagRFVa6ZINk\r\nFYSEnHa/c/bPg/A9YAtwrH9Hd+yZo4xL074GRZ5hs0s3my/Snmny+izHJQNp\r\n5Ll2N+DwfFJhcOI0eaXMPgw+XPUk+kAgKY9rOCBggVnfITrnbcy607kc9O9u\r\nxYwgezayxmFdAmtB2/0SYABuRjI6mVhQ3Z7TW2+TxF/QRSqV7DbFdNth7pql\r\nV1rndam2hh4VvwLLw9qzGMamHR0Ft50vTP/ljKNs3d6cxtIcF9UpbNoYzS/6\r\nrm8Qgiwkp3+KseiHXdi4gl+DLY1yHA5rwQEniT/ZGnoqGlQRlwOuZkZHPbSD\r\nIM7BkK3cGN+i0vVnty79Op2coPrd9wLSg0c=\r\n=C7/9\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"f4c39ff05bbd1045563670b4ea50b0be51a91d01","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.16fbd30ff.0_1674758030331_0.6902361661103857","host":"s3://npm-registry-packages"}},"15.0.0-canary.033ae083a.0":{"name":"@material/density","version":"15.0.0-canary.033ae083a.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.033ae083a.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"af1e385125e492a022b576792d49a34e7e8290c7","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.033ae083a.0.tgz","fileCount":10,"integrity":"sha512-qA7d1WXyzwHBwviQtvJ2EM/0zoeTRQBkvDbuhTWubqu1TnaDN+8fBrjKM7+3LJmWN4GYSu5L3+pMOMYWOAihOA==","signatures":[{"sig":"MEYCIQC+zlIpymYaL+elVoluSHgWuEAPEcYjmRMgbtdK6aV7zgIhAN+GjLUui9a9cq1fIjyyqHCNEp8dsy9T+FnKwwphzIyA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj0tO9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpaQQ/6A3XJOMsLnHB5/fZapWCxGuZZNAgLpvBAccj3ab83ikJzg2So\r\n8+/OqNK7VI9BM1qizjQFk/uIDbqKwNiruvEN79IHDDICfa9mOjKTRiw6iOZw\r\nWlsg1qoVidIsUWwGAGDsX3hooTa8yGEH3463zckAVfr2IafdQopbl3Z65GGp\r\nUZvlPeQkRyOJtAZxa/cr/l3z2uSWybvFUJCJMTsHDxrN1TyIqn6i4+q9/31r\r\ncl1qAvkAWUj3rTa4qS4+AS/8bXwBJwy7XlorCTGChPygYcBGUzunWzzi6P/m\r\n2R2IzXq/9OxJXTW9DlszPUhmli6YoIFCOOfpxV90aSsZEUWfAOrQVOUL82gD\r\n3y7CmXre+g2DyQfF4/7Oiopz5yzUbfSRqL9ZPdly4fXH7roDVLobBvkIW3fo\r\ncFx2lTX9ih0ctcZ2tMNLVdivoGPRf8L5lqevZWvc+Yy0PiuO4uU/BUwzDb06\r\nK3wHgugJ54igWdI0qpPW2Tem/V9bNRsnIQD3rzR6Plk8mQxmHA//FB+fLLYR\r\n3jX4NXIdXiDsKX2E1Vwzavk80Cxd+zpRatwrkJD83W9Qft0PUB4gpg9OthAf\r\nAGnsE3zO7xbUq2YA0U2FGmEvpfjJZnhANx2vqCofAEgvCJ6sQSxN7oNgW1pv\r\nSBNl4GphWxcfJPb3He4Am/gI5GsYQgc0B+c=\r\n=a6LL\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"89ca938c110806d9150a3889a7d25689661c2fdc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.033ae083a.0_1674761149258_0.5775068061754098","host":"s3://npm-registry-packages"}},"15.0.0-canary.3a705fa1d.0":{"name":"@material/density","version":"15.0.0-canary.3a705fa1d.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.3a705fa1d.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d38c50853a50fd3ae1b0ac3d2177ef3da055b0dc","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.3a705fa1d.0.tgz","fileCount":10,"integrity":"sha512-Y7TF9pf7FQ/Y1PZBGMjCClqrr0MzksQyIpS6oqN5zp/OL1Qtoyc+qsS1VwNO8if4mHvAU5nOb3pyHGJG+JrbuA==","signatures":[{"sig":"MEQCIHD6gW229iS/sYr5dYt6p+cie1MPyFmVQeq+E5r5d2SuAiA9AeV11D7aNWS590Y8IGOt2cKXyg62ngtAY28G5cc9BA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj1FNdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr7zQ//TXOUBhaBKP0sv3xJroPJjt8z0Q2MJgZm/+0rV0qCcfgtkrZO\r\nkzMgR4G4L/uCdx4qde/2sMFcuExH2VrRc/Z4o0XDpXbMehHBxQHuvsjWX94u\r\nEW6gkRUNkuJWL0n15jbon//n8lg7cYUpcLXSOlmU7e95P6isUyULOcA8jyej\r\nOyvqx/G5n1vf/ml2Id7IMndJixRmcl+/2NbRmvxr8LKEtS94I+vSs1MPFgeK\r\n2yrf50t2a5+1evZJq/JlCyj7g1xVqPYGp5TZzQGs/32JZN06pSFaqpo7QnvR\r\nIQYd7ABM1eJuHnwYbtnnM64rEYf+StZskE/PmzcaNuexmf1IHvh6bza7jYrg\r\ngcTuNw8pyhvaJJdAKK2Dq3uwpcqhhij0XzgkG2vTwaiCjorc5riXwdQsykON\r\n1+4WnPxkcyr040XWbHod2ghUNfQtU/8oaQgo0YDwtMRcM5bewOjJa1T7NzJt\r\nRJlRdQlvKyp/jp5MJ0q0DUnbBANDBTQiQmlXJcd0jYGs3BFLuMlZDv9Vh4sf\r\n5pcEEJX01MoWaHXyimo4YQRsBqvXXS0IBxSzN6DOSiynoquDYcodnk3t7iYs\r\nv7lE0UBVnglPn2/fNO5E2PQYgt2E/Drs4OOg+Z7LNULfjK09fvfeUdG3HP78\r\nsGSaY7ONARBGt9Z41TE8Wg6AWm2+YRhcEDs=\r\n=WDk8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"7e0f3737f51c1319f66762d8021d6aea33391733","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.3a705fa1d.0_1674859357559_0.8212503617425009","host":"s3://npm-registry-packages"}},"15.0.0-canary.d6bea2ff2.0":{"name":"@material/density","version":"15.0.0-canary.d6bea2ff2.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.d6bea2ff2.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e32783abcae09e53de7d60e5ed5d76e1aafb4257","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.d6bea2ff2.0.tgz","fileCount":10,"integrity":"sha512-HCjMxisKXyRocppdlGUHpG0+qH6TO05yyI5sbTnCVfEpB7AhE05u6a1b2weiWawXgkKFoD/iWMEjZZyoPYaiEA==","signatures":[{"sig":"MEYCIQDGwuOzt9DW13WmdjeHJaK9zUHdT+rUwvDLXUupB0a+GQIhAMD5f9w7YYmRog846e+8iL2u4izsyuaOgAHBTsJ/03yc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2TOyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrcWA/+NqYtQIbhT0oc9m3/Q1DAqzLVwBfSU0mtSezC5R6GVSv+PO1G\r\nb66GUpyl4SbKC89vpDxheIACVuqY7seLaq+7L/m8aHNKcCHOaVaQ6nhH3bHp\r\nku7pJvf8OqNwE98mUFrgjsLxFlzc3J8v1hXr02SrD778T2Ms2IyLIbuGjkhW\r\nW1oIA80JSPXT9tpsK2mQJByd4nN1xkQTDJrm2VAXhkPFChqTVlVO3Dm+knNa\r\nQrHRdbwGccy/T9znT9KRX0PcL19gZqsNOiRkBjWEFTaFhZnMsydqwB0TUe9W\r\nuJa4vKO9iXOg1D8PUozIJIRgLG64bBl82HAOHDHQ6lpm5AnLkanvU192Apz4\r\nxaugLg7+nK1s8VQKFj1BSP7RrFf9ELe1ZwKnKHQHGt57lXsxoURa8zd5rdJz\r\n/fDIP/+Nxy+R5SYcOZi2t/bM2YjYMY9Ity4Mnqg7xt5JBb3rtheUg7xdV2yk\r\nEsPRlNEaq8pLxhtByiM79nr9yenkCC+QRdceAEo5bAg1yK+Rxw6Fg2aNj7IZ\r\nFQWJ/WmXC4ZXPB7n5aIGshRHjInY2OP+mDQIQiqrvL5vgTn3YYHE0myFtX/E\r\nS4VG5ZMsJd5SkQPNzyQAcwuMARwNvdri2/xTqxm+X4TI6nwgopiYrqHNatcI\r\ntz9FIbzJ2/O+TGOsg8zy8Y21RuKwbFwE6Z4=\r\n=0Yfd\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"e4210a9f21a7e6ee007d475d5bd7e229dd7bbc00","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.d6bea2ff2.0_1675178930430_0.000237862824015167","host":"s3://npm-registry-packages"}},"15.0.0-canary.0c94182c8.0":{"name":"@material/density","version":"15.0.0-canary.0c94182c8.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.0c94182c8.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7e944fa3551f926cc85475f0e1a6d4711ce3fed8","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.0c94182c8.0.tgz","fileCount":10,"integrity":"sha512-4ExVfYULZnitIhNEW6K5EPgyWSbJbzreKHGFS58Pec4gKUBh3I+6rGzRog4vLx3oomHFMG9jCXb+o3RV6joJZA==","signatures":[{"sig":"MEQCIAQ4vkmIJoNSsmFPtCK/p6D2NmncRcR/DQUGkMuSO5GYAiAmvwKfb9yzueHzixxY52l6JL4t1m4izAoCw555dusXkw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2qSjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpSRA//XfJyNvQIhP/zQoSoGhWKV9vsqFFViEBJEh3oj5VmqtTk2laM\r\njnyZVT4mpgaswozmtvJr68vUWQl3wAXXVTQPLzIJHJkarogBPYwEr8BL8Hu1\r\noFLcXkAhUYlIAA8ImZobHALIzfnd59IY8dOUtcwQr6dYm/8rwO4uLiHVNQaz\r\nsnhDn+sM6q70F+DAUWPraMMn100q3JSSaI+0QSLQif/dTQhHvci/NyIE/dBf\r\n+iBE3mcK/MrxJwHE1jfw11lOLOSYcpQOwJCYBA3d7+FF6R1Y8xuJ2O7WRSri\r\n6BPz1nSIWIlw0K+118sAxXWZRI7MlclTbFhAwfdmJrALqvMnmO0+tkPCJB7m\r\nfxO+BPkr4Jp9qVi2nuLfGYCVZcQO6mgnJ9ST9xdKM6/HckjntTua6q3FqCXk\r\n9p4v4SP40SzDNuvtvx6KXFbaF7Qjxq40JnRwiC3GToHQg31QNkFujzSUnObL\r\nmlci95K31VpHxFdgD/cvZSvTGYFlkAZcngcg36v+cd1ToH6DJNZz1U8v4mz1\r\nUMIcPVBjIKwT4fSQnyTyOq3BvNk1RyckjKGk5BV/FbGupFG1RiYfqKSYaMHZ\r\nnolcLBnN0M1Hh/caDfGuwbFg3ruz4iwJVPYcQtAAVQAYPlT2w7cAQs8oSlL4\r\nFK8X1C4W5QsV7+rota2B4r+MxfVKR8nYB5Y=\r\n=0Uqd\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"9e58d1edf6370fb6c26f762d83ca31f928149e41","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.0c94182c8.0_1675273379567_0.13706344826857286","host":"s3://npm-registry-packages"}},"15.0.0-canary.15b221540.0":{"name":"@material/density","version":"15.0.0-canary.15b221540.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.15b221540.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5cd4cd1ceb1772676566963a423a5cc726774ed7","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.15b221540.0.tgz","fileCount":10,"integrity":"sha512-BmILWvqLKCD6bO3iLWgjo7zrtxTx28xUun+QhDntxGsX9zjdyBX5bc1BDuOA51/mHfAKa6bkKryXQrJZ8e3nXQ==","signatures":[{"sig":"MEYCIQC8S+v8CefUF30Ad35Yfl9V2TtVG16wH6jt1XMLuSmlngIhAKQ+pMX3uEN/RB89R4FpGWrQUbFCSQx39iK1bzwBMhVo","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2qaWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo6VQ/9G9KoHr1XMNEEx3/knqgyW9RgnFSMURGQOuDwOvunAfZFGs0S\r\n2lyudYeZ3xYZ1leGnqaqYBSckF770rT7tBzKupGhuUSq4u/g6lKzkntOe/Wc\r\ngRCWOT3o3ah/cmh+et6LkR70dJn3lZWpA7tRNrcO0ywwatt7XF3Zs38Z2S6t\r\nF5NMz4tf2WDnPNXTFQzM3GCevdxoeVBVjR5yivNlRqetoOJLDd3Xn2k5gler\r\neTL0wYZOeKakCIm01AEIbg6Ned1myQxv0Kdm+3FGBejvCdgM3YRvRe6oPQgE\r\n3p5rLGTy9f1fou3ueTeW5qfJqJtgIt70+kIGzC7zsXD8s0XgF4uDh24IWN3m\r\nSaY+0SQjNmgxRfu80/Og7IwMBkZa2vzEPUppQmHVaAuoFFHDrbhpVnrtBVV3\r\nbXPaeyqeSjAZWc6LDjY2Jr65/IHz/R1QGhJw2jAzadrz8v3D/dQ+ar2Rq8k5\r\njJNT+7lB/eILvKnf5AI3nd0DgGJfayMPA2BSaCnKhf+NzVUGi5iutuiA3UF3\r\nq7+yHEEX/2hXNeoF79nF+T7zI7KV9dKYfZpeKNKaTkO/ARfO6rEdl2TKRfxZ\r\n5uJFy+a4G8QgiGuw4LE4NMM9q3HpjY8q4pByS+WhCxI6msxfmSc9uS1N0+Vu\r\nDvBjBa4N01h67K+RqS7cmDojOjjrRV0G/oM=\r\n=AIau\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"a4bc6d32435d33a7b99197f32b85eb0b730acd30","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.15b221540.0_1675273878140_0.10534664337220767","host":"s3://npm-registry-packages"}},"15.0.0-canary.eeebb8bba.0":{"name":"@material/density","version":"15.0.0-canary.eeebb8bba.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.eeebb8bba.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"299a70fcd6a46a6e77839afbc7b9ef1239b1d935","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.eeebb8bba.0.tgz","fileCount":10,"integrity":"sha512-E3bZMXwwo8WgoU5ImlZqj0bpPH82abjZp4erIB84a+lYzsIOymoseSiBvRaDXlma1J4qGkeVkMzy1CVXVjx/WA==","signatures":[{"sig":"MEYCIQDZ/x+o3G/HrmEPOykap5yCSeVzbJRj5PfUyIxQC0V5gAIhAMj1v3r3chGm4oTn7mDHmazSrdcqZrqiPDSbhFKb5Hk9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2q2TACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqX9Q/8CxxuhqHn9ENHvRbCOUuv8Cb23LvVTXBzYivPI+5sWu5ghzG0\r\nKV/6wmSnhcnNDIqBYyuW87E2NQ4AJVO8sO0ebiKOftiFHg+5mz0aSsaV6Hdx\r\n3k5TL6e6ETUtNlrUQLX4FAmAjgvQkkLD6QRUlygammiaeGdsh1BwvRNczmzu\r\n/qyhmgzu7/no1o4YhU6XyDq/CG9G+g8ek/s6f4JUGEWBk2n9ocE9VdddWUL2\r\n/ibnpvoI4GW83inIoawGc+WiXZHuArf44jIy7mcqsuYtL3yGUp0ZR94zTZTQ\r\nEFOiZDFW+1B7t8l8+dXOf4Mm3Rf3/VH+mOCkxKp3l4FJgVe+b1Jy24zS96Gh\r\nyKX5wFOKfAlEi7RDjGBnYjCTYPJz8fP2+sv/8PXvSHpWA0Gj8mQycK4ld4PN\r\nvN8VDkRLBZ4XSDFm88SDZ0BgewENyo0lGKwj8fydzGTvrbviyxQzQZ2z58uj\r\nzjMtu1RtPKiZvieXmEgHSCvZYazck2yJc/bYQ1xW1LrpsW76pTNpsZ5k8K1t\r\nAceFTXt/qJJYPdbHYqxY6Lb0bqpiXL+mgeDHeV4kO31MTuPM0o7VbeTuenNk\r\n9gkMmdN8/5FhURp5R19aTvyPllY4kyJLRBaAit16xlOcpD6XDrNVGVmxJ7gD\r\nNnabD6XWMtA0DWPkfeuaBY3JniHTVAN7Ojk=\r\n=TAWW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"5c8d0d2ef793b8bd564888fdde6b97e8a2502cdd","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.eeebb8bba.0_1675275667328_0.7749371974695338","host":"s3://npm-registry-packages"}},"15.0.0-canary.6a4b3f834.0":{"name":"@material/density","version":"15.0.0-canary.6a4b3f834.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.6a4b3f834.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8bbb2fb25820cab4bcc940aabe5efc702b8dcddd","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.6a4b3f834.0.tgz","fileCount":10,"integrity":"sha512-UXTSfnF0nHX23prw7S6bXG/FsMVq0R0LtAMcD/wt08/tE87IUrGH9ciI/DlZipEVdHAcbOqPP8EQa1J6V/hk0Q==","signatures":[{"sig":"MEUCIEW7YYsueUUzLcnNMGU5BC7q1PV/4CbJCytR1pli2u4GAiEAhj+KYUILMm81B0iigyNOFHhIsfKZ6jWz4/7FMjNPRIg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2rYIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmryhhAAn9CtrOiMsUgvku++xXzWVG7c198kj5GTePG9tnMf8dzXNak/\r\nsUoVmpE99LAwqbbpeNlvOBKKP2XgDxq3bdBsXoenl+7owU+hPIvOKgSMs1tq\r\nneXaWWPQ6eI5Db9vR+UrD89WGbwPfIX84D9+nR+PHimsCOqS68XHVUaraYFU\r\no651o85bAjT26a2jbquq/dsca3oxQVm7nA+S0pVsCWdPebpPwX9aH3+AjyZY\r\nKbyr5YddS+iDpu5kHaCPukfNZ1MYHEzLIM630TLSDlRhSoZrEFb1a+MtJE2S\r\nokmoNHzPiyR49Z7CBk2Gs45oD40FKsh/XdqkygwUftUL/+sgnd3UWZVx+Ilu\r\nZ3buNVuHmOmhL5PclDKa+L1yHeqE/6Fmf22W9M4bwf1hEcenUfeLg1q7VuIF\r\nmWyt4fEP9INHzR7Fj+ejLZehuSRFzeet0+Qw3iC2IfFDCCCu+VjRx1EYpGnt\r\n8pYoGWu15ChnveXDYKKqERdnToGnD7m+cvCPxPLLKYdT8mL5M7jXuM4V6f+a\r\nBQHrrL31V1t54Z+K9cBTMfznZDYifSpiem3sW+g7b+iVOniHg0XewIHrnPWl\r\nj1o2HQHKGF043m1aj5OjdBoLH7h09kMSuolwqhrMmaLLIlSRye3torlBIRoy\r\nK4OlDcdlD4xP6u4cKpeKeEUz+6j2ox9wiQg=\r\n=yMDS\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"b1f2d06637869496d98898f4cdf709ebbd279ed4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.6a4b3f834.0_1675277832588_0.17502070969723227","host":"s3://npm-registry-packages"}},"15.0.0-canary.b177b40e2.0":{"name":"@material/density","version":"15.0.0-canary.b177b40e2.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.b177b40e2.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"70998b281595397239f04bc7c4428aa4f9975f62","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.b177b40e2.0.tgz","fileCount":10,"integrity":"sha512-x1h67jJRAPR66ATLM7IyNEKdsTohNYJ0dJ1xJh30wQ0LYQ6jqOEIOkQ00CkFgqThoXWhLsSzLZHXkjq+DmSc0g==","signatures":[{"sig":"MEUCICSO7VPXZwUwDIij3V+87ANg2RVkGgBljHSEEPXVrcH4AiEAqdNWd32fFVkmtHTeZL8/p1gdgaykEExD805WpQf7dbU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2y7qACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoPLhAAhPkcNBeAHFmZ7y8t/kI+s5FRx3yl3ahIr4tbwbNx6iuSaDCz\r\nP8YUVPG3O7HzdchHKXU+1Ax+HecJef0toq3XesKmsMUo2i7y1exyIGNrb1Gn\r\nzaneSdepARqB3mVaXiK2o9N3FOtyTnTQXCZwPvdAbraA9XHs5aShzJvWbzqt\r\nP+wZvXJq4LGIS010LgyhKoJ5jbfTGIszowuiJ76g8zP9oBEyQrQ204JJnvH1\r\nl56K15r49jIbOHJbdrCU9Ffkpy1+EOdxd+Nf05cOabfQL7nEvA9lRlXMMFnH\r\n49t/0YJxL2o6dnSy1z7T1QppkFVr5vwO9ENaWu+4b5m5CQsDX49EUvnWkT+S\r\nD2iywrEY7d1TNp8YYvZLS15DaGg/9wHe65KQgUdxWnSPONqA2mDvXewRXt+o\r\n9spDPBtMZDKonL8z5XtjiKoPZpV6gey87IOtRmEOMqhRJACHWOgn18Go/Lfd\r\ni+v2wi+Y40CXywzVCHjMKv3icwyyEVJMigo4DInl9A+WzmKZSA45R2fzVGNu\r\nuHPdPiriUwFP+zmaM1BHjhSOgrEh+cqMlShkqyjvkqtCRyfcHRM3kIbnUOXP\r\nNU6EtFUdFljA39KaPGNZ4bs48mOAFH7u+zIjHmJ5UEJkbCQu0U+30v5s1uHT\r\nkAluZrrt1O5tMwcov+eLy42tt0bOxVq1Jz0=\r\n=Vmrk\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"e3b49a7dc72f9c88710ba68c63d4ddce56a58fe7","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.b177b40e2.0_1675308778515_0.807650786252422","host":"s3://npm-registry-packages"}},"15.0.0-canary.d9f821042.0":{"name":"@material/density","version":"15.0.0-canary.d9f821042.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.d9f821042.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"04f1622221cfe3cf1912ffedeaa33b08070a0451","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.d9f821042.0.tgz","fileCount":10,"integrity":"sha512-xMBU4gThRSFqa+39Bzf35Xdjwdg2l8Ou/DUs0nacfdbUEgtePhw0r6Tej6kk1i9oJzw8AEQkdoA0ZrxrzfH0Bw==","signatures":[{"sig":"MEUCIC8TovFKshDgzdfR5wBZ82MDg0D7nhI94bquqbFw9l6sAiEArUdZVqC8dPrnxr4Lgb7d64BQUmbpnd1w+dbZ6hoLeyo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2/SaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmolRRAAolDy9OnRiPsK5vxYzb+yK+p3xMjNDyFrKW7U2sDds+I1yKgz\r\nxabVTRnfNCnppiXY/JgA+J/hvUFzt6FFwF3lFV5MMcQemMYrjpMq3hpsHMmQ\r\nQqyznzv1vvCAOPP1BHRefLZYuzGcedP1lXUsQZj+L1d6WJzGN2zys7H9blyl\r\nszBb8aeJR6tqvRRvboMIFokGDL77gu/+O+YTrukFh+qastk7g71lg3Z4zFfH\r\nSfDgpJTPsnLv7pX5n8q2161NAT4nMV9exwILfoMR932wjmlCCh/kUAEoPRSU\r\n3SXfes6J55lLI5K5KuvXDfdb8eBni4iqMGVC2i+uVxJpMPWwTcFEoLq/hhM3\r\np9hcgYWpUu8DfyY+NiE84eF0rigK9UHZrxYeJY/gm2Gofyv73WBDlqMjuA43\r\n0VSDwwMBH7/VKR2hxP3fgCYNohdedC4DGmJa9e2x3Ilv7RDtlFqO18Fsz+H/\r\nugvjIgUgma1eY3/OFzUIPDSkRkBCnxCpGBJwLrVXPpI1BkRI3EjfTHw1mLgo\r\nn7/OIJEeWa2jWzUIfJObHPur675N0Oar1GMZEVgS6fQXsPx5zKmj3/tYcw0X\r\n9AnW757neeXdVWhoZLWg8oNoIWTusNv0QukYVJXiGmAZ6pQzUZ0HIRFjmpRB\r\nuyc0BiTKpMtSQB8PfDOVxvPZgzTpzKNtFLE=\r\n=Rbzt\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"9748fa2e1dd5886715f422f644830717544192ec","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.d9f821042.0_1675359386661_0.4207082430391853","host":"s3://npm-registry-packages"}},"15.0.0-canary.47c7deb19.0":{"name":"@material/density","version":"15.0.0-canary.47c7deb19.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.47c7deb19.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"639e463384215635dde810d3be9b456b68bb545c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.47c7deb19.0.tgz","fileCount":10,"integrity":"sha512-mqAoG5RtWGaLQN5TjG6wCdqTGeBS7hhIobTFgLVCtKJwcy5JtGrSHxSxOC++GO3Q+kNQsEb0kVP4VePi3T+efQ==","signatures":[{"sig":"MEUCIQDXbxO4c1366QYHnK96k42cMEDcWSMon5NEi96iFjPefAIgQn0d2XNmNO/A9PENyBsn7JIjWU1KP/Hz9M3nbK8ebLI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj3M7pACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq0lA/+LnItFVnMDxV9ST8KNHDZuunJ2+yGn81rHf8MUg8E1vI6DyC2\r\nAfwNbegAn30VHxrtdPXotq5WfBQ6RzXQflJbCnp0gzdwhWAZjVAiK4yGUIU+\r\nQij6ja8ingXus+MHDpoxbuShIUZOlWAvPwijmMchdDVzNeFIXio1zeY54x/x\r\nQs3/STdW5yA1w5Yg7AbMAbQ3FYSmdn3wxwFRV3FA75rxqglUI+MLi4GKd++M\r\ntAGYCqXCfvltawRI4eKVQOuemRo+MTFPqTcXCKPO8Cff3mpnk7wnTEhg4Rzq\r\nBlvstWDdoNbcdEu5UHuqb5lKUF2WVQ4ciCFjUEXfCuk9W7S4xVMKNmYSUqmX\r\nUwF/wCj/awmW0EDAgqDk3nVJlrN0cX/fva4+TXUGPr3aV0ADx0xPSh4S1oj7\r\nUQ8mTTi0sD1uteV//cV8APDxmb8dYgtrTGwH04q8lbR1YtxVfTku6nJTww2j\r\nfHvqiC7BA2ngkWuqOD9d5BCFPrhm7oDy0sHXMMHaZXcNmtKOasf7avHioGjD\r\nySLM2Zou6FnJsF0B5SEKyLVH/wrvVSErM/2eybBiuP+uqagAVMCiivyOr7X/\r\nXh49VAH2T5LBWtuOjm1cR3oXUg6uS0OI2gYIdtFiomrfBDzbLqihLWd9cKoN\r\nYdDGgy1IypGD+g/aW3OOfK+wwyfseVltM0k=\r\n=vowd\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"d5a6886a0dce343fed87311107975111f62309bb","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.47c7deb19.0_1675415273182_0.02866706711185607","host":"s3://npm-registry-packages"}},"15.0.0-canary.a16dbd1a6.0":{"name":"@material/density","version":"15.0.0-canary.a16dbd1a6.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.a16dbd1a6.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e75ce98d97a329e5cd6812533f926b6a0eca70bc","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.a16dbd1a6.0.tgz","fileCount":10,"integrity":"sha512-uX0XHRvV/q/feFFqJMqqecJOB8nZ1cS0HcwWSmSALM9+I8zm7zV6AwuYgCPaRIAXh48G0yhfoNiwwKVuAc47yQ==","signatures":[{"sig":"MEYCIQC+LBeOnkAqf0fnh81tUavdLvylopzFYaI3PkrYuiMHxQIhAJNnrmfgI4MCk/Umlmc9Dt/Lwijdlhrm7H+N4RznNLyd","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj3feLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqKOQ/+JLz2OoPfRWcQk9FNlxe99XolVLEZLjSD25l7VcshqbDmw8rp\r\nF9xRHLvKP5S20SvXXtdTTz9dqNKoteZHAyVf/CxvFOuU/TIlfirzcYmheltq\r\nw0F+4Dcv5G06ZDxbY3eUXHgbYpI1DjqIAd9VptL63wF/VCSxBuHHRjN8onpF\r\nZWwHLp+NOGFaULK3iJt6RDUJM9la9MoUYknPl+hdnx+tkTkkI4rJnlaPepQc\r\nULk/87KIKYcfAl7YuU+JRH46OJ/GVFnzsdCRf8sXRyuDiXTdhjUT8zqa6TX7\r\n8SJxKYxKgJCPFMPNXZ979WO2T1+q3ljddeKH2GRVx6rMhx9YU5F0J6jkUnLp\r\nYaKQdDzk+HJgGlW/pxvzJI/c2IfVqEog/wJx03WtgAWzsrE6RVt00p+1/gps\r\nNMoXT1HWS/FW32K8i3bNuP2no/JFe7IxBhWBwWIyDFSqdemaE6NNpAcJwkBV\r\n7tCBafCAjUXTUowpjO4RXPHQWwFiObtfS/rP5byI3zGU/On5EpRjjULeZxEa\r\nRjTZMN6odVEaQgT28YKl4gJMPuWt8l3EFjGBrgxwo4JDZ6skUtwUkh0BzYE6\r\nkS/iN8Id3odrLh8u5+yb9H8t0F+NsHXiI1DMeRO9diofrOriUXY6kw0Ax0gj\r\nfLoULORw1Fj8YRzxZR/JpVjyKf3ldrn524E=\r\n=T5Bo\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"6b1923aa24f460ae50c61296787e46f524bcf15c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.a16dbd1a6.0_1675491211511_0.8525290555694613","host":"s3://npm-registry-packages"}},"15.0.0-canary.93416f87a.0":{"name":"@material/density","version":"15.0.0-canary.93416f87a.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.93416f87a.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6ce3c90cada80d99228aadac12883e70e636cd73","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.93416f87a.0.tgz","fileCount":10,"integrity":"sha512-p3Tu7HQGTUSiXBt82JDYMTDVcHtIw7R/Co7+LMVmgQpWVWpaMjNAIc1lflv0rAR5BsVTLD6igYMXZ03UMjxhcA==","signatures":[{"sig":"MEUCIQDC8akpv4nzcCxklOtAQpyGKgBuIXUgV54hkFeQ+vAKogIgAQp2nfHK8/hqeB8FJuE0pjBWeTkmOQCr1VesNmUy45U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj4lCuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpOhw/8DiOoNQD28jly6VFIj3SkSLBTJCXyDtnsGQWw+qobKUPkXQ3S\r\n+bYa+K6OmHYMJCmfjVpWnJqmvdX6Nz/3SgbBmBVbKsCHF7Mmn7ld8LtgzED0\r\ndSrbWbVv9Et41Xw+afxrtE45YmV8btfpCUrVMjJv0AEtGae6kMefM/ywsEsU\r\nX/Le7BfvRFa3oQXjkviJOFgXQwI1neonHEPLyNwS6W1ZQKaYlF/tET0VYMsa\r\ne9xi8w166il9J7/5pl3nNCkPzzS93ucbMZYNwhyaJPvsq9jQmR7ksl+84Be/\r\nM+praG8KOq+C0Tb181dDp2dESYmAhmaYyyeIr4rwrWlI2snmj2Ggi9fZujXa\r\nIMykcL9vJsgxKf1EYp0zWy0qwPGewKG4og9VajswFxdtHZsa0Gj3n0lbqE84\r\n2ALbbYJ9iOJMq/i3iUr4BYq/9QUCyBtranWX8dPs4k/vzPsHLsRYXXCbF5CK\r\nLgceneaJ75wL5TqTiIhO+Zr8xwGYdA7qbKb6JfGgqLPtVPkRaI4evc/DqDL6\r\nM3/uZST53WrXujknO1Ps7axzr4WBb8HyevfHLh62Z1gIATLFsm7hu9vbuZ5T\r\nJc8H3gICR4zsQe96wC5APUL6rYwQStUVm6Mll6SK0hMG59hQj963blSarnXQ\r\n++8/gdaozSdjROQULXa1T/dAGG+hzRW7TKs=\r\n=LLx0\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"b9f82375a462288f01ce4e4efe6047a3fdd9f9a9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.93416f87a.0_1675776174430_0.5433873072460924","host":"s3://npm-registry-packages"}},"15.0.0-canary.49b8e7442.0":{"name":"@material/density","version":"15.0.0-canary.49b8e7442.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.49b8e7442.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"08166c8b8e893507d35e11ab34a03d5f0208d80b","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.49b8e7442.0.tgz","fileCount":10,"integrity":"sha512-2jIl5CRNsFcJogljKxysuDoX5Vq1WuiNlE5CTyrVfLD2kw5tCVisfdCbaKK7UMXbHxK1MRC8GTKmC02h/J75JA==","signatures":[{"sig":"MEQCIF5wwWkwtC2bktJoZ2gPVqz0qqyvkXu7BJQ+dwS8VTkdAiBAyHGOU2gsyE471tt7vtyuYqQxUUp2DQ3AQENLv3mAAA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj4tngACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrSchAAo2oifibVceaYUJqbpdEDnGtMDkgLU7LEkX+HT2f1J/6LYkC4\r\nBbiYqOPJeDTXADBWTfM3V4VaJN9t/M2+EIabL0UYSxqTEAYwb38dNVwojG8r\r\njxaeldV/aCZCMZXfnF/PTdoDakjIeVL68JEct0CmuHt907CZmjUAlX7tkRR7\r\nMf2su6hzP2kplmDjeopz+jqEu+jCZbXBnNu9Aw2dFHE0qYBml+3XPCP+ub6+\r\nHHA8zrKEss1249SscHUaMw8XlXem9NaNCQEkmD1lmZzmg8kfXRk9rsuBpbR/\r\nWQL2tzWjqhd+3CbMfmeSuEMNrYUUU/GcZsEQslYwGotRbnGNuXjCi/WApVD/\r\n+hJnToI/YcW/yY+aHAaj2zNS5kmxmU2vdaRyy2BZ1Wwn0mfWGiyku2H63vL8\r\n4fWZSoTUNGtBMVw6wfJlduICMmHbKhzxpCpeLiX47cvIc16ZoUR73zVJPtaa\r\nkCAqGD3uL1+v9LfPpI40bq3vsws4oGF5oTT6M5hr2BRfyfGSSC+veHP2t9K2\r\n7vvUJjZrIObM7HQYBzsLCePWLboPJ5jwizGUw/9DdkNfT5PH8KdH0uukGdHN\r\nZtbh1avNq5nEmYPfgD5EjOZs624f1mPGfH8L6RbQOczpbB9ahgNSGheM04nt\r\nd0R5YdEDL0iGS6Hulq/oXsYcRIgAP9usde0=\r\n=r2dx\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"0ab5eaa3ea130a4b79ba5511e4e46e1f99b9e662","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.49b8e7442.0_1675811295902_0.0771350278162588","host":"s3://npm-registry-packages"}},"15.0.0-canary.de38de758.0":{"name":"@material/density","version":"15.0.0-canary.de38de758.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.de38de758.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"83262865b0cb0c746f46f74c5281a2f6d92dd8b7","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.de38de758.0.tgz","fileCount":10,"integrity":"sha512-jM9nUR6nrQrs+ho2LA3eGCWTd2e2/7y/OTT4q3AsRnV2Pi6/lUnjrL2s/afooR/yntFFyDIHq9scWlJ8U1xGGA==","signatures":[{"sig":"MEYCIQC+rnyh7stW2Ob05JEurvsEgF5Thlus/GhEdhaEbdE9IgIhAOUOLLLZGw57gvL2L2ct5xYVP5JchpLwhUNDS8b9fsmT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj5RQVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoe4A//XVhtjwnCaC/rLhau9Ml8YAtC54h9sTizBQXoXDjzLh3RLEma\r\n4fM/2RxGkXZ/n89u6fJQCnKu4KGbA3tlusY61XI4hl9XU2JPJ1DJl+hfN2Ur\r\nSwvbbZEFgzP2kcad5pTTs2JSGJ4zUOnuP/Nh1leDXsaVVmygHTyp6rLCiB7i\r\nz/NDRHhIPICZRkDDs+63ZobajFlC6P9YcsssqKktBq2qbPMLLgvQSPYBRXWY\r\n87/EN535RSYjOfPTkFZieZO2U9bvNsx64Th8zEPFBHD1FQl8D3xgr3JkIsRY\r\n7aouwwWQaKBq96PzzjYstdxAnbzIzjbTjzUNJYe1OWuwkz4uBY6iSXuxSj9w\r\nMUrcn3gqpiZqkHdzhscCPKEBTO78tycm3fndnUpQK0Fq7yg/P/c1f5lkJdja\r\n3ugjZ81qr0NMIQxiNEX+Ziv2tsXYR/CLNV68/WP4F79V1Tli/hZW/8lAT6Np\r\nFSFATbnBpzF+XpNCNL5uhhAhybZFrTuwNqxP8dwcfqkkfWpqpgfwE/eSxL38\r\nIHJ+6yvuw8+stAvX9Kj4RHGAk9oJ3vlvRe9RaRq1B6LIi7Wr+BuL3hEtgqma\r\nPXQBuGs2FpUki1nAX1LhIjZJBmDPVZwLGjUR0PPooYw9h5oddNRWlozxAnNu\r\ntfWK2D90MKvgZVZDueiMlyc8Ntqp8/ZfiAQ=\r\n=xREA\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"72df173af8eee38e00bf9af0ca5a77d5b780763e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.de38de758.0_1675957269595_0.827575726171438","host":"s3://npm-registry-packages"}},"15.0.0-canary.4d62de70c.0":{"name":"@material/density","version":"15.0.0-canary.4d62de70c.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.4d62de70c.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a2217d196039c57131fa41456adeb8543e10e871","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.4d62de70c.0.tgz","fileCount":10,"integrity":"sha512-wzVLwb/FPA6ktX6D/dZ3xKTdONRDoaLMICncJo0RbfQxEitNbkvhLD19G0eWk7+0T74ECHekY2idm4dHJJxKVQ==","signatures":[{"sig":"MEQCIFhK0XgDF8F/GJZMVw70cjQ1YXC7CTeqIfoYlA2ml0U1AiBuwDS/m69tIS9Ee5L/rto2Ohhma25foxyBI0LXWoiUcA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj5W1PACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmphfw//dn7f13MXBD/8OAmzyrNmhmqwrSV7zC6f9EKlUUhsdVsCI2mx\r\ndRCV74TUxqL3cJAZ2zh2pDR5cmHpLs8/4VIC/OzH/gZD2+fjTKlXt50w4ghO\r\nLhP/LRQJjhMkw4qu06oc8iEsV9RyRNgr9N2SXAIvMXxzVxRX594dDXa+//Nz\r\ntA0Go1acgu5quYxwulqEZxE2yDhOTQ9N0US8gotQekg2Xt+OMrR+n+gKDM3x\r\nS2ySwBYZGa9TnykQBG/VQ1zn/TmORfrBW+l3G6JAUieqKLoPYojbnC2EtIDJ\r\n0cDPBWHhB4sjDwrV7gcIPCC+XGM85RM2InkaRwDsrFzKh7W/ZCZCx3r4pTlz\r\n2bvAYB2QHgoKxKgIcH06LygWn7emXdkfj+PQEoBGBkFy1JktYU37/kc+lajy\r\n4R2WwB6QQIUgpUWtazoCtb+TjYT7lAueeWUw84i6xch9Q9oXbjcKqJGzIPAQ\r\nPkLW9Hn5uWc25CjQuPv86iz1i4JEaslsaN/VP+b6C+T5Ml18xewZOJBFv2c+\r\njhF6jv2TKdMWL03EZrYjqZy2hgTKKYUoQLMDarsDK+l9ofHRycRNUX/1jvxQ\r\nbC3kRNvutyQZLB5GsL3mN0WNVi9WfQ9lB+Q3noqqPv60eZ0e0MvCVEixHPmm\r\nWB3/DQ9MlSgsnQN5ixEa/bs8e0oHpjoH90Q=\r\n=8b9Z\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"d2081b5045fc9871ff56b0d31ddacd235e2316d5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.4d62de70c.0_1675980111169_0.18065936270906224","host":"s3://npm-registry-packages"}},"15.0.0-canary.6fcd8d418.0":{"name":"@material/density","version":"15.0.0-canary.6fcd8d418.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.6fcd8d418.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2694ee1f557791d7a720734be3ae6bdf6003a662","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.6fcd8d418.0.tgz","fileCount":10,"integrity":"sha512-Ok8O0VuBJUYajnrSMiQnabDaV+ck+vQjeVFbmg8e0CfEbfzDJbkTXAcbTKhtPL+jqBdXvsoec6CG0/Jcp/IYlA==","signatures":[{"sig":"MEYCIQDBOSfnRIvcO8wtL1ldC0vZVBFGjxoTcFAIayipWqqIZAIhANNzjkDM5qvsgRBJkvTIvyKrj4qMzekUOWpBrT0l0Zxu","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj6iOfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoAfRAAkMzAYRvZDHimBn75OhTYSoFzQSWAU9IDPsPIrDmoSwjL7eLR\r\nYjy2uttXMBgcP15Rco5WqzC6EYcsVXn/H9wFYR+PRHjoBY/g3xY2kV8jGgJc\r\nwUy6Vmjhz5gdsL0jDmhWcApyg5zvNigIB10HN05G0jKtnD+MMxncCssWVCxh\r\n8nTjbqsPEoVRU0t92iz0k+U64JD3NaiWBPY38GfcZnGRE7kiM2LGbmDovnor\r\nuXak/vsx313E+AGwttEbo+2ObK+YG52jWRht6iYrMHMOONd5u9B8FTXnj4o8\r\nsJ0yElVDD2/0xctwtfrOIR7SQW/fV2SvNL1DQcL42ErGv4iscvT5l+2EoDH4\r\nh8q0MDpS/AceiEBlqOeBbs5i/CD5Fq8w/a92hg2vNP++d6pJuV1fWmou1Eez\r\nAJvUCspaCuO733YMrKy41zCVxmL6udUlpu+IwNunjW7EcVWhuXvev/j7ydXJ\r\nRfOj7Nm5mn1z8kpSuBpZuAM6a1IswIMtczyiIM7GhZzUpMtLUTOVul2q44L5\r\nnIWMk7EjaH0yhqJSWQegOgqKiPCK+LtXHwg/XcH5VJwS8xgMZffGdMcQL2pH\r\ntnwF/+3g2SojDa3BgjxkKufvDCk9x5mYvRDuZLUYOOOw0jspt7Laqy0ycIHY\r\nYhkiqVGj380sF/JyGDEkQBBNwbuYpod3W5s=\r\n=hTK8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"39b4fd2a38e7ab9611f614a59dd1694de0b94cb9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.6fcd8d418.0_1676288927677_0.23000744499488968","host":"s3://npm-registry-packages"}},"15.0.0-canary.066d9439b.0":{"name":"@material/density","version":"15.0.0-canary.066d9439b.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.066d9439b.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7b4387d197ed3ac53c786fd612b1ca71c21c3c5a","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.066d9439b.0.tgz","fileCount":10,"integrity":"sha512-4msHFYPMZeYLuYKYVOadFXbzfvuBiuYs0R/yYqScdrr0Bg39K1AT9FxtcbpZ4OJ3++i2LvoaD0ROvio6cEQzug==","signatures":[{"sig":"MEQCIFHgZGgtVFNQUz3FgpltfGyou2C8HMjDHLLbpHB5phyOAiB74HLgkrZHsZEpnXgSIvZ5AYfaV8Lw15I+mP6LxoQDjA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj7TjxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoStxAAiZJF7v5TpzuLFtvI3BXAQ8FQRAj1zaDJREO/WpQiqhb0LRAH\r\nXb/CUh9tGj5xy27gqlvzX5m16yNZ1iPd97JmOksLrdaT5c5omT8q2hdLFYLF\r\nmMXyqvk+76Cabz9fabgihF7w6g49mZJPBvDEmtPl7bRwm/RGrfjL2BMJmQPf\r\nwxNtgLlFAOxIo/ssGG/xYBkesr/uZGUpRZ1KcOf0GYbZI909coEy/q6hEFFX\r\nJt9HdjiisTGr/hkGmtxuC52CO13bNolPeQ/AAjf0rsetcpzbfUfp1rpKPAKH\r\ngfuK3YRPrRH+P2NI62WP9xwuFNjKDTm/APsJnlqrHhl2+JeeIona9JX6oc6C\r\nWgzNZWl4GG/pGVhdv1hJBsLy0777eYwo2U8HYdObSfEmJEwomrCOnh/7PV8e\r\n2KlTLphzPovYaAFf2m+m9qwiCVUEff6+xkwWf91kDDmLfRKHqYRMQyI319Vp\r\nhIN07tRg8EZDtpDelugS+xhnIe4AOhZ5HmHkkY0Ifbz4pT5Pa+UDzmOCFieM\r\nW2Fv/uMbliKuHglnExq412/oVlqz+7J5+l8MnAKw3NJn+y4utj5hMDPfQKbX\r\ngnYzyVdKhtRYB0iJAL2NRllkFJ+GcqrHQ+bNQMk2NHm6Mn+HtGrfPqKNOQYB\r\nfZc74QLCIswbQqzZASscsXwdRqhneS819oY=\r\n=aaIY\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"cfeee3e63b3e6330deff033d8054adb710498810","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.066d9439b.0_1676490993347_0.37923726949050507","host":"s3://npm-registry-packages"}},"15.0.0-canary.7ab32468c.0":{"name":"@material/density","version":"15.0.0-canary.7ab32468c.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.7ab32468c.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"37b5809497e083265ec5550d216bf7ae4e26ef94","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.7ab32468c.0.tgz","fileCount":10,"integrity":"sha512-7hRG0v8S5835fjGMr5D0vlZJLOrnxa6/fGqATmfTryXFZKVnJlCka6O2WgHwZUbQrTZgb40F3a0spelcZj/uoA==","signatures":[{"sig":"MEQCIGLjaSKOLO48367SE1YFzX5S0r6q6z5SZvtBocdRfRnaAiA1OBbl7hx/QaTDSxzsEmW7SHloh0NNZOrPXmq70mPlTQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj9Q5QACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrwfQ/+I68N5Am4/9d7m5klMPqVT1pq8trCjdU4CnpH4oLCT+zBX8L8\r\ne3aQsvXYe1O11rZXYR/bflpZomi4weEwHp6TxhBj9O31WYMqEiOhp11rm/Zq\r\nDaN4sHHTvMrzVPgfkiwEZ3+697yBD7hcWi8QfOsduFFhVFqmUordqqp1prWS\r\n2iFVPxVdQuAr55VWsW0B8c1a7N6w0YSEgVIDT0jSI9EkdFBRxGrU9RHa4JND\r\ndam14UwQZXfWJxgomyBmUllIIhYV9DQBF2VcGHbefF/RW155SwkoZb1Za1VP\r\nhOY3XCUsbkFHEr7ec1NbhQYhaovPBIIcr2pjBT4R7esQhUlqAsCiLwfEnf0j\r\n1v/eaQp+ol0pL+2p6J7JRj4vaBfibOWwND+SuDguA/kLZHfUgPVx3pEeROV+\r\nid4C/wVX2QEajddhSMbJx1hfli/rjtD36jwM87ZaV11wvawbrMW4h6leUPyg\r\nsIZEuCrCAVAlkxaq21M5ODrlb0xSB9ZxoxTgMIG3OVyIXYZ12DLiShoYJTgk\r\nP+r/BfxYL17AB3wWxanymjEJvQx+ihkiyxqlt/hzPRBYS7GOTWqOlMARg+Zp\r\nO9NQwplWjMZpGrubRJboM+gjaRxRLERF0fxsnfV4piL3qzVNg8bQ+STfM8EI\r\naEiSrerxEK0IJXLvXUF8IiPLS3xcQubktsM=\r\n=qLpM\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"08b12f363223d69b2eae5d2719e9ff0da773381a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.7ab32468c.0_1677004368107_0.6899620340677","host":"s3://npm-registry-packages"}},"15.0.0-canary.fa27ba61d.0":{"name":"@material/density","version":"15.0.0-canary.fa27ba61d.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.fa27ba61d.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b420d818ed711496dbc1b16374ad207ec97b93ed","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.fa27ba61d.0.tgz","fileCount":10,"integrity":"sha512-ASH8u/fxbXc0B54CWaoPl3iGwzQo7pF614ryIsx/1JpyFJr0C5775JbCGAHBlVLQqwuqC+hQggrplGk9oUu/3Q==","signatures":[{"sig":"MEUCIQD89UBQsvi8dNOE2fcQ7bd4P7MAYNFLpq+i4zHGVgEsZgIgCe+bl60S63YYtQmwgMiYOG5MXn8g8e8pFuL5gNXTqSA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj/NexACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo1JA//UYylXLtB0fjuJ8ofDocLaqFl4U0CdPdOziJNP1VXPpKFyVHo\r\nx+lN28yN4msN5tEf7JNl8QB+IoDyQVWiGqsXSERq2xSlgy5PTsrSBffbKIrJ\r\nCR5d9uT0LRL7ts2YSVXGWnYVHHZI2lyIWX97pCsk6cua5SiRx7KyUkkeygr8\r\nitPQWN43MtWVrDHKU/8LCDNw5fPJawnBdj28F/VN2odqtDt9xm2oLD2rZMQI\r\ndqcfZ83r0K7u2Jql5+azwBbR2GysJvM8YYyPKi7vu2h7XCjyJCaQ1KLuprvr\r\nEc2FFnQ4PzNqJL9WXXQ7CUEAeYzfWvm2XG1nUsr+K3Vz8vF7RfnwrmfgQdPw\r\nMAlaY9HVsKb+C5BBYZjNjtuo9I0DAdwp3ajR7CARmUC71bW/5AW3wFDwfF+J\r\np99LtEumfuiemFkDZVpqecBYZ4WpDukPt8MLuIVzbpT3xDApbQLcxwSdLbEG\r\nDJs15IqK4QZnBfXNnh/IpN5+4HehCVvsvaMN1P52Haxr+jjTkR2YSFHopvs5\r\nxFvVlozhP3cRAgli95Z0UOpa7sGQmqNvddVf73hr27fZezeEOd2QrkgmWKj5\r\nHPFrU2tgqhgd9dHujtSYjdHcwsdGaRv1UKtXFR3Ay7nobZgjRYdj8cEXGdqD\r\n/nrcDkiecq6eUJcKacKzeD4u5lAjsY8ALVs=\r\n=e2mx\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"ed40c112543fe3ecfc009ace11a6f0c3f82fa26a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.fa27ba61d.0_1677514672881_0.5774485182700533","host":"s3://npm-registry-packages"}},"15.0.0-canary.311ab4d4a.0":{"name":"@material/density","version":"15.0.0-canary.311ab4d4a.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.311ab4d4a.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3772fb1c6eade07e0265ef063a982d5695ca3a9f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.311ab4d4a.0.tgz","fileCount":10,"integrity":"sha512-gxH7WFVfNLg3h0b1/vfHzw9r7Yg7aZH/ZuM3V6/kc7sUJFfph/yUdr5gs9lqdMrNu+fB1exJVrDV9fLtTuzVRg==","signatures":[{"sig":"MEUCIGi41f8NSnF1Fh3tud/4Cvcn2ufQgZsKgr5TSGonX+9WAiEA9apT8plY/jyMPRriTBKdx5E3QoqHmVeOSg0WmmoXC+k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj/NzoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqMoQ/+I91GsByxUlGSTqm+CZ3UCvsN5faRxfzEGYmFmnUDBAoYj0fQ\r\nN1zPJX7D2ru9iLacQ7PyalZbp9hQtIinOvMFZVhDrUG0uNtkqa+hPu1LqH2Z\r\nz1llt0JYmlVqez9znXJ3mpRPpO080GHvF4nV/6GIx/wBE7ZyOuWiDpeqNCFO\r\nhQuIW6T6MRQce7Mn3Qh67YIw5aO/Bl1DqZkxl8Pl6OKoZxS3MOjqW5TpxYIs\r\nFdgtbAHBkbrIi1aHzpGjMKOYMg7L2AUs0e4ACbSQgVZjrcEZdodCWK68oRAE\r\njidOMGBwI5fMqz/QB6YIcAaEHPruro3v1cG5TvCfTwlAkos2UbYRFxiGrTch\r\nl5nCOMGHitSXbar1AnHXyhKKEG0wrS764w1bL7Vyh8VKd3fygeJAQq2e2hZ/\r\nx7tnn2oc7FUUic2KA6JfwvPIp1h7eASRAItbx+ach7X/uZXEA5ri/wSsPo4d\r\nyszFeTV3qY0spEfb3rBZAIt506U/x132eYNGdNsNeO5MAzNhR1OQqt42mJM9\r\nvzSnCEwIJREDr22g4Ckq6NV+JsfNOiCuGNXaDwFb9qJ6BkwkpaRtM1YFapy3\r\nZwRQele18kKCwEmjAHMWiplBL3/QcTO5F9QtrB+e+C/VryqP9nICgmY9s+GD\r\nsDmUKJY6aduvslkdLZSKfhxlMP6dt2+rhF0=\r\n=1FoP\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"07f8d2f7bb4b2f30e60a6bd8739befd9d17bfbfc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.311ab4d4a.0_1677516008471_0.14310002460612115","host":"s3://npm-registry-packages"}},"15.0.0-canary.901c83e77.0":{"name":"@material/density","version":"15.0.0-canary.901c83e77.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.901c83e77.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0b2b2fe44f0a43f620b53a811e9d975640a40d36","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.901c83e77.0.tgz","fileCount":10,"integrity":"sha512-HRuNz7M2rbS4/diUSEJwfjMttC8yxfyZnWpBTethvIC9JxQMAh/++g5W3BKrsc4eTVtwK3u8CjIYBQLSWao5Dw==","signatures":[{"sig":"MEQCIEkteY/kUYtl0ogh7qwgmMds+16OmjL2wAyn/HPcTJs0AiANorqhm88lfscJ0qRBIJ6gsPSTXdGVxXH3W9O0SLzdYg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj/PDFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq9nQ//bNCsQJV0Gy/XodndY3ZEEcXKaGpGQ6k6OFRwftRuMkPrZAG0\r\nmfdqE02lQDc0J/n21eBg0lWoeB/hCTgf9QMK5ZgQvsFRyuyS6KS6vauHIvU6\r\nteJozF8dGzqmjneQutqN7/4VfKyl9+o15w/CSiiV3XlZXEQ/X4tuawRrserP\r\nZZymZz0V9PbBA0HkdmRQbXAYsm14pFKCvXILJv6uI4t4Uqee1hQtwwxLGTPF\r\n7HASOd1vZiaMRE11TbgHDR+vDFLKAjT9mmH9NZKPW6UUDM9XJw9QO4xloJPL\r\nu/cipUa6u0W2NejAYZcxGMBe4NUhUBZ9lf7PPXn26bs4vJ0ae/cKG/7Ks5d/\r\n/SnPc1ykN2ffdfOIpoejV5qKOVBfEPZRHtslVhj1kGlZdGrRqvD/DUcUjfjP\r\nVcZF94k5vcT0k1QIp4/3NorUG6qMb8DTRuNzL3JBWbBwJd3KNcrtL58DUefs\r\nU6RuG8sQ8wZnTvC3942mvOQohYmeHq8Drpq2yWQzmtDrIhskE5d7uZwgBce8\r\n9xU89cUdpyEDoRTJkDjEO1gRsF7b8/Z7GFFfqCvlqyVsBt6LFKdsZ6JQEK66\r\nZPg6vPuxrYJwzYljA139euyz1nAHIi4E93rtf2Bg2LvxZf4gvc2UncoH4Dvc\r\nsYNMPiumNrTg6QTlxPObIro9IQBU0XMGaQc=\r\n=vjuW\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"86c988d321eecbf29bbb6cc63f7dfa18cda02d4f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.901c83e77.0_1677521093584_0.08340483498116336","host":"s3://npm-registry-packages"}},"15.0.0-canary.5cb8e2174.0":{"name":"@material/density","version":"15.0.0-canary.5cb8e2174.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.5cb8e2174.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ee06301493441d47f480e4d82191b17170f09ecc","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.5cb8e2174.0.tgz","fileCount":10,"integrity":"sha512-jnbLe+kUYrRDtYtlzLIkF9G3lGbWCTD/9i56C3sKFTqGqF2l//RopgzRI6rXRromE6EaBV9eyc7afFRkUOkiWw==","signatures":[{"sig":"MEYCIQCfIdO05xjz72RP3u4VFDjfUGJJ1wrYnxqmA0VQLcKpAQIhAOr0VuDdoof/zjxSjH9w9Pt+xDvDJbVywc4gBYNSEV6+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj/36MACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqf2g//QQi3tSuzoJ3RSGDq9IHx4M6YgNDdLru0tLUJnd20SwwPULrT\r\nrZyVdAh3JdfvNy2yLhtFAb4evUTt57fmBXm7ktMmfxDgYC/criiHcDhq28dH\r\nWmP3lf1YjJtyQAvPQMxXsBcwac59eb1zMIAS/sOBqHmn9cJ9KNcyWZs0x9DM\r\nrXSumoOFCrEcep9VcASTcDOwyh1+fC4WYKH06junAA5+8f5hJJ9HG6fUwq8q\r\nvTwjOv9Rd6lu3AvvNB6IxFVkpH2oALWm2wAt+RQtuRqb2h9szBLaSSJmpWkI\r\n9Ig7WCytdiGfPrDsUrjp+qhxljSxsrs7cTTLrnc2LmBgCDB8awQuVCVGh9Xh\r\nJi9Yz3tiic2xtQwd7b7ZZCSzL8wFUCPyPSmid7S2yjI3Ip74GzKD7mLztw2T\r\nwXaX5a3VWFDhu3j0zXn1AR4Pv2v1EjsRFAhQhCvq7bHPfJcjRvzeQP20uVTz\r\n69HxAq4lFFN2ho1/Jb7KRn3PSKnAR8ZSiRNcYAek3O2Q1zZPixEP3TFF0Acg\r\nVrRo+OfX3btiSKNWUZFo4mtKHMXQlZZPZ9MV++XJTE49VbuBuFU98kXPgCeR\r\nK53rZ9Xq8kvTPW/9hq3rvnVKqKXvhC1IxpbkFhHc5RqKIkW/IGEftydPCGxU\r\nBhmKhR6v44t3LEHJ2BP6kh5QdMgImvVUryU=\r\n=Q0j+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"d57edaa5a3a3079c48ef7c804f0a642bbb682478","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.5cb8e2174.0_1677688460141_0.1555878118436973","host":"s3://npm-registry-packages"}},"15.0.0-canary.f32339937.0":{"name":"@material/density","version":"15.0.0-canary.f32339937.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.f32339937.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7f4cbbb342322b50c85517e034239005db985018","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.f32339937.0.tgz","fileCount":10,"integrity":"sha512-+04nUIGeymsx3kzCNDTGfRLJgygF8vbylJh+gqFQ4pg9SkHf12pD4F4PJLJSiYiS4bCdGN5/sVSdOMg+4NMTBg==","signatures":[{"sig":"MEQCIGgG91Yob8M1Nhf4M203cuAuntnS/J+1wYUlxTl2CRciAiBLYXANJHnATTvqykII2cpmbkdJDgSQQZr2gxHALc7Y2A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkBgNQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpzWw/+KKeR9bF0/UWIlOZgvWHn6YlS4/YpgFGL/RkZQlyrrm1scBlt\r\nxmXJXMp3V8TReLYZrWefuL+JQNAUk5rVsYPEucQIpPelRKK819U0FoiJmnB4\r\nIsvPnj7fd4Y/t1OyFJurB1S7c1pm3zFj1Zi1XP2WpdTZk3ip4u7B7hQf8aEI\r\ng17aRfNAhdI7N7iOW48efLrR6UYw1PaFLCM3xz/9MHMuNiI0fWWBE86Xux76\r\nw47y6bRA63hk+irmzGi82agU69kyr/ZlXkdZoeta6fSEiSCVKYztnFuIFfnH\r\nGW4qMTCp3wK+69VsdtNnmsNhuM9nDpgRVQypj+2AxIiUSK+nWKWVKOlECWv9\r\nZNgEo300IkdZNdF8+izSrCTSisisrhNaErZLr/EcyBqmJ1kIVMVBajVuxHEs\r\nXQ4nYPXH3AfOKhuqOifMAM8qvE8ZdCiLE9eBjS61ehbxhK42+8QRWMsqwHec\r\nMar5tE2FwkLB8QUSYsrV+xENCZadi2CCy+DKqkauzquYaJ0ZPAFu0aRvV8c0\r\n/2123eMjJZ6gjo9FUIBRzPFrkGIp/EeJll6M2NhqOiy2Y65YT/qkHlZOFjzE\r\nb/YcJ5jmjC8s9UGSw/ToXn/qxZbxBXpSu3GvEY3n1daSFbvTMYg5M2zSMARJ\r\nRO8yOxejEUJzi3JctTEZVtGMB56Bcj+jwXk=\r\n=Ude2\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"b6c5103b89138f008c28f70d93e0d3faed285061","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.f32339937.0_1678115663868_0.5647750018150757","host":"s3://npm-registry-packages"}},"15.0.0-canary.7644d63d5.0":{"name":"@material/density","version":"15.0.0-canary.7644d63d5.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.7644d63d5.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7d9f5f6f19b85c2a711bb82613a2f1a8a3111a15","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.7644d63d5.0.tgz","fileCount":10,"integrity":"sha512-4ClQ4YDxmP5os52o9RSHq4Zq5izqxrOTK7vi9L3VhU6uTvg9BifFezvccNCxQ4Bngnr0qJMBbdxjXetx3Kts0A==","signatures":[{"sig":"MEYCIQCkNhInEVCU6vIpUL2yJpvOYcg5hc1N5hsMqVtNwpv2bgIhAK0OAxGJM9mF9UAQSFzS2Op9m9JRncJJqMBGnAEe4Kcz","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkBmiLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpGrw//ROktR2qJAga/rkmjDwiCJeZST+4DJ4278WcCCQBBG9PToi/m\r\n8SxztyaLTSQuTiTU0uuXoHyv/LU6J3t3X5npTUtYwaO/kRYMR1ViExvDNPXA\r\ndUyJAl4MLCKgyWSmBsphCCsLhiDO720e7MYPyTHSMODYDQGiZRyFyuuFBZ6M\r\nZLqjDyVj/4C9b3qCzLWVRuXLZNLInZjmIfUy/OvTLHpkx8JDdI3Iw7eH1YHE\r\nkKh/4oHfefYEBC72Jnyb8J98Xd0b430EU3s5twWaLcf/sG88Ra4hI8CVjmZH\r\nxFWrnAY3iYAm9nAS4EEJilza6A3oNLK1Gg1MtxuoJVhaUpbAUYBGlnVmuZXr\r\nYRghVpdBYFn57El0ucCVNn2gx+degVzKyhasLf5my98IIvaGTcBtWVhF2mSX\r\n0Os8qzf2xDXdu7x7QevmP2NbSY4wt32GBBI39gi33M9W9IB5Byu5G4tLUQ0T\r\nIMTwWW/WKC50Z2Tf6fGMjotlIcx7MDXqyWdO960VPMx7bavqTVQJC3Sf/Q7X\r\n0QfiztmdCO382Gwewt99pLVgHr9JHio3vPmMXYp/CLPlN4S9xQk7MrkMsfZT\r\nit4+utx3NK4V6Qp1ngQBSaEEw7E1HLKglxMtaEpxm40vAjlGMnr4ZJiK/lBk\r\nfCPCBigGfisM0D20Av5C3fAw1tUjAaXxxd0=\r\n=In3p\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"a0332d9af18b36becfa025c452efffd11be59943","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.7644d63d5.0_1678141579735_0.9514574036256118","host":"s3://npm-registry-packages"}},"15.0.0-canary.d96330c08.0":{"name":"@material/density","version":"15.0.0-canary.d96330c08.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.d96330c08.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2018232ce4e3fadc2a97da3d460039fc23246007","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.d96330c08.0.tgz","fileCount":10,"integrity":"sha512-Ns9kdN3HbxdVSsILGIGgjlgK3Qtqlni9uEtqVK51TzsCoIneXbnL8Yvz1IP47CWyjmeYxHOUlJnbE2GdJYDhKw==","signatures":[{"sig":"MEUCIBA//lF4HvNqbEMvkBgc2rFyQvbN67BHIeAj5NlTJ8+xAiEAjPs6UXdO6fSZ3sAzN6W1E9r/Pkid0PL12d9iUqMstrw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCHQ3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoXjQ/9FqSudaHhrZgnrGZT3IxodvrwbGGIPiVh0BxGSoyLM36x566f\r\nQdW9s3T0/xAd+/KRb5YpbzYmRAcyEJQZiKmfNLf+gVkWSn2DN6cBebaZdj6D\r\npz1YQF8qKNs3MR2IjzcJgk/NfNwbAuXdbgXKARUAnTT8/hVyrxUs9FFbTMRh\r\nM5D+NAp+J4XQfuJ65ClamV7utDZ9CXyk6hdaiOZdYfw+xfUxAOb3tTF9Ftqk\r\nRZWMuu9PuO+5PZ+SG1752WXr2r4SpJfXWcM/I8b8ITOKZo75VsqnVCdyvtgA\r\nnZTSjbiK6aGj4dy0sBI8m6getuWKac7xgw0dOWjgJ/wGNDq+hUdjikcRKUTf\r\nvMbncTeOgDA9pK82hE+KmZ3sQUuIlk5Xo/Yel2D8mN3Rl920c59Mh5JRLobc\r\nPWFq2wEmcmyFTtF3L/hfiXSQrzCmX5Ciz/Wf+DaIV9K0yZwLjKHyUwnjmdNb\r\neZT8JA3TiSpQttcP6slBOKCeybdl9Vw0LXEz8moNwicYVDUFgBbFoPOUV2Fd\r\n1/EJca6ZoxSu/2UYPRg+RETDHGlaffka6BKoIbxsZzSDNaOQH6FVQr6wY5pb\r\n4VF2VsL00jNzvtQonYqTyXobWGJCVQ93Ci+c3RX5u8TAgKEGGjwmGJOriITD\r\n6KEcl2EnIwUdIsnzP3Jf3sTTNHJETreaUzo=\r\n=BU71\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"6a6d53aa84a0c0a10bb15c3cfb596881140bddb2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.d96330c08.0_1678275638845_0.9797836367208588","host":"s3://npm-registry-packages"}},"15.0.0-canary.c99cae77c.0":{"name":"@material/density","version":"15.0.0-canary.c99cae77c.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.c99cae77c.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e3a9c1a5b85a04a4347868d4db9e4b8443bac786","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.c99cae77c.0.tgz","fileCount":10,"integrity":"sha512-H3rvwPKyW5RARPZq8+OjRQ+0SAuNFPSVlw948/j71MUZCaXvPdWArP+owCJWedCUhrO/Q7hwjhCWBem177ZNEg==","signatures":[{"sig":"MEUCIQC94aRKuMVOkg0o3zof9x8eM9rqIoWl/mOJv9d+YWZalgIgWgwNdylmuaBXIVjoj/EXQ6TVhU8avrrpx3LyAi31PeA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCR03ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqiPA/9EjDvNagRSYfsAg+At7RomjmcRH9ijtdvN/Q9QhylpJxb69/A\r\n/ojixDpoRL8J7FokidW/vM4CEbAHCTq0jtYpHnSlzNAD4QMV+NrqpeSZoEqA\r\npfdhr23z3JQPokpKKjku+ME8jfXqB6lpogpDPRr3W9fPhZWMjHHmMekl9XmS\r\nmnyUTs0R8ONxAfZXm1ne1lu5ac5RsEMK/t0J7JCre1jVm4mzZxWxdNkDcE9s\r\nCqubB55ZFDIhH+Bl6KXCGmPA67LfacuBSnYap4rD2BBbfUWXMWXITLHmpeMS\r\non6fIuRVVT4jBvvJop1zA9aSLKUGv03STjRfH1XhhC/ckEiX8PmRGpLbslqo\r\na+nOKABX4NEITXUOy53Xn25BEzVnSYPPdJjKdJ0G+d4yUEaaAmSUq77KRowE\r\nIrYPLhkXQvCUgW9kkvehcQjYRmJCd8Mv1Uh8cLxXmG1OWNdef7UFqU31sGXy\r\nlKTpAULjfzUhuxjDdEF86ZD4OhtsGfdTm2x4KQ6kxPjDzdQumNFy5ddtUPQD\r\nkQC1YASaGsysjM6Byf1UNxp2nK8BJBKSTTLmvMgEVULxszmErfHDUII+GTY8\r\nZauMPDaffsdibW8BHoR+sLgr1gq5ZTd/tgT9mFNktqMswJUdOZE/lBw4IzbH\r\nb15aGu0/3ogiOJv9parbM4yRiQrNf8OkVKI=\r\n=ivtB\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"5b6a7c1a1c133381bad395ae040de00c64b62e42","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.c99cae77c.0_1678318903118_0.24073537938255596","host":"s3://npm-registry-packages"}},"15.0.0-canary.6023b1cd3.0":{"name":"@material/density","version":"15.0.0-canary.6023b1cd3.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.6023b1cd3.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f8dfaf1c327e2030f8ebdfd1e44628993a51aca3","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.6023b1cd3.0.tgz","fileCount":10,"integrity":"sha512-bFEnSKiAviH90LXGe+b6TV+tDHiPTPh9Hi2JOkS85GKW6YzwTqOrTQ5ylnnhc/SFH6/gJkikDHnnUOwlzB0Gqg==","signatures":[{"sig":"MEYCIQCwi4Gv/46GD0itemrmjYm9MenlwpQTUPn91TWSeBrgXwIhAKx73Uv/5ENeyyZKzGeuREiaGx+PweGwYKaW64MFutf8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCexMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmopbg/+LW2Xzt8a5KFaw5ewWThyqy7kiFztEIUiuLEbccm0BDjQdH24\r\nRshgH4RtEY8iKForT6eU+rIhpEGQTtzCKLWjMoDhr0QRYrv6HtZVhD0QEuAs\r\nHRQ4/kAoZVF6gimYAZP/5OovM698J6WikXP9KrRjy7AcI09JKURla5fnF23w\r\nleC2m/jBfgwzd1KGDUTxYYQIrUwv8NoA78to8eiLyTbp/xaxX3fkFtZEOxv1\r\n0z28RlM3YaAzRmi2ILbv2qMElOPsZGhZKXIQX9BDnMFbK05ZW59WtqE54wgA\r\nojiByD9zD5hPIjgKtAoDN6C1B/7BVCCQyuLHeIxfAoMVzMla8zWeOmpgKbdq\r\nHFYd8y7XoL74FuVuO+tsO3nYVHc8lW7nS7avhhcSK7uYEou6M+dWXFOmTtQc\r\nTGunOmT945bPEplXbfqdQ3/58yBxktB3rBnxY2IsrV2sumS1vUSJEr/2Fztt\r\nYXjb3t1UPXsxOYFADKFX/tXdlrUuvs4Q7aQugxzakMFGu4NsyyBRAqolZpiM\r\nLoUrrW26NfJ/qXmzQyVaQpVVNTABj0M95i2L4PHxkm61FS7qHWUCIuDS7yZU\r\npndHGv9tuimuFTEF4dn4tzJ4QcyQ+NHypyM2y3cHvzpPUiOoDSAu3SWLR0x0\r\nrz7QouRBfhrcrvXSjHmUV6iBhcZx/tn3PRk=\r\n=qBli\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"4d11f175faeacd8e5fe534611afbad84efceae77","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.6023b1cd3.0_1678371915969_0.8432335899107637","host":"s3://npm-registry-packages"}},"15.0.0-canary.274610c77.0":{"name":"@material/density","version":"15.0.0-canary.274610c77.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.274610c77.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"075ba60310bb51ff59233467e5ee9fd7a6243265","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.274610c77.0.tgz","fileCount":10,"integrity":"sha512-bl5YRw99DTEAlTzBh7kWaJWpHL7e+eX1CkgtOBI+bJs6XJm2rcrB+x5e2ZLBgBIzyE+iF5sIG5uamaQofYODww==","signatures":[{"sig":"MEQCIF6crmESnCBitkhTfTVnQ73eV7rYB4obKZBOFCX5aRlbAiBqmhWmC8L7YYhs8fSaUurU6hGnkbqvYEN54yng/9VaJw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCfPVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp1sA//WWq3q6xBWjfhBsq+c+oC9fIgZClK4NH9ef9C2Kxv4ghQFEE5\r\nEfaG12a7Z1RFS13HMmpOqku/sPHZIW4pGg8sX3xqSYi8AJHzfe52FFfa2QFM\r\nV2vJN94hn1E6wVwprgZwWV+3KlUNecqhvGjbcDMLoCi1VMzJVECX6GXZ/enn\r\nMhJEjkDsFThQM7zbDx0jyz2U0nTqh+/FcDlL9ybGIoMuLh45vsE6xxBjhWDl\r\nU4k5o7DZ3Hwk+pJ6aDH+CETl+GflAfBoyRusOca7Gzt+gR6vI/2pJJKt2VHG\r\nveeZ9q5l99G/zLhtJG3J/mk/UZf3uyrnggtvW6/Icz7+5LABipOl47S8Tlgx\r\npoEVYHrjwTD/PQ+LE8sxAKc8FYAHylS08SlPT/s9bz2RrY9G+qnMtGRnK+tk\r\ndZzzYVHpdX4BO0Ny5oVg9zCWM8OxTOiHJIR7E+FrkZQ3u+JO/lmcc6iimUsS\r\nm83SwrIzUqg6NiBBvvGiObs1HfeGpCAA/SIe2X1B8gVvj+pcsOj5b8GiNjLQ\r\nWxKnrsaldjLGwKwsG5qNB0uaWp69VrIY2xzvpn4Tb9Z/QH21JjwgOxbollOW\r\nTfWSQtlPBJiZS0Z3jW8j56SB5tM47RJLyncM16EJwmjEjuGW7BjjC33Vp9PN\r\nur5ERqL0nyksJZ7ellEHV8taSkXoEmH/qtM=\r\n=yeOc\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"7a2b02c682ee73deba431503de1a6f1fef211c10","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.274610c77.0_1678373844878_0.13288101719650758","host":"s3://npm-registry-packages"}},"15.0.0-canary.a274583b9.0":{"name":"@material/density","version":"15.0.0-canary.a274583b9.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.a274583b9.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3704552abe1b7e28ed4fcc83575911b88f8d8af2","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.a274583b9.0.tgz","fileCount":10,"integrity":"sha512-5WalJJnuabj+S5X91mPhsngcR0DtaI28gCItbfcSNoCXgX8Q8TVg07PKjhxVQbHnfiQ0ZskCNwI1BQ/r3cx5MA==","signatures":[{"sig":"MEUCIHazqr3wb9HpsKm8cZELhO+dFsFcEcf5nT9OoiBAB2wEAiEA7eu/SbQEOlgnk9o4zMuPqglDPbB71F1ehBshKPnapHc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCjjCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpmNBAAjNsZu0Lsthgn+WQsT2hmPvuAwc0VhB7CDxF9/MT9vRl/RCU/\r\nxhQzqhCWG5D8pvFoG+jaxpZzJi5QMEUPYPq3XR664F8UW0oiH1kGCqf9nanR\r\nZqP72Lj9gndgewG2H0GFpU/Xud2B5SUO48s4c13xLpLbuajUzmq+Qrp3MKSd\r\nV/Pa1Yfp3FZXzBf/S1lK73D+u7OafvJJ7N9M5c+IRPmTenciFanzVrskNpdy\r\nMoeePDxTIrqdzBcjAb30+XiBpq0iCdrbXUTawpa5qg2xXl9dTs+KS7TLPDzh\r\nvSTWMBfOpOv/EE73+/vJeI4EH6oJpoCBx7yWkJ6H7ZlkNTb1FRVyofRBflYV\r\n69FIxNgVWl1hzmkITOlr3x2A601XkVueY1RytxcbHj6GlOCI/bKyGR7wzYMW\r\ncoh70w+r8JUQM3DIxDbNXiC7juVM3j6VjRYgjL1LWqGXzqT0TxWCKycSxObA\r\nMY9JS+7rxZ+gUB3MLz22SbqPorMHPSSEOxTUg3qD8+9zhqU3wi5ZF29ltIDT\r\n6MWobwg3Nd9f0kVb0y5+9PKYfS4aqvA/ijNXkdWuSATx2ReYz/EDs7t8/GLa\r\nP5Tk6bIpVkJmE/XFjhvI0rB6s+tqL6nGg+KUx3HYG3WMNI411a0gZ96vmKnU\r\neYgJdVh0b+glt50yhbcE0lhcQie6z23zXEk=\r\n=eFjz\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"7a7c8184214014c45d0ba8b4723714d1fe91f266","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.a274583b9.0_1678391490211_0.7369355474937731","host":"s3://npm-registry-packages"}},"15.0.0-canary.da22ca960.0":{"name":"@material/density","version":"15.0.0-canary.da22ca960.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.da22ca960.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ce870a0055dd56d530b6b4123a366fa86cec8187","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.da22ca960.0.tgz","fileCount":10,"integrity":"sha512-mEf+Es7XVNv8SBadv5w4989zugy6YWdZUWS7w9RrDbPS5LCB5Q92Azk9uNRnZw5+/568R1vD7/JVggzKUJxnfA==","signatures":[{"sig":"MEUCID2dBKFGWZ3NYM3dh7oBMDTTJWb660svU90cG7leEy/VAiEAn6PBxhOib6Rh1YoRNYcAGm7e+Q0/dJsRel5VIIrHskU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCj62ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoLCw//fwNON6U6AySTeLtYIf9mSmXdZR13liWez+TQi7n+htUhv1zH\r\nkTLpg29hjEk+eL6Q0wj6VA27qHNP6pIMAzNcbs/1bpK7Gp2dXaSLWRI8wrTU\r\n+pg7OOjMbgQ9hTEsdQeNbOU8pX98BOsa+ZMZ+xw6BTrotEI95PP5y4D+ki0k\r\nvLxHRTsnVIIcSj5Zdqb6+QJAOuacfggf7KD8S4fqcfQqe6WGWv89XwVnhFOr\r\nDEvtKQ3Up+5ykLMiG1M0lEVFZXAS3TJvo9TVIRmuenQDNRLZFFP90+aLKfZx\r\nFY2v5IyW6wiRQzJj3ZKyfFuz0lUFefHyErLfOV9ZPl4aRxM1lEeE8zB8+a2l\r\n+jj1LKXfH2Hohehc1oIfcjKXwdeySzyPIAsFmwC6dHlc5pTnb8PAsGNPCgdk\r\n6Eo2EpIcVJtnfWENKF3pH2o74i0YoIB+PYblXnmx1O1y7glTbFLvzOqn2VyG\r\nBcL+13mf+DBJgJU0sxMKWxT6eIdBwngXigg9rS4gATN7BZkD/FXLwk8lNjcO\r\nz6fAN/8N47LS8qikxFFW3wQvQsv2ju9LJcG7T0VYmdz/Oq23Qva4WPOBs7Tt\r\nY9SB9Nm04zQM1GjrlFc5D0ZWfJLJdmpgEvskv/uywmY+aAid3oVKm4FNOg5q\r\nNZN3N/5H9FJld+l70+XaDUwM1itIQatHisQ=\r\n=yo85\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"1b58f37865efc4ba8ba06e1190cef502dee9f902","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.da22ca960.0_1678393014360_0.1322434323783015","host":"s3://npm-registry-packages"}},"15.0.0-canary.304a94e8b.0":{"name":"@material/density","version":"15.0.0-canary.304a94e8b.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.304a94e8b.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c4734bb327f03aa0be5f9cace55428cca7006bfb","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.304a94e8b.0.tgz","fileCount":10,"integrity":"sha512-0rIUKkPggK4oLSsc3mGPDEaWouvWgcR/2EgFics+1uGRQKylCpZSmcNFj8vvNrEz4GjTy6HGMdKBH0dHlhnr9w==","signatures":[{"sig":"MEQCICIKgfuYZtXlDlCNsesfoWTkWZdjV/M+VLsBVL7VJZzxAiBibCZ76n100dMMX933cz6CBIewygOHblNWnQgFJHFt+Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCkUHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpotg//covG49ebLrgnNikJrTONBStaj9Q2ZQw151TxaHC+eIRvOU6O\r\nxk+pR0ozy1LgcZOABkAOKdVgteZjTcfd4GNu4aDTjTFGt7Z4KZaE/z0CpTD2\r\nyMBskc6HeNMHYW9dyOGsWTBxnlV7peAUOLCCirRMWF/61RlenI9W87M33cZl\r\nKLMMFeGqWG04+/Oruag+1NzOiTHTW+meMbf4Ercp0RZvRmkkcRtI4/j64t3L\r\nXfIvG5gg85SQ+DKBfJb1ukXCTCgUvLCbblypgvfmyn+g5LG7bzSDX+e3J11H\r\n/Pshx7hm2tnMt4OKvkSyNLY2OUmn90CiD9OV4Bp7Xiu7ZOjxZ4u8L99r5E0d\r\nK7wVCQYxhsHIWc6tFVNpnyC+NiXpXIfxtMt65+P9GkVE8uWTGAUczRSSEQeu\r\nSqZlD8zyQBSE0RBUMYH/MMQq2TDaB/WMhfZ0rr0y8oSH1dEyZw9y1VJDEsBO\r\n5WYUfgCuf/CBMPZgWeLs3yUnlzxLNEqy+zRNPwEtct03KxRXdLiU+Q9wVdRt\r\nrOH+P5wuqZlbImmM+qmNPXYThGUH/dwrhYwLaXGf+rQ3WApGWAGT3EEUwJnE\r\nifm5PfR/8BHxSqW3vJooI/Dujx7bkDF8cIAd1SSP6J/wVuHRCHZoeEyg0nxH\r\nYxTqBLxx+JqtOzNYgQwQW4XK8cY4EaEQp0I=\r\n=untQ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"e7550e10d6a01c606a6dd78c58c4ee6e44c3f062","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.304a94e8b.0_1678394630936_0.526976909533964","host":"s3://npm-registry-packages"}},"15.0.0-canary.6c265915c.0":{"name":"@material/density","version":"15.0.0-canary.6c265915c.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.6c265915c.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"601b6eb5749336788abf0828a4f0edba6b4f7e16","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.6c265915c.0.tgz","fileCount":10,"integrity":"sha512-zQpTN+GOZ44YYN0iOhPvK/a2a1FPSLC5rrCenc9Y1wmWmrh6nra+cVNoOm2hn3FMHrpX0/coR2Buc6FgzNzNTQ==","signatures":[{"sig":"MEYCIQDxFX5V1cV0Kh0i9aasyLL4D81WDdYxT1flGW7+7mNdcgIhAJIBXdBGkzFZmKAQi3FAMNGw4DS5kGHwrzUicAsQx1n4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkClOiACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrD0w//UYpzn9R9Unb7bS48/i38HKq0Yoxi0f0zyyP6MRAcdiOOLOyn\r\nwY5+yRkd69Cx9QPfnp9T8JaUxJ93Iu+T9RlJ4L951ZGvgZN58/aYgWP2e0MT\r\nMhXoKPKjr6+BQoAPDY/+Qn0alLp7C8a8AUIqAWRywUBMG41MhVOodfbz1Nx0\r\npRylSb7gz/10aDt1xylq/TW+u1qsblgKkEpu0hAuNeb8joFIYNmckVhPL0Mp\r\npsfkISPfHcF6W89C+rYj8bArZASMZ1Gf9/lSzsQ0v3QR+d2QUuNL2ChE0lZV\r\n6+1mmiEvFwXRbTXFaDkW/V+k70zOwY3oZcwjZKWMsXgSd1lGA7f7owyDxM2C\r\nH3V6xW1PwelPL81Z6+euEEP3+L7GToCN32UYlVX1i91w3/JIKnS1Bj9yxZQj\r\nWBlYHzJxpbwNBJtLvtal9nPqyE2JLBRuGSgWfoZHUIoC2gh5SfcDAGWlM7VL\r\nI1wtmLlYetUoRZHqBkBLSjgRZKmZGrZIQKUpesmy+U8XZi1a698InndAW0tB\r\nGoYLlkuhZrMIFW2Yi6LebFMGrdKgWq9j4qiHQwfXMx2H9CxSg0dF/+x6+5a7\r\nwEMKH/NQcf4nFBw0ievFSDzQlD05bMLoDZAX7Rg4ToT4xviqYNPkBLUR+bBv\r\nBkHqnMU1CAEYb90MDh7cBI6rluF4FJvDeM0=\r\n=sN8n\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"2226d2e658d88eace91ac63729977eb6bd7a9af9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.6c265915c.0_1678398370352_0.5436226415823915","host":"s3://npm-registry-packages"}},"15.0.0-canary.de5224633.0":{"name":"@material/density","version":"15.0.0-canary.de5224633.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.de5224633.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2d938868eac1cc4485cce24115d9dc46587a6461","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.de5224633.0.tgz","fileCount":10,"integrity":"sha512-mUrDo7RTgQJce1nh+XDVCPOMSB4Zzjkscxk3z3Bu9RL+s8Y7MDgEEdxe99nHwgpYTlZx2ifX3T8I51G7RJf4Gg==","signatures":[{"sig":"MEUCIQDF58TyO1IssCWlFi6pYsSlmaS7CjnQxQzEXiNqGbTclQIgPW/J0TxAxRqz/y4ttTAul7WzD5Cyn0M6KbRBf9pskoI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCnG/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqllQ//Rxu9xIUL9qJCWZyyWajxvFEsgIhVPv2OfS79a5kTO2+tuPDv\r\nc8nWZqzNEo+EE9UsjzOgyLRnwMMKjboHSZOMDEjf0Jr4VsmAVl16cB3Ka3HB\r\nAkpTi79BsK+ygVfs1/EsBIXxMfGRxsiaGGT70WRagM4D7zT5IAT1PsDIARnp\r\nA2Cw7AsE6x4R34Khf/G9b254DNFB9+d+QyB1PGkzI/bGzdeyGRcsNiJLSQVX\r\nc2hbONkxqhrmZxyarbSbUmWeOm8NR3n1S0bnbd2/jOT8tHImQlP0DuYxtfkp\r\n30aL8mkdSYX9EnhkQa3y3TWEtIkiocQxG7iP7EMtn0lCmmVL/oTW9yXjbErW\r\nibsibYCz4dLr9EzOAU+6sM7C6cT0+B7ineSk2ntWSGLxoloBfwzH/g+vDVTu\r\nqJ9lYAtWnQL8H3LfBmhC3JWxS4wqIGxsyze5sDh2xTSgjI161A0Q3Y7OLLAu\r\nO3i1LjG6kiqCILpFdNbemoUUbQ1KgAEQbDuEXx1r6SBE5TPtc+LyZbfqGT46\r\nHDkNr29qPS+8ZPEjtkxcUVEAFqg0n+dIbPMd7W5ate1jE71fE16DVjov+8tV\r\n0wKbkkp1PlVfkvWeje9RxCKnMXlZ2WyACMNW+vQpusD3q5KxWPNW4UfvOGBo\r\nkWobhiTKmA0gCiFHRXa+xvbTfJtKPE10T8Q=\r\n=Mw2E\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"994c620135276cf7948cc54b286c6c306c3ac01b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.de5224633.0_1678406079659_0.8303780512827057","host":"s3://npm-registry-packages"}},"15.0.0-canary.8879557e6.0":{"name":"@material/density","version":"15.0.0-canary.8879557e6.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.8879557e6.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fde8bb636a1d89eca9e0b115d6a35c823e610245","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.8879557e6.0.tgz","fileCount":10,"integrity":"sha512-miQcRASaN4ovzDJ7xLdw0IozoyWy+m3bvYdby0ZyZIsI1f6CM2YoaU0eKp6z/irIvW6TZqiWMr/0hRHMuBlNRg==","signatures":[{"sig":"MEUCIHyUb30IEKiDnGkJgagpOK/2cJ/3oGSHhQeYN+aUgl/HAiEAiIN6xL0PZrOjqHnFZMuWsaRD6ZRbKEaprYngN51R4xg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCzl0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp/nhAAnUX9BZjFkZsXu92mse8NkI7J6Xj0ZABuIZp4Kv+zS+XesOIf\r\nEnw7azxL0lb+Bh6rAG8vyL3ClStWfmxmOlH7zv+03SPOYnpOmQF2T4cjT+46\r\n0OOmA3WMXzGtRfP+665ZgV1o8PkNeiQEWhnz1i1nqvjjJYRP3WT0I7mnLWum\r\nNMVg9fgfU8LCmIoBRFP/QkfHSb62rGXC3XzxZftgHJ0Km4ROTgM6s8QX+04u\r\nra4pQ9veKjZ5wBgkU+ylsALt7R96RdjTJqN+qezjBEIqRtpKjz9OdwWAWzKI\r\nhV/YF3fROcXAI7IIQZcd+2VpdYbSIYlElfgUVnEmuP5DhI3ZJpsYG8Kg9OMo\r\nHhKpk4QOZOPIwtzvCJtg2zyuawz3i/9efMktV1KfXskXYTqiUpYaiEkntbyN\r\nPMDA/589mjV4IxXnpA8j4QGi8SaiidnKw9yg6sYKA4D+lDVUDu+gTI6brRO1\r\n6O03BtoVytEimqtah3Kozs9Qhkc5KmrzMbRqtilsWdGOa8a3fiG5jKaRjEYm\r\nJzWTj9p6kkMfhk03ZuSOIdzvKYx0iqeKArtuXs5C921zH1uUuF0msSixd6rJ\r\ngwWBeWsEnIaJu/LgjZpjYR8NT9GRkSd61Flri1wbBT8bdCi6iSlNMzvhDxlN\r\nQJyN28PY5AjDaOis0fQeVGjelhzPwoRfgRU=\r\n=JSFk\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"28f7c223e2bb4a686b970a425d14b1d1edd70546","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.8879557e6.0_1678457204534_0.28524011843154184","host":"s3://npm-registry-packages"}},"15.0.0-canary.23073a303.0":{"name":"@material/density","version":"15.0.0-canary.23073a303.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.23073a303.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"919c0d7acf0f84c9d3d4aea3c564ebf68e03edb7","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.23073a303.0.tgz","fileCount":10,"integrity":"sha512-OTyG96YKsbOePk7HNI6i7rMbG8eP9SL1iwPwrO+ptiM+gHJ6aL7tqU/ducDNKKB1yt+K5nVnRVY3hXvQ4xdclA==","signatures":[{"sig":"MEYCIQCcyMBwK28cyDVFravPjQeQ/6mVJSobHyn0p4FmlqmCKgIhAJKAQ5PWvahmNDDcpg/l86GwkODnosZDfKSIt9SL9+Yl","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCzsPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrILQ//UFMvBD0pcSB3au2c94Y9iOz5AC6Q7zpG/2q8RHWbEs1fqkh0\r\nSSO7izDd7DokMjlpgmbNqLrpHA9cEAw2WgRH3f40ZvSeqpa3jXAsOUxeia03\r\nCuen+s2ChFMGXWzNPU2RQZgGszeFKCxuBDthtsSjtISfhSwERK3dI4sp2iyL\r\nAa0b35/5FUU7m+bRG2zwdEOcVyVXIpMF0SDYYpHeIewpq/Xw8jCi18/Azxdj\r\nV9+KHE1WYA+ss2E8zSeRby81XKcsoJixtie4LPikoT+2nsip09sja66pfj7E\r\nSl30iWt0+/VEFQpCegHD1sB0vWsRsPXjbsMFvyGwd9bKjeWI7clZyW++OrOt\r\nxXWsqGidsx39Kvh3YeQAAm2FEW+4Jni8LFSNvYbULePRRCe/2yqHVFshAsnq\r\nhWGrl+HhEeShtI+CmBDoY9LUNH2ZDz+7K0lTtHDoJ+ZPGq6eFoqL6eYHdoXQ\r\nNLtVwZf1u+ZHcr0m83t42iP6dXtuhNkV3WV8zk3jiGIoNEaQASVRauByQiNB\r\n8UoGkN3Nwg6CEUl5DKEsmhd9DDHY8BXxChQ61vnmwybmI2UZgJIOumbs0A1G\r\n1TfJY1oy5agx/UPvHCWwPCNeXzs3T3p11EX2F38YCIEgGUC0DpssUC/FnTAi\r\nNkPZ0AZD/YD8UCL30frZcoPOEeAibRXC9Ms=\r\n=uHqj\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"2d7826e2ebf1c1fde12f47b603e66ec0df229a8f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.23073a303.0_1678457614868_0.9555485890000155","host":"s3://npm-registry-packages"}},"15.0.0-canary.51c7d4014.0":{"name":"@material/density","version":"15.0.0-canary.51c7d4014.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.51c7d4014.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a54e0403a59b4ce8d002520219ffa8554955809b","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.51c7d4014.0.tgz","fileCount":10,"integrity":"sha512-Dtrykoh+7FdZ/4NiMnXW7H7ESDWpzihhTmiK3sps1J/MWXRW5rFabEPpFwYChpaS+ox2pT1gBik75XOei3+2Bw==","signatures":[{"sig":"MEUCIEHpi6HjkWhhGtOw4ahzNDRatdk8mAPf981ThMRURIHRAiEAwxqQAjz4ZF7Ek/6fmZvLceorg1rTymaZbW0FApWJTII=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkC17WACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqhMg//fDWiB+FEDIEaf2fOd3XkaoU1Ti/ExczgilmVrh58thyE3bCR\r\nlY9R+m5Qo2WWYep7XglxujK/WR1hKt9HVCvhznitGQZEIJ5S98uiJBhT4AoO\r\n1R3mG/2AP0Jdi0cgYMnFxbEHnJhlUcGjnkmazsnyvQ+1a4z0Yt6SBRGhihZ3\r\n5ajrviyWPxrqtj0kT4R/AhjB+yu//2FzJLn/4fOZIj6reCkMVzQSLQZ41nwY\r\nh1iyMldE+bQm0zDWugmukLu+IlRZTGlHNJRoBTx43DFKc3SqX6WQeX2Cgrr1\r\n8xfcTZ3a/oSVwiH2rS+J1WQ3J5yF2mReswRN2OHlD7+P6EmxTyceLDiCNfv7\r\ni+mI+K4/ePQPtkfd38qFn7S/sDgMrUHHvmBgmD10OlXIhZYaer/9I8+hCVJj\r\n6CwEGOWk+pGCHNwTGJ9xIZv4Sx+PE5gsKAxbKdHJtt3yf0mCwd4o1RnSs4Yu\r\n0sE7c+n3S8JU1dpFYnKAok9iYF1D/hXzZh0+r6m/mKpcEcKlP7MH+upD6Tro\r\nv4DHknDxQxjpMB9+xGIjxEBZCKL2xZZmn79Xybqnf+XrAYCWsQvtCUMDqIUo\r\nQPLSTWse4dEowDU4wHPSfQqmHlrefKkCxg8m1EPdZ5qEyKRC+8AhMcJ5NbPK\r\nqpwTA5JWsQLGVBLIlPZ6kOr6aposC2bVwGA=\r\n=lOtt\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"0485e6059d69163f12d83408c09b1d41f6cb8dba","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.51c7d4014.0_1678466774234_0.29624901672857273","host":"s3://npm-registry-packages"}},"15.0.0-canary.1175a5be0.0":{"name":"@material/density","version":"15.0.0-canary.1175a5be0.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.1175a5be0.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f0d06d3b038cf73af241cd787f2620712940fb95","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.1175a5be0.0.tgz","fileCount":10,"integrity":"sha512-kM+5nAO4mZCxtPLbDMvPOi3Gr22AFJ0dStBEhzwwPyxNTQyF61ZKa/6wBLHBkJIfQxi3ddvt+R7uScZtGO0vsA==","signatures":[{"sig":"MEUCIQCOkZtQHA9eO+GbITFbqm4qZRZohwTT8+c0yb8uPsJFLQIgcpNfYeZ/cgMrWTMPqgVn3GVn6PupotJ8OHvKXriQoF8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkC5c/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpN8Q/+Jb67MehUeB+DR5sLfPoRcZO1RnWD2jp+hT6a0rKoA8mmXcM2\r\nJqH7uqbURcDMVTHwLqb6IAoQFg1A7GMOCvcdgbuRCX6LAkj2R78EiqeqPEWZ\r\nEVGnypkWSq3ZCM9FYEC9apQWz62yYX6mY+9m+INg46OOo45Pc1P7EmocU6+2\r\ny094SimvBHEHWHLIgHvk/MTfmfQxq+dynHE62pccAXrYSyGSQtIxRlfwA5DF\r\nUlXyIYLoiTyZujIHkvA26Ig21ZKCTL+EtrnEvbAbakKxu5Ph4LE/gcOJbcFT\r\npu5PW3Ae7AId2znjYqgXYyjfNtw996dT75+yUKL307mOs/+q/IMfINJ1OYCB\r\nGgw9U3TtIXViAqGTDInd6VWV2eiFPlkpIkq6CyY7Z4gktEFgWBzVPdorkv0M\r\nfCSmyZtPjttaFb9c/BDMGwOzbWu0n/s6/YEXjb/WeP3uyBuvwhmadrbvP2zL\r\n3bRe5UhvC+Ztt43s7gUrBhDmartIi2fjz/9mcER0Z8vtINfuv5nD3vx8GBZm\r\nTWs2kWnNQlEkPR2ycWwGJ2nzKfx9oUIBxQ3y8YIdId6hrY9bKJFF2wYJ+PTX\r\nqBcjmsQ5fMMMSHZFgQrwVMd13pd6GlOJmJK6HgZNU7590+hA9aCUzpoKYGA2\r\nksY7KoQkNO2/SBw1tLAemc1jW3FIHBQutN8=\r\n=jhL4\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"1fcae3e4ba7c60c6a51ee8e61b01e26a324b1ab2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.1175a5be0.0_1678481214859_0.3691659924674613","host":"s3://npm-registry-packages"}},"15.0.0-canary.7adf3af80.0":{"name":"@material/density","version":"15.0.0-canary.7adf3af80.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.7adf3af80.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"746cae8ccf5c0469d3041e211d5a0c37576bee44","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.7adf3af80.0.tgz","fileCount":10,"integrity":"sha512-2q60POyxrTiFdP1lxJJFM4RHan2WASVhvzB1T8xRVmdDaO4Lzx6WjPO/m0ysviLqQqZkC6QTqsUWNypJbpesHQ==","signatures":[{"sig":"MEUCIHl9rkJP7C/xAojXkn9iiK/zoTY0JtXYbY8YnyJyiICkAiEAlIeNnQQslczawGyncpAfTiy/S7e9TTZ3INFVN/zcIxY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkC9gjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpuKQ/9HSqwdEC9CG0zTI5zvbbJHjkY6Oma1DDNCpbAb5KxXkryJzyT\r\nAxMLHUNVAvMmserMRH89Vh8nJ99yJm4mk8XS95ghngvND4NRqYiOh0Z4E5Xf\r\nmMXBP3jejTHTLBxPqCX+GsBG5aysdpHnfni4Ji7P3bvt03N2bcA2ATQpN+//\r\nVheunl/PRMrMfLqy1jTFKztdsa0/zbptDXXj+bT6JAZUov18XfbJzfpV86Ir\r\nPzp+cNj6SDfOaF/uESxSYdNUo9pxrM+a4NFdtBacqO1N7YBkHh+B8ssfMfj7\r\nRaVPh3U0vR49rS9jMhj3MrXPPUOgB2nDbFwtdMYnuN48tdzOzK/L9DTLRSP7\r\nwgWz5EFrYkZ6KblYtr9y5cMCdgHHUpWHbFUkT+7yW/1kBPrZtfPooGZRM0cb\r\ns3KgvU9rfaooLQ4xjakDLgvzIAkka3+mSYrr4ocIcigf7l1jBMFctfeT2jzN\r\n7tHHBLahFfb8MDxKtXUqrhYyoIhkobxt18Iyl0VhNi0Amelp0Hyda2ITOHZq\r\nrtv2GdtLo8qHIKd+sde6IzEvLaJExcNbrqbFFBrJ4vqELiXg7elIs4MD6qbT\r\nKDWpL44j61fyzLB8stLhP2oRQnUaDUGFmAhHDqbitHMGCyg2k58fgD6hdOUm\r\n2B6Chn4UNwf+E8mES14kIuZiuruqLX8ahHA=\r\n=mQ8z\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"57b0835838a903c8ac3ba6c8edf79add958481d7","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.7adf3af80.0_1678497827372_0.9177872144862158","host":"s3://npm-registry-packages"}},"15.0.0-canary.82554d770.0":{"name":"@material/density","version":"15.0.0-canary.82554d770.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.82554d770.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ae14e6d67f4935dd1abae8db183879ef33d7d373","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.82554d770.0.tgz","fileCount":10,"integrity":"sha512-/2FAFxv9fXEbxeMB1PwV+oG97AKfB0fKJTctCz/DWeVlDCw3PI0+KczoIVRSVekGOtf7jGma2x2VDtWfgI6VWQ==","signatures":[{"sig":"MEYCIQDkLFI7npMO4k42wWoIy0oDno1qOvkx4BPMcxfc9WifCgIhAKkpp5mDeKup6iVCXn2OnI+ZeXsg1OiYVyupazAAKCO7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkC9sJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmreuA/7BMD/2vSjSXPiQFlMmuMvkf51H+PeK48xs0mPDCE+Ia4Jcp4l\r\nxQT4PmRaLU/ncJRQlIPiOvJhfKaEw0snCVcziomGlCK37eeaMAjjz91gbF5H\r\nL4JabefCLFYCfps/y0zNve3wUYFp4XxJiRom5b6/H4IoBR6fZ0gGaKh+i6Gx\r\noFhZk7HQhlS3vqoMmv4ihhY4VGEikXVPsKqhw0U8EX6HMWpxFrtgjXa0frvQ\r\n0nTSNfFXogG0hiMEALf+Z1qcLIkyHWtnaipV5pt6rP72quHQSodQo95uDNvP\r\nA0OAFZl17CKIQa60+73XZJehRVIZ5T0aTPPQGyX2j6TU2kc7DFHvjMEOmdGs\r\nb8ujxap083S1smmAMZz3eWoz4zixZb6WnRkin/sxnIwIKtl5Q29JUDXqBq3w\r\nJGvdMANfNNcwIBIZtnQOhvPWK2SiPjGmIz/HyDfWOcBXYLpaW6lPFv7i4gxc\r\nKrITJrrXswhumjZ9zngLbeppYtma+wgENIRvZeaBIZkc230DMuv+YhczQnbe\r\nU3tKWlkLRrRVnPATErJyBPg3jq4MPpvb3YtAdFkQW1u9mgmuTOgwe19YcXr8\r\nO/xC0baZIxgUH2KXl9Oki+DKFTx3muYa0s7c0OJsxGZdS1iDa+HJSAov4u8d\r\nTlGH5uH1kx38sqx78SFD3IeLN7/UL6gL7mU=\r\n=m12t\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"500cec655918e97ee1edc3c86ebccdac24a28f56","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.82554d770.0_1678498569216_0.9919712470053805","host":"s3://npm-registry-packages"}},"15.0.0-canary.93fc524b7.0":{"name":"@material/density","version":"15.0.0-canary.93fc524b7.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.93fc524b7.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"32c37edef291c187fcdff273af2306ead7ffc586","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.93fc524b7.0.tgz","fileCount":10,"integrity":"sha512-GjqkgNLGLM8anw4IG6wrmZ+D9z/ez0bhGbEekBrzFgUnccYekwrF3IHpqo4bcf7boNqLoJpDQbBP2RKuHvggDg==","signatures":[{"sig":"MEYCIQCsojrwS71+1BXLx9pZ4yGvUQ28XFrw0kBbxvGkRko7bgIhAMuQ+7npVBDx1JxUYTy4v+2hDO5/piTUJJkIkeKfEbGU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkDuC7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmreug//Ynnky0co2XF2kCKxrVL6D6QPgvWFP0NaE/jV49/r+jRhFIHV\r\ndS5UBPm1c2885Zn7pul1VYU6UGmif4rjgA++Uxt5th/6v8khZDta6bqvPg24\r\nej9nMAmXYsIdv530vP7jkKxz3VTaPPDFJcX42mcxnjhHWLpBY1YhN5VUtd9J\r\nuAtnS/LvSev8ZLWC8Mj/Xhbl02WsA5QXoSoDD200H5pOxKxQ3l85N1lNTpf9\r\nN8TRwH5Yxdi9HwRQowAXL1hxrXAGkIe3Cn24I3odMZxyHN5n1F08Yxw//wmg\r\nC25adpQ5roHNcF0ob1swOFjjCJai/gUy4xwIuggcPUuFF3rQiHLl9EPO5NIr\r\nsM17lLxCE4hpNDdAw1ksGBW/FUNqFoiEowWVqOtsvb41FFmYbgQBsbRVk1Xw\r\nnNR7lU3t3aIltmpTWXvf85qMqvlnfa9q9wjcsM79fBnbwpB7p/8eYKMTuhMu\r\nR+WUc+743jyk+oj3a/7D9HMg9TPQOf5ljQaQ9roS1me3ebGImyzeHx652jPk\r\nCqFhoVhbfychxIv+IGDYG6sYX0WDoZYfVjCwoL+6sSL5AGvMAy87B3CNpd6F\r\nzr3lys/jkNOy1Am/lIUKa4c+8BlceKRu2chDB7QCUVttQHUYs06XGzTCAmNl\r\no0ZrSsSOEH+wiWv630atBDRJa2IuHUYk9zE=\r\n=KNLi\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"338daa93529c874da1af6eeb4fafb935e014e096","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.93fc524b7.0_1678696635106_0.6459688381709401","host":"s3://npm-registry-packages"}},"15.0.0-canary.50be0fbae.0":{"name":"@material/density","version":"15.0.0-canary.50be0fbae.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.50be0fbae.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3322ca34cf1e3c149c272a4469f3c2c07146a4a4","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.50be0fbae.0.tgz","fileCount":10,"integrity":"sha512-fmSDEHQF/CAOso6V3KEf5nR5X5TMm7RBFrZEkNatV3XqsfhZHHmvti+HyBb36uW7FFbyoeXs2BBfRRqZhO22sQ==","signatures":[{"sig":"MEYCIQCNUuZ/XHfWkFphyJdClYNC7rhLCFx1nrQTfhFfbCxGVAIhAMgUV6aQvc6HbHcvlDAZ5ImYfO8caoJZ3pS5vSfsYi7p","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD2CkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq4gw/+P77huUDugUgKr9fWlvQd+ixQddhbZ6v/yeatGrdG+5QgDZTk\r\nLC9EPZx1TNmBBLIGE61av6KDYWM8e1uFUcAQ6KVv8KBL7OaPjW98dggWuzag\r\nadize+hHbwPIjpxdxurcNr1sexlfXF61YNIvEvJOonAVh/LOJR7klYaXNOdC\r\nDDaqItUgkXUmjJyqtYkDTq20S/2RhImO0ysoD2Vgu8jOeIJSkosyRqn76j62\r\nxWLBoVHoJdSGxRWea0HftODePh6Z9ARMranLVoSOhNPPyEKsQqmRluZVUaAX\r\n75o76gahgAoCx1AEZEMnz/MCBm92CO+/yFQVwePdt7Rz72xtGE0eihi69E9u\r\nxL4Orl+U3jtDOKxqu2IWv43jSfQxi2KRRbpStNEX8JTEDPSApITROSxNd3PE\r\nrNiaz3Q/6wS7d4P32VMRDz1O/WwZJSUUdBa3Qzoc9PFhiNhREb2SQLi7GlUN\r\nSXAa2eQ0B2BxtkUd2tSot2Yy++wUW+f3NVnEBjTY6fwIYWkUivrfzEu3NemD\r\n48AlI/uY3/q4HACFTWtT2sCy/JyqD/h/Gi475tkOQN5amGCNaUiyV5jcprcq\r\nqfLHWVp8WkY5Ntk/zEoLJMyWDp51tFgbO8WmVmmxfMP3RhHnmM+RCCH5zuuw\r\nFj7Eah00Yn/nuN36RafWZR0TWBCMdsjRYjo=\r\n=dcI0\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"405d98c2882461cee8d47ab1b16a4666ccf7129c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.50be0fbae.0_1678729380024_0.20242878112755802","host":"s3://npm-registry-packages"}},"15.0.0-canary.6b5ffccd9.0":{"name":"@material/density","version":"15.0.0-canary.6b5ffccd9.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.6b5ffccd9.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7aad04d5299c17290cb9f4485f5186cddea58a1a","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.6b5ffccd9.0.tgz","fileCount":10,"integrity":"sha512-RXFNhig4K5TXUEFeeG8L5wxAAqs5hadieEF41Zr8nFAfVzP4cTD7GjCv+X764gru3Bre+WzjgXlm5W6d2wGEzQ==","signatures":[{"sig":"MEYCIQD/x73oH0Hj7/Z1WovcoFdoz0vs0o2qpgSpSvswMWMzMwIhANdp4WFQOc5itzs6wqD7X3Q+CnxLz6jtLhHq2dHm5TvM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD2FqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr2qg//XIjVhnYoJevTvKrpxF2FAQYyGdxDcAMkatTpvYjdXCP43oyW\r\nydr6TvqOV4wtOraW4b8aNjHNLWOVjbNno6ymCbzyh0Bu41WVD57mmDQSxzjS\r\nob/9oeIKPnhCwrk9xrQy5DrCM8iZ7ZeMrTfMjNO3l5u0mFYFBkL8TdUZOJc4\r\nP2xw9TqHOQU7pOJOwJs97Lv0XQ0Y5JEEkZS5uIaqI8wHXyR6dB5YOaVHr4gL\r\nG9vcAKJcZGwXlTj+99BQG80H2LKcGPw9NmBTpxUp82QQS4puqahVYI5JU6xL\r\nZQPurm7OM3zJ8axYoNJlxvH3NpPkDHT9eTyKS7lUalM9Qg7O5n0Y09CZ+vAx\r\nD+IsKimLISNSfCICnux4WtDeKKxiz58BAC0E0eWxSthyRaUivDSkudTNvjY3\r\n7ElVJMZWUOT1pXV+jIE1BrpLe1n+2NZ0EiESUmh0Y6lVi5VilXemgFQvel3x\r\n67urWRvIKG2lR5U3i5EbmOWoL+BKx1dIhCbaBYbNZ4RG8Kcuoi6lZk5qY5H4\r\nM9IUSx1izNTzc1xkGApYFasnrDmAruKRusnRnh5sJhYnIgJh0+KB1RkyFnb/\r\n5VITfHPXAlN7m+0nIFGV1rr3lGoI55XZ47en1DZuA8NzmfHmXXvJjNJiM/Pz\r\nK7OcjkKDwmtZLGIfDnk76A9f++XxHTDCOGw=\r\n=fpbp\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"d30761453fd80caeae042d8999af672f9c3eaa28","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.6b5ffccd9.0_1678729578723_0.76059654479446","host":"s3://npm-registry-packages"}},"15.0.0-canary.1c8013f4e.0":{"name":"@material/density","version":"15.0.0-canary.1c8013f4e.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.1c8013f4e.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2181078b3fbf067b4e8dae6c8f69041e6ad5150d","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.1c8013f4e.0.tgz","fileCount":10,"integrity":"sha512-FLFxU5yA4tEcXNs74t/AflWcptrQ39UdJ0aJMsmoEm1BlfyLnsRD2WCRl8Y1cDWif586UaCPv4Cs3ncIgdRb5A==","signatures":[{"sig":"MEUCIHYCV1Fr1pVgaD/riIfhbKpUAZ5R/LPfI7QIkuPDupg6AiEAwcqvGeR2v28eDbnwfCaWwE6/C16Nb1HVjgP+V7dMUcA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD2S9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr2lg/6AjwgZu66I4AyUm9TX+4DVzFuA2AUeYFS0Vtu+p9coQ1V1GWr\r\nOHArrhmbW2ZpZShbLiRR8OdccnsVFB+ri7uDr/0ESiwm/Mr8dMcv0kAufqel\r\nXrPn/kI5vpHkBeaD0djMZpJiXZN198PVYPU/oZgzjTAZtUgaOyajTnpJ46FQ\r\nYUyV1U5AqpVpGDm8aJj5fPiqs46s+jyKgDKZXnKm9NztKiCDUwvqs15N3xyr\r\nVLGaCFqaYC5ixwu1Dzdskrds1IyYTQyS8vwyHAPKb91zTFUBGh/ZIefpxt1p\r\nOUKpRduip+7JjM2H7iDV1D7rEUSjg3yBxP1VosxVqTVDk203wUPdEt9DiYpZ\r\nbmGQtPDywU2UiuTzXppRcI0S5t1V21hBlj+zsGasjXynpiY3nODpf5/B4LSU\r\nzV8B4IAy1aP4Nhr9OJDtwAmgFJMlbBdzSx2GH9Fflh+p4NjTsyX2Y5fKTsdT\r\ngKqnVH8HPAXqyNCuQ/GjxLuIjf2kYNCTVH5mOPep7gC1jmus2wFVJmhxVkTZ\r\nfr6aQ0/7mi4jkXy4VtsPbZoGMBEDZJa+zZd0o2EvsjpnrA89QpiEDmPjrEBB\r\nKoaJCRtfzJPo0RYxbutagaglX39jqtjkMUkdrhfXF9YwlqQoqOhqShtNqqsJ\r\np8SN7fRYVj5H/uEdcVWpQbA2I0LLoCdOQic=\r\n=Qgxr\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"ce86f06ff0c2637e8cfa4965aa614efa6bb86046","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.1c8013f4e.0_1678730428789_0.1748946177695485","host":"s3://npm-registry-packages"}},"15.0.0-canary.112715df5.0":{"name":"@material/density","version":"15.0.0-canary.112715df5.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.112715df5.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2b7d69f3c7515971cff4341ab4d36d155a73d405","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.112715df5.0.tgz","fileCount":10,"integrity":"sha512-7jsvRQ/7uHQHaJdGv5jFwU5sP2qe58Ik+1zDukY+3cosIxi10OehCalOeBWmYjWjjFcbP3hWbr1Kg+eVjp6CUw==","signatures":[{"sig":"MEYCIQCrZcUuFMY9c7eY/2LC8SlX9YpOdQ4bGW6gZVj/WwT4/wIhANm1Glz1qyVZ89PzcPReoCUoQeRgseoaDwWL6g6/+/AA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD22GACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoi0BAAhG3ecBkSl3rEY0hkjMfVfI2hk1t/ThKd653m1Sya5wrHJ79Q\r\n1Vluz8nqeZIJ9RYazdrZkZeR4CKD2nMCmaUOoNY9ExHotuORi76dr3Yx1d+q\r\nMH7vms4CE5BwW8ZP73kVTdJfWuPxcQ+YUcYogqFx5uv9lUlOVr9JTFwqFj/c\r\nEfFZu5M2ptmH86ToQk813SyOJoh0Z+w6xIQ5/a/u/mVpiIdModF630L14eln\r\nFZgKZU+JRIeyss0oFOLmV1yMAAmzVgiYWZ39err4PSB7lSZ1UDMDpHvogwsK\r\nqhKoS5jDcfa7OHbYRyPhWI7ot/YbP2AbM3Qx59zP601J4364j8cuVDtRVmFh\r\nWGrwqNyRhya0oOHXS9tZr1tvrFLwjYL/tC6Lq9XzRjmXF24PlO788c2BV91v\r\nQrWDFZHDU6a7NFpIa+xheGh+f8KKugIQy/tMEez5K9RcTcxevxv0dN+rG3Ed\r\nPeBYAYcRngoYWZVNPD5MOfKr/3ytujGumtEJ7B6OKGwMNvBY2GDMvjApc5q0\r\ngoe01gK0SRJH+GRLQkecaHQMcri8VbcU7jj9YhytNBIMBqQd/BzRXNwLH7bu\r\nIsytQvsSGXLSbQgzzCX8S1SkMU1Hl6TI4UUJaniAilzLB3XwSvfbpk1u5MYA\r\nNBrWjPM9B3NjO1gV8ydv4xliWsdJyQNOd7k=\r\n=+Z7L\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"3894873450b9dff1b92031fcd1d00ed1ec3ba9ce","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.112715df5.0_1678732678128_0.978990042249916","host":"s3://npm-registry-packages"}},"15.0.0-canary.d250911f2.0":{"name":"@material/density","version":"15.0.0-canary.d250911f2.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.d250911f2.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"72ebe23ea82d604ffcd553c8dc0524213ad98831","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.d250911f2.0.tgz","fileCount":10,"integrity":"sha512-xKgVdJ0M3WhZ2y9YGHAMQs0SIw7ZaKmGsgukLgutM+KSSJSC9P4xt9DRYap8QjVDInx1fUdcrK2dvvYiGsE64w==","signatures":[{"sig":"MEUCIQD6H35oe9YPtsYBbbMoeFswc4JoLqxkIFHN2toIXTFaxQIgAhVF+2xDFASugxMylUOqHRXKScoYCa6XH7etAnNHM+E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD3nEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoD/w//UyMA/sKCOhD1XnwB0n/TLJJ0xHsiEPpNyfZPTbeS6O0bSYht\r\np+SDAzHxLF2R1pVWSvgma2Yku75DMduiq1xZL04injCYZ13EIwGd2WRcL2uc\r\nJMWeaAfa3mowc6hqVCX5Megfa89iNjDj8/T6yJanQZ692SpP6Y+Alp8s3t36\r\nLBoaOnnPDZFQypyRrFVRIyD4goAr15J/pfuRy0IygDiTQt8QcaeFOCFbL5FZ\r\nN3EPwPlmnV3zWLq1416yUhxEJ1FLDnbafX9c7GjrUZs8ULlASQkfD26Ftntn\r\nYltGxAQeJ1jdiZ6j8fOEyhc0IUqsXJkmDop8NifKfPJJ7kgfap0DiBruW8rr\r\nRieDHDIato7O5Ph7WqoQMZBGhbUWFqPYPa7t3G+STB+THZL6czlkdG5/px/C\r\nIe6brbrHXe1lsDTLyE74SkO3rn3gNOUQFpiaCNonsACDuD9aVGMfMXG7vONL\r\nWl3i6z2RnN/J59DcBIkHf1g8i3FFTtZAVv87fT44IdFWMBCZvR6gEkfkpars\r\nkIV1Lodne3ijxD6qKiPEc/Wwi4yZql7JZ7Ih/Q0T0JMpC3TYBcg+xWrzUDTb\r\nu5DE9bVCtBFEqruu1Nzv+4ZcUzWPOLgBBs7VgNUZyh1EZJj9caijkMwJxEpr\r\nC+g9CRkQehEnKrl8CRKNf9TM7j3ooZPNTB8=\r\n=lpnO\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"7b4ac246b31922fb4beb9ed168dba262e499c271","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.d250911f2.0_1678735812136_0.2857444825974029","host":"s3://npm-registry-packages"}},"15.0.0-canary.7cd925c12.0":{"name":"@material/density","version":"15.0.0-canary.7cd925c12.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.7cd925c12.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d14b392759e4a5ee55d6d491f2659d4b3f8b1007","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.7cd925c12.0.tgz","fileCount":10,"integrity":"sha512-OSFIZEXawpzUpngnDbX+JargFGl8b9aC/xadiqPxTH3QethV8fZP3WnOsO7rhYQo4jdxo+Cfx5V2VeMLntlkcQ==","signatures":[{"sig":"MEYCIQDmFY1sO+911FyZid8hptTpU0mYrcMAjA/Ac/ivgwlaIwIhAOGor2x5j5j7ibLduHVKyIHmznJND6UDvnKS4hf2B3gD","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD3uKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqQpw/8CGJH6duGcJWRxChIcM75gvh/KgUIPkwXXrWoDBZVVAUcKWvu\r\n9eA0B95a6M53OnEbLYzh4nYa1/eQvVGWwYE8z2lPGsa10dtly2+6Z3rUPRZB\r\n6U0ciLe37nsDFb4FBD24O/UiLuodlra/WZaNECK4ovKCB5QEe1bDZnBLU73z\r\nHQW49SIZBmFi0LDAZXaHCwTLvZKzuNUgRPWmcQtAuW4hqouWr6Nxs0tcVFoF\r\njUkYtw6uxLa2eWZ02qjAp6kFUHBTfIEZW7EF1DFsFps8MZqq/UqkiRuEvW7s\r\nJGk4/RqdShi0H8v2Sk7Kn8WCkMeqmMPzuoRP3wmdtjeo+uXqjtcw+Wmwwupr\r\n0XZK+IlHcqjL/xJk2jCFs83FA+5xAJ2UN1KBOhoLejlvSLJN3YSa4D8fgQck\r\npV5FJSljNgsa6NXrQxGAxaM7eCsj3M3NDbeBIeoqB3RBYBUID0LRX2+vz9hw\r\nK9eXNXyAn7X4630tb+Eg+qYSsh11fE4a4YLxAI5Zu++pGzQKhaOdXwdCzjpL\r\npxL3hqYOeec7qlT442gzeCoNQr12iyMR458gccsZGvz2z0I3MbK56fZJ+lI1\r\nufSWKFgOBFYrIYpH8Mn5a/fD8w10GeXBs1CWSC21HeDa6HjGYarxdjvad7zG\r\ndBGqGrFQUWrHE/7lNMTdU8OqZjlCWA0c/M8=\r\n=7BOv\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"96310a5c80e3e92695b6d6e2933e9b0c82e58a20","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.7cd925c12.0_1678736266370_0.4317371669510004","host":"s3://npm-registry-packages"}},"15.0.0-canary.b2ddacf73.0":{"name":"@material/density","version":"15.0.0-canary.b2ddacf73.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.b2ddacf73.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"75afd6b7b2c94ee9cbc65c3c9cac718f126a2974","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.b2ddacf73.0.tgz","fileCount":10,"integrity":"sha512-Bre0DhgmY07x9flUTNbehfwVifUWNPVCDYyDEp1eLxFGXpEKYNyNLKScKMORY1Igdltli0R8gg2tetDwthZyLQ==","signatures":[{"sig":"MEUCIQDKSiKqEtn/LFLS+saygKZnKJEhxHOwVu5rRnZmKOVnqQIgO4TF5koEEUm+1FoYvFBQ6+VQ0wYjV2htu1a1kg9hrR4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD3yQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp4sQ//XtACE+sZgDp3xgGHabOAPbMahGAWvFd1teIE0MQqsW4RETtE\r\nUikHIJGp/3+MViPQfzyXDTPGUv/SQ5piWQECBxxHASSd5O6Iy9x4SQGCyEm+\r\nkVnrBhMJLOfku7bTzJvjp2rwWWhpXuNIJmwzWh/+e59BCifp5NooD1npziUq\r\n3kPEfBeka8sMDQqYkiTKlEvfu9xDKJpnstFNdZ2n6XGNdbww8PweTEJTO4S6\r\n62DU58YVZBBnEe8sVQYP9FwkdYPLC1Fo+1xP7yrfvk2DNKMQXF6Gn/KFqhHd\r\ns8NIpf/OcYMAWYuyphBGenM4jp2GTJvT4XS33juq2uNm5B4d+gTYH5s2d+4u\r\nAVdRrfljdqjHiqf789n7kjDjQ3F/senSouAOLVnhzOVR2CdRnAa3UZFlt9MZ\r\nseIk9OYZxqialelZqAIi7uGqJlf8UJf3Nux2rP0IvmbHp+ZNBpKt3iVuQUPR\r\nxeGIRjUkEvFa2aJZpwxvULk/kiCZ/Zzpx8QESSHUXTVVB9H3wMyZ8djtKkgD\r\nGVd+4PW+PmrXWoS4eQPv8k17045EX07J85CJlBeo4eCBNhKucQ4O6i30FO5e\r\nrDn2H1AVKWtpQOTdC4dFVcDGyZ9k4JZD4FnW8pghe/gicy+OTyUeID2wjjS7\r\npjx2pU0XwAwNmDrJohDMsy4CgiJUu57fKqY=\r\n=IELS\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"860a6f0b439760b894931fa6cb354412764bd21f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.b2ddacf73.0_1678736528664_0.9987574775251233","host":"s3://npm-registry-packages"}},"15.0.0-canary.989ae2ecc.0":{"name":"@material/density","version":"15.0.0-canary.989ae2ecc.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.989ae2ecc.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"98d67be586177a2e914e4a1384f43f8964daa7fe","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.989ae2ecc.0.tgz","fileCount":10,"integrity":"sha512-vgnvZFByKoLza6cHKK1/JpGc79wgGG/bZjEhzqqSicpg9mqUNOPzv3zbOE9w+TfNMHsnMCSnxQZxeOsFlJLRxA==","signatures":[{"sig":"MEYCIQCr4Vz2SNphwXjeOS5pYnm8S9bpMDREm1UgB55UUDCSGAIhAK+E4Zlf7PUghbC9NU+USheqVmxgPganot8Wwj1G3Ens","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD36+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpE7w/+MFy4D6d+dn2CfvbJxGh6wk9FEJ2ZzMxh9IkwR36wpov87ML9\r\noL/P4ioeIh9NKCqsHPVMYhtNW9sAGlW4PxUYn5HqQQ7m9x3fMrCRM+1Qe8Wc\r\nIAyqQDh9dAWqGUWienpbJAHRTQL3pySghDyGwEHMdQNQcVzhSbviiTWXFTjQ\r\nDy/6q4mDw9YzCo2mLb7Hj8vx02q2vdkEoQNbqBqx/a6CvC2YA0Kdz2P/EOuz\r\nxSeKFGKtWkzqHQqRxwnFnPI1w7O+epb1Zz2wF2UMFGSr+nxbePopgcoLrs7J\r\n7O89Q5BPnUzvuShgVshwaNAUd5aQ8EOg70HN3cxNX40qUQ1hJl86A4sZ/Dlj\r\n953o8KKgIlD1yagCLfuSlyA9KvWoVOQlGjkxnRoMQXiDb8IkN+lyBepxua+e\r\noQvJCvxL3kQksXUedchFXhpegTCKwdRstPdzNxQgIV+h1RtFJLpvgspWRiMj\r\nGn5kQmv+wy/PjZlDb+l1Q5jFhVRz39AVTgTZ3yk6egSSRFfPnnck/R1Yw57t\r\n/Z+oEAhina63DY035I1otzAkDb5UGtsAKUrvGjG0HQs40UG3J/aZDR5o0kMC\r\nJiyY/BtCqXzQj1Jq5V3tk9ZxiunXFvYULy72+aeD6qJgKOIOzJsUqQFsqU+i\r\n1GyYNS4svf01guYEbWKgSFLWyF0t0RCoMrE=\r\n=+yrJ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"52e0f05ff74ddff1d986b27e08df13644c056b63","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.989ae2ecc.0_1678737086462_0.839067171404418","host":"s3://npm-registry-packages"}},"15.0.0-canary.89c66483a.0":{"name":"@material/density","version":"15.0.0-canary.89c66483a.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.89c66483a.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1b220af00348966f3d1b21ee05e6d28538c133db","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.89c66483a.0.tgz","fileCount":10,"integrity":"sha512-6f7rhhgohLK/f+W/+FtlPGI3mU2t/dtiRuivvr4sHc3ZVQX9ylgfDE4CX8w79UveYvorE8tf3HoIF5Ly7y8OzQ==","signatures":[{"sig":"MEUCIHXzOR4FjOjFJoCQISyEt0kp6Jsc2MGg9P75Yk8vANl7AiEA9EsS4NFzjlOvDYgQkB5YCP5Zy4k0OFblRkev3yS+K0c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD4RQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqjhw//T8SKGpz5lFrpycWsHwJbtu084N9WYZUfA/873TkGVvcNsELV\r\nngf1LD7h9abOpLdIEuSUZPKsSQ1zI1witYnRHw/YLkejXs675edbiZEXA+/c\r\nTn+ptHj7W3O3kfh7HpV0owoE4kz07M5hzP/36v32Rd/17fVCcjhRm5hf5jXD\r\nzPaJTZqPUo7nT+0wm/9cdK2Z/+JiF0MLuzAMm11dZEbmP4tZakAbjg1q7X3D\r\nqDcannPx1cqIvJHXk4M9dZosSEayeCZSGrxuvy0apKIpm4ZSj2K0+eNfaSsA\r\nJQ3Gs2+/hYh+HQk1OIqmJEDW6Y40iYb98YVUFZx4p++AMezucBUhyaqM5IJR\r\nxMb/cI4xscePoC6WbwAvmgiJNULHQ9s1Ps5X7jiViybwxHrrSsMhPdvizjFb\r\naeXnuA3zoV4TvkOCZndIS7OlshjPF2+heQmApkUMshLQb7KntIPX0ea4hmtv\r\ne5hvkgUPF6jg2MPxh+i7vCnW6ASaCCj0oK4mm5gb+zrhmcM1noE+iCqwrmj3\r\nlok0JFRMOsbuOPl2McTTR6jo0NCpo8CZnp0Q9dx8WmyZDbYpa76WETdFPo27\r\nE+mnDjaCYMTJ1CkBqq1jm8X6Gw1ek9bYSnBzKmZHIkaLsP+rz2GA2x9+Re7b\r\nX3ARYdMQBpbF5b+y7O43L2NGEd0rQ6YzWD8=\r\n=azoC\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"1e255ddead4716271020e03e9b0b302eacbc4153","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.89c66483a.0_1678738512162_0.07236645377857465","host":"s3://npm-registry-packages"}},"15.0.0-canary.6a85742c2.0":{"name":"@material/density","version":"15.0.0-canary.6a85742c2.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.6a85742c2.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"83db8b2bcc7ca857c628ce2ecc0790482d8e1939","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.6a85742c2.0.tgz","fileCount":10,"integrity":"sha512-WTAIjnAIf/4U+ECGFtB34dpbIt05XTjfKfqQX4uwUxshekTtaEW6MX1RSuqSPknDBXPkkz8J57iTC7XAMbbOiA==","signatures":[{"sig":"MEYCIQDRBEFxEdKFu1dr0jXzG0pXb/7nJbZJPtaok5FLeHmGywIhAI1aPDaM433q1ZA5NIOwTvuQmkO+WIQTW73LZ0XWPgs8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD9/2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpNdw/+MxEC4D19IE4G0wSNSNK42n4stidp7z2ebUXeLQfvKtplI/IZ\r\nC66ZahuvPZOO3uhIEpuh7B5S2r/1l833RRzlZ2cYWkhfwdBk2cmbDakn5Kea\r\n3Lxjpd4lemc5kBP42Nlum+SAB0uS2V5F7eZ5E+XEK4aNp6bB5Fj8AUCyHBCC\r\n0XpN6a8/09cVTDh2QBJ4gX2fZU0E2V3UxKnSLRyvBNs8U3W+uA5qFbW8pwAu\r\nRkml4dwTJPGd9gKtcR8uukbx3KU2c3x7Nf5gZzn/0KnZzdRubWFBf+5MQSii\r\nvAkElVL6JtoFSySfCHwpuH4Em3JNc2a0SmLZeg25GsXXw3ibffsRUOhKbVuN\r\nw0jLdp4bT/LLpzjASwH97bqLQHzXzo4nTeHICIu/lCRz7DDsX5WdwLg2EPtW\r\ntFg+3ZsBM0gqJmSujyJVn+pYmn1dISPos+teRuPYvMh0+WYNWLqQAnkpq0LM\r\n2tF4+LxUnKe5179Z+XBj7aEzK2JMxDCfYb0z3qVONG3OZ2GugI+YY96/bIWJ\r\nVGmWmD9U/6nKnaXgmnUbFWyJ6PuJ69UwCcXkpanXpHfuLqjbh1bmWIewro60\r\nxiHP804l8yrFPZhRUMu6aJ6sHvpXTv19hb4AJ9AzuPnRaU/4aTgeMosnfcer\r\nrw3uNvFpY4o3d8gPynbjiA2hF+0poMcsQCc=\r\n=+9XL\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"a2a15aaa59054337e585758eb160d9cab97224a2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.6a85742c2.0_1678761974436_0.2995473909434516","host":"s3://npm-registry-packages"}},"15.0.0-canary.bb6cd78d5.0":{"name":"@material/density","version":"15.0.0-canary.bb6cd78d5.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.bb6cd78d5.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b9cef8e0dc76dcd44eb34dcb60e6d7ee141acf3d","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.bb6cd78d5.0.tgz","fileCount":10,"integrity":"sha512-sXB35DXdIWCOFTG/WKKruQU95YACA8l21YxbR7MLpiGhZ11sygge579TkiIS90Wu4wu1YqbAT/QygeC35TzCEA==","signatures":[{"sig":"MEQCIEniOcorVI4ranDBHLSWx7d2fE8NoqGz+sXg1a866IHUAiAdhzFu0iT/huYD/AYlAOwPD1MhWYapzqIxRF5VsWDCYg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkELnEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmripQ//TCsQ6EGs8G0XaI7oZQfFRFZC0EACnpMDh0+GEfZGOdI3mOQi\r\nBhwAnE44qmU6+8J7GEcLN8S14z6vugi9Ucl4iyZmhhISRH+XoZXnsjQDK2fJ\r\nXGd3HxeQQZdFSUfEXCH4iFvZQxOY4E+Opd3wAHCMaQXyRLJjSOlGJRxL/eRM\r\n/sAFB8sMxjF5ftLdyLkYVH8WPZZ+wnEo2r54c/JLK7JwQy5i9d3ihWCynTH6\r\nsq0vukns8yFsH2Egq3NeQag8SZrPD6qzFmnORn1pJTBXb70nEx2jmQ30ol5O\r\nC6wGDDY4CIK2Yy7gQNaBAkkPE3J7DJogP/EjFhJ5aCBF/8jaxRL173k0qEg3\r\nTcEeMpHM2KWHCgsa5nqfwDLVtGld1l8rHlGVhcvB1inWpG9DXAcUnK4iNRjf\r\n8xLIaIixnW/RWnRPOHVvnAjzZctGzMMSQuiSQFQ1sWxDLr2YK/opr1X7F6pt\r\nm0Q6FSMgJ7r3CpWXqleEdqA+uflr4n6a8NpcNrjpQu97duw/JcZ4pdE2iRGB\r\neYFF0JqKLAw60fjfHUpiSRk1bKFVIy2b9y19WEZa+ZfjIurhpinURXUQVemE\r\nQUiAEc6tKb7GmvuAAwCAJf9EBaSSeUEZ9SL8S9RbvlRTlAIPj5MiLtPxQdto\r\njhI/MGja4cwXgnRps1paGAVoKVPSGFHig2k=\r\n=m5oG\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"fe016d599b297e4e276ef5b37b829b25f0607b93","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.bb6cd78d5.0_1678817732197_0.6094653816265516","host":"s3://npm-registry-packages"}},"15.0.0-canary.5f94aa37d.0":{"name":"@material/density","version":"15.0.0-canary.5f94aa37d.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.5f94aa37d.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"523a9ba7b43d065d53de580e2c5c231e08dcfd20","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.5f94aa37d.0.tgz","fileCount":10,"integrity":"sha512-m00JIWaMKdMksYQCJdsiFnodiWEZIfbeHUSh9Z7M14Xti5tfAH5cX7m5bDiHaepSyN6gAQxZkV6uSg+HqnaeFw==","signatures":[{"sig":"MEUCIHKafwbaLAs2iqIYTWlNgTtIJcbYSH3TOJkeMcgNos8kAiEAhWvvXfPxc2zBDMEOclpfwfX37WMeoXHfMUh6VYC2pJo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkELqUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqaaRAAle0X3LXuTjl/av3KpI/y2I3aVE+JtweSDOfnmpvG910tdmRa\r\ni0U/QorXRx24MV8ziO5u1cqO8oi2bgHBSZB/rinLOAolNaPI28tyCWnKkzIC\r\namTGyUtaOJ9WJcIlJvyyHm3ugKwMWdmNDUyklF8DDbNntOijgRkkYB5PMrm3\r\nx9bsLJ8N9btLap2Uk9IybMIWJ68AHKjrYeleUAkQ59VVPH96QnlDBbWEhVob\r\nHD7sxIBsCVVzz2GPcPgd6xrqIrJ8cqhpLs4tGZY0bWy093Jt6lpEo0Dkxdry\r\nsCVYVvW7aEYH2eEoffw1CWdX8X45/BGFzQ+iA+7mEDVO7yDr4XCW2wDFmXtr\r\nW7AsoxeR+G5X/6O54t2XbDy/poaIlBCXlgDe4vKf92VxKESRfqcgdBOl/ns2\r\nySi4uh3oBUCrK4Jl80fQCc1RBTi6fm27yKDDo2BFjdMb/KPxGsM8XQT5XHge\r\nWGqVpr/8W0fPxcOICS4fV1SutBV6vZcvN7HMPDziN/hkP4kXoOqZZoPhPeC2\r\nlg/H+TplrgGDxEzOssbX5G7lR0bdXj6hUDB/Nq3WnRcajarDHYok4UakKXwg\r\nmf0hXa1piN+2n8Y1yo7L9ZQeL2uWtWtwdxw6pLvpgBtqETHZeVIQlvPwWVfC\r\nDgX7wx/kg3xO9BdX1AcIOXv11YRYI2NXZPo=\r\n=VSKO\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"95db647ce856eab6b1eba2fb1794f3b0dbc3dd08","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.5f94aa37d.0_1678817939785_0.9620211579247662","host":"s3://npm-registry-packages"}},"15.0.0-canary.906ac2e1b.0":{"name":"@material/density","version":"15.0.0-canary.906ac2e1b.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.906ac2e1b.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7272ea3cba4e1a1f3366e076cb1e6a7c6a9f485f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.906ac2e1b.0.tgz","fileCount":10,"integrity":"sha512-ZXcF0Cbwc/U9B9SFbx4kPXcS87Dzyd9xR5NEkpyY3BOVIU2tiNnCM9oEc/6U6RpGkRnWqTEfOPUG0vO8Omodew==","signatures":[{"sig":"MEQCIAUY7MbdC4M8aEr25ympxXOzcQf/QDPtjUVvE2awhNX0AiBjAi9kET3a+Hl78r2dIwU/kv6GgUQYrJjvBNR4imeINQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkELqaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpbMhAAnKZm7idnZHpKjlHgNnR+TbMnqm+z7LFehAekk0WKmqFAsUmg\r\n5FQ5n+nzvL6/cA1N3jfGbg7N5c+2oW5GOCup7xQM40qGVmryT3sRn9a/vtAj\r\n44vt62Dl3BJ6/80pKTQVntzu5q9sWFzN6KqSAGpCy0/ggMmNd1Hlz/tFqA8v\r\nnrhhpscBOCFZLBw5G9+umxfk+Qwi/R7neAp1vXOHH/+cRzKhMndpeNffTPYw\r\n4QRSMoYM1+UR2Zj+ZtKjPvUgUaNJqnI9NnhLVh9avemi/hpCZ/v30xXkRQEW\r\n3eM3c5AEgX9DQxFv4LAZBruQ0Z9PBB6pypS21Inup6x5jfvziwSUgKHUQka0\r\nID/AsRQawkbqzbogGIpz/EZ94UIxovG3V151OoQYl4JaXH9NfanpWld7Aroo\r\nwBeFKnLVFTi12yrPdh7SJQAvrkGRQxn1t4xcvvT38E/cZxD60DtGYx92wTqf\r\nuAtdeKBzoZcz4A9maXvghjYivtGh0pxLtrcoOM2a+ovBmPy3/KtsY47l3t/D\r\nN6o+DZUBZvQ8eqUdDNY3jsCIMvM42ZVtlOY+oJAJN8l+N8jbxCMEgrzCCz3X\r\nxNIubnABRVdkalrym3N8sKVlkchIBWLT3m+28H8zIexavupnW/4qoYJsR5PX\r\nzPGh0u2eWvk0pOrkZ5VwMiHzalEYwww7x4Y=\r\n=XDz+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"d6277a908d1b60969af6ab4c754ac77bc3421eb4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.906ac2e1b.0_1678817946345_0.03264285849637516","host":"s3://npm-registry-packages"}},"15.0.0-canary.1bd317240.0":{"name":"@material/density","version":"15.0.0-canary.1bd317240.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.1bd317240.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b04c72f728ee673b59c01c6193cfb18247abf343","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.1bd317240.0.tgz","fileCount":10,"integrity":"sha512-FyS3m7OJRZc4jiop5SqSiLSyFUbZmjzziapUPgvwLfqS3uWcezc3rq21OVWU8udrSEwEAt4ZjsVJqJ2i4VnP8A==","signatures":[{"sig":"MEUCIQCGfaBluEaFQXWqsdr3wOybS/E32fFNDkf2oLk00f4biAIgf9mb2SJ6g2CxdDXnzlYsL1Oy+BPi10TOxmxOz0TPLps=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkELt2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqMfhAAi2OVJBR1TZ+cz3Wk5smrJmqJK5cOa59BjoQPBYVQzhI70hxq\r\nqYYFsfe2/md6Pw+3k2NsATNa8wihO1ckjnrHI6uLjwzhZN8G0mHaPsJYaTfv\r\n2BrTRTZmiq+OYc3mPIxsELSbeitBLMs70uWL3FfwWk4teo3aygQ8SQd8aM3/\r\nBFtnG+lILSN51Pa5gYQbvzKXEd4t+t+NieKIX4OiobvqKwHa5o1axsfeIU0X\r\ndR8cwUZYgccaRsN3DPp1bwP0b4674rYLfpJWfnowvuDoCJcrC/h5wIRx7CoW\r\nGmxX8CcftB/DXOdQfVs/2eC3BnbAS6wGwB3RMERtXnJv9m7kGmVE48O41aa2\r\n/PEtFEHDqV8yA57ZGe3niS/LDucOBZBGB3ilB/TMj8N5B/5eYFfB/P86pQ/R\r\nx6Z+hpjvAlhB0uT+blP3xTvDyPHl15OgUm5/hFM9EofScUP4jOozIqBRLgfn\r\n/NziGKL/GxiTmDnwOxadnLvvaeM6uaEkE3pZ84inSlLgCVGyL4ru4dWoT3jD\r\nzn/upZUwXQo43A5XEbH/JUGhBhM9h4papSXepIpbsZLMBMI0/gELfZi/p2/O\r\nq4mIF00dDqgI90czF6ggPdH3yKd60KctT7zlPt5+OvBJe2+C/xnSubiLV2No\r\ndLgmgRmBhUg5Oi8SBIfcjVIaqkgmnB0fYfs=\r\n=wJz5\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"eef3d63106c71dffbe823b04d07e86a84dfd4d42","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.1bd317240.0_1678818166146_0.34224644099015267","host":"s3://npm-registry-packages"}},"15.0.0-canary.d441d2a2a.0":{"name":"@material/density","version":"15.0.0-canary.d441d2a2a.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.d441d2a2a.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0677f733347f2ebb8fe1e18034ba33fbe2004529","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.d441d2a2a.0.tgz","fileCount":10,"integrity":"sha512-xTR6yVQeGGVAROvlKkIaZoecixGfJ94h39zdsZhwbiENsZo4SNN186OpcLPo3sDbZXJ4+TfM+Vgh4tBOPn358Q==","signatures":[{"sig":"MEQCIHoM802DzaML6HYQYIk0uJrnSzM4PC5M92z1Do7Lgc2bAiBukznNYNHuaEj7o/xYcAon9Yq5IFPvpNeEawXfnMiMpw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkELwQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoPvg//dmDfghEI1OnrhEI5icZ6h7kiouX1ndq3EViGn+0NOqMMUiX7\r\nCjqmlZ/zt/C4pZUL8U3ZmYOsYtqkEfGDv9N8J1nku53ll8njfWfOCrg0swwk\r\nRL0+FSt4lv8kPJcMAKRH8tflQYVLI59dibEHrtfVQeH//33y85txw279hdSY\r\njzNIj8gPa19PTPdozxre10AvD07CKHmO2/D3Cdj9KcvIM39Bjl/Gyv4llj2G\r\nHvr37km5yV5CxoMDW6sgHg2+NLzDqce9EfiEldzjcuuntqtTZaDK5WjML3vo\r\nrrAstay/uOcQBeodCi2VMwDF2LNCuwK+XHEBszYxq9tHsH/jw6BfiV2MiXVr\r\npflWY+ePAvbHO4rdR3z1b9SqvpuVIXkldu9dHunlirytoUOiKid6MkSjuvlF\r\n3t8s5RtxnzD7u7xAVbxjHqpz0qAeFpzMdWw73XZpIFPcKXqY73rz4gVsZI24\r\n5wepfHtV8YAID6XNxOLZhB3j4HsCwdRESAOt56WywqV/DF2C9d2tcgAWIu9u\r\nktsQowKg6FiJLAL9xUAVSZiYS3V4t+G35J2EyzektbqdfFQn0MfA9fBfmQMT\r\nNbkVT08hkDB6/i4BYyClDrR35jWyb1eXil01A5tq8fNtRxpPmnKC7SCpOgIB\r\nZXFFFCSa2jUVjTj/PlPwiZ9nW/ybYtVLX1o=\r\n=+ZiB\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"3a1d95c90b2fe34c5c04e44571f94badd66748b2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.d441d2a2a.0_1678818320419_0.39507580433838485","host":"s3://npm-registry-packages"}},"15.0.0-canary.fff4066c6.0":{"name":"@material/density","version":"15.0.0-canary.fff4066c6.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.fff4066c6.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f5d11c8c3df86c821b02d2f25777e85c632c7f74","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.fff4066c6.0.tgz","fileCount":10,"integrity":"sha512-m+anszGkb6dwP/iB+GfoWxhwp9NahzJVRTTgwbYKxvFKrlVQYVI+N405EuxKdE0uNk8tF8dNRYFXpl7Z6nKvHA==","signatures":[{"sig":"MEQCIBKZPsSxOTO+MpJ60yTH6kMP1Fov/ouXNl4VduECqkC/AiB5oTTWVpUSn/sGUxpnBcua33TKODjZx3w6vMVJHOIsaQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkELwwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq2pg//cBsARbxsVHntb5Wz/0R0debPMlbSr33kQ7PKW48rAGHMZ3eU\r\nuZIhNji6bP45OBtvgQYDY47CludkEBWmVYk86/V6F0slAS1Kw1PEkyAYMdxm\r\ndnINy5AA72XbUGwwmezs54nFQiP596aRuU1A19eeRPtTc11Z4u+c4AGU0L3J\r\n6MqurA72mCtnpYK4lcbpulIFAxdap1lsQ37GPnANxX6mqSegKHBeOeukqShJ\r\nGdlmtdtFj9n2mphWuFAqE6bC8x/5rOzjUhiQXmCPJxLpKn2LRmUEeZqAqzKj\r\nJNj7DAPDeVikYcox8WawjskaDC1YLp2KQHrI0OLBNiyIFqXqwiaY4yfFjJ4E\r\nX8CqFLA3mCg09Skvx7UKR7eKVXlJFA6CGhPG+bipATaRWb0ZQVzSgWu1VV+I\r\nBw1u03ux96juAFJH3uy+VNv8CCWF5XiPzuVq+Bu+H8WeQK2BWByocxnRkWG6\r\nIcIl7ImOmjOq1tIH2x5Zd5bV+t2YXlfOmK0M0JsSG7NNkoHpLmIqb/9Y4xpk\r\nE0On2p0IB8XDdd1rDn+ouggGiSuPQF+WHcGvcoFOpvtYuiBTlZ3tNw2/Av6V\r\n/8b5h+p3o/LcgkmYdpQPKKHIszq3wDR21v0DZbgMLPf0ywCBb5Ktsc1gtUnE\r\nhYJSe4OF3Fh3GLDlFwGoen5WJOOJc8EDKK4=\r\n=FUZc\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"9d24b185ab8c87061ad27f4e7791690a12e10135","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.fff4066c6.0_1678818352496_0.7607864334809695","host":"s3://npm-registry-packages"}},"15.0.0-canary.87809c710.0":{"name":"@material/density","version":"15.0.0-canary.87809c710.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.87809c710.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"820711c41266fd80dfd3bab8e065d36797f4835b","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.87809c710.0.tgz","fileCount":10,"integrity":"sha512-Wpkw03Gfz05fktIvMN1VQ6G2Mc60ztGu1tAU0lxEZlz5OoQHCcuodDAK8XzwRPvhC+Mk3ChsHjCWfVthBM6tsg==","signatures":[{"sig":"MEYCIQCW+gTy6DiR9d8V4w1EeDqQYhVwA17gx7psJ3ZQiVBwsQIhAJXQ7y/bg9LEGc4Ufg2YhX3J3yalt76StmruiJL3Ervb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEMAFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrb+Q/8DTLQQlZ6TEfGYjNGaqoZ14D01Ydfav807kPG/nfcGBBc1cKQ\r\nNxjyJrg+m34evgd0k4fKqqfXg3DQmUaCsyEouKk5Xx65UPiOLZGcj0CoNU4D\r\nu8gqXgmjTchno6Y9bomzgdl965V+rGBY8l8h8IAQRIF+RJL1iGKTUP/dM0fo\r\nojGYg1KzcDog+yKX6zj5zBamwlHwIOxvNMrxy19pyAkcl34BOzpMVBNu93Wq\r\nGcsvgQ6/ABaHe8lwfpGpSSQdwwAJ44skDJFwu2pFKGd7CtSl+BmReBC2hrTd\r\n0VUZT+AvqI0jOfBauOC2Z4VHADlrSMhecEPmqhcEOqeacug2UQ6Yg4Mzf5lT\r\n2HsepSGI6qpe5GcAluk/Y/xApc78bxzhRVk22wfczNwXjY+CVVv6KuJgFY6v\r\nkoeKfP9I6oj5EKiQSEU4938d1CnKTs9cUTadCUZ7PdOBhAT0u8ZxobZgv/yg\r\nF12ZaqQ6lTU1VP0EZZP8MIjPX7s7Bicr/HHJ2+1IPS+pRPlk2vez8ps/tGwx\r\nj/i21Uq9BinFamH3z6j1tMer656wZFCK6qIDU0jHS2QsKbSysZZhxKLi3cXv\r\n9ybwnPopvuD09zGlXVqbKej8efXd5XUvjql6nVqcNzSln5f+Hmk0c4YvB25Z\r\nWgYOTTRRfswPen/dEFQFr1HFzqx4I1RM17k=\r\n=5Gy+\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"ac65d4def7491c4e414883c6cab7e075c7374b4e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.87809c710.0_1678819333509_0.5389987827914977","host":"s3://npm-registry-packages"}},"15.0.0-canary.48d30012d.0":{"name":"@material/density","version":"15.0.0-canary.48d30012d.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.48d30012d.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a6d03309cc7f76137392e519609449449261dc3d","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.48d30012d.0.tgz","fileCount":10,"integrity":"sha512-0DDnnvpeVzocwGa5C5Ev3BUz459QnTeeH6+KnePzUx0dXLlWyf46C3lyrzxGzcA47PruJ2F9QfZY/vha//kBsQ==","signatures":[{"sig":"MEUCIDdlzUjq+4kYpDNewfzArAe4qKUg9RJ0CPbLYEPpNxYcAiEA5QLF/crqHB1S7aVJl9WJzkzkhqXh2aBCHkKDEgZMR7I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEMEMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrdPQ//bzhWCZEWXnDUBar8M5kpEEsbMASCHkYICc9lF8mOwXr0tqgf\r\nyhK/uNLz++ijximdyCknDMNUa+rUbwao7oqmvJ7ADXXH5eUY2nRindmzjbuL\r\nP4/zFj6z4PZPa2xDRKxpLryUHGNbVXCOCh4m7qcFWXk3YinsD8btIe6hIVO0\r\ns3EwMaSixSUzYmetw42zcJYAYCpPPcdy7j8wnbTYQahNO27/Bx4CtgV6OQvy\r\n9edtqNOk48DgBQq+9UcOaxc6x+TbSuELRKcRW/om2TtFb1egf1FMj25Cu53k\r\nAkN5uuHWDNbmLtlDyKPfI1ScqpHG/TDwkQicwWo4tBXUpbQG43W5Aou2Q0tl\r\nOSwkLdY/5Cx9y6p9oQOafsQTr5J+guLU+6PLSbtojDq1B82tCscXSJvMRiGd\r\njfT8GWVoDayXC/EXp80XZPEqqQp2VT3+/NKV527g5aSzPX/uzelSbvs4Bx9Z\r\nhsFwB9Mhujwk54fpzceUA/HJ9EnhFkOP0Ezsefy8CKBcWH3KXVDbeIdSRT+r\r\nD6o+pdD7fFdg0QjSM4Gq88gIaiLUGXPAL3VxJBBMpEdMKUDHHllSCYx2pPlp\r\nudXNdR6X13TI4AP0o1Nc0TefDiRSUsO9TZeGc0X5S9u552hvyJf65m07crQF\r\nMP1j0HV321Ob/Ycf9MqAhM50rdeM+7rLsvE=\r\n=56ru\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"f2e4b43d20ea58b52a223d31b8dcd3f813d1babf","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.48d30012d.0_1678819595845_0.9244041406646397","host":"s3://npm-registry-packages"}},"15.0.0-canary.419b23cc6.0":{"name":"@material/density","version":"15.0.0-canary.419b23cc6.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.419b23cc6.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"470a83e999cc0fce293343bc884b2cbf4def2a19","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.419b23cc6.0.tgz","fileCount":10,"integrity":"sha512-138BGUiVxdBiYACro/fLj/r1VBV2GbEDur9mkcH20RXYHG4zMC6ya4I+6dzghLrnU+rmERudoVIlOBVVp+apBQ==","signatures":[{"sig":"MEQCIA1o4/EAuEPbOEdP0eOMor9lpEfSnphTj0CSa7m5XC2WAiBQY5WCFIadaahax8++6gFaIU7LA55FA5rSurjAlcAD0Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEMOTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpKABAAg0NysvmA5FSNasPrX1N2WjMurTziIKoFZv09nPkAt5VzabZl\r\nxSl+qqC5AhUvba5d2XwIOCobP03lvfg4bmzTSxoRVGhA2LMFVN8OT8q8mIfZ\r\nFAllE6aZcTGw4pD0m5jv0ZVx8ZmZGp0bdNaDfbRBPZcfrL34FDVuURHRh85M\r\no3hDHuoc7ozJxWK1xS7esXBtVJOFb1kbh8ZDprLfdb08G4sGTrnsrS81aFFR\r\nG5vbRrJMbuTwEzZKRw9eDZ5nFavzEIr9baqO9gb3JO9MBS16H2vqiLc9rFH8\r\nnd4rlkFTrMT0tW534jxb3zbwz3emjAv9kI+E3FMvAMrvWbt3s3QvuNj9/gyy\r\nC23DmH33NnnV2Cx77A4IilAY0wQcn4Ytxhe8j5y4vjubH+99hzCUk6RkPkdm\r\nbqqLHF+8gq9DcdxWxiSWDX3nPxqSAqL6mxowaf0G2R2HpIP3qMnyHoJM6QW9\r\nIqgPQ3GyECsQf6ggumPBSkbd8t/gk/CybOQjY/p0HX67hVVXwvPGdpBQS2yg\r\ngv69LWa4xsGb556oQ9xW7RZ/bVBZd+4VV6sG7hc0F9HK07k9PFnbVX+gJRQC\r\nASrfGBtV3prK0jjMbM+b+c3LCrvWgv+6KhiFmBjhSAvzC/uv4rttS8OhmV3O\r\npEgr2AamIWuu0waLTGMM8hsAuvTEgkvWrjg=\r\n=Oc/y\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"3b1188210d22a02ba5ae948779bf92655e47aac3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.419b23cc6.0_1678820243006_0.7797366551197842","host":"s3://npm-registry-packages"}},"15.0.0-canary.bf86521f4.0":{"name":"@material/density","version":"15.0.0-canary.bf86521f4.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.bf86521f4.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"58c91c6ccd5eaf909f52d618e6a238af07e02322","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.bf86521f4.0.tgz","fileCount":10,"integrity":"sha512-onGCSIPpvrmduh6z8yh2l2c2lJz1dUWCWM7kRt1jJinfuhEah1pB1zy1CWsrfeJRQi1fkvDYZ/ZumaDP0n8omg==","signatures":[{"sig":"MEUCIQCeD8pPLHDbQXSVqGVsdzT34j0s8DI0HUzUCBazHXPyLAIgXoXbwXaWw+L0Ks/5LMYfTLABnXPTC1dEIigzgy/zP9w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEP9OACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoRrQ/+Ljo4Fvdnxo/yCKtXYe4noteY7rojxUP5lJjHs+Bqx8G0eF9H\r\nacTqjPpklowuDBIlOzGkHaTj8WXPbJsxvx9WYxyxa7Yi0KrnsP74BwEXZ2rb\r\ngnkrs4hSmMeTMSQHDhQT0IepNsEL5C6KqwZX3EYOKMBdyvJ0P3Rr8uVfZTsI\r\nzTasyct9q9WTW0EKf0Pe2PntBD7P0nL8Y5XzE3vC3fNbWmpTETYEk55Nw95W\r\nSzMRTew9Kzb9xXw5LlRGyyRrpgYfmCyVxlaPFY+OOM0YK7B4vpksEkvkSu3w\r\nXg9Vz+W78Ma2t9U2Fm93/N7DJ6M4j5cimccUv5KjSxBBBfnW5JdOvAQ+LKBF\r\nf/cZolt+YyAcdyR/bVw/X2jDMikvUh+2mgnppYWeLBSiMsf2I7FY55xzUmmi\r\nnniCAaMUhNZndE7msWVOoPhqSD2KKnOzPeAVXY4FVvIgqMS4kbRHj1US/8sn\r\nDibAbta5XU7IRVM9K0L/H6anxjoMM9IZq6LZXDOhajtVqTa539fofmy6igBV\r\nXkwIUhBL4bNRaLA3Y3jy8Dsx+hJCz2ECMNpXpXnhkvsVc/pQA2gzxq7uu0Tp\r\n92KddZ6RMHNfxkTKlbYOmatfxgHPHpvBTkyLv9rgAhQcww4QFdeFnkulmlI4\r\n1DNgBXm+pW3u/mtnWMrSsPODoOLEMvb370c=\r\n=V+Ro\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"8f5c1bf1449cde9c918f51bd033762d247655b49","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.bf86521f4.0_1678835534278_0.34769689615399146","host":"s3://npm-registry-packages"}},"15.0.0-canary.11f3d280e.0":{"name":"@material/density","version":"15.0.0-canary.11f3d280e.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.11f3d280e.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"18c6878a137baf72f0de3f3aac1aba14c2f0d2d2","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.11f3d280e.0.tgz","fileCount":10,"integrity":"sha512-RtBABnpBNKxdV3QJQ4I5MEy42b4J4P/LMdDJl94iC5j42me2Ei/kxN7mM0tEyhc+YQpFBiVhm0CGbGUfiVhomw==","signatures":[{"sig":"MEQCIE0IgJ0XMQ7toFsQq38/oUF2g/4AcNME4Osc2/2ifYoDAiASYcNo92Ef4+eekFfhIXIk9PT3eHDx69DfjwuvL3eo5g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEQzeACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp0/g/9FzYeoTXIeut0NviVUKal0t1RBEXP5Au2ijhe0Hy4VManryN3\r\nq/MGTgVpUQB3gBYZVo+/S+ntggsmmk1TIrgi7OIS0yWbyrUtm6+hqr+ZbXpj\r\nxi36tqfBp7qZVDngQCeDDUhbxkjuvSSkB1+eftoAOoNfkKeSn15GfsK+tugo\r\njpBFiLJxY6kghUs2YH5MvFENYWGOr72Pa0lZ7Kkr9KaVhJFGNPCTXyGn0Spb\r\njCadfcygrc45mGEm4B42Ky8sld4nauAfYoN3CZ4F4tEB8gFDQEuONuNFRINL\r\nfeK3kxrUbDTzDbBFVK1+00nK3lF2BJHvrRr+K9xlPBaNzYNN4rtU4w4uDk3C\r\ndWQOio9fAsYPwwe1931SzpJf7KyxNYf+vdXPq7DFWkImRSDfDrRFfNl6PEWC\r\n6NsBH2KrAh5eAbEsBIXvryvpOi774XafV2qPNyXQ/leHiI4c+YaUipPARFwl\r\npgsHiJ6GEby6kPGygy8S8ReUX1+bHrk+DBQbB0QN8PQu/qrurWVKsj1e2fJm\r\nGx/ptEVymKD+FaIButcjbAPE83/Mepwy4BVENLSesMcsPPWtIgNO1mcJoin9\r\nwMNG6wSqDDKr48luWgNbvXTjFULeQbMAkll4dQ0rxZls6rKshM22u0V8C1yw\r\nzn2CjcYb0be08pU0d9SnghbNTB+Xhr2tG6E=\r\n=OsKl\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"8e5a0971e8b535be016fdfe963b22dbcf1353e53","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.11f3d280e.0_1678839005819_0.3923996251247648","host":"s3://npm-registry-packages"}},"15.0.0-canary.b281a409a.0":{"name":"@material/density","version":"15.0.0-canary.b281a409a.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.b281a409a.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"601c2ba4577ce35e6306fd4c1860affe52cacdb9","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.b281a409a.0.tgz","fileCount":10,"integrity":"sha512-s2vzTtVcU+I7S2CDs5tj2JIUFXFqfKVHRalV1+xEWUC34V5p0o99bkh5DG3kfQOyJVYg4ZQ334J1oojdpRQDFQ==","signatures":[{"sig":"MEUCIHU1ZJ+i8TgDKu/ECYmAGIjGVv0ucRbU9wJMTwBwoKEdAiEAtPYmgnDGkAGi+CVOpAMNp+FdCKhZmGuXJz0p/naK27k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkGc+6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqOFg//S5xy/xThs1dEPZ1cGg888+FVqEHnEEER2bd2XiOZXJUZZVOd\r\ntXNRAwroLS13JmI3Ya8Opg4p7yBCJQFbiN0wmonbsLuh2mCdjJVjO/OZ0C2S\r\nknOUXGeLxQmy3RqkWQbiSprU7swORdcoL5sNvbLiSJU+Hkk9mDFjN0ede/6a\r\nDRQntUv5W7X5tB3Ofv05lp19HTX0sMJOq/KrJ0s54DEWJRpGuYfhcSOo5IdM\r\nw1pLEu9ifYSyy9qcS7U2FbJ3aatFUd2kT/H/MXJiiOneUC6df9ZEpgBh1nuc\r\npv+6+ef3OfihL/eoXlOXLFoxHYrcy3GM1JLfKDm4TDsKOwOFPZJgFYG59KIX\r\nQFBPLWXZX5erDSQO7IXYBIemHbP0lqR7kLL1gmgy09BEtjMjoumGpSk7DBmK\r\nC85x1EQH6gzHNuV/z/lgbFQXLdfObUHBmm69GN9/k7/Q49lQdVG+hzMyEfWW\r\nJuT2zWa3fMg3td1O8mV7C+PnUhLZWycS70B86cgN47mtuDT3qxwrvpV+4/KT\r\n37pI252KmZOHcIdJR4aE9hBYNNpIszwY15Kwur+g7+cghuEWXt+L23eKWkOH\r\n8IPEUkUHl3WtyRpq0nDjQi7Y4Rt2tJ8KD7wKNIOBqb73FHentewFnmVgo3u+\r\nkw26XiBgLb0DpAu6W5UpWKK+9iGCd0q1EsU=\r\n=l0WP\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"b924c47aadd36bf60d7c29e466ab3899ae4085d6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.b281a409a.0_1679413178757_0.2824904868287077","host":"s3://npm-registry-packages"}},"15.0.0-canary.39e473690.0":{"name":"@material/density","version":"15.0.0-canary.39e473690.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.39e473690.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c06bc7f894686b9bf151cc711e0ac0fb7c20750d","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.39e473690.0.tgz","fileCount":10,"integrity":"sha512-V80EEEDE5ifvlRO+Q3LtXxTZxxkeeWTaI9riH3xIx+5v5lcJ9cVvTn5q0oQ11zzJoIDoI/opN7mYiSjQgufQXg==","signatures":[{"sig":"MEQCIG7PBaeiRQP42DcGHyYVc37tfEByljzeYGF+LZ8vnzEpAiBAkrhD5E5y0x+9+5wYbqsnZFlcKkimCcmNdZBWYJmjrA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkGe5GACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpj5xAAh/gskdFNfAHAGFri03b8wv807pTjbtWxxQGESJ0K3mW/azpP\r\nyI6X7hc7T+uq4JMFdnI4kbfNeD5q6nB6gSm6eWArF/4IjoF2S1jhICwQL+x3\r\n/tHD0asMkTcyBVhRMMNw+GR1LY/JGF5lBm/5ExJW8tlYwnOxwjd0II752WFp\r\n2yHpXDc9it4lko+bb6iOz4v5N5zlUn4tM6EV2tsxRldicQgUpml65SS1lHMW\r\n7TgkLR8oFC+qyRqI7O+thsxaNynX4Os4ygvx3NlarKbgm6cDrIIhKlBatB4d\r\nKdxVDh9ye9EdqbxDhpJziQcySDbsuqs0N2H1FDwLXux5zFJpfT4xFVVDgxCC\r\nLj6bvoyYE/mOJd9gZnSqPfAeoLsO8ewGIP/feGGaJ2/jI+CC8ZijbwY87Dg3\r\nReY4f0A9YywhCF4dHbneYYbW7ncRAoFqHfr7B01nnydLofYBkYBtSz0cG2Jj\r\nPr0eZQbGcx5W6RZZf2JSqi/1oWPngjl/GMEtZX2jfaQNdpfJF1KZSIMQYZRw\r\ntGhXD4bEu6zyWP6Srev13tqz2I0R4C5UhaIB8T1TM7ZxFOkIemP7I+8Sqs0d\r\neql3cdvoCJ873EKwQ8twpFiZVqlInj3E0BliBhWwyL1ZR/3gKTnJ2Gm8SRVg\r\nDe2XQzBIYSOSlq1H8eznB86gC4yCZ5pA/F8=\r\n=WzN7\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"2d372eedef7c583c60aff8d4cd51f8de971cb93d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.39e473690.0_1679420998743_0.546070295681274","host":"s3://npm-registry-packages"}},"15.0.0-canary.cedffb44c.0":{"name":"@material/density","version":"15.0.0-canary.cedffb44c.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.cedffb44c.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"93f6c7c0399d60a6bc8c54ba61f939cffc8cc9bb","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.cedffb44c.0.tgz","fileCount":10,"integrity":"sha512-5bLvZSC6fUz2oYjDI9wzoWq3h4phDFPTNP20EdMPVxBrtUlcHKI+6F7C3sLxhv9NOSuKTE3jKJh64xDzpm7NCQ==","signatures":[{"sig":"MEUCIF/340K6szFIJSYOz/FaODtTaywH69NMx6t74BcxyHwrAiEAp22JjFwbZ4t9cq+0/X5vv/7QoSrxChNay2bXFAdyIp8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkGe/oACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmprTQ/7BL0YShDlrSPLUhe2uXBYBmVZtiGJVsQ5A8VtL8KRULzvL5oO\r\n6ZnSIU0weUAD7IgatI9lmkD8XLi8WST6ZwCSYEUn3Dh5u0ZYk/ebSgTm6Mv5\r\nBdR40UlfEuWplbJJzcS3VPxb6kgXANlNakB8o8F6N2lF8lYK9S9ouaFVceQM\r\nPrclgtQjgQlHoB79w5jD5k9twe1pBioQyJMEfkOL5NGywv5qt+0eys6n7Zyq\r\nnUhuKFOjL4rZJD/LRJnuPFW0JPkiF0xFVCnOcekjoVRFF066wL6/QQrkns+x\r\nT6WbE2a4GcZfOTQsGqCaxta8CLvubSrr91wi8Fkp9VeUukW9z14KwWPmiLUC\r\nL+NH1+C8mZRfu6rPjNUeiRtJai2ytj/UwaAnAFu0xXVyfZUQpgFPt0dY3u33\r\nP2ILrhneJKH0q8xgtxL/crja7Df5nr5X1Q2i1jupvxCHz8gm7oP7/kX6eQCO\r\nXvVMDaalKbtPQoQVPgVTuE6/93PeCl3/jClX8G9CQkguVQh3N07+S0iYSOrd\r\nICsdQQm7s5y8uZdAaWX9nf6/RVbGEYNcCYVXatRYKNwhtbKLU4bA3yNdhgpi\r\nSotPxDzpgRuKW7xwUz5eQQj/sgEHq+uav1UR12LDNFNqqyK0hvjEqQNBDRfh\r\naNa/y1T+th1lcxN9NafqQ+OFoYlM6J+rcZs=\r\n=hYOg\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"37783644942291b0c5d41f7499a79b5f61bfcbfa","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.cedffb44c.0_1679421415954_0.9727886005928512","host":"s3://npm-registry-packages"}},"15.0.0-canary.36a4cba99.0":{"name":"@material/density","version":"15.0.0-canary.36a4cba99.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.36a4cba99.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4faa3fa7ff32a75a4f08645c52dc431efca725bd","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.36a4cba99.0.tgz","fileCount":10,"integrity":"sha512-5ttwGyWugvzRyKZ++rEZlVrpYxGqAM3wfi95cht5fYpBRAViA5iHKD+Qc6PJ77544Wt0Kx7wnLbuG+tvKO8AqA==","signatures":[{"sig":"MEQCIHhts3i24kR0igNjOoxgOeWRtxTpY6Eqvnu83bKMsdl5AiAf7Ct66wu2q/gvBa2jasNZgcX9Dd8Bs/DMyHAEH1o6ig==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkIyiDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrkKA/+Omk2hawXN//YouHk6fZsUxwE2un7IMrXzVxBuZehw2gAuswP\r\nUYPn8zwtw55dN9pC2B5Kq4q/Aq2URgFgqYxeuWgoohXP61Pf05BQhcUwXT71\r\nXapxXMwMmakMlczfW/rFThe3C+y3G8CoMTxfdQZgHSLwf9mvnNEhAXT0ez5q\r\nWfWKCB7GCwmhXsLP3gU+n4903etWXyMRnrqonCirb/6+XGQfgjW5Yt6jJI04\r\nOCBxHeLO/05MCMLFw3lHQuvVFPIQJKa9jjEOu3qMZJiqveMjszQI1xjuUAO3\r\nOVcfd2Nl8ezRJXzr2cYd50wiM4Bl8v65gZ7Tf2/I6lLp8V7Xgte9eMYJKpv6\r\n7VJgVKU+LzZ3Vb/sDOwRvnAUEUNr9t6Fjx057g0OdbtgdgT7ivCg82wqy4Ri\r\n4NdbPXl4kmket9Lvi8K/y60PwjfaHzSvkDSQJzA3Ubb5VVQY+bcDNYLN44DZ\r\nDVVbbBAtoJumQwNLnPp6y1aGjKkWpvLY/U7G1oJcJ+9a2WdnC5A57pHynQXy\r\n6MYFrQ6IJjDgJ1qBkqd4LRmEEgf1voFpN/DpG6mMEiiTYvCo/1aaB+yxtg+d\r\nwbJk22Cl/MTx1gx376dqd9i9LX/SZDjTQxxM/0qfk5wCYQbHIf/1+HbSgRAW\r\nasbJiobKyCojqjacyCFO9TLcvAfsQhB1x/E=\r\n=OGBl\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"9895102e50a9e7eda73e0b0039246bc56c79a7bf","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.36a4cba99.0_1680025730888_0.7200897653542784","host":"s3://npm-registry-packages"}},"15.0.0-canary.ed7e82ded.0":{"name":"@material/density","version":"15.0.0-canary.ed7e82ded.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.ed7e82ded.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cda41133383266c94945fc9cd812c00d9d099d7e","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.ed7e82ded.0.tgz","fileCount":10,"integrity":"sha512-qaypHhiw7FsXHkkQfxcZM1J/9QB4YxH+ZpvTIi1/gpfR6U75JTjjIYBNzExQ+iJE+k2aDFAD2tBF90+Lo28+FA==","signatures":[{"sig":"MEUCIQCgBurL26n+72JmNlcbuuzOeCoxttoBlWEG+p3ULZmFgwIgc9oXY4XR93IsOW3pibLsHvWa5qhZjizbJ5c5HP7RevE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkI08SACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmohng//X1nGEtXLctlkgxNhTY1VrFBzlnT4QtJ9U7CD+QT4Xb0WyW1m\r\nVxNDTW7HZxEmxLd2U6+E1holAH3ky+diHi3TbhC5NPI2CJZruRfkweyLo8p0\r\njPgK2gqloEEPKxIrrx6F2ZRc6j1WoOEejwG6UvoMoRSiskR6f7UyChFCtAtL\r\nBwN5M96pQbexnY/JkT2ESwC0v/hQQrtTekUT45nvii8aKvZNiOHDPF3yZHvr\r\n1G6WptfoXWEg+La2EOIWVUpekboWhLiMebGiObjxfUpGHIa1palE2Q/Ou7Q4\r\n7GYdOQpWga4kDqM6ItHc/Enl5BP59NdWxmP1goM3/qzQEvxn+8e7QqczXPTb\r\njqmU7w9tn/XpiXQc6RprvmFeeSVZZUDUFrx5iImK8CdQWM6NMFsjnbKMHG0W\r\n2JZ9BdlQEfbcqYkauod/MgZZBMmJnONk3qoJTChJ8KJyyIUFAE8w+2i+17bJ\r\na+7RKn6QbNcBWBcZswvuc0BsnbOkMxESbLvRv1YUROnDGwBU7ddqWn3sgeGf\r\nXI1Dcpdwwj5YfbxCI6Fo5poR4uEvHQD9ZevU+EFHLmKZe7TfHsZNU3RDqI7s\r\nj1SV16LIyZa9xSN/iZ8L+Neg1w4NcXI8+CGvY+TwEKHjFGjIOsB1YyoVfQyW\r\naOpIvECxjo7snqDWE9Eu7nW4ZXk4+ppUdFo=\r\n=KOK8\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"037c17ed14cf732acefb4bf7cb0a6c61f643b991","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.ed7e82ded.0_1680035601874_0.0930658373617268","host":"s3://npm-registry-packages"}},"15.0.0-canary.55093ee1e.0":{"name":"@material/density","version":"15.0.0-canary.55093ee1e.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.55093ee1e.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"32fb928fd78bfc09d5e28c5841ac76d26c7d0fdf","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.55093ee1e.0.tgz","fileCount":10,"integrity":"sha512-LcYOrCo0OYKx+9kbHknOA9+bKlB1jZ5LgqqDaw+zPZgwDT/cas7jXiIdnowHa4V+xAtrJx529R/dkt/YSi4ptw==","signatures":[{"sig":"MEUCIAtuts7WjC3eTY8lLMBeZSPq4dtbdV/iZKztUQAjhFhXAiEAyDjxQlhyC2tTer6qCjEN8xzWtntgsHXWrlbexxnbeC4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkJIcEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqgdA/9FJPqc/cTwX1SQl6sPg/lLUMOmAqkalYObGJoGDBer0eIPWhF\r\nHSaLNZ9Y7oXw3n+vDLXzLiKuvAdjfYmEW3BJ8DxgPJLoOJaiyra05s8tR3VN\r\nzpgPp3DraQ0DIsTlyYZhSZmWsiDLJF0LEt+Ybm2/DI7oL02prVNNqPiE6nHg\r\n6+IT0hIbQvz1nEstpVzs9g4H92mIpdxQDdxlP5eZpSKhvhXlql35cSIN09Hx\r\nmvHoSU81bhZjJ1kSg1kjd7g38lGnG7+NosbHV0LM+R3vsUpyRqzVBRQ1UutP\r\nKzW+JlmmZaaVTua2kUGO+vVMYUFbLK34ZRz2BUrfghL1YZvabZnYAkxTJyPv\r\napLuEbwRCQTzfE2WCCWKLaOu6H17MkxZECb1tHt0HtARXPBu0XQvpl57WWzb\r\nRVRiwPVIduCR95RVKRqFQwOsmAivjvVNuB8TdxgFTryAb4XJJ/SVsFQHGccu\r\n7iRRRBa2WEXdwrMQFOGY9bAhoMptfuZN8byW2fXCuAT1v228ocbMuhD3s3r1\r\nXblkPg6E0P2SFoZWOoTpf8Hr/W8zO9qpBUy1pexxw4cFxqepzCW8rD15yPlD\r\nj9w91cyZl6ZWdWTOpSB7bmeLbp1wgFyK6zH3ie0AuIbgsrKLLhWFsu7vZXkZ\r\nk3SZGtjfYpKwimYXqBLtL46+kb0J4QUeZsM=\r\n=Rnhc\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"98de61151738b5091fc2b0e261c18efce05e87b8","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.55093ee1e.0_1680115460015_0.03532955402061022","host":"s3://npm-registry-packages"}},"15.0.0-canary.0c53abc81.0":{"name":"@material/density","version":"15.0.0-canary.0c53abc81.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.0c53abc81.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f378cdbf83dae76ca8d336ba885e01251d5de89e","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.0c53abc81.0.tgz","fileCount":10,"integrity":"sha512-Yt9ykbT9uAOX0i2wHnU3t9P6Evfcc95Ldke217uhCijxQCzsmiq3ywI/XWsCx3AROxWDbcJhLDl2FWw3VwFp/w==","signatures":[{"sig":"MEYCIQCOoVlrC4YshPq/aHno7I+vLzNzttrNYF+BWW5g0950vgIhAOiEx9AbWRRrSIAIimTvpyoblva+YTAqa+gq5jisUvP+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkL3RxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoxlA//TEpi9pOmByQa45E075f8t9QbOvmiuhUjCk+o4yVhWROhV7ku\r\n0FrmCFd6A9ft+0N6hur8OycT4pGPpvbccLaEmBDWk39f4WG4R0V58/sNHi1+\r\nFDS58v7CeU45MUryXaUlqfVSYeESR+G/wQuM4dlfUbMpm37v/Ovn5Qjrux+P\r\nqQEdy+tI0aQZK5ApSgbCMeK8fUZwHIqxtmdCywhiR2VyTuK8O02DVMpo0mdm\r\n/2143qTyRE7optCRtriza9Kf1TZr6GK456SP8RKw/3IVzxwrW70FCGcvNji9\r\nY70jvSKLjeVJLpycGWltLf3+zJ1nOpjQo45+wap6XjOW+MhtcMzXmsHcRUCQ\r\n6H+B1sEXjrC/2KMvL19iY5Hn4jvrVZSV/BJZvkmvyS4c+lpm0qfgmpmpIxug\r\nntxTVct77g6shg539KXFTJv/GTt1CxVoinfrTfNwQBZohy6f0Q5unVrH09Qx\r\nBI9yflkCj6YfaTi66z5RkienraKRaT9b10ZiG9xNTWjMkxKZl00bzcD8K/7e\r\noLXEpdA98zCiTIEeBnVSeEYZj/eqPvuwRcFNVIFwA2IsgMq+91gY2g0W5aCq\r\nV/Ig0msy/GB5L5Q/bnDz0M6JSPS7Vgvqu3ZwuDLl2ZiYxzKjMnf+FU3cnfAR\r\nyJDAL2VQ8SyxZtLLiChLwcw5D+fw8bEmtrk=\r\n=DwUO\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"6f7be5b2317c28dc06c5b0bf4a8cd44df591750d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.0c53abc81.0_1680831600845_0.8675585455068964","host":"s3://npm-registry-packages"}},"15.0.0-canary.51311e69e.0":{"name":"@material/density","version":"15.0.0-canary.51311e69e.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.51311e69e.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"47831a4891da0847c536a317d44dd481e7c82ff4","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.51311e69e.0.tgz","fileCount":10,"integrity":"sha512-CNglJlDNT8HBmpJI5PbOZBl13DGTfRYw4vwh4wcGvxi+518q95dqip7h57Ey00IbTlrfiMwdOI7DTuS8LXqVPA==","signatures":[{"sig":"MEQCIG+cjXnNGSQXH/6KokO/k62bqVWNyTyEvvipSYCyZ8XPAiB096M2exWGqOazBX/NNFPith6rq85N7P3sKi2hdaIVQQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkMFuuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpEtg/9Hovo+AVAkJnRkuokI+vSLb/19Yf300hzmzY3fRYeIJpkR5vR\r\nHDBrnF/QsN/WU33kNWn8+t/K5VGMYyu1LoMLNAYJKSNbnb1XMlWN9uQ6WuOR\r\nWrZxLeAM+IVuodnVCcTVNg80vXop35Ksm3d5izZZD9alJfL4YY5mT88JQoW5\r\n6JHymyyRL1gnmUjfBmjf1Oee1K+Qg5lGe/AzfM3FA08lRD0+XdO9SpDYFbQR\r\nijjTCnULTIZnGOX3YtlLm+q7O1OVASfW4TuI/57FDyCY0qTTXhKwpPEYOx+1\r\nBmUrOrTwGoaW+oy1VcQLkZhuNvQeno79wdFMgQzWeHAtgZUXqJuDpsc572Jx\r\nLUKT+gDPGj5OAwXKHNH3HtLUnITE+i0tq32QCJ2TP05GN5bJIfpWtsUJ0vCz\r\nmtRCyaEAJvL3xq0Dq0KhhHPM93luCYQroSWaxR7oNZTl2piBqgTZPfmBd8tu\r\nlRQziFXCPpJnrdO2jt46n1/XlJGwTYiIZsSZ8gaobu9TJGU5QgoJPoQqA+m8\r\nLHswDy+ljF7P1uZyMQ9z0w5otvdAyaUvAzETWddiYc6T5X9AACdy8aqqEF/P\r\nZJR3Jfrm2IYmp4UdJnj0teazp2bgSdUEzVgqzqRkQgCQj/Mzu4oYRoOji41B\r\nGZmH4FTTElk8lzg/5LX58un59AGQh8tRnbk=\r\n=hrcC\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"20cdc4f9c3bc9046fb111c8b65ba3e9609585dce","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.51311e69e.0_1680890798532_0.5871756432281183","host":"s3://npm-registry-packages"}},"15.0.0-canary.113b1a38e.0":{"name":"@material/density","version":"15.0.0-canary.113b1a38e.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.113b1a38e.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c6364bc7c192af1018447c906aeaac09be9fc222","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.113b1a38e.0.tgz","fileCount":10,"integrity":"sha512-OJMNH8t+ipiGyPB/ux8wzXv6Ht/tJVtS24AV181eINSgN4oW4SX2Ijq4pLUOTxDw1x5mqc6LIFNEWGhnQ/gQKA==","signatures":[{"sig":"MEUCIBxohtJHMiI2loCAtXTyCq5tGzN2sQ0e9coDFNYnPxfoAiEAzQV61xYC9lAD5KSlZoZU5vJmmD3oLXYJrv8ulFHZIuE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkNIUiACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr7lBAAgaSY7ULRbbx5DZESGoLAmm/YApOrb/x8aysk7iWCMH7BgbYM\r\nnMiQ0ucqjXzUHE3isezc4t42QVCi/abCI3i1HbdYqY7cA+kstql7LJGM8TR+\r\n+4/uC5uSLYPIIuhRWqFBTP8XHB+llc/dQCAsP1IY7JJMi2rVYPQkG5+GqwZU\r\nbLQzmjwqg5uo3HJNe+HcvRgAhvnC4qcXDWu3pdgiNjDNZTStjTkAcV8TMOPb\r\nxN20y02XwwCAqjgr9vZfPb280dGu65EckixClQWuC+TCq3oK3XT3AeiZ4Zah\r\nXPTcGl1cddZrkVYrTxeUAHvQAyPP8vNqObInikM2XeZkg3BIUlSAiKtBRdde\r\nlIpjJMcNiqxWEvyUfVORWZwaJULDFiLbqQsX6tBn8GJfrhbertRZt694JGy/\r\nR+8Si59lkG0cTVLXlDpYfokYJf6zKrOvYzOlsnUgr/uVccvt6G+bjQICjcss\r\nEG6r3ImHfTpeK0EtqlIV99e68/6zWL+nYwPmK1TxExqjOpFr/qezHM4wmLZU\r\nFX2oTgVrW3WUN3Pa1mfkGdLt/YMmHIAs69aTvzOwC1uQSKltVcsWC44+Lxc1\r\nH9ekhgudgGg3JEcWY/LvR4YND+5/M7sJt7ZhHT0M73GHxYb7Cmo83mMJbaHk\r\n+lOsPeJJKnJUXxPy/+hEsaP9NajWj6mQ2Lo=\r\n=5I04\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"3613349b6481f716239e1a73c710c0d5fe44df72","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.113b1a38e.0_1681163554538_0.9823494626955678","host":"s3://npm-registry-packages"}},"15.0.0-canary.ea2191426.0":{"name":"@material/density","version":"15.0.0-canary.ea2191426.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.ea2191426.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9546d1e80c0ccf77129013a1964457c23cbd39d2","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.ea2191426.0.tgz","fileCount":10,"integrity":"sha512-e9W+4RSMQ0hV1x9hfnruitQqH6BVmGHEqwxWf2xGSromlrOZRYS24vL4X+/5sIDcMyzO1dCUtoYTWrUkrBjsxg==","signatures":[{"sig":"MEYCIQC5nvj4jjpHx3Y903nD6T3oNHl8jgBuiT2Cuv9P+T2RGgIhANLMp4ob+wDFt/G5ohqln43YWMYtLpVeFi6aYEOgTkiP","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkNdcUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpblRAAh17oGORdjfi82t7+Q5uJOeExaNnuJna0vB5Dww3uRWZ/4DEI\r\nXXGaKi3nNA5q2ZBa8H9fWYRM+jlXayCtbbyzGW09zRi+BZtxtBa67P+RqLoF\r\nxkT70DxXT13fuGlDIXwQdlS4E3cv8TnrINhX2fMbbNz9nw8FXnSJ8TNyzgQN\r\nUld/9UEwk2DAg+WPC8J/ZJmB4y+/v5Nn1p6yzqKvZC9T1+WmjbPw1TcofXGg\r\n/xAlCs7ic/eyz1DMRuJd2V/RrC8VWWMW1jH75F39U8EWoli11T1xhExVUIC8\r\ncV4oPy44tUME6TRrvxegBuEoyhbOaFpElUOrHAJ1MU0+Cm4Y8TLteEBz0ONJ\r\nwabhjZynS7L4TxQ/ynBl6KBKsOG2NT2fNPaSAuiyKNo8oUcgMWT+o7IGlg7+\r\nOhoTFGAJGSwWB4qsfETf6FTlI/tInXZ+ue4hkDPJCcFYYgm4Q3aPBNFdXeuI\r\n6l/l4MRcR2AkeCsCUV1+pw2UXhar4ovpHAyMrwvwzQ2UYAPJ/T8AkbkBCzaA\r\ne7LCgAX0dpgWp78+zYthw84l7sTrYpbvst0St3HxoPui+GT+uK8bvvNCvdfv\r\ntJ8Ap0jh1rx9llGSGTWNgCNtFEO4zoLl1eOIiZaXIeJ7w0soQaa6xqFWWnSW\r\nSZd23vaezFLNIeKzqqvN6/ZmmeLMtJYuefs=\r\n=cyqY\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"8723a8c5fa13530d57b1651464ec28e9ed1d4bb2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.ea2191426.0_1681250068097_0.8964079266196576","host":"s3://npm-registry-packages"}},"15.0.0-canary.5a5c38538.0":{"name":"@material/density","version":"15.0.0-canary.5a5c38538.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.5a5c38538.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1f30bde3094023566224d89ccd8e179dd7c03496","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.5a5c38538.0.tgz","fileCount":10,"integrity":"sha512-iTRTlbcHZMaHd0PmU3L1tOVtwXmtm9RldQRF28JQJpZA4kpm3swrW+cTAaAl5rt4D5Op33Wswl+wevhUVqhKjA==","signatures":[{"sig":"MEQCIG/c7s0565Qc/KmgKioy8ELzIZNY55IGoy7MG70Auxx3AiAz50Nvlie1WHNeNarfqTd8vESNJZWqydSiePmIJ/xwRg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkNd83ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmroMg/9HBSw4juqCpquPRNLVFM2t0XI/zbovP64gm56WfkpPmdCBjxs\r\n0V6C9NMz2sAO4b5wz55FYwsTkn9gSu5CwbALnqKaTMF2YFsOnXJ2QdAxlXXo\r\n3dMr2lg1Qia0AzLHCpoF6uGZOhjx8+ah1g7vxTFm4QBAa+zRP4GZQVfl+8V3\r\n7sW1AcJGPpoJH8Nro0NEXhRKEvMNUJW8k66+JsvIuJ4PfDYI8mTEtp66Dc4Z\r\ng7jfaj+vCDQesZfnxws3Rl+A5X2nk4LEmDmP5k018tQEt6VrVJMsPF7TjHF/\r\nRAe/qmfCacghQNEK6UoyYn2QhyNrMWXfZ6MwZ9r8RfTBhCIbjuW26Wql2jOJ\r\nHlp3xrM2qMCARTFc7Hj6X8EPUun24e5bkJCYXot/gzyE/XoWJWYaNa2pnp5m\r\noyCP9D8+LW0Q8lhTMnwlW1OUILns1Im0IPBkNAwUSXXHwzDtdGsWsG3NmbkQ\r\np/UlEQzhUx65f6IhJ3DwQx2DC8cVbJ2zqh7jDa1gQAn36cUKA6xuR12l8Tq8\r\nQtHmPEuEPtxdhGhlbHLMlADoErjXkgLqYaDLm0GUAnaI4su3faMyQQEkiqSP\r\n5pn3x+yx4YhO2IiCxSHt1NtUNYW+ocKvjd2DyFIWi8qNBjTdOt/FXiOsBPBC\r\nCbG2QvUSBdt6rBPuUWTGm8wnV4NUsbl2QT4=\r\n=DDxY\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"b05f00c0040fd0d1250297d4fa4236a5b6b00b9a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.5a5c38538.0_1681252151489_0.4725404367825996","host":"s3://npm-registry-packages"}},"15.0.0-canary.e4b5ea7eb.0":{"name":"@material/density","version":"15.0.0-canary.e4b5ea7eb.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.e4b5ea7eb.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ab6ce2627cd8ea7b08a72c4791dd2dccffae7557","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.e4b5ea7eb.0.tgz","fileCount":10,"integrity":"sha512-rpap3AMFcUOgMYbZi/cJWF3NYYvQMqV0eXJ4MihGnrmPNrEC8estAjbViP8pFTtgzXxRdXqKoq3FQt6h8Do7ZQ==","signatures":[{"sig":"MEYCIQCZ6mW8+A9d0ETeK9sZFUngNJ27GAjl+uVADAmOvOjInAIhAJ/7AzCpPHEh6lbYcJGDJ0WBJyd8G6s94SCDKUOmDFm2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkNeccACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmou5w//a983WeJtgTCDUZBCMfnY3WzKW4Iy9q3evZcHvDVkhqyyvHcm\r\nM+hip2Zq80iOVyEAwRWdGsfxqCfTFtNvoqMowAGKnAmZLBBICNIR81zbiAob\r\nWOLS2qqfmJK7DQHEEnC4WbKoxTFAlshbHS46NGS5vBE56az6/3AYWkdyeYnb\r\nyG/1cV+S9ae4c4EVaLkC4MI2Qu/YCPAlzcVZWb3hHfzoX6nB8hcXc3WUpn5n\r\nM/T49sru2wvLJZbQsDocxkmrWLRF5+R2J1fH9Tmxqk3xaYpAP19PpP1RipSp\r\nxiQlGICRUdJRdHnl+opJ2HjyGek3tSz+IWZYJOFPvCNudC07+FYBpRF+S7Lf\r\nIulZrqFML6My0aI/o6GB4vNfkS57QVzhl+D/DVj3Gf3rR2J79Etedm9ZJPMe\r\nFFsQd5qUhT1R/tOP6M72Es2udh1UweF7Q4sIsWnzfrJbGOy8wMgytztnr4Ga\r\nOeckkUabNnB7PA3fEmqL0wy58cRDaRgTT9k0WwpaIxvrwX7wDRIzO1eO1P9e\r\n5icj1biTeMMd84k8hMF8FwmLPyI01MGDtieyGquOOuKgcapidU3K4y2/Hncu\r\n+tit3fp7VaRBBxXzk25/yJM/E9MBvjhEG/xvFWl0K+VXTv54JY0EEJfCOfL9\r\nsEpI5sSBHDEksDpKDNWUaOln7ubgdhIi5nA=\r\n=FHyN\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"cfe1a97277f39a7f96340673857504470245556e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.e4b5ea7eb.0_1681254172028_0.7064517652457598","host":"s3://npm-registry-packages"}},"15.0.0-canary.a094dd9c1.0":{"name":"@material/density","version":"15.0.0-canary.a094dd9c1.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.a094dd9c1.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d426999c20d7231b1d509ba1f796b60c5d13a793","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.a094dd9c1.0.tgz","fileCount":10,"integrity":"sha512-dvAPL4TWnASDf578c0+YYt8wHLKUbCVa9gr8wBdF/tpRNwuWnI5mSMAiS1BZjVp0LcMaE4Vh28zljVNUo8ip7A==","signatures":[{"sig":"MEQCICcvgW9ckAJD8qk+uI8Vhi974+b6OdUnlgtLscW7G0vbAiAD5sPBRHSBtpSHkwKJuUm4+JCuxcgg2kq3KoDnazXGZA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkOdaJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo7uw/+MIjDVngV5jDAXbnHngDACf/MCda7lD7mdxhsM/7FMl6SfeZB\r\nvPULqD/GdNACiZK28GiIBL+uphrUD+BomofiuvszAqbIuE0YpOcmrbFWng1/\r\nh+y3oBPxzpH/v5ilRXrO5wIkCbjG1EWcnetBUXbAFxlCSEcQcra7M9uG0P0I\r\nOZf4M2qldR2d+YYzN4JNCPpTT+QE4hvGuruCoo+xxmCCcg6jyh4ZRUGCDKHd\r\nJQpLAm1WTFoElfMtwbKKbzLrc0GzerZL1t/5KUfeOvUNVMuW1BdV0eC70ZXW\r\nr/QgD+3OpX5GbVn65PECm0DdodOE9BFCDVS2wuYOlwbxvjhNLIgSNdW0B/AZ\r\nTLgqkDj+yE3YuGPi778slt77cij54Zp8J6fGabsI7BlYvJhaOKFXA3RQtBkp\r\nTwXFP50ztRsyEbgZsNIpv1+//rudAvSLFVAuweCEZNs9GY/zf9mj1zf9SO7f\r\n3t/85YEznI3YIPE4qwupKM3mMF4uyc0G6U3UM1LenRn1ukt300of9Dmh8U0c\r\nd5+3+M14HqDFZ422+nQgtdaVn8L9cTiZomvEUCo4AdDm9K8JCU39d3ZaM3a7\r\nujfb530C1tDYqpfiVEJljpeeqRSHJKnl0jm+qE/Iccpu1kVn1s10b6UpsC2I\r\nVBvkxP1Nc9VZmzpT/z071MHt1/Idc+m+How=\r\n=TUgQ\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"aa5164e66f4afe6547ceeadc8a793bb4f489ff5f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.a094dd9c1.0_1681512073821_0.8002532551097958","host":"s3://npm-registry-packages"}},"15.0.0-canary.f771b091c.0":{"name":"@material/density","version":"15.0.0-canary.f771b091c.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.f771b091c.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ad3271df2cb3151b7a82bdd7968237dc58fe1c37","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.f771b091c.0.tgz","fileCount":10,"integrity":"sha512-h9KrstByf/D1MG0RA6nh7Gihj9X6dQ5g/SFnDWkBZZWa+9/Y4i9KdXU2O95CNSdyVPYna4Q0cdpasRCgoqjsBg==","signatures":[{"sig":"MEYCIQCzyf3dQc/XSBZ8QHZGs4K2b6czSYDMrvuU6jg34aRjLQIhAJoyJPkQwtzr5eOYEh7aTxdBx8tecLY0yYcIHgFi0yhX","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkPWeLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqing//ZCvBlOr2D19dQ2AFGtvnxHhW/WpCBEig6Tg4cWlhQMCVpCDz\r\nDVJvBK02HNk1q//wSlcGdMDmmXw/AqA/Linl6lvzQDgyGva1WPOEH4ugcEYM\r\nUA2zyKHqFuNLLQp2zLyU4KqPjRpOQYU3iJFIe/pm6ms1YM2R0wdKOhhTW6HZ\r\naazCX7DAdUflmtS5yTrTubtA/2M9v4HzLS1YOhT4SIf68C4xdGNwo5eUd/nP\r\n+aNZKeB1jZZg433S41hzSzR17uu0UIlbAvzc/SMsn147PlNNF5bEBdvXcgbF\r\nGRWZvFnfYFZK3WTQBMI650Bcc9A03lmE/hI/iigtvlCgBKOwT39pvkkpVUGp\r\nl7DybWaTSiAO8E59J8nME2NDNhA4SkIjC3mwVXZ8IvEAlaZ0WJgZQGMh7rcz\r\nql83meBK4Y1yL6sqdg5nNopmifRM7oae3aXehED6+9EkwiprRUtpISDKvo6c\r\n04MX6X5uZ1yz5jbigG+34c8oJH6FIPcQvLGWyZd4ffsQfPUK4GclKKFvWrjJ\r\nu/8RpoghurtG5GY4N5uhuy7TXmjjpc9U9QK3HCYY7RjSnWqbI+qScHlUGtgJ\r\nGmeJ05waZAlmiZDIb+GWxxRGUDO1xZypchra5n6JxKxx+YnJyalJHi/pHKgE\r\nT5ClRswKzVmHDQP+65njx25e+zvwHGOWufM=\r\n=OD6l\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"de0e292c8ebcab887041fc4a59b3c0172f4d4310","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.f771b091c.0_1681745803632_0.5600676143956689","host":"s3://npm-registry-packages"}},"15.0.0-canary.79b1b612b.0":{"name":"@material/density","version":"15.0.0-canary.79b1b612b.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.79b1b612b.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5ac9247b3b24007d8b99526c70a5f9471212e19c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.79b1b612b.0.tgz","fileCount":10,"integrity":"sha512-fAy29raS2u4KqmxnCR2nT42RTkRsuvGXGB95BYOM+tgM6r7G+cc6zisZzAP8NQ3O0Q5ISQhQ+m63gBGQ57kEiw==","signatures":[{"sig":"MEUCIEZXI0HDJKvgaXQtFjpYDXlVNTPqcWHiHb6ol8KlUCvAAiEAw03exZfwuRueVvsOfDzsBsUQ1mGJaBbnxubA7rsLpyE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkQHuHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqo+hAAlt3s0E+xKFeuSmKS7Geb/NJ8cl5myFBpBvkm10mQoDxU4B2O\r\nLd2zbjxUF6L+xs2pM1VkyzOUaoxSjuDb68/Z0/IaztbXFkkHmba0XiZhcFIO\r\n051SdWpuZRvJIPcEZ53LE9+x/GIRnEs9ONyCGDyYV/DsXYgIh1v/ed6mULVF\r\n6Ai+e6oKbiLkyQ92SaAIFiNm9hCqBxnzCvxJQEed+Rtl5Wbi3oFs+Sm8MwOx\r\nzpgKAEAbNy5i3gkCb9WVr3KBbcixoA1W2j8j+ioJ9S8cO49co0z7jgvhXAmO\r\nQeoF95nQR1VbhSh6qdYA1YLgLpanBzH0aMBz6zGkvM0RnOMdX5+W96tsNhR+\r\nlvoUAQotoVU347k6qo9kDCEhVlqio/5wwiShLtd8uWOMoRVmAK/lCzGsYBqN\r\nz3bG77zMduBMHU+ou529w+8EdiPVr5uHfG7tNTyzcHF6MdXxEdDM+gZl9vv9\r\nluhpPmLyqewx5SqDU93Cu7CtIWseHeHQlPgUxeiiT4hf/vS+YvsfClh3AXdJ\r\n3RKR+H2KDXzDnMdDshlsrhpmSdUMxmSkrSHDhEEyFYJoeT6mh9o3LDvh7gAv\r\n0vGMy3AafnIH0qHdgU0EWj/4DYq9gE0MUxvDpdMh7qd+KM770kn28ZxbK7rg\r\nD16/cbVkTN0rvNPRiVEpmFUH0ZZQIRz0c94=\r\n=7aq7\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"c8248a1b49ee37b1782b19aaa49b5626c914916a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.79b1b612b.0_1681947527171_0.1825559946093782","host":"s3://npm-registry-packages"}},"15.0.0-canary.6f50071e5.0":{"name":"@material/density","version":"15.0.0-canary.6f50071e5.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.6f50071e5.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0a68e79add70118e807b474296ef3b147921f56e","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.6f50071e5.0.tgz","fileCount":10,"integrity":"sha512-WdlHWiWCd19A63PODoN3D1YcD67pjGEjINiggIg40S1qsHgRkIdTjVNcitIsa63u5LoQiVHDY+CqXjSrMD8Zyw==","signatures":[{"sig":"MEYCIQCeiRBeivXz0xWOrH67GyMeIVPozWu/wVQIKnZiDl4uXwIhANaWGLA4b3dQqJXACHGiTIJ0obnUS+OtjTeJe1uzkxRQ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkQX2MACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqAzQ//dqmg1vX6No4nmXy7seSLRzk18TK8QZMvvdfpWToLAck7vuKz\r\n9o30gre7n3vrY/RUaVIvSCe0pbAaYHfkqUOIhH/ITXyFpTJDRTDxyDiP7MZR\r\nadv9X+if3+DArRwrrnMT+pJpPUvh6Bu4No9fKFXMO4wEUrS6VWBJBGwMYhVP\r\nmqT/3rCsNTX6IhXzDdgetnyp2mpNt7PCTCG2L4y8qd7i2nYqtM4Pg8FJ0rcQ\r\nY12orcVjIdJJU4XPz4HvOITbABKeS72DGif6iMgL8pewmhD4s1DwvSdkCQbL\r\n5FZXU3Gmlsy+GqHCpmjbSX/WAStMjtze/uP0qai9fdyWnzxTiZG8K5B6bMjb\r\nHwxcXeHcs84MY62l2YJ8wstrCPAYJ1YieO7iwy6POaEJLKeAjyV8N8bxP4qU\r\nCJh9CmqpW9oRYfETsjMn21AJcEE5VjPiUpM/xOi/jMPAD6JUXxi9Y1YNhUbU\r\nmFZt0Rgrpnd06p7E+S8EX/cTnHYUvXPG3kXbw0u98q4vlUdTLSHcS7UfFB1x\r\nMd4ZFdMfVlSiDJZFImKgG65RR97wkfSHtvZXToj8Ixn32ENjGad7jCOIoPkD\r\nXVyDDB1YBR+U8mGMCpu5jpXsjCZrEE7B6YrNa11kktUWOFf86R36ltZdNWwW\r\nd7Dvt2Z5Mnw+acriiW/QDnuDss43eiKZMWM=\r\n=muCf\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"0a5eb7e7a96b7f207546983c0f79d6fdf23f5228","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.6f50071e5.0_1682013580459_0.039808559902757334","host":"s3://npm-registry-packages"}},"15.0.0-canary.ef754381c.0":{"name":"@material/density","version":"15.0.0-canary.ef754381c.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.ef754381c.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4ed4499711aa9ba77009315202094cb5fe975941","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.ef754381c.0.tgz","fileCount":10,"integrity":"sha512-28ouInYr15v7XWNf93HqRBBbh2BQCxFgLERs5smmdh8LqqluZ6lFiOna+gP5uUKc2N93VNpZV2qsGDjjqTlVVQ==","signatures":[{"sig":"MEQCIAIcske9GR/JAaXKqBciPGigYlLja0W+11/FdLPA7FSWAiByNSjjYU41zzK8vU4XHe992NH7GMv3wFy2MCqC2RyHRg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkRutoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrjMRAAgT3InWDysmO9c8kb1ifamD15Gib6zswlNgW6w7TVlt00e2rH\r\nBL23ha6LNGP3ofPKO8pnIOymJFLG1+Yw5ZpoVJvcfJxjf0YAGc04cGrv/SPA\r\nTaffVOqXgQeseink18GPrAjL0w9DpcbILUtEEatVLSdc7r5nosoJktE6vRPd\r\nMGhs5BCpmqJEVirAtsFZjgeucTkaeWnFULFXuoYaJF4e4OOGTrIdGkD19Gyv\r\ntV6Q5P/5qX48NVQ49aysldPvJL/MAIMwrcb0yda8bmeRB2RtlVAS63s32dzx\r\np/bnSuqWtLS9n+h37WrEb537pE8eLWFxd10EtMbTVQBtXqqxHDUgujcLuGrN\r\n7etWxmuetFrKAGFhKoNG3B6ihXdS1uwPZlN48MXSwz8KQ1vfLyCjesJbIgLr\r\nUPAO8l/P/979I7bLQCaW2boLAS6DEKSGKVYQLl066YaxxLAr396CfiGZQqJ4\r\nDXLorMsW2euyOY2vhABZThYuY5pA78lvTItkX9yLBzhbZZsB4MH8Cn4SV2vo\r\nOiKtIg0dL70d9CyA7h68FR2HnOxVlFThPK0+qCAHtBit+ZoYIBhImSWs78PD\r\n17MiOZcwcqvLyciJ8ektWfl5jJ7X6ehSPVVn8mQBNQpJQriEoTZ9qFkEDvCj\r\nSVe4VL85YIgcFoyu36JhhsmdkWPEAR3tSd4=\r\n=KYBK\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"998bb9432e40056ce6ec836100d9a46f72ace249","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.ef754381c.0_1682369383883_0.9297427680525789","host":"s3://npm-registry-packages"}},"15.0.0-canary.69ebf61ea.0":{"name":"@material/density","version":"15.0.0-canary.69ebf61ea.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.69ebf61ea.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"84a2ab5a32da485d2b9895de5b30bf73b4bb6452","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.69ebf61ea.0.tgz","fileCount":10,"integrity":"sha512-oLaZn0qznodou3pAFtiwD9ZwJhTOrgF6s/RbAejXVo2u+6xhLXRjJmP7V6BrN2rdxZAby/eMZzrPk6L9xHgMtQ==","signatures":[{"sig":"MEUCIQD8NhbK9zEHglGJhGmbjg85rNjIDEmh2At3otFTK1K3fAIgKE3p4qCe2xCR4jDVv1bzitZm34Th2SG20MIRDVQaI2k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkSq64ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqUSxAAhiNjveSMnlg4b7VeFDhrIrZScZx4yEfWyT05Svxhu77cU3HI\r\nEHf1DfdeOEBrNhb5PJj7K/MgZpqW7i4Dmpy21dpLwj8O6Mx5wiVp97d1hROb\r\nCjMCwyieyrDsHonF9BcyPJjGuPaQ8R6x5DYtCPLfXz0YdTpnivDOQu0jJ2+2\r\nLDBWlG7ky6QjAsS1ZpbVr5zKkLf0C6axSCxWLSTGz7szeHWcuvPLeBofwVgP\r\n/H4zA1aUTRrsCtojuviKtP1jdfw3UOFwwZTSvSZ0d7qSjG/lwuGe78Tr8AdO\r\n3nROfI73ZdK08LFJnCotwNBR5uIe6LQ5e788XoEcdyl8vxNhLBahBWNP3xcL\r\nZxukQ5YZ72VlnX7bH/DNU3jX0bIJMqEPNu7dqv/V5eDHiS/642AcLcj5SfPw\r\nKml4NbI/wjkEzWXpcAwKsMhKuyrU5f1dwO+EbfO5jiWfOpBoxKCIHEC20Su0\r\nSgupHAZM+hfmbbSlI5EbrmMS/9hwH69aEm8DzAvP28rjw4RJ93B2o9yEYqu2\r\nVcC0NVFeZVZSRH5ca5OggCOqokhYwvBcOlOJb2JhjlYRxXqyvpYkL3GDIaXj\r\nMsBzH9le7Dg7ui2Pa/eaCgAoTtCkXCE9yGsMxP12UzHI0P1z6G8T4KgMaY5P\r\nyFSUpMB+tR+xSlO8oO1HREAC72RlLSwmFZk=\r\n=fJ0e\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"e68ad025642429a51f137e9f3fc853364faf0622","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.69ebf61ea.0_1682615992190_0.368387093536674","host":"s3://npm-registry-packages"}},"15.0.0-canary.b90be86de.0":{"name":"@material/density","version":"15.0.0-canary.b90be86de.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.b90be86de.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b0e0736611b4522fdbc5761d30411be63005a83b","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.b90be86de.0.tgz","fileCount":10,"integrity":"sha512-8uctVITh3vppYf7d1i34gzFy/PHKQN61UNdyc7kt/LXrmi5bWyHK3fG2evwrP+DkGT42YQkOG+B4fButz/4VCw==","signatures":[{"sig":"MEUCIQCSAXxf5kT12xQMDaZf29nui8BubdQII3XVMrY9kM7RHAIgF/ROiBfrVjs113XGT/ifuI4fLZ2hf2LteIXD7orAMLE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkTGLHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpRZw//WaTU0v/mk67zJtqI1Nmqinsj95gIAeIxB6BW+ENPTv6N8w9Q\r\nwPrwQ4DUS+wQYbs/eryGGL+u/nEWkawMiiiytzLInWcvew5jfRyF8byyIQro\r\nF73SCYhcvBVryZZe2M0iH9j4et2GR3b8pMRyidcbNJHUKSTMbxjqI50tfg1f\r\nX9hPQEBrKmx1TOhP46G97prk6r8c4j7RA8Agc90T/h8ISW7uQ2BEGjna3nPY\r\nSaoLdTFmyBqoM3ou+YdBMcU4aRsyVzkHVcn/LqnANa/YgYS5NtqwOhRAnjr0\r\nU5fctjBi5FhrBG2eiKNWPZaK2gzYHRyKOwwkPdwq50WKdq9gqzn7L703FK4a\r\nZUCDDriKpf4kTaiND72t1xm/ArSw5U4p7CJZXWRVUrOZRofzv2lQAw8ROxLh\r\n7JBN9YKWVyUTWhrFAdcPrbkigBd9CeL64HKQxT2KgpBVgGd743nwmeW7jz/S\r\noQCKuBgPl0SIv0kDFbXPIVJvXnlitjqkHD5NgCX0wmqmgFN/qX40JSx5/WwC\r\nhzN2Nlnf68/Cddrt9NWG++ckHCtpfCVDzW0ZarXjPNZjOx76rs8BlpDSgYiK\r\nL//X5KrOZqru4PPTa+07BYkhPbzbyd+VgCZIMJAvxI/P1EreAbN3to1aMZ/Z\r\n64he0vyA2KDTDmvwIThdSc2wcd8MIhFGerU=\r\n=o9+g\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"903a4c00d6c4501b4eae8ac0007164ef4a97ce0e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.b90be86de.0_1682727623622_0.9756263225514812","host":"s3://npm-registry-packages"}},"15.0.0-canary.51f9c0c28.0":{"name":"@material/density","version":"15.0.0-canary.51f9c0c28.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.51f9c0c28.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e8482e3b88d7d158875ffc8f63e536ab968c0008","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.51f9c0c28.0.tgz","fileCount":10,"integrity":"sha512-7hc7vuh4RajlgNTtHYWZzUeMC6A7w4ePJGavslqAawPb84bo0M/3Idm6OmoW1c6dyDcQo59KOiHMsmnlgDWdjg==","signatures":[{"sig":"MEUCIQDOW5AIUa0u82sVfrL6jOuFMkKQ3h6SzH0UBIi4JfZCMgIgILIkECauPhUyVwJLkuDWoLTKFo54PHjPA+prsd6+ViA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkTGURACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrXlxAAjAfTIMvVNmBU99GW/D/JMu1G0XW/j21kAXUGxfEOIPlMTKEU\r\nPQ9U+7pUkL/D5DzaJakpfiwPWCfr38rcjBwzXWOYrgyEHjhy0nRPsX7DoJqd\r\nIZZGq7dpCEHWr3bRjocQPNnb9bTLK9RAOc/lrgrsC6gmEqbOs4NSdHS3ND1I\r\nAej9lbBiiEhujfo9qDB2JP2RUj7RE4aQLa+ljrCs20FOe+ONtAmtcixtbMJv\r\nxbFU6Curp/Ihhu3O90SnpVxYaSzPGfteqqZM/fTAHkMTmVSh2ImkNqf+Fn6n\r\n/6b5cRXSizg9as+sscF4dNUJYZdoOt8GaE38PWFbW3g4k5U2e/73YGSEDTe+\r\nOVQLhH5G/nrx+papyRGtVXrt9OO2B84HqypjC6utYeXXDI/0IbPdRWTaJsbf\r\nA++tMSHMjZ+t8b2hucYeu1fi8GYQKyX+Xz2xiyqzjeY6XwTg4NolxNr03+3V\r\nD4nY3o5DKxnTUzciIXTNq0vEbnIYbU3N6iZyQ/yEq/Eq0JEYXj8VoeuovdvJ\r\n4q7rUG44jbiByhvTOFAIDzVbOi+n+URwB8ywEj7yB7e4nzbabcySxUC7RlTd\r\nQQ40wlZKO1hpUUX2VMMHXaf2OTkT/4k+8/PzA8FOIPaFQx1mcDLuiLN23zEk\r\nTxrJSGuonTuC0fXdWQDQKXqAvFXDlV8BVTQ=\r\n=cZn1\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"87662f1719363ac8e600f73ed8a7795c25d8add6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.51f9c0c28.0_1682728208994_0.1997555826813866","host":"s3://npm-registry-packages"}},"15.0.0-canary.4e840d685.0":{"name":"@material/density","version":"15.0.0-canary.4e840d685.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.4e840d685.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7dc714f299d202337c2875a0563eb372647d0c3e","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.4e840d685.0.tgz","fileCount":10,"integrity":"sha512-tzf46WxtkT80ZwaqcpccIoUid5bvG7xDwHLnOHOdFd1VFggtZF4yhOwnNi/7qwUXsB1Klu9tprWsjgbc9qdlow==","signatures":[{"sig":"MEYCIQDNOsUfKCViWmdHYCBfRnOczCUFCW960yWqTzMg7NanbgIhAMW/qcOThNvZWAFi8sCr+0UEqKzEFqjOt0rqmW/hC/nL","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"feb1f9f53257b520aff6dfe5dd1a15e319e73a40","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.4e840d685.0_1683041527398_0.5308778592134811","host":"s3://npm-registry-packages"}},"15.0.0-canary.10b8563e4.0":{"name":"@material/density","version":"15.0.0-canary.10b8563e4.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.10b8563e4.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"181467951fe7ed2c730240ca61788f1b1e54c3d5","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.10b8563e4.0.tgz","fileCount":10,"integrity":"sha512-7elWm2zaM55PR7SH95JDnb3kBacKiec0Uao27fBWt/8szMXDGeKrup1Jfpc+K/Fnm4LQll27BS/xm4Y9YA+4vw==","signatures":[{"sig":"MEUCIQC6AszL502Os0O6PJcoZVYVkEavdZ/SPblVnvvIYY2W6gIgHB0IlTkQVxwoMIwn1FWbLucQpBT8oTl1JkFM80CE61Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkUZ96ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmolgA/6A9YpfxIaYrhU/40mM20SRPiH7W53QniddJzEeQxMNRiWSspK\r\nuf5Gg9Yti9Ji7bLgcTvVsHY//PteR2U2Jel/LF3OSQC3kUXu0G+VaP/44RUf\r\nurDh/ikKac8AlSIP9hwc96/DaclMejoVEMQtQVqEOzxME/bCCukeStkOudpf\r\n7+c1l0Atu1fXK0gGMNfCcMCxyRkJl4jpgmnyRDDFvlvZoC1avnR2Mm7x1Ltb\r\nfgILxfYzxCwVSThZme49CDSIXLmHCfnE/ZrqYWMa1lIy+4xD8T8saCxIomc8\r\nbzVrNZ/P5EE3fX4WzvHX7rkoZzIzP6ATOlxXu6HZpTk/5TIwjsqkw4B/kZXZ\r\nqTUwST3QatseC+cepcbQWJYyWgVapzpzRq25qWym3CDzqt0Da1ChI8GcPVPe\r\n56bD2w9SAQEiKPEIr0lpTHKy15AtrOxN0oiOkTDM5UGr96g62BpiowyaT2oX\r\nOxkxusPQocwpozSZglpICas3gdoI98JDRdoPGbZco6uuFBKJNavBe8IhLs4q\r\nAOXQYBN2pHFODztuo2EKp5KBJ5UIbfJVWqNEWQWcmtcMTOsggq7crkRvayEf\r\n4ZeqemcRL7p8O/Odx8fOi3DBxft4zq58VBXcpnbKRzGQie8aSjXzfsef6UlO\r\nOddomP3NRECbY4oQ5zP+yTN/naJkpzif1g0=\r\n=Jpyx\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"5f71dcbe45f5245c72c0fabae0162af558c5c395","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.10b8563e4.0_1683070842291_0.5335578690168921","host":"s3://npm-registry-packages"}},"15.0.0-canary.736b7fda4.0":{"name":"@material/density","version":"15.0.0-canary.736b7fda4.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.736b7fda4.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8d30f7473cd5b944ce64a3ce3bee071b5f704fd8","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.736b7fda4.0.tgz","fileCount":10,"integrity":"sha512-W02jB8Vw9V6KblERkFrLiio+arJ3HGzsmn4dkdrcjCgirOtSBfGN97SeEp1kySCGrmo1Tpsd5ZuV0UGSIV6xDA==","signatures":[{"sig":"MEUCIQDWIfIgxKfTmiNSaHmDnfKI+Wx2fd+hnb/BgvWcr+a73QIgcd+O/VJyjHOZeLN29/Ppc3S5DaBBIXEZIwd77rlYqkI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkUnjVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqwrA//cETLmB5ifZ6sc9rs9u1XhCBQH1tPcnsLunwj2o4MBvQ1IVff\r\n6mOg6s+WS5nri39bvPoUPPjiQhvVfbTyBXMdenw3K+M0GKITnMJttVeJ9+bg\r\ncPOXo8BGvcBCzoMrpWX6+xamUtSTEZFZ9M0l1/YMNfM4bw43F5ohQRMn8HrA\r\n5Wq2PsrkOw16a9c+hjC8ZYuExGSJjMd/r3unQdDGkLREYt1vwPinPanJffZK\r\nn/eehpA/7vH2cs0v4p6SRjCHBcQeec/bSXYqAEE0pAYQ5zE9BJhD3bi7FT4w\r\nf/8rrmFZcFD9YgW63eZ+MWiHZHrEwt3DaqmgH38PTEYsYPIAh8IlO6MZk8X7\r\nZNHAtDlIqlweFZSyxBNiawWvcaJx4PZ1SoRjEfyz0t/bdh/5jspdSwhGCw+y\r\nqWJNWJz41rniFeqYZjapZxlTOaCeFCXU1L5zl5szIkFK0D9nYvKM0ZxJiaBP\r\nUjMz3r+XqjeN1AfUasPtjylksRN0am6CUTQl5iPy5/iIDYkr/5yAzrRXmAHO\r\nMk4DFbP4enPdjafpChHGjCLF/B1PhkMiAj9bnAKEUp8PAMM2Rzk6T+tKymqR\r\niDVGmYgbJ2v6D+TFLQ8QGC9DwaZRhe6nh7FZXmvNaEQJot9GJ6bxt+p0pDRQ\r\n+4NjjswMDSyqAlOB2DjU5k/3e4gTq/uH6bw=\r\n=CF2s\r\n-----END PGP SIGNATURE-----\r\n"},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"b9ef54594aa8f93612aed085460f035d0aba61bd","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.736b7fda4.0_1683126485709_0.27264034584243446","host":"s3://npm-registry-packages"}},"15.0.0-canary.0e533c5a1.0":{"name":"@material/density","version":"15.0.0-canary.0e533c5a1.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.0e533c5a1.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"40725dcd483578e8e72bd217866b11d09e6368eb","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.0e533c5a1.0.tgz","fileCount":10,"integrity":"sha512-2B6GFpnz1x3AhX5egPhn7yBPevpdwxgUWoLIIxRgq+KGMppbBs6u34VNhVy/GTcwd5iOT4aA6cfMhg6G96ikAw==","signatures":[{"sig":"MEUCIQCZIohDJhsZwUB096mqiTjF+saLlomttWtNW7ZaRyXL2AIgbkFpNx3BUunLYEglgBrLOXFk8IoHZ2gGO0o14SRmajU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"6b9b4497cc6457c9e92ab3abdaad626c73e610a4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.0e533c5a1.0_1683305700261_0.7385993167413114","host":"s3://npm-registry-packages"}},"15.0.0-canary.5f01c15a2.0":{"name":"@material/density","version":"15.0.0-canary.5f01c15a2.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.5f01c15a2.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"80455e09ed39ea226efafa81ab484ea2ff6e5b22","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.5f01c15a2.0.tgz","fileCount":10,"integrity":"sha512-aPw9zfhQHR7giEcCmfZUeOM+ec2SNBolEjr04KqxqG64mLVT4L0KTAt2n7VTD7n7InXnlzL1XM8zdyTK8F2jMQ==","signatures":[{"sig":"MEUCIQCMJKcG9OqlqYi0H8B9+wk3IcSLE80/F6zFnbU8FgEhiQIgYAPyhdtJRmv1WH4A6qcQK3apm3nHIKiZM7tntwom6o0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"7bb1c5dfc575b36654ae046d1f4ab3b27e8c8f9d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.5f01c15a2.0_1683307504691_0.8339038591607595","host":"s3://npm-registry-packages"}},"15.0.0-canary.3b5b55e31.0":{"name":"@material/density","version":"15.0.0-canary.3b5b55e31.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.3b5b55e31.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8e9dfc956c4433a46da6a494cd7c900877f1f17c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.3b5b55e31.0.tgz","fileCount":10,"integrity":"sha512-9qVFbTPiZzysa4lkPDhhcq+gOhvNBi4J5Agw7+vBzumgO8o3Msd2/fuIfv0JUv1aMyJPzWN7tsorow8pB9Ft1A==","signatures":[{"sig":"MEQCIDOciFjx8/xT/mW54sJce4MLZHWjk0EuyJ+ahVV7LUfEAiAp0sSP1w+lHh0Ie84/Fhq2QtR39X1noIIDRo8X36kKQA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"c262d9ee39655e869886d1584551a096ae56dabc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.3b5b55e31.0_1683311854470_0.10204792179571576","host":"s3://npm-registry-packages"}},"15.0.0-canary.d0788120f.0":{"name":"@material/density","version":"15.0.0-canary.d0788120f.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.d0788120f.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e9709e3c7fca28e467a9336ea1875eb05a04fc44","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.d0788120f.0.tgz","fileCount":10,"integrity":"sha512-XBzjY8wEqxqpHZvUL5Gj05VLD+F/CB+HNOy/74iqIBi89csNsqDbvtF4B2h3Z07k5Mbl7m2ABAPmMPEWfT0CSw==","signatures":[{"sig":"MEQCICf5v1OUdKRR8vEj753gza6G7Mdcrc3mqGDrW2mt0lQPAiBLuPy68eznnt+IliIhWBnzjD5T9Dh+lch6b75cbS9enQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"7eccbee262206623b89c40dadb4e11abe30d5e45","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.d0788120f.0_1683620509673_0.299433888121158","host":"s3://npm-registry-packages"}},"15.0.0-canary.f52358dd0.0":{"name":"@material/density","version":"15.0.0-canary.f52358dd0.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.f52358dd0.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2a32796bdbe1a9a3eef501177f02f20bcc0c5bef","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.f52358dd0.0.tgz","fileCount":10,"integrity":"sha512-5WoSItlzhePqR+jBQo5s6c6ynrPjatUxw1K7O0OapyS+amkfjAtYVmVErQXoEevd8qcWUIV3AM6SrtGs+R28Bg==","signatures":[{"sig":"MEUCIA9rxIjvIbis1zCYUs+0WgkKnotZwlNfHQbb917Dm0EkAiEAgoiSISfHhPQr3pEcIDZHm7Nd8KNHEmYXN1eBnEVLSVI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"a4baf07a9736a6e1fa40001f7198ae1865d67392","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.f52358dd0.0_1683901746595_0.13777818374703932","host":"s3://npm-registry-packages"}},"15.0.0-canary.d3c3fbaa3.0":{"name":"@material/density","version":"15.0.0-canary.d3c3fbaa3.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.d3c3fbaa3.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"40fe0262fa37e846495912d37476cde97f52554f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.d3c3fbaa3.0.tgz","fileCount":10,"integrity":"sha512-nhFEWrCSTXd7y8+u2+/wpqomWP1ePJvf6DebRkD7ze7VKJxOv8ryhe/f/RjwzM2YSsxZqO2FQZXKWyTYnB3s7Q==","signatures":[{"sig":"MEUCIDQ03r6z7+Ew+lQsjmTV4Y24NCFlMVD9+aowfHEOJsD0AiEAgotkKh1G+e7bBqLSMhF1zOAoyLS3r4bYmHmybofpphw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"3b7f31c254605439f8fef56301c46f7bcbf3a9fe","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.d3c3fbaa3.0_1683914350269_0.30678997164837907","host":"s3://npm-registry-packages"}},"15.0.0-canary.576d3d2c8.0":{"name":"@material/density","version":"15.0.0-canary.576d3d2c8.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.576d3d2c8.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"71c7c45932bd997d6e94c8f7ed00f8b1b813ac41","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.576d3d2c8.0.tgz","fileCount":10,"integrity":"sha512-seBxT1LkU4jhzyeP1yT1coWXs0QGhwmwfeZOCx2YG2RmHD8a+ucf0y4BjWGDQSc4B9nudeIOYkXEUMfSdjRoQA==","signatures":[{"sig":"MEQCIALmqJ6lttUDD6hKPtrPbJaoy93ywOoKikghv9vPbct0AiB7OYz8GVrEa0xB8rcwoVuNIUrV3jldmxBYvEq0fRuYYg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"6ace19a21b6654f14cad48fc007198859874c910","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.576d3d2c8.0_1684202327781_0.8030564791391996","host":"s3://npm-registry-packages"}},"15.0.0-canary.19bb36a46.0":{"name":"@material/density","version":"15.0.0-canary.19bb36a46.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.19bb36a46.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b8165046b012dcf3eba7f22118eee696eee30399","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.19bb36a46.0.tgz","fileCount":10,"integrity":"sha512-ciUoVSNfTcryeu7GAAYvYbJ7xeKkenDAVJBrD1Y8rgVChVw281VeIxYUaOyYsjaCmq/e5DQQcGKZT41ssCcQiw==","signatures":[{"sig":"MEUCIDDn1tFaTI+NVzPOibiBKwZfoAyFsWEjH27qXXpkh0gZAiEA3vKdt2Kq8j8Sd0n+SpzMC/LwmumrCJuukOZfg+DF5fk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"75157be315eeaa02f70ed69f97e44a7d40d53e42","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.19bb36a46.0_1684266767666_0.9960050483362606","host":"s3://npm-registry-packages"}},"15.0.0-canary.aa5ac7fe5.0":{"name":"@material/density","version":"15.0.0-canary.aa5ac7fe5.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.aa5ac7fe5.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d29ce50a8e689175ca1fe2fa1cc969c3141f873f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.aa5ac7fe5.0.tgz","fileCount":10,"integrity":"sha512-4x0nrENuTP9oKPYm8TZJA/Wu6skMnkpa9nCVMU4txVxq2fwCCC6nnyFQhG38lgvDZZj+Cx33fqVGj2hLBJrhRg==","signatures":[{"sig":"MEYCIQDrmPE0ZeGUeQ5EK45Doorv7vCg7t/+Ng2YKjKf6xloNwIhAIfCqCIwbUixAXwM/dVzVAISmeC1WKWC54/D2lWTnQOS","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"83e86542dd6facc8ffe487d31111412ee18b5bde","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.aa5ac7fe5.0_1684776249184_0.44629673170897544","host":"s3://npm-registry-packages"}},"15.0.0-canary.90291f2e2.0":{"name":"@material/density","version":"15.0.0-canary.90291f2e2.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.90291f2e2.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"53adb147bb543c934aab9c5b262c016c1896404c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.90291f2e2.0.tgz","fileCount":10,"integrity":"sha512-z2L49vc5tbIGe7tUHwbmzoPvOugsTNVP24WWwBwtg9PRuK4Td5HIsMGYqSzSuwFJvDWQK9Ugvl37jGZSv4vxog==","signatures":[{"sig":"MEYCIQCuO0+KrlVPwqJ5jfnas0bneIV7mnJnR4UVmYiUkI498AIhAJlijk7pjJ38jx+DT6RMfNTUpb6MzMNKfnT8UBqRCjza","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"a1c306471717b15ae8f0b481703ed1b46162df25","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.90291f2e2.0_1684863685044_0.7553625268630877","host":"s3://npm-registry-packages"}},"15.0.0-canary.446734f27.0":{"name":"@material/density","version":"15.0.0-canary.446734f27.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.446734f27.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9a6972960c2bfa94161812149c1092b369be8267","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.446734f27.0.tgz","fileCount":10,"integrity":"sha512-NTTRrzAp+/2+wgbJvAKTw+2hoypBWJeRQ56yzFpItCfXv5IG8T9WL0roA55tZEEPIDBe7I6tlm/4qeGjA7Y+Eg==","signatures":[{"sig":"MEUCIC6PxqkkvlmOIsSI42fjtTJfng0lZqlJuWfnPU2VW8GBAiEA6JK6f+cPGyM+T6aZFrwQ28SIqBTog53/ulxkYWCvk7w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"a2536a849aada5f06aa85deaa7be06f44f620023","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.446734f27.0_1685483213203_0.2256985664015143","host":"s3://npm-registry-packages"}},"15.0.0-canary.19de312d8.0":{"name":"@material/density","version":"15.0.0-canary.19de312d8.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.19de312d8.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bbaf09524db6dd2ebf94e3a4f83afddd04dbbe88","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.19de312d8.0.tgz","fileCount":10,"integrity":"sha512-PmdZmfOkxQh5RiWEOU5GbyjsPpugz5iG/6riA4dTYzzsdcDDxW30vFNQ3m7eTVS20gtgW9OkSWfYVXfOWPHYoA==","signatures":[{"sig":"MEQCIFlNjILKmfgEz+SmHluLSwRfmEVzFqb+cbXCxtg5M9QZAiB7SCwRA3UeeIRzc0i/ulAj6ql9ftU4FRrnB9FsWhIFGQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"dc3811573a34ccafa5c09bcf14574bfb95373958","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.19de312d8.0_1686071804764_0.01984754819776935","host":"s3://npm-registry-packages"}},"15.0.0-canary.6081d829b.0":{"name":"@material/density","version":"15.0.0-canary.6081d829b.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.6081d829b.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e9d3e5ccf54a9efe499f6def6882bb0ea8b2d2b5","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.6081d829b.0.tgz","fileCount":10,"integrity":"sha512-SQjHFYyfQ0veQwoAqD+SpFfo/Sgcm3cPIjeEleIaJh7/teqL0kt57T4HnAWpNdGknLAWSWl4rA44SM8WSM1XYg==","signatures":[{"sig":"MEUCIH1mxx5l55P+VBgDcKMeLc+lzMDkwWtkqKUSaWaDVyHPAiEAxStLSjEioySp0qTyxwlpHvvE6BStIWXIbM+PYYENCHY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"033569cc4deafe32dad2bf8cbd1de8789bc85668","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.6081d829b.0_1686100368076_0.16538167957183902","host":"s3://npm-registry-packages"}},"15.0.0-canary.b26c34a68.0":{"name":"@material/density","version":"15.0.0-canary.b26c34a68.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.b26c34a68.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"081c63192c94cd0f51455db256e5c7e4997c7c2d","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.b26c34a68.0.tgz","fileCount":10,"integrity":"sha512-eCrFiK9pC9OnQp1hnwXzoyPpiJh8ySZfYf1P5GFTggczJoPHvb+yblKpkM4oVw3fn/NHMRHIttWnpsw09mALjQ==","signatures":[{"sig":"MEQCIF7Twd4YuEiXyc/QWJhdHj8bfwXqFhrqESeynQhjcDfyAiAvqKhwIYKmasufKzoy4BEizJmH2jSm8QaShWek30pA/A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"28919516866e588c52e4e6358c3c4d2523993b74","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.b26c34a68.0_1686168870555_0.8315152453621819","host":"s3://npm-registry-packages"}},"15.0.0-canary.4fe911371.0":{"name":"@material/density","version":"15.0.0-canary.4fe911371.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.4fe911371.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a63b06502320f786b7c475ba76c932065b697e54","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.4fe911371.0.tgz","fileCount":10,"integrity":"sha512-yUQvZ1VzXXXhQZbA9Khz+VkoDhCMiALpyWB9p7CUgNCBASyiNfhOLdyGKWiaMD5AGaBjgAWwoxy5tMSQRdeayQ==","signatures":[{"sig":"MEUCIFrL2yPDZWRaV94MLKgiceMkPPPcLp8snt/BPbULf1oxAiEAsBArrVbmtTs3rHf4E72TcfFvRY4rr9Q52NcBo905jrI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"a9de53a24d5e0f79f94310f061cdf2ab718df7f4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.4fe911371.0_1686179072875_0.23138474794473973","host":"s3://npm-registry-packages"}},"15.0.0-canary.a9ff9866f.0":{"name":"@material/density","version":"15.0.0-canary.a9ff9866f.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.a9ff9866f.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"133500fa967dc41969eed7d021a72513fcf72e92","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.a9ff9866f.0.tgz","fileCount":10,"integrity":"sha512-ew4TWNokdep5TPRS+vyZpgQzUspXjMGRZZitKJVUPRAoMoc1ksCFBUfAtFsYCTktbDo6DssmZ5wZW7w2n+D8Og==","signatures":[{"sig":"MEQCIB5jwTTkceUjTtwb5aW+xd4ckY78PeSpnBFpMVUXPONMAiB+LrGecpMf7PVBWFOS1WaALfCHh9cm/770W/buAJMloA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"5bed0ec6cdad0c38b52e8ac98994b2809d9c8f50","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.a9ff9866f.0_1686656220466_0.490045140921763","host":"s3://npm-registry-packages"}},"15.0.0-canary.b994146f6.0":{"name":"@material/density","version":"15.0.0-canary.b994146f6.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.b994146f6.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d29f7f1ad113b89acc3df10a4f05693faa8f12a4","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.b994146f6.0.tgz","fileCount":10,"integrity":"sha512-m8l0vuoWSoAPItBpWp5eZDvitUcB2JWoO8V486hLgdveVcKgXG09xWM43ScH+PLXAWjzr5olDEuJ2tvfkN3SpQ==","signatures":[{"sig":"MEUCIH0gRTVXwT4KBzlk40TgiwrIwm7xTNVi3rq7uqDeDufSAiEAv27KNdA6hM5FE8Moypcda7aPgcENRzIVkxTRaTBDJa4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"e537228a5d88e4fb9c651aa15b1d56bd81bc63bd","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.b994146f6.0_1686776534966_0.059852551842835666","host":"s3://npm-registry-packages"}},"15.0.0-canary.1fb4b1a06.0":{"name":"@material/density","version":"15.0.0-canary.1fb4b1a06.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.1fb4b1a06.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"48ff1f338c0f3046803289152ad145164552a293","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.1fb4b1a06.0.tgz","fileCount":10,"integrity":"sha512-fpVz3hWALTGLm+sv1yDzrUVUSLlxzXQIy0Ld+i2HGcMTOv2benVRkPGe0TPlA/VyC6522Pdpo+kP5dz2LiFQfQ==","signatures":[{"sig":"MEUCIC4CePKE4hi+BW1VxPWWjvW7HsqZVFpWM3EyGlfmVsFDAiEAsW4aasKHMIXYH32MLvipWnLGdGCB7fB5NkwWg73iUdc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"1d1b86822f3fc9f22a5fdfc1c381d5a4ae983829","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.1fb4b1a06.0_1687892131568_0.8548909309682513","host":"s3://npm-registry-packages"}},"15.0.0-canary.c64a2776e.0":{"name":"@material/density","version":"15.0.0-canary.c64a2776e.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.c64a2776e.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b88a6af77890db2e8f8d5d1718745847b87cd75f","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.c64a2776e.0.tgz","fileCount":10,"integrity":"sha512-AT1h+f1dBPR+NePUUWGCw7P3Qy6CUAIQj7Buh4Ck2d2AKulwffI3wTgMbpJvWYHrDeMQXh5637QupDbtZm1OJg==","signatures":[{"sig":"MEQCIFD++6I2Tr51byGw1EssxR68SbTNgKJZwAIGuyIxfK5xAiBQBPqTwPrR/VZY9X5vx1fJaag41AEdHhDiRzN7xoHeGg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"271b0c446646af573f67960820b6b2a86a9bda88","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.c64a2776e.0_1687896908528_0.28079425458322604","host":"s3://npm-registry-packages"}},"15.0.0-canary.b05d9eb7c.0":{"name":"@material/density","version":"15.0.0-canary.b05d9eb7c.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.b05d9eb7c.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8a8568685955d6395f9d23e3d55f84b50935c48d","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.b05d9eb7c.0.tgz","fileCount":10,"integrity":"sha512-lfw+bb5Mxydb6cJMrfeQcFYtOpdMVSGb8WvMObSRS2tE4yz98G4NSnLIRQG0yVmyZ6lseFF74V4Kpn603pZ15g==","signatures":[{"sig":"MEYCIQCKgAQT8gQ9QhWqtozyjHjKkKCstdNknGcVwLpRpJQEsgIhAKefxzIR8tPkniv08/0prVaGCui/hh8oPdyfqu1EmuOn","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"854245f23fe0f7b3dd1163ecefd940b26718c134","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.b05d9eb7c.0_1688055744378_0.4490042462192152","host":"s3://npm-registry-packages"}},"15.0.0-canary.2a9697dc5.0":{"name":"@material/density","version":"15.0.0-canary.2a9697dc5.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.2a9697dc5.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"54bbb67cc483642b8610965a5930be02f1ab444e","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.2a9697dc5.0.tgz","fileCount":10,"integrity":"sha512-5JEl8iXWkZv1A2zQdYga+bSfIxEDIPPWsCqzlx1ZEsCG/etht29lBmXbmuePw2l58mVTnHQq+vHn3ZoTwb3z0g==","signatures":[{"sig":"MEYCIQD87CPZsyoE3kXii/zVHQi2TvaJmeQdRFP8YYuL1xqS1gIhAJnMoFPJv/ykyU6VUrXpo7pHO1BRf2vTFkAi7vff4RjB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"fad1e5223c83a5b7a83a6ef81f7ebdc83a85672a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.2a9697dc5.0_1688163161422_0.9868045781514649","host":"s3://npm-registry-packages"}},"15.0.0-canary.0c52adeab.0":{"name":"@material/density","version":"15.0.0-canary.0c52adeab.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.0c52adeab.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c5e4d74a453a33c40f01bf979318162218920242","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.0c52adeab.0.tgz","fileCount":10,"integrity":"sha512-/hTFpH0O2z1803vwJD/DCJxiWPg1rXYi8S/v7RvSEP7pl7pQYSae9GQxLJXHFeFk6Xd4gWk5/DCk+Je9mgBBsQ==","signatures":[{"sig":"MEUCIFXaxF++jFvzDdwBJGBMlaJrpJioAqZ75pGDNXDk0w1UAiEAlBhq2PQhHdvqdxxukHfS//gZBVJsyBzNAL39ZxnHUZ4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"972024dd57885ff944ec073de0cd956353bfa7e3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.0c52adeab.0_1688574258920_0.44790327223953863","host":"s3://npm-registry-packages"}},"15.0.0-canary.83355c322.0":{"name":"@material/density","version":"15.0.0-canary.83355c322.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.83355c322.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"15ba23db0c8811f751ea86e900d3b6df552cfe97","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.83355c322.0.tgz","fileCount":10,"integrity":"sha512-9QmfYHpf4FKiThvrOTHYh71V0Wz5NRngLQfpgDkX/jLzbAdBhphV9xw0IeucG9dzh0H+trVLYHLJOREgW70eCA==","signatures":[{"sig":"MEUCIFVg2N/6JhK9wmtVEB3Arj1xo3ZT3qWzwSqV0zO+EErkAiEArpUHZlWepKNpEVYJSmJxPddAr2XXKfCPZHgSq/9gUAg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"173401c2dd65fb3babae5b8e998c0a0032ff819d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.83355c322.0_1689001423100_0.3960116355860308","host":"s3://npm-registry-packages"}},"15.0.0-canary.bc9ae6c9c.0":{"name":"@material/density","version":"15.0.0-canary.bc9ae6c9c.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.bc9ae6c9c.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"83d7ef248a8d1818cddb01bcbfc947ab0ae6a952","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.bc9ae6c9c.0.tgz","fileCount":10,"integrity":"sha512-Zt3u07fXrBWLW06Tl5fgvjicxNQMkFdawLyNTzZ5TvbXfVkErILLePwwGaw8LNcvzqJP6ABLA8jiR+sKNoJQCg==","signatures":[{"sig":"MEUCIQClA/dNjrm/JdgbK52YI7MIBobDfgSm60pXg3Rv8KJOEQIgZVUAlOI62juuSKKdZ4etkicdPDShn7lqDAUcIFTyoms=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"9f0b9b80c267d99daa258e635481fecc4cbf0acd","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.bc9ae6c9c.0_1691097432402_0.3307703076671118","host":"s3://npm-registry-packages"}},"15.0.0-canary.3c44cd956.0":{"name":"@material/density","version":"15.0.0-canary.3c44cd956.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.3c44cd956.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fc808b228259eff418fc645e8cb4b6c69964be99","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.3c44cd956.0.tgz","fileCount":10,"integrity":"sha512-Y0q5MgEP3Ma/O7qcDBJU1bKNYKR0hwrGwT8lj2HV2vFzZbRs2GI7P19S585vDpqhZW2FNygCPKUXN9FkouxcOA==","signatures":[{"sig":"MEYCIQCS9XcY/Pqg0BLHPVD6cArKr2mD2PtsnRH+S0zsoafppwIhAMgtxfMTPqgvk34C9/wbW9p9psLanwMcP4M5ZWcBVnFQ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"6e39da189328fcabc7040a629e312efe5f7cea80","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.3c44cd956.0_1691430343898_0.4285222853246651","host":"s3://npm-registry-packages"}},"15.0.0-canary.02702296e.0":{"name":"@material/density","version":"15.0.0-canary.02702296e.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.02702296e.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5bceb23446a06709b7f93af7405ae3435876313c","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.02702296e.0.tgz","fileCount":10,"integrity":"sha512-2RXXbcxHXqxrsK9hS6SHeyZDKqbSLPwkLJeu1CWV4yNP1CJAaYEMDPudxkNjhIkYb3H1Ehbzv8BGor9Nspff9A==","signatures":[{"sig":"MEUCIEJ31wgx2Om8h9fgStC0LmAyyeCH1qZp8Mz63f0L/CCaAiEAj2YxdSJY2WbA8sv9ivdH/sKyWt8R7JyP9AEmqdRS9E0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"22335673bc742932498b2538321ed9dcfd692879","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.02702296e.0_1692965007737_0.47971003668837975","host":"s3://npm-registry-packages"}},"15.0.0-canary.872b65832.0":{"name":"@material/density","version":"15.0.0-canary.872b65832.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.872b65832.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2742af517529634b08572085727ad02c6f70d657","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.872b65832.0.tgz","fileCount":10,"integrity":"sha512-GSLXBTy7QnvUDQpM3D4oqNCB5fZJriZSZ5hplT46GBdequNKD/Yg4xyNwt1GP4j7yQvQJxzBTtBBWtPd4EXSfg==","signatures":[{"sig":"MEYCIQC1BbAaEsHt99I4oN7l8FzZjog26Cs3uhdUDzX4uE0aVAIhAOBnlOuKSIyLIReRNlVvwaecwysKskuwtXPOXyDS7Km6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"be0901c091f812355b2d192c49bd051d8daf7a98","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.872b65832.0_1693397483689_0.9177288607674214","host":"s3://npm-registry-packages"}},"15.0.0-canary.89b2e4122.0":{"name":"@material/density","version":"15.0.0-canary.89b2e4122.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.89b2e4122.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c1144cf02fe7a1ec9c4abb61ed57821317efc5d6","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.89b2e4122.0.tgz","fileCount":10,"integrity":"sha512-FRjsqnbGmtQXK3r4frbU7K8eJqYBDbytURRs99I+kghrT0NF9UlQI4zcui4QxfigtaRAJp2CNymZDhem8IU8RA==","signatures":[{"sig":"MEUCIAY2EOs4IMEGKh5l+KxfDKvGgHe3ftcdGU2AlDtSKD+pAiEA5rtLkOgWYIYSoC6mst7vmsuJUkfewYjgO4C+KTgaTcs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"68bd55db9489546e515443239f477836e16db19b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.89b2e4122.0_1693497913526_0.5205991325180683","host":"s3://npm-registry-packages"}},"15.0.0-canary.7a3942e7a.0":{"name":"@material/density","version":"15.0.0-canary.7a3942e7a.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.7a3942e7a.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ca4caa3475bb37bdfdd73005908dbe7792c0f892","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.7a3942e7a.0.tgz","fileCount":10,"integrity":"sha512-oJ3XW3HR07dxavzyF46tq4b8Tu3QhflOU5IIzea0t50ZZycysBuiMmKyZrFqBFuMlhMr9IfVszV6PpYDzbJ1bg==","signatures":[{"sig":"MEUCID5raKiHQO/VISHOymYX8bCNkPsJwNRW9AQySkfnk3ZrAiEA/v4ymBM20uyNOO2J+VcHdNqaWTSSZcCTauBZQQx3Fik=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"e61dc0a16a5b376c778548e5a6cecb56f5c5704d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.7a3942e7a.0_1693507081154_0.8881344709206382","host":"s3://npm-registry-packages"}},"15.0.0-canary.54feb3020.0":{"name":"@material/density","version":"15.0.0-canary.54feb3020.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.54feb3020.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ee7a997764edf96cb8e6516c6be0c5f3a6e31c78","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.54feb3020.0.tgz","fileCount":10,"integrity":"sha512-gN8cFLKdpE3T5+xyTDEXjz5xJ+VontZl/tAigxfjcwPbHbyTxTJo8mP6duKunbLmO8eShZW1wVTCJEyDu7fqig==","signatures":[{"sig":"MEUCIDPmhHhfWXsgEre16mhLUKtDMRAO3A+ZyAElUPE0S0reAiEAuEITk5Ky6JHhulqfakldRStv7P0u5Y0V5NQwPELVdTU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"5dc5cb94463af21f898ddd58cc4d9e4fbf803222","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.54feb3020.0_1694466212032_0.5199731971792934","host":"s3://npm-registry-packages"}},"15.0.0-canary.6cda3ce8d.0":{"name":"@material/density","version":"15.0.0-canary.6cda3ce8d.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.6cda3ce8d.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"64db9cf22c23f9b914cf0c74c6dbc73b9c5ce5bc","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.6cda3ce8d.0.tgz","fileCount":10,"integrity":"sha512-Ms3FLXDc3eCFrBNt4HY2HksgUYRtA9AtTeveKPrJje7oC8t8CYnyQ6aaTPJjzkSVsKGOgTOeBz35yT6H6YTveQ==","signatures":[{"sig":"MEUCIBw496B+X7vruGIyCSIkMhe5turT3lQnZiigAeFK4OPoAiEA7RNfg881BaWddk/RbXTvMpvOdHV0EgK4yVu5dT14WYY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"adb36c6339e7bf37fe1e8ca96526a9673ca602e7","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.6cda3ce8d.0_1694483012665_0.15548004694719664","host":"s3://npm-registry-packages"}},"15.0.0-canary.205b20b36.0":{"name":"@material/density","version":"15.0.0-canary.205b20b36.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.205b20b36.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d750f5287674b5936d1d7952cd3cc64fc2cf41f4","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.205b20b36.0.tgz","fileCount":10,"integrity":"sha512-Qk8r/ff8GrZWfsFzNayeElxsBfBTPTt30RlVwpKsjEj04JQPg8TXp/GWCt+exHBT8GKdS/6r0grmjOXeT/prQw==","signatures":[{"sig":"MEUCICWG+SDDcDgYRjxbbSxvBsWruXz3LHst7ZMBuGin1MJlAiEAvNmIZEfmyHdM30JSOZOhTilhTMz4HYrZpgElVuu5MOM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"00fdcf619c34c502844acb0f2485e99595aa138d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.205b20b36.0_1694625282636_0.8238573099230431","host":"s3://npm-registry-packages"}},"15.0.0-canary.22bf82024.0":{"name":"@material/density","version":"15.0.0-canary.22bf82024.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.22bf82024.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"76f23bc74048314429ed689132771c7bb98fe9dc","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.22bf82024.0.tgz","fileCount":10,"integrity":"sha512-yWdCMQUgR/I3MjwmtLXuyKrouEJWeSWJu0Mt+6a4ggHOV2x5TA/p06Qau0kE7xiq88+nDJNfk0P4KeDIczkiJg==","signatures":[{"sig":"MEQCIDU7t69ax71gfIStWUtmLmtFNCCyGMTphLyvxNy7gFz1AiBURwXwtDnR8iVrLW3ixx1xFWCNUvYBVRh76rZsIlJnbQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"eda4fad2a8a727b69db60b828bd92df7a8956143","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.22bf82024.0_1695028232016_0.9211593486379874","host":"s3://npm-registry-packages"}},"15.0.0-canary.a246a4439.0":{"name":"@material/density","version":"15.0.0-canary.a246a4439.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.a246a4439.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"459282080188a6fc056ba903c5a156599c2e5813","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.a246a4439.0.tgz","fileCount":10,"integrity":"sha512-h8BJVCWkPR97WeWCN6/atVbSOP8J4+ZbbssidcwsnX7b3+3IaWdtBxGii25dsILX8pUVwwqxVis24y211b+8rg==","signatures":[{"sig":"MEUCIFrsZfxDAfMSO277+jP4wH8tWoj/ebhZpZOZTUmXIgX0AiEA6NtvBt0L7P/vCthy77jIA6HyyfQ4u8n4LipJ38eDtIk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"40201df8b7e53b61aead4acdfa34b48fb1d155b8","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.a246a4439.0_1695059044862_0.7420004221323537","host":"s3://npm-registry-packages"}},"15.0.0-canary.d153db62b.0":{"name":"@material/density","version":"15.0.0-canary.d153db62b.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.d153db62b.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"49031c1ea3ceeb3055edb49e98fc7e806d88da50","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.d153db62b.0.tgz","fileCount":10,"integrity":"sha512-7GoUPeOZAaewA955hvOh6Kcb2+zVa2xxx4ScHPEgTZv742QCffvKWvru/K6PWTHYWifZerhkETTb3GcxJpgHdw==","signatures":[{"sig":"MEQCIGnvsPp6UJxgQm8b/4Qh2dbCIdz5rcKb2OQuX/KAGVv4AiA9PdIhuEGHfvLW5llwerO/AYO0ko4dBanMh4oPZ2jYeg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"4ca05c144c691cd06cd5926fe0bc54818e462202","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.d153db62b.0_1695150758586_0.6934716766477025","host":"s3://npm-registry-packages"}},"15.0.0-canary.2528c1c3b.0":{"name":"@material/density","version":"15.0.0-canary.2528c1c3b.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.2528c1c3b.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"61209c4ec55a2ee08441dd392f175c821b8a45e9","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.2528c1c3b.0.tgz","fileCount":10,"integrity":"sha512-n5pcVdB8uLQKB9Lflm1cQEervLRPdjA2IMuBOGp/Z38nN8nsKFqv4w4lrPeK0ggf4vW61W74/7uA6EMyMybmMA==","signatures":[{"sig":"MEUCIQCjIpJ4X0uvSw9z4AwQnKsqolJBOILHFuSt+pmM35nsDgIgCOUbXijEFAqNWYQmU4QzJzx1s7OGtWX+V8LsEYenD94=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"98b5b57bd5356f48610a254e8c4acff388d5fb7b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.2528c1c3b.0_1695233091751_0.46758120627095723","host":"s3://npm-registry-packages"}},"15.0.0-canary.1728a6dcf.0":{"name":"@material/density","version":"15.0.0-canary.1728a6dcf.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.1728a6dcf.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"32046d0c8e1bbab964cab0712dfa92bdae61c703","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.1728a6dcf.0.tgz","fileCount":10,"integrity":"sha512-AsYChPtsI9frMkivbaEFWCJYtq0j3VfZSuOM1sjYGO6G4LpwburIC78HrV3PSULIaGdHcVoaPsnsrVHRti1Ryw==","signatures":[{"sig":"MEUCIHuIicIfC/szXzZBB+E+0MD+P6wwcRiTu5Tkm5VeUiCoAiEA5JabPSiO3Kcniisk5aSMQ5J+x3kMlZmykfENCaOM4JI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"3828aedf4f344a948780a69956ca4f069cef3daa","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.1728a6dcf.0_1695691295332_0.8786303161961009","host":"s3://npm-registry-packages"}},"15.0.0-canary.ebb636f3d.0":{"name":"@material/density","version":"15.0.0-canary.ebb636f3d.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.ebb636f3d.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cc74501152ece451ce8eeae7bfdfdf75a6d96f8d","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.ebb636f3d.0.tgz","fileCount":10,"integrity":"sha512-M975UL6yboFHActgK/3qmGGF/v024iDUlgEEmAXB7eRF2lSvfcShZMYvXXwx9IZsnbuIkmYu/4K2iJxOMTnN/A==","signatures":[{"sig":"MEYCIQDboP7uy57AJYTvc9YTUZzvr1dFcHV/t+L7PXkQlDNfSQIhAJ6r5/DJ6uyKn4TrsDRug5R+zIq04l40VYVlAbpRfSTF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"6f62607a00dd885ebbe422b247dc4acc1ded22cb","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.ebb636f3d.0_1696016587595_0.2289808562165343","host":"s3://npm-registry-packages"}},"15.0.0-canary.c0d21ecc9.0":{"name":"@material/density","version":"15.0.0-canary.c0d21ecc9.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.c0d21ecc9.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eb4dd0533d455c880ba95a8d0e1c4658ab918850","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.c0d21ecc9.0.tgz","fileCount":10,"integrity":"sha512-OOnW8JacJIlpl4wJyyKuts8ogs72zqffneAl7bPqBrogLgs1z4/6m4PbaoKzLkjIHv3XtgBY3eK3ZI1U+eJJXQ==","signatures":[{"sig":"MEUCIBAyIdS1xaKEHp22e/S1q53DJP9ho3d8jh+TRf/m6GYxAiEA+afU5Gy+d4MD3iy1OuzweQz9daUe2rbNzWuzoU5vt3g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"0a932ea790a12d359ce4ec7c5c4c7aec7edf565d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.c0d21ecc9.0_1696880127043_0.9708808372766518","host":"s3://npm-registry-packages"}},"15.0.0-canary.127a44b28.0":{"name":"@material/density","version":"15.0.0-canary.127a44b28.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.127a44b28.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d3630ca183ccf38d167ef74924b4312904b31bce","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.127a44b28.0.tgz","fileCount":10,"integrity":"sha512-vkcHBC4+K1wAKa2AlfFZLWsw+q06ZmiXD9CyfYcujQp11ZLI8dKlZ5KaqDsuFh8PAyrLf0voUkljU0O3dCKDKA==","signatures":[{"sig":"MEUCIHrXwrXZ6Fv7dvE1d1qlyAA4+h9QyCqjWJOs4Bzvf8fcAiEAqwHUQc/a6jQFTiSXNXQ74Mp86bpyb2QuyBUrHbq3AME=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"88d1fc2c5354e751ea3ab567d26bb1886ee152d3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.127a44b28.0_1697140701139_0.7683591557147154","host":"s3://npm-registry-packages"}},"15.0.0-canary.0ad128337.0":{"name":"@material/density","version":"15.0.0-canary.0ad128337.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.0ad128337.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e156d8d9c36db4d67dec88982e4b63b612418cd2","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.0ad128337.0.tgz","fileCount":10,"integrity":"sha512-2e6Syt5uDJjTBXcLc+Q9mBLZYaxYgjMEV5b5C/KRvdKPqiquk73hYKGH46uCYUICIu8ygjxfgAoF04w41k/nSg==","signatures":[{"sig":"MEYCIQC19FdcSL8c5e5F+9xmbaf+39g11g1qRagXEUop11a8ZgIhANz9zJHNEQKgCOd3bWjpmg720Z07AYGmsqk3iLVO72US","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"bb76f531b61a52aae34c7a1efa45824fd32e49f4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.0ad128337.0_1697741416573_0.5174132189232086","host":"s3://npm-registry-packages"}},"15.0.0-canary.9cec94097.0":{"name":"@material/density","version":"15.0.0-canary.9cec94097.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.9cec94097.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a91c1ae3d6c3b8638a7ba181a092963b9dde0d49","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.9cec94097.0.tgz","fileCount":10,"integrity":"sha512-2cHFQtR0cdmfqvJpcMclYqXASQMJe9ledXYY+g3OfHVaE7wzbKUhGzNYaGHbOd0eMb/3yzi3estRCHUOiuLMoQ==","signatures":[{"sig":"MEUCIQCZZUi7VBFe6oYcB5x21Rwc6eeyS5dRUnRtlJGX2CfxewIgSrk86WAdJHySAAT7shPfmg0OdfQTlhtufU1Cwxe1PEM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"1a8019402daf97efb72456551503dfb3fa31466b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.9cec94097.0_1697756881904_0.11827336564106905","host":"s3://npm-registry-packages"}},"15.0.0-canary.c51a0bbcc.0":{"name":"@material/density","version":"15.0.0-canary.c51a0bbcc.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.c51a0bbcc.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"27ee3c18aade34a8bf64171027ec5c13f82ef311","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.c51a0bbcc.0.tgz","fileCount":10,"integrity":"sha512-zBDycVJoWdeEoI1xyfKDGuu6KtALxoSyN9SkPkJDDvuNTIVR06MECuUpgVS+AO5ZcwUsXvG6B+wEjd6lFRRP4w==","signatures":[{"sig":"MEQCIDyT6gP7eijsy9l8ydFblJgkbZZi9Lz97tTKR6VBoPa6AiAG7zMu8FSyTcx1ICDZp4BcDcIL22b4E8igmEdPDpTD9A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"e65c7fe6dcc6d6069f00d4d2f8c55e61710d046b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.c51a0bbcc.0_1700081871886_0.41793208546287075","host":"s3://npm-registry-packages"}},"15.0.0-canary.d76666ad4.0":{"name":"@material/density","version":"15.0.0-canary.d76666ad4.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.d76666ad4.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1bf953a4327bdf3a85cbfc19deafab1f21e24e49","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.d76666ad4.0.tgz","fileCount":10,"integrity":"sha512-v14SQSkk8TyFxIMZ9A6vdwYfQwD3lmNUeGV8QxgC4OTKzXBQSptXFKP3rfwQMSysJRmOVRFkA3bs8N+hJhHmxA==","signatures":[{"sig":"MEUCIDD/LV2deoBF0DpV/KsxBzwd4hPBZagJKwYVVnBJ+ihcAiEAgk/M2vz0zlOYkwj4g7YGLfbY+JxXn9h+CmBgNSdJzTs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"8fc3640e389fda0098b42091a9a1ab8653fc6470","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.d76666ad4.0_1701123136770_0.1969819240636117","host":"s3://npm-registry-packages"}},"15.0.0-canary.8656bf0e0.0":{"name":"@material/density","version":"15.0.0-canary.8656bf0e0.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.8656bf0e0.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1517d8df3a7931aa8a7f23cdea6c33e0838d6393","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.8656bf0e0.0.tgz","fileCount":10,"integrity":"sha512-xAnXq0gaqbZ0C6zgpjFFsmg0wuQa1MN9jmhEKnoBIfvOgpkjz87nEW7GXAVdpOnf+pvp0FkM0Hf0XoC7w/A7bQ==","signatures":[{"sig":"MEYCIQD5b2fxBeAMrX7jfBrqte9WPGYSvs4NZFjkJUYjLI4jPAIhAO/5lvUTbqiHkzdaj8PX+4H3bIEP5L/di2uwzCkTCK+8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"36cab37e468233da3044a10c1df388f634163cc1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.8656bf0e0.0_1702415865487_0.49990384050474956","host":"s3://npm-registry-packages"}},"15.0.0-canary.7f224ddd4.0":{"name":"@material/density","version":"15.0.0-canary.7f224ddd4.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.7f224ddd4.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3fd8625b734597556c2bf18362a709485b4d1899","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.7f224ddd4.0.tgz","fileCount":10,"integrity":"sha512-o9EXmGKVpiQ6mHhyV3oDDzc78Ow3E7v8dlaOhgaDSXgmqaE8v5sIlLNa/LKSyUga83/fpGk3QViSGXotpQx0jA==","signatures":[{"sig":"MEUCIHwEJyzJ5M3P4Mtn9kyNuNXDWCd7A3C3NHZBgkoT1aBgAiEAqM5PugjbOAk972LG1wD9z61MuA0G15OBrh8RVO58obI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"ff8ff3ce455054f1532d1ae0983f40634a524886","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.7f224ddd4.0_1703743695178_0.006388412986780834","host":"s3://npm-registry-packages"}},"15.0.0-canary.a0b8a90c0.0":{"name":"@material/density","version":"15.0.0-canary.a0b8a90c0.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.a0b8a90c0.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b3db3bee36970e81e3b785a9d28519c7328c41f5","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.a0b8a90c0.0.tgz","fileCount":10,"integrity":"sha512-TLYYh35oec414zghR2hfNFCreqf7ieHqegwXAcFJD36prI3bjg/mFrJJ0IxnsJAD4rOBgxEU4ocRw7hfGntA8Q==","signatures":[{"sig":"MEQCIDhsjqSNLWlaTjCqnVPXiuKhniRdVV8BqkOfmxLdTROqAiAHAesIET3+dmvzNiQC0oSy50mOMaa/fLiamoI6/e+u+Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"85d5965379b080c9f852ecbbd95031e363636dfd","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.a0b8a90c0.0_1707333515414_0.762831540559719","host":"s3://npm-registry-packages"}},"15.0.0-canary.e50b478eb.0":{"name":"@material/density","version":"15.0.0-canary.e50b478eb.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.e50b478eb.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"31a50caf8e9896888b1a6a2458b3316cc544f952","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.e50b478eb.0.tgz","fileCount":10,"integrity":"sha512-4qdOwHnaXT+qwZ+ihzUBv1EKFVQCwyNz9hhPYdvDm1rKiLGid7tTU9mOGBwu/hjFBZo9nBN/8ySHI9vlYLvzrw==","signatures":[{"sig":"MEQCIA77lYhcOnNuz1VIvXnN+O0XGJDsS8rhgFhi2ZePi5oNAiAvOk1/XyY8b91hywbK4Rcdy4Rf9KjsAvGZ4L3wPKOnpw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"4691455eaee76f99b18be70913c9fefb7cf3c2ae","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.e50b478eb.0_1707415620163_0.4889542371932103","host":"s3://npm-registry-packages"}},"15.0.0-canary.c43b3438b.0":{"name":"@material/density","version":"15.0.0-canary.c43b3438b.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.c43b3438b.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"47364c01866566d07d8a7335b0b14cec3b7aae05","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.c43b3438b.0.tgz","fileCount":10,"integrity":"sha512-rLdTVK6HfL27sTQRX8Qsu2c92du86DECfEpKioYWLvvKYqMeS3xUAmx5AU04XheeFvmeyCwvmDYHNSh1OSCb8w==","signatures":[{"sig":"MEUCIQC24xaJ7TlLx6gXGyydDE6axnEx+V5MoeThKCwOrsbylAIgeDpL4CdIn1fOPpWYOLVFBoGnHnxrfco9G0xgD6RLyHU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"e69adcf897de97b302f026f07bbc2571b1a488ca","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.c43b3438b.0_1708719395428_0.4348663534547703","host":"s3://npm-registry-packages"}},"15.0.0-canary.819498d8c.0":{"name":"@material/density","version":"15.0.0-canary.819498d8c.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.819498d8c.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2378579babf5ba6da8ee9531b48a5224d16c9133","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.819498d8c.0.tgz","fileCount":10,"integrity":"sha512-IdMKP5K6vuvDuOi6Q2AGZ+i+8Dxv5kb9jcQq2DQqG6NxPNxnv2FOQhETWjbNolV7KhffjhtqLZoLwyq0q2HiUg==","signatures":[{"sig":"MEUCIAVg5vMWZ548cG5bJoQDHngf5FfBqVXi1iKbEyJ7ttfWAiEAykloVGbPuWgQIE0Ax4Xy4C6G7jlNbnS3S7joykJrCyE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"886876a8252aacefe1942b13ba9251af9204bcdd","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.819498d8c.0_1710515621813_0.02354250394440216","host":"s3://npm-registry-packages"}},"15.0.0-canary.453a6248a.0":{"name":"@material/density","version":"15.0.0-canary.453a6248a.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.453a6248a.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9273413b0d4fbe9613ef12019fdd42b2d1b6e926","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.453a6248a.0.tgz","fileCount":10,"integrity":"sha512-SAAY/LQH2OtOy223FKtLc2JgYn64/LxDtWXq2+cmZuc+39PzHbIrszdh5PxOQSpsdMK7VgClXIbJq4PZyMtxHQ==","signatures":[{"sig":"MEUCIH4ZdWckgucT9bsCLnSuAuO3vkO6SVYzYxW70TzeDkmWAiEAml8ZsXgpe8aBT4sPfXAi8Qh29iwCEI4T095Kf/7khZA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"1eea6443d63f2bc64fe8f6f86664b54266c41244","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.453a6248a.0_1711386757746_0.7202791019369725","host":"s3://npm-registry-packages"}},"15.0.0-canary.68edc03c6.0":{"name":"@material/density","version":"15.0.0-canary.68edc03c6.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.68edc03c6.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f515e84a7b7d84aa32a9559aceb823ccdb02c56b","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.68edc03c6.0.tgz","fileCount":10,"integrity":"sha512-y4tXD5H7Dt8v2mmL+sTKLk5IpdK118PmDvPFKs33NV+P4Rj2ryjUoGzP9q/2aPH7Ny7b0OItUVv79syg7BHYQw==","signatures":[{"sig":"MEYCIQD60KjB3h5fX41g9s/yKR7Yu2EkeR5QkUjBrIYx3KOsFQIhAOk0Ns+yBx9bu/cjwjrFGfM1hz15qGHBzNoDoxcitCUR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"04046ad51f4d581f93e797ec929d219422dd0235","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.68edc03c6.0_1712603074525_0.5409582655851437","host":"s3://npm-registry-packages"}},"15.0.0-canary.5bebc0064.0":{"name":"@material/density","version":"15.0.0-canary.5bebc0064.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.5bebc0064.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bdc503aa9d41f57f634447e102e6c1165023865a","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.5bebc0064.0.tgz","fileCount":10,"integrity":"sha512-yAhlRBu+u5WFRsRoE25XKC9H39JM+SP+FsK2WR8vFI1ss19Pn5oyBQCpi5gP1xNgPsms4vshDLBD9xMkFy6aIQ==","signatures":[{"sig":"MEQCIFxenAajOFdbHOFqhpLAPTHQkx5niUTmGN/lCaNrlW3qAiAJs7wTtfHPssxXuGfNEEz6ZqwEcLm4+28HeEczB3m8bg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"ff39e65972de013a29dd14429e111139bc616366","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.5bebc0064.0_1712871524830_0.9683627247304512","host":"s3://npm-registry-packages"}},"15.0.0-canary.311f29a60.0":{"name":"@material/density","version":"15.0.0-canary.311f29a60.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.311f29a60.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1895f3876d4f29690875ece6b68d6bbb0e46bc37","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.311f29a60.0.tgz","fileCount":10,"integrity":"sha512-qVUsWkPAieY/tiAdQbNHfhT+an01StxyweSJy2saVPzwZimE/zoK3+mmSbcoG1+YyD3MgysV8+nGs2txFaRCXg==","signatures":[{"sig":"MEQCIHjJbTvuSd2CAvIacguBb12H7Suf+GVKM8J6qSR9jc4+AiBRAWX6Wb073Sr3TJkpeVyHxhice2+SRyp6QEEUfqYtNw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"7bc0264e163e842f0f96c1dbf7a468c022db1497","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.311f29a60.0_1713895107973_0.5081101897522273","host":"s3://npm-registry-packages"}},"15.0.0-canary.65c10a622.0":{"name":"@material/density","version":"15.0.0-canary.65c10a622.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.65c10a622.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7d7e028356b920cd60a99df326714cfa6afe518e","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.65c10a622.0.tgz","fileCount":10,"integrity":"sha512-ZEZhIakJi6NYipLuiHLhPNOmsGEYuDQs2J0JO3mlKslBZ3OWy2Ezk8Atnz/zhmb6eJwrPbPBpPVitcA07oe4dg==","signatures":[{"sig":"MEUCIHrIpxOBj0VIL8Dl/lj+u2/LOnSdJgA31OJLapl9/022AiEA2vLIA7nMd5aGvTR5StDe4wm3Vmifjxqk92lWuKw1Y58=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"1f3126503c812250084b65b6edbb26f25ef4a174","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.65c10a622.0_1714070852113_0.8087288160155339","host":"s3://npm-registry-packages"}},"15.0.0-canary.4b35cb7d0.0":{"name":"@material/density","version":"15.0.0-canary.4b35cb7d0.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.4b35cb7d0.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c25a1812f1a1920e90c38deb0915683a19cfd60b","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.4b35cb7d0.0.tgz","fileCount":10,"integrity":"sha512-iacxKraj4tEYqRVUD0QuswsnvInJd5ddXnz3OdqLyiKch8hYPDlkzeyKBIWjuU9b/M78n27mr29Fd6Ta1ZtQcQ==","signatures":[{"sig":"MEUCIQCrGwE3TPBFO7nR1hdYWLgR+eQq75h+TTqy0vOZWfoHVwIgYTeiBlhEgNs5Q9iQ8V3EX0t8MLHGX7xH5xuSm30QFl8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"cba29aaa21c1bc2b1f1a02e5ddfa4a5110d9ef63","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.4b35cb7d0.0_1714651294036_0.26658909829449007","host":"s3://npm-registry-packages"}},"15.0.0-canary.f80ac92b0.0":{"name":"@material/density","version":"15.0.0-canary.f80ac92b0.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.f80ac92b0.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cd561d1b845b5ae3dc71e44b6127744c1859c84e","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.f80ac92b0.0.tgz","fileCount":10,"integrity":"sha512-bE3drDP8LONnRGgxBJKqlPxr22/PpskaL3LIsEEKrB9p6Wt7YM7/KpYmhaeDyfa3KnhYDVSazVMo0eU1L6mnlQ==","signatures":[{"sig":"MEYCIQDueaWkY6yyynPElRmUS8id9FoabpkDkEy+UJqzUJOP4AIhALNKwvH28Uo+1XeIiLsxUaBiemOEQypI05wdNx/YiCHs","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"514a3afe9efc5bcebf1ace1e335357184ee1a9e0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.f80ac92b0.0_1714651923833_0.5198548187427212","host":"s3://npm-registry-packages"}},"15.0.0-canary.2f5b899bc.0":{"name":"@material/density","version":"15.0.0-canary.2f5b899bc.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.2f5b899bc.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7c23958b4473978c08e1f4ea42a6431e4040e16a","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.2f5b899bc.0.tgz","fileCount":10,"integrity":"sha512-zlN+AFbi6FDKx5pNMj8p+BXD2vvfzi5RKqpa1ji/Tc1jWROAFlV7eYP4VPRhxfffegkmEW2NMGcSSslxArGZAg==","signatures":[{"sig":"MEYCIQClXe2Ocof1YM2ZldWzUK2HaoMIceFsEQhSxedkGnXvIwIhAKojHYhUQpkWNC8lJUBPg7fmRHbQHv7IZSWDQNS6KFYC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"751553ca74ad43074c963487257a8862de87844b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.2f5b899bc.0_1716213209964_0.5300779914162641","host":"s3://npm-registry-packages"}},"15.0.0-canary.cfec83c74.0":{"name":"@material/density","version":"15.0.0-canary.cfec83c74.0","keywords":["material components","material design","density","adaptive layout"],"license":"MIT","_id":"@material/density@15.0.0-canary.cfec83c74.0","maintainers":[{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6e1f3cf9b211978779cdb73d7d106d8533960284","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.cfec83c74.0.tgz","fileCount":10,"integrity":"sha512-uyioB7AMa3U6Akar21MB5lHCO5B6ZTyMghJM0rFnYcCRVtxO7nr5MpzYTfv3qo6LZMDLysnhUkwdrA3LCN9a7A==","signatures":[{"sig":"MEQCIAa8y6OGE/fVm/+HeUQLYRwE5aRC/XxmoYT7fMm0myfAAiBFXL5o7/insY0eKjfjcpleff6jm+GYfpbDosQijOMhWQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13773},"readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","gitHead":"0ec8b129344ebbe45f00b6ad892b682b054ea892","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-density"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Density utilities for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/density_15.0.0-canary.cfec83c74.0_1716231347283_0.22274784236406941","host":"s3://npm-registry-packages"}},"15.0.0-canary.423edc3dc.0":{"name":"@material/density","description":"Density utilities for Material Components for the web","version":"15.0.0-canary.423edc3dc.0","license":"MIT","keywords":["material components","material design","density","adaptive layout"],"sideEffects":false,"repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-density"},"dependencies":{"tslib":"^2.1.0"},"publishConfig":{"access":"public"},"gitHead":"19b2c5a95782b4928b3aecb29a1075c42aee53e5","readme":"<!--docs:\ntitle: \"Density\"\nlayout: detail\nsection: components\nexcerpt: \"Density subsystem provides adaptive layout to components.\"\npath: /catalog/density/\n-->\n\n# Density\n\nDensity subsystem provides adaptive layout to components. Material Design uses low-density space by default but offers high-density space when it improves the user experience. Components with high density enable users to process and take action against large amounts of information in a more manageable way. List, tables, and long forms are components that benefit from increased density.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/design/layout/applying-density.html\">Material Design guidelines: Applying density</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://glitch.com/~material-density\" target=\"_blank\">Demo: Glitch</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/density\n```\n\n> NOTE: You do not need to directly depend on `@material/density`, use component provided density Sass mixins instead.\n\n## Basic Usage\n\nThe styles for applying density to button component instance looks like this:\n\n```scss\n@use \"@material/button\";\n\n.my-custom-button {\n  // Sets button density scale to `-3`, i.e. button height to `24px`.\n  @include button.density(-3);\n}\n```\n\nThis would apply `-3` (high density) to button component instance.\n\n> You would indirectly use the Density API through respective component's mixin which takes care of setting appropriate\n> component height.\n\nHere are the components that do provide density Sass mixins:\n\n  * [Button](../mdc-button/README.md#sass-mixins)\n  * [Checkbox](../mdc-checkbox/README.md#sass-mixins)\n  * [Chip](../mdc-chips/README.md#sass-mixins)\n  * [Data Table](../mdc-data-table/README.md#sass-mixins)\n  * [Icon Button](../mdc-icon-button/README.md#sass-mixins)\n  * [List](../mdc-list/README.md#sass-mixins)\n  * [Radio](../mdc-radio/README.md#sass-mixins)\n  * [Switch](../mdc-switch/README.md#sass-mixins)\n  * [Tab Bar](../mdc-tab-bar/README.md#sass-mixins)\n  * [Text Field](../mdc-textfield/README.md#sass-mixins)\n\n## Density Mixins\n\nComponents that supports density provides Sass mixins to customize density for that component. Each density mixin takes in a density scale number, e.g. 0 (the default) or -1 (higher density).\n\nCurrently, the density system only allows negative numbers to customize for high density. The lower the density scale, the higher the component density. The exact density scale range depends on the component. If the scale number is unsupported by the component density mixin, the compiler will report an error at build time.\n\nThe height or size of a component is calculated with the following formula:\n\n```scss\n@use \"@material/button\";\n@use \"@material/density\";\n\n$height: button.$height + density.$interval * $density-scale\n/// @example 36px + 4px * (-3) => 24px\n```\n\nThe density interval is set to 4px for visual consistency.\n\nIt is recommended to customize density via the provided density mixins, rather than arbitrarily applying component height.\n\nNOTE: Touch targets are automatically disabled when density mixins are applied, since dense components should be optionally enabled and therefore do not have the same default accessibility requirements.\n\n## Component variants\n\nComponents that has different variants may have their own density mixin.\n\nFor example, Tab Bar has two density mixins:\n\n  * `tab-bar.density()`: Density mixin for standard tab bar.\n  * `tab-bar.stacked-density()`: Density mixin for tab bar that has icon stacked on top of label.\n\nSimilarly, text field provides 3 different density mixins based on its variant.\n\n## Nested components\n\nMaterial component that renders another component inside it needs set its own density scale accordingly. Applying density mixin on parent component does not automatically apply density to its children.\n\nFor example, Applying density to data table does not automatically set density scale to row checkbox. You'll have to explicitly set density scale to its children. This'll allow clients to have full control on the layout.\n\n## Style Customization\n\nThis package is used as utility for other components' density mixins. Customizations provided by this package is not intended to\nbe consumed directly by developers, use component's density mixin instead.\n\n### Sass Variables\n\nVariable | Description\n--- | ---\n`$interval` | Density interval between each dense scale. This interval is used for numbered density scale to calculate dense height based on baseline component height.\n`$minimum-scale` | Minimum scale supported by density subsystem. This scale always maps to highest dense scale.\n`$maximum-scale` | Maximum scale supported by density subsystem. This scale always maps to lowest dense scale.\n`$supported-scales` | Supported density scale when density literal is used (For example, `minimum`).\n\n### Sass Functions\n\nFunction | Description\n--- | ---\n`prop-value($density-config, $density-scale, $property-name)` | Returns component property value based on given density config and density scale.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/density@15.0.0-canary.423edc3dc.0","_nodeVersion":"14.21.3","_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","dist":{"integrity":"sha512-EpZo5/4L9baVVzoz4Qs2UYX3tpPquBpoQm3lNFPJl5flMKLNjVwWwyL5kd08Izn/nJLrk42w3H1aJSJqcyDQxw==","shasum":"dd380ea7c1b40c431664e4bbaf7405caac6e0688","tarball":"http://repository.ncinga.com/nexus/content/groups/npm-all/@material/density/-/density-15.0.0-canary.423edc3dc.0.tgz","fileCount":10,"unpackedSize":13773,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICuvVs/2bNuwQQazT2b2XWrH+T2FeBTi3jA8rCUV6hITAiB7H76goe80uqjGXij2lXSPUBkzD6jWyTpR+GGLrzEbug=="}]},"_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/density_15.0.0-canary.423edc3dc.0_1719425489390_0.21264456195349335"},"_hasShrinkwrap":false}},"name":"@material/density","time":{"created":"2019-09-05T04:37:31.427Z","modified":"2024-06-26T18:11:29.862Z","4.0.0-canary.0":"2019-09-05T04:37:31.574Z","4.0.0-canary.1":"2019-09-09T20:20:21.891Z","4.0.0-canary.79d881baf.0":"2019-09-13T02:21:13.910Z","4.0.0-canary.e851d4f40.0":"2019-09-13T04:06:54.252Z","4.0.0-canary.905884690.0":"2019-09-16T23:47:47.144Z","4.0.0-canary.199534d61.0":"2019-09-27T18:57:25.388Z","4.0.0-canary.22d7ad2fb.0":"2019-10-15T18:56:53.253Z","4.0.0-canary.735147131.0":"2019-10-16T01:23:11.965Z","4.0.0-canary.062ade5c0.0":"2019-10-17T01:01:14.408Z","4.0.0-canary.774ad4f8.0":"2019-10-17T04:03:55.166Z","4.0.0-canary.5916d18c.0":"2019-10-18T20:08:07.175Z","4.0.0-canary.d4141c95.0":"2019-10-24T01:37:49.631Z","4.0.0-canary.2b878b3e.0":"2019-10-25T02:10:15.825Z","4.0.0-canary.b06c0efe.0":"2019-10-26T01:34:44.674Z","4.0.0-canary.01628efa.0":"2019-10-29T00:02:34.420Z","4.0.0-canary.b5c6d66b.0":"2019-10-29T17:56:12.535Z","4.0.0-canary.cdf858ea.0":"2019-11-01T17:58:23.936Z","4.0.0-canary.719b57e1.0":"2019-11-01T20:01:05.612Z","4.0.0-canary.97cbbdc2.0":"2019-11-01T20:28:39.335Z","4.0.0-canary.8e36b3b7.0":"2019-11-01T21:00:36.948Z","4.0.0-canary.62d3a09b.0":"2019-11-01T21:10:15.294Z","4.0.0":"2019-11-02T18:11:24.756Z","5.0.0-canary.b5eb51e94.0":"2019-11-07T18:33:09.740Z","5.0.0-canary.58500806e.0":"2019-11-08T15:35:10.934Z","5.0.0-canary.66299b646.0":"2019-11-08T20:33:17.011Z","5.0.0-canary.821871e04.0":"2019-11-08T21:27:46.372Z","5.0.0-canary.491fddc31.0":"2019-11-08T22:06:46.598Z","5.0.0-canary.b0cecf145.0":"2019-11-09T18:41:59.720Z","5.0.0-canary.afe0dd1bc.0":"2019-11-11T15:37:15.846Z","5.0.0-canary.b4cfdc40b.0":"2019-11-14T15:58:00.533Z","5.0.0-canary.525989b5d.0":"2019-11-14T23:30:23.607Z","5.0.0-canary.7084b403a.0":"2019-11-15T01:05:28.457Z","5.0.0-canary.3cbee6dac.0":"2019-11-15T22:32:21.262Z","5.0.0-canary.591a6ad44.0":"2019-11-18T23:48:04.342Z","5.0.0-canary.5729943ba.0":"2019-11-20T05:18:55.432Z","5.0.0-canary.e89750dc7.0":"2019-11-27T02:09:20.251Z","5.0.0-canary.3e560b33a.0":"2019-11-27T02:10:02.084Z","5.0.0-canary.7fd17ce5e.0":"2019-11-27T02:10:14.582Z","5.0.0-canary.ec729683b.0":"2019-11-27T15:54:21.442Z","5.0.0-canary.b8bc4a26e.0":"2019-11-27T19:16:19.564Z","5.0.0-canary.f978109c3.0":"2019-12-02T17:06:54.106Z","5.0.0-canary.ad9dfe706.0":"2019-12-03T23:17:32.367Z","5.0.0-canary.5e45d77f3.0":"2019-12-03T23:18:38.324Z","5.0.0-canary.d10e8cdf3.0":"2019-12-03T23:19:20.556Z","5.0.0-canary.a5dbd8a2a.0":"2019-12-03T23:54:30.940Z","5.0.0-canary.ba879b68b.0":"2019-12-04T20:22:11.829Z","5.0.0-canary.aa0eba489.0":"2019-12-06T01:58:42.138Z","5.0.0-canary.cb7b71a86.0":"2019-12-06T23:55:26.369Z","5.0.0-canary.50f110a6c.0":"2019-12-10T16:59:03.740Z","5.0.0-canary.878a08b7c.0":"2019-12-11T20:15:50.699Z","5.0.0-canary.397905b4e.0":"2019-12-12T02:46:47.711Z","5.0.0-canary.1fbf5bd1d.0":"2019-12-12T18:58:49.753Z","5.0.0-canary.b723dfa78.0":"2019-12-12T20:09:12.613Z","5.0.0-canary.1c494e567.0":"2019-12-12T23:36:12.218Z","5.0.0-canary.c9e98a125.0":"2019-12-17T18:09:13.508Z","5.0.0-canary.5ffe8f7e3.0":"2019-12-17T22:32:51.360Z","5.0.0-canary.47949b08e.0":"2019-12-18T17:40:05.648Z","5.0.0-canary.b240bcc1b.0":"2019-12-18T19:16:13.109Z","5.0.0-canary.391674a26.0":"2019-12-18T19:16:21.824Z","5.0.0-canary.c4837746c.0":"2019-12-18T19:34:23.230Z","5.0.0-canary.e41a70425.0":"2019-12-18T23:19:34.071Z","5.0.0-canary.bac43eb43.0":"2019-12-18T23:23:20.858Z","5.0.0-canary.2e491de55.0":"2019-12-19T10:49:09.664Z","5.0.0-canary.ae101c144.0":"2019-12-19T16:24:14.213Z","5.0.0-canary.a51c31f26.0":"2019-12-19T17:13:48.537Z","5.0.0-canary.21fc4e13b.0":"2019-12-19T21:26:37.209Z","5.0.0-canary.d2ae6e17d.0":"2019-12-19T22:23:35.846Z","5.0.0-canary.ba30399ad.0":"2019-12-20T01:09:12.419Z","5.0.0-canary.a08ccec35.0":"2019-12-20T23:26:15.796Z","5.0.0-canary.a2f75105e.0":"2019-12-23T19:47:00.812Z","5.0.0-canary.c054a24c7.0":"2019-12-23T21:49:30.538Z","5.0.0-canary.c6808c51c.0":"2019-12-23T21:54:12.470Z","5.0.0-canary.7bce9cf77.0":"2019-12-26T18:44:58.995Z","5.0.0-canary.c92f038c3.0":"2019-12-30T22:02:26.913Z","5.0.0-canary.1f1ac7558.0":"2020-01-02T20:53:27.758Z","5.0.0-canary.ec26e799c.0":"2020-01-02T21:41:55.638Z","5.0.0-canary.0a40ced40.0":"2020-01-03T17:08:52.039Z","5.0.0-canary.3adf84899.0":"2020-01-03T18:21:51.587Z","5.0.0-canary.0d42ee650.0":"2020-01-03T21:36:28.110Z","5.0.0-canary.7be9e4a04.0":"2020-01-06T17:03:50.136Z","5.0.0-canary.847dd1ada.0":"2020-01-06T19:25:43.270Z","5.0.0-canary.39df7e5df.0":"2020-01-07T00:54:57.243Z","5.0.0-canary.f1a2581ab.0":"2020-01-07T14:59:00.456Z","5.0.0-canary.7c7ddf347.0":"2020-01-07T15:14:46.417Z","5.0.0-canary.a1c84d4b5.0":"2020-01-07T18:09:28.047Z","5.0.0-canary.ec9f16578.0":"2020-01-07T19:39:00.274Z","5.0.0-canary.b602226ce.0":"2020-01-07T20:14:41.474Z","5.0.0-canary.b2d2dc08c.0":"2020-01-07T21:25:28.486Z","5.0.0-canary.61f2d7580.0":"2020-01-07T21:39:07.233Z","5.0.0-canary.d1be53a2e.0":"2020-01-07T22:16:19.725Z","5.0.0-canary.9b0d06e32.0":"2020-01-07T22:18:48.429Z","5.0.0-canary.730c807a0.0":"2020-01-07T22:20:24.993Z","5.0.0-canary.2213152cd.0":"2020-01-08T17:21:39.184Z","5.0.0-canary.5750f7169.0":"2020-01-08T17:56:13.684Z","5.0.0-canary.f7abc7a43.0":"2020-01-08T18:27:09.599Z","5.0.0-canary.bf7b4a061.0":"2020-01-08T18:40:57.896Z","5.0.0-canary.784fa7903.0":"2020-01-08T19:09:46.142Z","5.0.0-canary.823c050ba.0":"2020-01-08T20:10:10.705Z","5.0.0-canary.70c708dee.0":"2020-01-08T20:21:26.313Z","5.0.0-canary.5ed9d13d0.0":"2020-01-08T21:42:02.716Z","5.0.0-canary.4819cc7e5.0":"2020-01-08T21:57:21.393Z","5.0.0-canary.fe3ffd2c3.0":"2020-01-08T22:15:38.891Z","5.0.0-canary.c0e850090.0":"2020-01-08T22:22:41.369Z","5.0.0-canary.615f86f38.0":"2020-01-08T22:39:25.657Z","5.0.0-canary.1eb032637.0":"2020-01-08T22:59:26.124Z","5.0.0-canary.5bc5ebfea.0":"2020-01-08T23:00:11.338Z","5.0.0-canary.1112b8def.0":"2020-01-09T22:09:28.254Z","5.0.0-canary.aab102017.0":"2020-01-10T00:11:45.589Z","5.0.0-canary.426913342.0":"2020-01-10T01:43:36.185Z","5.0.0-canary.d4ea9a706.0":"2020-01-10T17:24:42.294Z","5.0.0-canary.7d4ee2996.0":"2020-01-10T17:56:11.776Z","5.0.0-canary.981ec9b6f.0":"2020-01-10T19:26:05.222Z","5.0.0-canary.737da83fc.0":"2020-01-10T21:18:11.553Z","5.0.0-canary.aca8e6c18.0":"2020-01-13T19:30:56.595Z","5.0.0-canary.c38d84e21.0":"2020-01-13T22:12:46.904Z","5.0.0-canary.a4db5fbad.0":"2020-01-14T02:14:50.926Z","5.0.0-canary.faa9af310.0":"2020-01-14T16:52:00.556Z","5.0.0-canary.60354c577.0":"2020-01-14T22:45:20.915Z","5.0.0-canary.d07c78daa.0":"2020-01-14T23:38:00.082Z","5.0.0-canary.8ddd5c6dc.0":"2020-01-15T01:42:29.696Z","5.0.0-canary.a9511d870.0":"2020-01-15T19:09:38.721Z","5.0.0-canary.7c8583c4c.0":"2020-01-15T22:46:50.119Z","5.0.0-canary.5d4b82bac.0":"2020-01-15T22:47:06.075Z","5.0.0-canary.57d0186e4.0":"2020-01-16T18:16:43.693Z","5.0.0-canary.071a6ab70.0":"2020-01-16T18:23:19.373Z","5.0.0-canary.22e0cb618.0":"2020-01-16T18:46:27.393Z","5.0.0-canary.f16f15b8f.0":"2020-01-17T00:06:18.201Z","5.0.0-canary.aa8e43e9a.0":"2020-01-17T00:36:09.077Z","5.0.0-canary.fe1f3ca07.0":"2020-01-17T00:59:33.229Z","5.0.0-canary.d405af26b.0":"2020-01-17T18:16:26.146Z","5.0.0-canary.6e857aae2.0":"2020-01-17T18:20:12.179Z","5.0.0-canary.e2e764f7c.0":"2020-01-17T18:35:23.450Z","5.0.0-canary.7ef986a87.0":"2020-01-17T19:30:10.585Z","5.0.0-canary.29402e2d4.0":"2020-01-17T20:39:02.252Z","5.0.0-canary.2b3ec563c.0":"2020-01-17T23:10:52.882Z","5.0.0-canary.e8a993677.0":"2020-01-21T16:49:02.757Z","5.0.0-canary.cd4903304.0":"2020-01-21T21:36:48.124Z","5.0.0-canary.7e4b04b25.0":"2020-01-21T22:45:05.774Z","5.0.0-canary.ebc296937.0":"2020-01-21T23:44:13.223Z","5.0.0-canary.cf33f113d.0":"2020-01-22T01:21:32.644Z","5.0.0-canary.e1d5f1be5.0":"2020-01-22T16:54:45.752Z","5.0.0-canary.6b6a4ff92.0":"2020-01-22T17:56:53.914Z","5.0.0-canary.6092f71ee.0":"2020-01-22T21:16:18.612Z","5.0.0-canary.d8d95020f.0":"2020-01-22T23:08:55.922Z","5.0.0-canary.b7facc628.0":"2020-01-23T18:11:50.918Z","5.0.0-canary.63f357dbf.0":"2020-01-23T21:54:41.581Z","5.0.0-canary.f2426d26e.0":"2020-01-23T23:54:41.928Z","5.0.0-canary.7f5e0c23f.0":"2020-01-24T16:46:59.178Z","5.0.0-canary.3fc3ab520.0":"2020-01-24T17:20:07.100Z","5.0.0-canary.80a4d326f.0":"2020-01-24T20:45:08.960Z","5.0.0-canary.ef7de4def.0":"2020-01-24T21:31:16.276Z","5.0.0-canary.93e2288b6.0":"2020-01-28T16:54:24.705Z","5.0.0-canary.34ef15f67.0":"2020-01-28T17:23:25.289Z","5.0.0-canary.d3d176ba5.0":"2020-01-28T17:28:42.000Z","5.0.0-canary.32c1df133.0":"2020-01-28T19:42:41.376Z","5.0.0-canary.f3adce86f.0":"2020-01-28T21:48:15.438Z","5.0.0-canary.a4423f890.0":"2020-01-29T21:08:49.147Z","5.0.0-canary.9351f167d.0":"2020-01-29T21:54:49.535Z","5.0.0-canary.29b89dbc1.0":"2020-01-29T22:16:07.322Z","5.0.0-canary.45985457b.0":"2020-01-29T23:32:09.292Z","5.0.0-canary.a1a0deb3e.0":"2020-01-30T17:36:32.391Z","5.0.0-canary.181486643.0":"2020-01-30T20:55:16.689Z","5.0.0-canary.3a85313ac.0":"2020-01-31T16:22:24.963Z","5.0.0-canary.b6c7f624b.0":"2020-01-31T17:02:20.177Z","5.0.0-canary.b3f70ebde.0":"2020-01-31T20:09:21.707Z","5.0.0-canary.3e782d8f8.0":"2020-02-02T01:12:07.889Z","5.0.0-canary.535398572.0":"2020-02-03T18:10:18.679Z","5.0.0-canary.5ff33802c.0":"2020-02-04T18:03:06.709Z","5.0.0-canary.1eb29491c.0":"2020-02-04T20:59:42.934Z","5.0.0-canary.4c7154b26.0":"2020-02-05T16:01:56.161Z","5.0.0-canary.ab5f49a2c.0":"2020-02-05T23:32:25.636Z","5.0.0-canary.c541ebe15.0":"2020-02-06T22:29:09.301Z","5.0.0-canary.98f7faa05.0":"2020-02-07T19:20:32.528Z","5.0.0-canary.b4727e43a.0":"2020-02-07T19:54:43.127Z","5.0.0-canary.91d9d5a65.0":"2020-02-07T22:58:17.958Z","5.0.0-canary.d5c006ed1.0":"2020-02-10T16:47:52.685Z","5.0.0-canary.559f1a570.0":"2020-02-10T17:23:57.928Z","5.0.0-canary.ad3bbf782.0":"2020-02-10T19:10:42.903Z","5.0.0-canary.570d8e49c.0":"2020-02-10T20:42:34.543Z","5.0.0-canary.48b06b89a.0":"2020-02-11T18:42:16.371Z","5.0.0-canary.612443dfb.0":"2020-02-11T19:48:00.688Z","5.0.0-canary.8c11ea2a3.0":"2020-02-12T08:50:40.664Z","5.0.0-canary.b2f3d311e.0":"2020-02-13T21:42:51.591Z","5.0.0-canary.4f488d0ee.0":"2020-02-13T23:05:23.376Z","6.0.0-canary.fe79de07d.0":"2020-02-13T23:22:49.961Z","5.0.0":"2020-02-14T00:08:12.346Z","6.0.0-canary.5e313b1f2.0":"2020-02-14T23:47:13.381Z","6.0.0-canary.6a56f387c.0":"2020-02-18T19:42:39.907Z","6.0.0-canary.bdfd52632.0":"2020-02-19T20:21:47.553Z","6.0.0-canary.ad2e4376a.0":"2020-02-20T23:15:27.850Z","6.0.0-canary.765caef18.0":"2020-02-21T17:32:01.736Z","6.0.0-canary.949562303.0":"2020-02-21T20:36:31.911Z","6.0.0-canary.7ec96974e.0":"2020-02-24T18:57:19.541Z","6.0.0-canary.265ecbad5.0":"2020-02-25T20:59:55.308Z","5.1.0":"2020-02-25T21:37:07.216Z","6.0.0-canary.2cf87456f.0":"2020-02-25T21:37:49.659Z","6.0.0-canary.781434a92.0":"2020-02-25T23:27:17.106Z","6.0.0-canary.d6f60c98b.0":"2020-02-28T22:02:44.156Z","6.0.0-canary.69edc6e28.0":"2020-02-28T22:11:16.727Z","6.0.0-canary.9372e4939.0":"2020-03-03T19:08:49.745Z","6.0.0-canary.9cf5e9842.0":"2020-03-03T23:24:51.233Z","6.0.0-canary.3657f8863.0":"2020-03-04T17:43:19.052Z","6.0.0-canary.98b843417.0":"2020-03-05T18:30:12.098Z","6.0.0-canary.17b9699c4.0":"2020-03-05T19:21:31.200Z","6.0.0-canary.6ee035572.0":"2020-03-09T16:45:40.299Z","6.0.0-canary.bd33cb56b.0":"2020-03-09T17:21:01.377Z","6.0.0-canary.9ebee4ceb.0":"2020-03-09T21:12:46.560Z","6.0.0-canary.26c049afa.0":"2020-03-10T17:01:38.860Z","6.0.0-canary.1db5c9fc8.0":"2020-03-10T20:35:30.611Z","6.0.0-canary.4971637f4.0":"2020-03-10T22:57:04.673Z","6.0.0-canary.1ae8130ce.0":"2020-03-10T23:04:42.029Z","6.0.0-canary.8639c2690.0":"2020-03-11T06:32:30.078Z","6.0.0-canary.d5808057f.0":"2020-03-11T16:24:45.941Z","6.0.0-canary.b3f58203d.0":"2020-03-11T19:37:12.918Z","6.0.0-canary.bec065920.0":"2020-03-12T20:19:18.706Z","6.0.0-canary.776291ef0.0":"2020-03-17T19:19:56.549Z","6.0.0-canary.ece19f3dd.0":"2020-03-17T22:00:33.169Z","6.0.0-canary.4dc45af6c.0":"2020-03-18T01:47:20.511Z","6.0.0-canary.6b48781bf.0":"2020-03-18T15:33:38.953Z","6.0.0-canary.a88c8e4dc.0":"2020-03-19T17:35:07.183Z","6.0.0-canary.cafe18860.0":"2020-03-20T14:52:46.355Z","6.0.0-canary.35a32aaea.0":"2020-03-20T19:58:22.229Z","6.0.0-canary.e75deb854.0":"2020-03-20T22:14:29.418Z","6.0.0-canary.2cc6966f6.0":"2020-03-24T18:42:38.746Z","6.0.0-canary.8707953b6.0":"2020-03-24T18:46:23.446Z","6.0.0-canary.10af6cf39.0":"2020-03-25T18:17:32.456Z","6.0.0-canary.7d8f9c8d7.0":"2020-03-27T18:04:01.831Z","6.0.0-canary.d6315efe2.0":"2020-03-27T19:55:28.932Z","6.0.0-canary.a3016368d.0":"2020-03-27T21:18:50.892Z","6.0.0-canary.4b45b6620.0":"2020-03-31T15:55:31.572Z","6.0.0-canary.e84b9c8.0":"2020-04-01T16:55:08.013Z","6.0.0-canary.e33c49e.0":"2020-04-02T00:08:43.440Z","6.0.0-canary.f1f8e60.0":"2020-04-02T19:13:00.848Z","6.0.0-canary.1e17c49b3.0":"2020-04-03T18:03:14.129Z","6.0.0-canary.6a40ef217.0":"2020-04-03T19:23:52.364Z","6.0.0-canary.5f24faacb.0":"2020-04-08T15:35:20.632Z","6.0.0-canary.82fa986b9.0":"2020-04-08T15:40:54.900Z","6.0.0-canary.9930d9cc5.0":"2020-04-08T19:31:57.218Z","6.0.0-canary.6601d24af.0":"2020-04-09T00:29:11.745Z","6.0.0-canary.05f5e1583.0":"2020-04-09T00:46:24.688Z","6.0.0-canary.bce00e186.0":"2020-04-09T15:21:51.717Z","6.0.0-canary.927fa902c.0":"2020-04-09T18:45:47.744Z","6.0.0-canary.eb28b6ecc.0":"2020-04-10T19:30:20.079Z","6.0.0-canary.816a43b42.0":"2020-04-10T20:52:00.251Z","6.0.0-canary.008c4d319.0":"2020-04-13T16:33:12.497Z","6.0.0-canary.cbb3f28ca.0":"2020-04-14T05:05:20.520Z","6.0.0-canary.f172b0f90.0":"2020-04-14T23:09:43.697Z","6.0.0-canary.c02642273.0":"2020-04-15T16:16:36.760Z","6.0.0-canary.8a299b568.0":"2020-04-15T22:42:41.890Z","6.0.0-canary.490fbdc09.0":"2020-04-16T05:59:07.203Z","6.0.0-canary.f838c6e55.0":"2020-04-16T14:25:46.242Z","6.0.0-canary.ce6cb7024.0":"2020-04-16T17:18:25.990Z","6.0.0-canary.0ab62a65b.0":"2020-04-16T18:53:38.291Z","6.0.0-canary.ca61b656f.0":"2020-04-16T19:59:22.899Z","6.0.0-canary.45a6615e3.0":"2020-04-16T20:32:15.257Z","6.0.0-canary.4b04cdb0f.0":"2020-04-17T17:40:21.407Z","6.0.0-canary.b273afa93.0":"2020-04-17T23:02:18.547Z","6.0.0-canary.b70bc601e.0":"2020-04-17T23:20:54.276Z","6.0.0-canary.c4b4bba96.0":"2020-04-18T00:17:08.530Z","6.0.0-canary.6c1ebc721.0":"2020-04-20T19:57:36.925Z","6.0.0-canary.9cff4318f.0":"2020-04-20T20:55:07.649Z","6.0.0-canary.7b4482402.0":"2020-04-20T22:19:32.741Z","6.0.0-canary.deda86d8c.0":"2020-04-21T01:14:11.000Z","6.0.0-canary.d10412cb2.0":"2020-04-21T18:17:42.661Z","6.0.0-canary.c141801d5.0":"2020-04-21T19:41:19.040Z","6.0.0-canary.28d10a96e.0":"2020-04-22T22:06:32.083Z","7.0.0-canary.8540808be.0":"2020-04-23T17:25:08.630Z","6.0.0":"2020-04-23T17:25:38.009Z","7.0.0-canary.2673adb74.0":"2020-04-23T22:44:53.981Z","7.0.0-canary.b10d0d7f1.0":"2020-04-24T00:20:27.369Z","7.0.0-canary.3bd8c1bac.0":"2020-04-24T21:05:24.389Z","7.0.0-canary.b83c8dc22.0":"2020-04-24T21:18:11.180Z","7.0.0-canary.1b3dd846d.0":"2020-04-25T00:43:18.485Z","7.0.0-canary.29debfea7.0":"2020-04-27T12:31:24.843Z","7.0.0-canary.28d32f8e0.0":"2020-04-27T14:05:49.873Z","7.0.0-canary.af71cfdd6.0":"2020-04-28T23:16:49.222Z","7.0.0-canary.99d2fc961.0":"2020-04-29T10:43:02.767Z","7.0.0-canary.0e052b24f.0":"2020-04-30T01:28:47.057Z","7.0.0-canary.ff4bc632a.0":"2020-04-30T08:27:00.387Z","7.0.0-canary.b0f83d2fd.0":"2020-04-30T14:31:56.252Z","7.0.0-canary.e59906a57.0":"2020-05-01T15:41:37.915Z","7.0.0-canary.c02712b59.0":"2020-05-01T18:25:04.316Z","7.0.0-canary.15d65448e.0":"2020-05-01T19:21:48.660Z","7.0.0-canary.142b1549e.0":"2020-05-01T22:35:09.874Z","7.0.0-canary.524b7b812.0":"2020-05-03T20:46:56.776Z","7.0.0-canary.bd8ca9678.0":"2020-05-04T17:18:18.406Z","7.0.0-canary.2553e86fe.0":"2020-05-04T17:30:16.073Z","7.0.0-canary.03dec929e.0":"2020-05-04T23:32:45.044Z","7.0.0-canary.d92d8c93e.0":"2020-05-05T16:58:08.245Z","7.0.0-canary.09f591967.0":"2020-05-05T21:03:29.703Z","7.0.0-canary.3846ce311.0":"2020-05-06T14:08:42.469Z","7.0.0-canary.ed7f32463.0":"2020-05-06T16:06:09.522Z","7.0.0-canary.8135cc085.0":"2020-05-06T19:54:24.844Z","7.0.0-canary.deb212de4.0":"2020-05-06T22:17:58.330Z","7.0.0-canary.f83e00898.0":"2020-05-07T16:48:46.145Z","7.0.0-canary.047e6b337.0":"2020-05-08T18:37:42.831Z","7.0.0-canary.119e21426.0":"2020-05-08T20:21:39.176Z","7.0.0-canary.2f052d824.0":"2020-05-08T21:06:23.130Z","7.0.0-canary.e84444387.0":"2020-05-08T21:30:50.670Z","7.0.0-canary.893eb1876.0":"2020-05-11T14:12:13.052Z","7.0.0-canary.a5aeb3001.0":"2020-05-11T14:27:56.966Z","7.0.0-canary.610c68d97.0":"2020-05-11T19:31:39.855Z","7.0.0-canary.ed52af767.0":"2020-05-11T20:26:25.908Z","7.0.0-canary.058cfd23c.0":"2020-05-11T21:24:24.745Z","7.0.0-canary.0a371b4fe.0":"2020-05-12T23:17:16.397Z","7.0.0-canary.2139200b3.0":"2020-05-13T14:46:29.004Z","7.0.0-canary.744d751a0.0":"2020-05-14T04:42:01.904Z","7.0.0-canary.ad0c0c103.0":"2020-05-14T14:50:39.091Z","7.0.0-canary.fd8f8f2b7.0":"2020-05-18T17:52:56.141Z","7.0.0-canary.730920fbb.0":"2020-05-18T19:43:15.355Z","7.0.0-canary.bcdad99bb.0":"2020-05-19T03:17:19.217Z","7.0.0-canary.4497b86ed.0":"2020-05-19T03:50:05.576Z","7.0.0-canary.2e60575da.0":"2020-05-19T16:08:26.766Z","7.0.0-canary.e3eacefcc.0":"2020-05-19T17:37:18.511Z","7.0.0-canary.b065a4d2b.0":"2020-05-20T14:35:41.783Z","7.0.0-canary.4ebce8d78.0":"2020-05-20T20:49:37.145Z","7.0.0-canary.b0fdca492.0":"2020-05-20T23:02:01.410Z","7.0.0-canary.c67667e8e.0":"2020-05-21T14:11:44.989Z","7.0.0-canary.62b5f37db.0":"2020-05-21T16:40:29.111Z","7.0.0-canary.2e218dbf8.0":"2020-05-21T17:01:22.177Z","7.0.0-canary.7fd792bb9.0":"2020-05-21T17:13:54.974Z","7.0.0-canary.a66493cd8.0":"2020-05-21T17:17:14.963Z","7.0.0-canary.da05f66e1.0":"2020-05-21T17:19:09.642Z","7.0.0-canary.740860e78.0":"2020-05-21T17:25:56.184Z","7.0.0-canary.5cea2610f.0":"2020-05-21T17:27:56.082Z","7.0.0-canary.cf7747ef7.0":"2020-05-21T17:28:13.892Z","7.0.0-canary.862d0d7bc.0":"2020-05-21T17:30:57.056Z","7.0.0-canary.0008c8a91.0":"2020-05-21T19:32:24.627Z","7.0.0-canary.541638fa2.0":"2020-05-21T19:47:21.886Z","7.0.0-canary.6167cd075.0":"2020-05-21T20:20:16.781Z","7.0.0-canary.863ac1b0f.0":"2020-05-21T20:58:55.145Z","7.0.0-canary.d30a214ac.0":"2020-05-21T21:03:04.928Z","7.0.0-canary.62abbc8d7.0":"2020-05-21T21:27:51.639Z","7.0.0-canary.49bf31d5c.0":"2020-05-21T21:31:13.784Z","7.0.0-canary.8e17857d0.0":"2020-05-21T21:32:05.283Z","7.0.0-canary.c113fc942.0":"2020-05-21T22:45:39.366Z","7.0.0-canary.912d9021d.0":"2020-05-26T18:44:27.682Z","7.0.0-canary.68a2af131.0":"2020-05-26T19:06:31.911Z","7.0.0-canary.01de07011.0":"2020-05-26T19:51:56.111Z","7.0.0-canary.51d4535fe.0":"2020-05-26T21:33:57.395Z","7.0.0-canary.b86d826b7.0":"2020-05-26T22:12:54.091Z","7.0.0-canary.d91794c7e.0":"2020-05-26T23:54:14.322Z","7.0.0-canary.8c6d7e076.0":"2020-05-27T18:58:31.914Z","7.0.0-canary.5b5f62f93.0":"2020-05-27T19:15:34.106Z","7.0.0-canary.d9972abb1.0":"2020-05-27T20:20:04.794Z","7.0.0-canary.6556eda2b.0":"2020-05-27T20:29:16.285Z","7.0.0-canary.32aa23641.0":"2020-05-27T21:37:27.757Z","7.0.0-canary.654934dfa.0":"2020-05-28T00:36:09.263Z","7.0.0-canary.41910b8b8.0":"2020-05-28T00:50:34.626Z","7.0.0-canary.d66d22bf9.0":"2020-05-28T19:54:27.305Z","7.0.0-canary.8904f3cbe.0":"2020-05-29T16:49:36.082Z","7.0.0-canary.51512a4ac.0":"2020-05-29T19:14:20.980Z","7.0.0-canary.0743288fb.0":"2020-05-29T20:04:17.513Z","7.0.0-canary.06ef147b5.0":"2020-05-29T20:39:56.928Z","7.0.0-canary.8073a20a9.0":"2020-05-29T23:24:47.661Z","7.0.0-canary.72ff42330.0":"2020-06-01T16:43:04.891Z","7.0.0-canary.9ea52070f.0":"2020-06-01T16:48:19.281Z","7.0.0-canary.d86ad3b60.0":"2020-06-01T17:48:04.401Z","7.0.0-canary.b9776b1d0.0":"2020-06-01T18:24:53.706Z","7.0.0-canary.ba6f7c294.0":"2020-06-02T17:01:54.796Z","7.0.0-canary.cf3b664ab.0":"2020-06-02T18:22:41.481Z","7.0.0-canary.4ba3c9a31.0":"2020-06-02T23:51:30.450Z","7.0.0-canary.388b042c7.0":"2020-06-03T13:45:43.499Z","7.0.0-canary.cca1ca84d.0":"2020-06-03T16:01:50.570Z","7.0.0-canary.9b0b5f2e0.0":"2020-06-03T18:56:46.648Z","7.0.0-canary.0a7895f4d.0":"2020-06-03T21:08:15.113Z","7.0.0-canary.7461aad68.0":"2020-06-03T22:11:26.415Z","7.0.0-canary.a0dc2b5c4.0":"2020-06-04T21:12:59.098Z","7.0.0-canary.2b420c5b3.0":"2020-06-08T16:13:24.922Z","7.0.0-canary.8fa22aacc.0":"2020-06-08T18:03:48.377Z","7.0.0-canary.21c4e4ed8.0":"2020-06-08T18:43:25.823Z","7.0.0-canary.dfde46516.0":"2020-06-08T19:41:00.495Z","7.0.0-canary.05cc5c206.0":"2020-06-08T20:55:57.324Z","7.0.0-canary.3ee488f1c.0":"2020-06-09T14:53:09.237Z","7.0.0-canary.b83d720ee.0":"2020-06-09T17:25:28.341Z","7.0.0-canary.afb1c11a9.0":"2020-06-09T20:15:40.370Z","7.0.0-canary.39e6f71e2.0":"2020-06-09T23:38:51.730Z","7.0.0-canary.d4c66dc7d.0":"2020-06-11T17:45:08.000Z","7.0.0-canary.be4a19f9f.0":"2020-06-12T06:07:22.689Z","7.0.0-canary.a6ac8f629.0":"2020-06-15T21:29:58.298Z","7.0.0-canary.9833dc287.0":"2020-06-16T19:48:33.924Z","7.0.0-canary.3aa33998e.0":"2020-06-16T20:20:11.863Z","7.0.0-canary.d2b54d183.0":"2020-06-18T01:14:58.382Z","7.0.0-canary.f2a488e95.0":"2020-06-18T15:03:13.902Z","7.0.0-canary.bd8d1aafa.0":"2020-06-18T15:15:33.582Z","7.0.0-canary.1321eb968.0":"2020-06-19T19:20:34.367Z","7.0.0-canary.db5cc0382.0":"2020-06-19T19:26:58.521Z","7.0.0-canary.6ac9bf031.0":"2020-06-19T19:47:23.273Z","7.0.0-canary.c21b5c367.0":"2020-06-19T20:09:38.640Z","7.0.0-canary.bfdd7fd39.0":"2020-06-19T20:19:11.131Z","7.0.0-canary.10b505785.0":"2020-06-19T20:20:36.657Z","7.0.0-canary.6483d3f44.0":"2020-06-19T20:36:47.699Z","7.0.0-canary.30a74e921.0":"2020-06-19T20:39:04.315Z","7.0.0-canary.c20727498.0":"2020-06-19T20:41:57.795Z","7.0.0-canary.4e360ae94.0":"2020-06-19T20:58:43.324Z","7.0.0-canary.8550fa53b.0":"2020-06-19T21:00:56.619Z","7.0.0-canary.93ade142e.0":"2020-06-19T21:02:04.103Z","7.0.0-canary.a0032f5bb.0":"2020-06-19T21:27:05.766Z","7.0.0-canary.3f342e721.0":"2020-06-19T21:29:06.567Z","7.0.0-canary.ff89457cc.0":"2020-06-19T21:30:31.149Z","7.0.0-canary.4a1855cf8.0":"2020-06-19T21:33:16.277Z","7.0.0-canary.8602f1b4d.0":"2020-06-22T17:22:49.454Z","7.0.0-canary.69f9f0982.0":"2020-06-22T21:13:37.382Z","7.0.0-canary.369a293f0.0":"2020-06-22T21:15:48.255Z","7.0.0-canary.f1432b5c6.0":"2020-06-22T21:24:32.315Z","7.0.0-canary.4757a16b4.0":"2020-06-22T21:52:23.293Z","7.0.0-canary.f8f472762.0":"2020-06-22T21:56:37.408Z","7.0.0-canary.7e4d55c34.0":"2020-06-22T22:28:33.152Z","7.0.0-canary.bd1dbc91f.0":"2020-06-23T14:27:10.616Z","7.0.0-canary.31523bc62.0":"2020-06-23T14:32:29.498Z","7.0.0-canary.a96b6d4d6.0":"2020-06-23T14:39:09.163Z","7.0.0-canary.ef3a09533.0":"2020-06-23T14:47:12.515Z","7.0.0-canary.080965f39.0":"2020-06-23T15:16:43.092Z","7.0.0-canary.1bd67b65d.0":"2020-06-23T15:59:00.721Z","7.0.0-canary.18ca31248.0":"2020-06-23T18:23:51.755Z","7.0.0-canary.39cf00836.0":"2020-06-23T18:47:07.868Z","7.0.0-canary.1bfda9e05.0":"2020-06-23T18:59:33.787Z","7.0.0-canary.08731bd95.0":"2020-06-23T19:02:12.447Z","7.0.0":"2020-06-23T19:09:55.103Z","8.0.0-canary.a3212b209.0":"2020-06-23T19:10:45.711Z","8.0.0-canary.15e81fe98.0":"2020-06-23T19:39:35.688Z","8.0.0-canary.004c9d392.0":"2020-06-23T22:55:09.713Z","8.0.0-canary.03bde00f5.0":"2020-06-24T00:30:47.274Z","8.0.0-canary.599b8c319.0":"2020-06-24T14:55:23.867Z","8.0.0-canary.87e3be418.0":"2020-06-24T17:52:26.592Z","8.0.0-canary.035cf2a6f.0":"2020-06-24T18:37:41.966Z","8.0.0-canary.2fed2c12f.0":"2020-06-25T19:59:42.468Z","8.0.0-canary.38197b443.0":"2020-06-25T21:21:46.160Z","8.0.0-canary.69a35e80c.0":"2020-06-26T17:37:54.607Z","8.0.0-canary.df7154fb3.0":"2020-06-26T18:15:55.362Z","8.0.0-canary.d5618602a.0":"2020-06-26T21:47:25.342Z","8.0.0-canary.e590b376b.0":"2020-06-26T23:22:45.814Z","8.0.0-canary.0c9d6bd2d.0":"2020-06-29T17:14:30.344Z","8.0.0-canary.c1fec4246.0":"2020-06-29T17:29:35.766Z","8.0.0-canary.c678a9d34.0":"2020-06-29T17:50:50.638Z","8.0.0-canary.521afaf6e.0":"2020-06-30T15:04:33.750Z","8.0.0-canary.a2ad48839.0":"2020-06-30T19:13:29.677Z","8.0.0-canary.ec2385881.0":"2020-06-30T21:46:03.597Z","8.0.0-canary.610c26c4a.0":"2020-07-01T14:55:13.180Z","8.0.0-canary.e2ea4a99e.0":"2020-07-01T19:26:12.630Z","8.0.0-canary.a78ceb112.0":"2020-07-01T19:38:05.364Z","8.0.0-canary.b0c456d33.0":"2020-07-06T22:40:16.512Z","8.0.0-canary.2e5711e04.0":"2020-07-08T16:47:05.344Z","8.0.0-canary.811fc5d24.0":"2020-07-08T17:14:56.875Z","8.0.0-canary.6ed717ddd.0":"2020-07-08T19:43:11.459Z","8.0.0-canary.d850de590.0":"2020-07-09T18:04:35.110Z","8.0.0-canary.e07a70841.0":"2020-07-09T18:34:28.712Z","8.0.0-canary.37947ed6c.0":"2020-07-09T20:35:03.095Z","8.0.0-canary.5d443afec.0":"2020-07-09T20:50:56.547Z","8.0.0-canary.9ac1ed914.0":"2020-07-09T21:19:50.440Z","8.0.0-canary.1e7cb6198.0":"2020-07-09T22:11:22.844Z","8.0.0-canary.843f636c0.0":"2020-07-10T17:41:46.252Z","8.0.0-canary.b2edaeead.0":"2020-07-10T18:06:19.666Z","8.0.0-canary.5dac1f624.0":"2020-07-13T16:33:29.351Z","8.0.0-canary.4497acef8.0":"2020-07-14T14:19:04.914Z","8.0.0-canary.e6e23019d.0":"2020-07-14T20:09:36.384Z","8.0.0-canary.d548d7a92.0":"2020-07-14T21:12:14.241Z","8.0.0-canary.58ce529cc.0":"2020-07-14T21:14:11.282Z","8.0.0-canary.a0f1202dc.0":"2020-07-14T21:33:17.055Z","8.0.0-canary.ad4df58c1.0":"2020-07-15T00:08:32.128Z","8.0.0-canary.01db89053.0":"2020-07-16T16:38:10.599Z","8.0.0-canary.fb5a4cdeb.0":"2020-07-20T19:19:08.990Z","8.0.0-canary.8df0f517c.0":"2020-07-20T23:54:47.977Z","8.0.0-canary.abcdbcfeb.0":"2020-07-21T00:49:20.426Z","8.0.0-canary.7bd5075de.0":"2020-07-21T18:46:15.930Z","8.0.0-canary.405a29a20.0":"2020-07-22T22:22:23.529Z","8.0.0-canary.f3693ac4c.0":"2020-07-22T22:32:44.492Z","8.0.0-canary.12a109680.0":"2020-07-22T23:02:39.718Z","8.0.0-canary.bbd06696e.0":"2020-07-22T23:52:03.861Z","8.0.0-canary.4951e7651.0":"2020-07-23T01:48:37.077Z","8.0.0-canary.75deebbef.0":"2020-07-23T17:44:57.914Z","8.0.0-canary.95aff33ee.0":"2020-07-23T18:46:32.419Z","8.0.0-canary.9d9f47473.0":"2020-07-23T19:57:47.761Z","8.0.0-canary.00dfbf6be.0":"2020-07-23T20:58:40.511Z","8.0.0-canary.b87e522d2.0":"2020-07-23T21:22:52.403Z","8.0.0-canary.5b3e150e5.0":"2020-07-24T01:23:02.851Z","8.0.0-canary.f0ae11786.0":"2020-07-24T01:42:50.462Z","8.0.0-canary.fb4ee66c0.0":"2020-07-24T02:09:57.871Z","8.0.0-canary.5511e0aeb.0":"2020-07-24T16:56:03.997Z","8.0.0-canary.8388a9bf6.0":"2020-07-24T20:12:10.286Z","8.0.0-canary.ac405eae1.0":"2020-07-27T15:05:29.514Z","8.0.0-canary.75553837c.0":"2020-07-27T15:11:29.595Z","8.0.0-canary.b96fbfc7a.0":"2020-07-27T15:37:04.003Z","8.0.0-canary.61f1a8d85.0":"2020-07-27T15:46:05.650Z","8.0.0-canary.81dc33377.0":"2020-07-27T15:58:13.674Z","8.0.0-canary.ffd9ede58.0":"2020-07-27T16:31:25.112Z","8.0.0-canary.52dc55acf.0":"2020-07-27T17:07:38.451Z","8.0.0-canary.d4274ff05.0":"2020-07-27T19:49:50.867Z","8.0.0-canary.b82d0696d.0":"2020-07-27T19:57:08.458Z","8.0.0-canary.c2852000d.0":"2020-07-27T20:57:20.576Z","8.0.0-canary.f86f83f54.0":"2020-07-27T21:53:15.067Z","8.0.0-canary.41eb1684c.0":"2020-07-28T17:49:24.637Z","8.0.0-canary.9e2f6c450.0":"2020-07-28T22:38:18.278Z","8.0.0-canary.e6950b55a.0":"2020-07-28T22:51:16.618Z","8.0.0-canary.5e51ee38e.0":"2020-07-28T23:15:04.107Z","8.0.0-canary.a3898ffcf.0":"2020-07-29T00:35:29.619Z","8.0.0-canary.bc5cc6c96.0":"2020-07-29T00:48:20.946Z","8.0.0-canary.9bdeaf928.0":"2020-07-29T01:19:40.773Z","8.0.0-canary.fde2c1f9d.0":"2020-07-29T01:34:09.550Z","8.0.0-canary.6b3876d5d.0":"2020-07-29T01:37:53.909Z","8.0.0-canary.30ce17873.0":"2020-07-29T17:13:47.692Z","8.0.0-canary.f6bb43bf0.0":"2020-07-29T18:24:08.261Z","8.0.0-canary.6af75f6ab.0":"2020-07-30T00:00:27.351Z","8.0.0-canary.42d7a65aa.0":"2020-07-30T00:09:23.447Z","8.0.0-canary.85abdabb7.0":"2020-07-30T00:14:28.228Z","8.0.0-canary.49fb20ca3.0":"2020-07-30T01:26:45.037Z","8.0.0-canary.962d4abbb.0":"2020-07-30T16:09:22.622Z","8.0.0-canary.2fcee40cb.0":"2020-07-30T17:20:41.921Z","8.0.0-canary.bd5987f5a.0":"2020-07-30T17:45:18.826Z","8.0.0-canary.005e86a9b.0":"2020-07-30T17:58:53.636Z","8.0.0-canary.e309c7c68.0":"2020-07-30T18:07:42.428Z","8.0.0-canary.935a51cc0.0":"2020-07-30T18:19:28.534Z","8.0.0-canary.74839da7b.0":"2020-07-30T18:30:27.112Z","8.0.0-canary.f041a48c9.0":"2020-07-30T22:58:28.478Z","8.0.0-canary.fbb1381e1.0":"2020-07-31T15:49:30.050Z","8.0.0-canary.7f61d5785.0":"2020-07-31T17:22:11.774Z","8.0.0-canary.e1bc84d10.0":"2020-08-03T17:49:49.464Z","8.0.0-canary.096a7a066.0":"2020-08-03T17:52:30.816Z","8.0.0-canary.aa3a3e5a4.0":"2020-08-03T17:52:49.272Z","8.0.0-canary.5903d39af.0":"2020-08-03T17:53:08.678Z","8.0.0-canary.72258f898.0":"2020-08-04T01:16:23.392Z","8.0.0-canary.1b44b43c8.0":"2020-08-04T16:47:13.997Z","8.0.0-canary.e9d2e2f96.0":"2020-08-04T20:23:21.115Z","8.0.0-canary.b9dff0a19.0":"2020-08-05T03:47:45.302Z","8.0.0-canary.2bd09a706.0":"2020-08-05T03:52:54.498Z","8.0.0-canary.e0560522f.0":"2020-08-05T17:18:41.641Z","8.0.0-canary.08ca4d0ec.0":"2020-08-05T17:38:31.334Z","8.0.0-canary.08090126b.0":"2020-08-06T19:31:45.858Z","8.0.0-canary.e8bf5b2ac.0":"2020-08-06T21:49:03.718Z","8.0.0-canary.e3b746208.0":"2020-08-06T22:25:47.420Z","8.0.0-canary.96a640534.0":"2020-08-06T22:40:37.080Z","8.0.0-canary.9f9aac825.0":"2020-08-07T20:50:27.318Z","8.0.0-canary.fc65fd00b.0":"2020-08-10T15:19:25.902Z","8.0.0-canary.02e372c5f.0":"2020-08-10T15:47:27.836Z","8.0.0-canary.66669e3b6.0":"2020-08-10T15:51:41.043Z","8.0.0-canary.6d1ea9761.0":"2020-08-11T14:29:51.914Z","8.0.0-canary.79414bf9f.0":"2020-08-11T19:00:45.642Z","8.0.0-canary.85a5272df.0":"2020-08-11T20:07:08.162Z","8.0.0-canary.fda053eb8.0":"2020-08-12T20:03:09.489Z","8.0.0-canary.760873445.0":"2020-08-12T21:42:17.725Z","8.0.0-canary.2f4711a30.0":"2020-08-12T21:52:16.462Z","8.0.0-canary.2d72f3659.0":"2020-08-12T21:59:41.118Z","8.0.0-canary.1fee70a5e.0":"2020-08-12T23:27:44.872Z","8.0.0-canary.023f3fa34.0":"2020-08-13T01:11:21.504Z","8.0.0-canary.80f3a9e5d.0":"2020-08-13T01:27:58.875Z","8.0.0-canary.a1dcfe97c.0":"2020-08-13T08:48:23.865Z","8.0.0-canary.af332d5be.0":"2020-08-13T21:16:23.294Z","8.0.0-canary.7dd4567c4.0":"2020-08-14T00:49:53.888Z","8.0.0-canary.ff870005a.0":"2020-08-14T01:15:14.564Z","8.0.0-canary.150f427a0.0":"2020-08-14T13:28:09.478Z","8.0.0-canary.bcc58290a.0":"2020-08-14T23:21:33.401Z","8.0.0-canary.4f55400bb.0":"2020-08-17T16:37:28.628Z","8.0.0-canary.000d64815.0":"2020-08-17T17:03:17.717Z","8.0.0-canary.defa599a8.0":"2020-08-17T20:30:51.279Z","8.0.0-canary.66b8ed7e6.0":"2020-08-18T18:35:47.675Z","8.0.0-canary.e2b1033df.0":"2020-08-19T18:40:58.137Z","8.0.0-canary.2e8c3dd2e.0":"2020-08-19T19:22:56.327Z","8.0.0-canary.b2e80a5d9.0":"2020-08-19T22:19:55.756Z","8.0.0-canary.ff88df637.0":"2020-08-19T22:31:53.026Z","8.0.0-canary.32fb314cd.0":"2020-08-20T10:36:26.902Z","8.0.0-canary.546277d32.0":"2020-08-20T16:41:58.804Z","8.0.0-canary.da72839f4.0":"2020-08-20T17:58:53.058Z","8.0.0-canary.346069ccb.0":"2020-08-20T18:17:20.605Z","8.0.0-canary.e27c5802f.0":"2020-08-20T19:14:10.891Z","8.0.0-canary.f4532b9c8.0":"2020-08-20T19:56:47.356Z","8.0.0-canary.fbf73c2a6.0":"2020-08-20T21:05:15.741Z","8.0.0-canary.cf800124f.0":"2020-08-20T21:51:40.533Z","8.0.0-canary.95e4eeea7.0":"2020-08-20T23:27:54.668Z","8.0.0-canary.91ab1c62a.0":"2020-08-21T15:10:43.348Z","8.0.0-canary.58eaa9f02.0":"2020-08-21T19:59:26.581Z","8.0.0-canary.238216fc4.0":"2020-08-24T15:39:42.523Z","8.0.0-canary.a1c65593d.0":"2020-08-25T03:02:54.363Z","8.0.0-canary.708cc09c4.0":"2020-08-25T15:55:24.211Z","8.0.0-canary.19bea2ad3.0":"2020-08-26T18:48:20.874Z","8.0.0-canary.911014711.0":"2020-08-27T16:07:00.205Z","8.0.0-canary.d3387f54c.0":"2020-09-03T20:53:17.955Z","8.0.0-canary.2ccf996cc.0":"2020-09-03T20:53:38.593Z","8.0.0-canary.744bfe5d8.0":"2020-09-03T20:54:30.257Z","8.0.0-canary.78da96eaf.0":"2020-09-08T19:11:48.804Z","8.0.0-canary.b0ed593cc.0":"2020-09-09T06:15:00.945Z","8.0.0-canary.85a1fa9ea.0":"2020-09-10T21:09:32.334Z","8.0.0-canary.0bc41a9c7.0":"2020-09-11T17:48:40.275Z","8.0.0-canary.fc0eb5013.0":"2020-09-11T19:54:27.886Z","8.0.0-canary.319bf66de.0":"2020-09-11T23:09:14.593Z","8.0.0-canary.5bfc305ec.0":"2020-09-13T22:59:14.590Z","8.0.0-canary.83d83f131.0":"2020-09-14T00:31:44.925Z","8.0.0-canary.40d8e4726.0":"2020-09-14T23:26:24.016Z","8.0.0-canary.c25d70a31.0":"2020-09-15T02:26:35.682Z","8.0.0-canary.2fe70126a.0":"2020-09-15T04:50:25.859Z","8.0.0-canary.d52b165b5.0":"2020-09-15T14:53:19.207Z","8.0.0-canary.a831d4799.0":"2020-09-15T17:50:49.494Z","8.0.0-canary.a306aa488.0":"2020-09-17T00:57:29.401Z","8.0.0-canary.fd608ff66.0":"2020-09-17T14:24:38.870Z","8.0.0-canary.3e435ba57.0":"2020-09-17T14:41:59.019Z","8.0.0-canary.c250ec52a.0":"2020-09-17T20:09:31.862Z","8.0.0-canary.e34e411b1.0":"2020-09-17T20:16:55.633Z","8.0.0-canary.4e9343929.0":"2020-09-17T20:42:06.123Z","8.0.0-canary.4e5c350c2.0":"2020-09-21T21:13:10.576Z","8.0.0-canary.16c563ef7.0":"2020-09-22T19:45:09.331Z","8.0.0-canary.fd8af3d43.0":"2020-09-23T19:31:15.109Z","8.0.0-canary.d4cd83a85.0":"2020-09-25T00:34:02.759Z","8.0.0-canary.199aecdfb.0":"2020-09-25T15:50:16.661Z","8.0.0-canary.38ef4501f.0":"2020-09-30T18:23:10.914Z","8.0.0-canary.774dcfc8e.0":"2020-10-01T09:53:03.222Z","8.0.0-canary.0f60323a8.0":"2020-10-08T21:09:01.523Z","8.0.0-canary.d71622574.0":"2020-10-09T16:30:27.445Z","8.0.0-canary.7a9afaf4b.0":"2020-10-09T22:52:44.647Z","8.0.0-canary.8a39352c8.0":"2020-10-12T17:45:25.235Z","8.0.0-canary.790ca85fd.0":"2020-10-12T21:55:41.746Z","8.0.0-canary.174c0becf.0":"2020-10-14T02:14:49.450Z","8.0.0-canary.c71ebfa02.0":"2020-10-14T04:16:27.313Z","8.0.0-canary.2ab716cbd.0":"2020-10-16T00:03:19.494Z","8.0.0-canary.43c1c5e2f.0":"2020-10-19T14:07:06.304Z","8.0.0-canary.ccc64eea3.0":"2020-10-26T22:50:32.274Z","8.0.0-canary.a79cdd019.0":"2020-10-27T16:30:12.785Z","8.0.0-canary.596e98424.0":"2020-10-28T16:02:29.275Z","8.0.0-canary.05d5facc2.0":"2020-10-28T16:10:56.419Z","8.0.0-canary.291b3553d.0":"2020-10-28T17:43:54.408Z","8.0.0-canary.dbc449b09.0":"2020-10-28T18:11:33.521Z","8.0.0-canary.4794b25da.0":"2020-10-28T18:40:16.261Z","8.0.0-canary.c61db90a5.0":"2020-10-28T18:58:34.329Z","8.0.0-canary.6d9648ab2.0":"2020-10-29T20:31:28.122Z","8.0.0-canary.5511c5254.0":"2020-10-30T17:59:14.235Z","8.0.0-canary.bd6e302a4.0":"2020-11-02T17:03:40.542Z","9.0.0-canary.d6b5cd418.0":"2020-11-02T22:58:00.881Z","8.0.0":"2020-11-02T22:58:19.650Z","9.0.0-canary.fdf9a2634.0":"2020-11-03T23:20:18.414Z","9.0.0-canary.4a86f30a0.0":"2020-11-03T23:26:41.969Z","9.0.0-canary.fc8b045f1.0":"2020-11-03T23:36:11.557Z","9.0.0-canary.a0b2db26b.0":"2020-11-04T00:07:47.979Z","9.0.0-canary.419e03572.0":"2020-11-04T01:32:07.430Z","9.0.0-canary.a432ad542.0":"2020-11-06T01:44:58.520Z","9.0.0-canary.e2e8aef1e.0":"2020-11-06T02:04:16.042Z","9.0.0-canary.ec6b68b34.0":"2020-11-06T18:55:32.032Z","9.0.0-canary.b39094d14.0":"2020-11-06T21:15:03.645Z","9.0.0-canary.8648b8258.0":"2020-11-12T10:43:42.077Z","9.0.0-canary.240c5f74f.0":"2020-11-12T20:19:36.003Z","9.0.0-canary.6cf6ba4f4.0":"2020-11-16T18:48:57.683Z","9.0.0-canary.07f3e01b7.0":"2020-11-16T21:44:36.082Z","9.0.0-canary.23491cf85.0":"2020-11-17T00:16:17.057Z","9.0.0-canary.b659d4fc3.0":"2020-11-17T00:24:00.961Z","9.0.0-canary.d8a3aed67.0":"2020-11-17T15:26:07.137Z","9.0.0-canary.482ff9091.0":"2020-11-17T17:56:54.725Z","9.0.0-canary.99cfb6bd5.0":"2020-11-18T18:42:39.845Z","9.0.0-canary.b98d15d90.0":"2020-11-18T22:33:57.382Z","9.0.0-canary.30c11bfc2.0":"2020-11-19T01:25:02.499Z","9.0.0-canary.1b731d51b.0":"2020-11-19T18:51:15.468Z","9.0.0-canary.4ae94ff78.0":"2020-11-19T18:54:09.843Z","9.0.0-canary.7ad038e1d.0":"2020-11-19T19:17:24.696Z","9.0.0-canary.a41527604.0":"2020-11-19T19:58:53.818Z","9.0.0-canary.7b0e2b377.0":"2020-11-20T22:54:31.267Z","9.0.0-canary.c927a5d05.0":"2020-11-23T19:46:04.238Z","9.0.0-canary.b349b5185.0":"2020-11-24T17:07:37.556Z","9.0.0-canary.9083b7d61.0":"2020-11-24T21:14:36.987Z","9.0.0-canary.eff7b46ac.0":"2020-11-24T23:29:58.728Z","9.0.0-canary.ae27b44b0.0":"2020-11-25T15:31:39.086Z","9.0.0-canary.2fbba2554.0":"2020-11-30T17:39:20.014Z","9.0.0-canary.6d8574fe1.0":"2020-11-30T17:50:28.802Z","9.0.0-canary.fd22355f7.0":"2020-11-30T22:58:33.932Z","9.0.0-canary.c4ab98722.0":"2020-12-02T00:55:28.113Z","9.0.0-canary.977585650.0":"2020-12-02T14:40:55.801Z","9.0.0-canary.c7edfc7b6.0":"2020-12-02T14:48:33.570Z","9.0.0-canary.4f3347306.0":"2020-12-02T15:06:30.170Z","9.0.0-canary.37fbae10d.0":"2020-12-02T18:15:21.662Z","9.0.0-canary.11da3c0db.0":"2020-12-02T20:21:20.365Z","9.0.0-canary.489d4c219.0":"2020-12-03T15:28:38.806Z","9.0.0-canary.6557a69d9.0":"2020-12-03T15:40:29.359Z","9.0.0-canary.4ea1b7c69.0":"2020-12-03T15:57:11.653Z","9.0.0-canary.eaeb78ce3.0":"2020-12-03T17:00:16.886Z","9.0.0-canary.1c156d69d.0":"2020-12-03T20:43:36.347Z","9.0.0-canary.832668d33.0":"2020-12-04T18:04:44.170Z","9.0.0-canary.4321323e4.0":"2020-12-07T11:27:56.526Z","9.0.0-canary.2d5f32d41.0":"2020-12-07T16:40:45.318Z","9.0.0-canary.8239afc64.0":"2020-12-07T19:48:23.342Z","9.0.0-canary.6871336f1.0":"2020-12-08T16:00:25.096Z","9.0.0-canary.9f718da94.0":"2020-12-08T16:12:05.624Z","9.0.0-canary.1fccb1418.0":"2020-12-08T16:27:17.652Z","9.0.0-canary.afb68894e.0":"2020-12-08T16:31:07.310Z","9.0.0-canary.fd88d40c2.0":"2020-12-08T16:44:02.067Z","9.0.0-canary.ba9e3109c.0":"2020-12-08T19:04:16.432Z","9.0.0-canary.1085c3b2d.0":"2020-12-09T19:09:56.533Z","9.0.0-canary.c5dda809d.0":"2020-12-09T20:48:35.824Z","9.0.0-canary.f5f1bd86a.0":"2020-12-09T21:06:48.220Z","9.0.0-canary.00f38200f.0":"2020-12-11T15:42:36.912Z","9.0.0-canary.ac41a5729.0":"2020-12-11T16:26:50.271Z","9.0.0-canary.7fe0e4f05.0":"2020-12-11T17:04:19.287Z","9.0.0-canary.9244508bd.0":"2020-12-11T19:05:52.956Z","9.0.0-canary.384a8eeb1.0":"2020-12-16T17:00:49.628Z","9.0.0-canary.eabf9d5c2.0":"2020-12-16T18:26:30.142Z","9.0.0-canary.30fdfd06e.0":"2020-12-16T19:06:21.828Z","9.0.0-canary.9590a8f90.0":"2020-12-22T17:40:56.375Z","9.0.0-canary.f89d8b8f2.0":"2020-12-22T23:03:53.286Z","9.0.0-canary.fb194dd35.0":"2020-12-28T20:44:38.556Z","9.0.0-canary.64f36e287.0":"2020-12-28T21:07:30.164Z","9.0.0-canary.b7bbe7022.0":"2020-12-29T18:46:50.607Z","9.0.0":"2020-12-29T19:44:55.415Z","10.0.0-canary.555aecce5.0":"2020-12-29T19:45:03.598Z","10.0.0-canary.776c18681.0":"2020-12-30T00:39:09.656Z","10.0.0-canary.671d72d95.0":"2020-12-30T20:10:45.943Z","10.0.0-canary.b4f5a1c9e.0":"2020-12-30T21:45:26.691Z","10.0.0-canary.a94bd8deb.0":"2020-12-30T22:03:16.911Z","10.0.0-canary.5d128511b.0":"2020-12-30T22:08:41.271Z","10.0.0-canary.365c69360.0":"2021-01-05T17:47:10.025Z","10.0.0-canary.700a8261a.0":"2021-01-05T20:59:20.787Z","10.0.0-canary.766981c15.0":"2021-01-05T22:39:06.696Z","10.0.0-canary.b28c576d9.0":"2021-01-05T22:48:59.608Z","10.0.0-canary.968735356.0":"2021-01-06T15:49:34.959Z","10.0.0-canary.c5e18b020.0":"2021-01-06T19:43:03.414Z","10.0.0-canary.bcff8a66a.0":"2021-01-06T20:24:44.397Z","10.0.0-canary.79328c9ff.0":"2021-01-07T02:33:06.989Z","10.0.0-canary.121e1f303.0":"2021-01-07T23:18:42.245Z","10.0.0-canary.abdd10065.0":"2021-01-08T17:50:26.323Z","10.0.0-canary.089de519c.0":"2021-01-08T22:19:35.734Z","10.0.0-canary.163119837.0":"2021-01-08T23:44:03.215Z","10.0.0-canary.b8a1a58e4.0":"2021-01-11T16:22:59.577Z","10.0.0-canary.7584267ff.0":"2021-01-12T01:11:02.778Z","10.0.0-canary.251ac04c0.0":"2021-01-12T19:53:52.499Z","10.0.0-canary.772cc1068.0":"2021-01-14T00:05:38.721Z","10.0.0-canary.fe13dd130.0":"2021-01-14T01:09:08.784Z","10.0.0-canary.c7c5da28f.0":"2021-01-14T01:32:49.594Z","10.0.0-canary.b2faa116a.0":"2021-01-19T19:25:23.747Z","10.0.0-canary.0c95c9f7b.0":"2021-01-19T22:52:45.107Z","10.0.0-canary.5268222c4.0":"2021-01-20T19:18:01.685Z","10.0.0-canary.2ed2d829b.0":"2021-01-20T23:06:51.384Z","10.0.0-canary.df00c2b30.0":"2021-01-21T19:53:43.313Z","10.0.0-canary.fd61b0476.0":"2021-01-21T20:08:27.653Z","10.0.0-canary.3fb3a0265.0":"2021-01-22T00:03:37.825Z","10.0.0-canary.07deaec27.0":"2021-01-22T16:55:12.182Z","10.0.0-canary.d2959b16c.0":"2021-01-22T18:51:03.062Z","10.0.0-canary.75f3bfe7c.0":"2021-01-22T22:50:13.562Z","10.0.0-canary.b9adb7a0f.0":"2021-01-22T23:34:04.373Z","10.0.0-canary.d29ec2862.0":"2021-01-25T16:22:10.054Z","10.0.0-canary.96be07c68.0":"2021-01-26T00:08:40.529Z","10.0.0-canary.e383944e9.0":"2021-01-26T01:43:56.550Z","10.0.0-canary.623af861e.0":"2021-01-26T03:44:11.053Z","10.0.0-canary.6863fd43a.0":"2021-01-26T21:31:36.012Z","10.0.0-canary.ea55b87ca.0":"2021-01-26T23:44:37.453Z","10.0.0-canary.e902ff05f.0":"2021-01-27T00:02:48.907Z","10.0.0-canary.2c9fc538a.0":"2021-01-27T00:26:06.757Z","10.0.0-canary.6bf56aaa4.0":"2021-01-27T01:18:52.887Z","10.0.0-canary.994873795.0":"2021-01-27T14:49:49.416Z","10.0.0-canary.96878e1d0.0":"2021-01-27T18:00:56.700Z","10.0.0-canary.3c117cdcc.0":"2021-01-27T18:31:04.660Z","10.0.0-canary.b411e7033.0":"2021-01-27T22:02:20.692Z","10.0.0-canary.a9ac16b4a.0":"2021-01-27T23:02:15.732Z","10.0.0-canary.fec7b42ca.0":"2021-01-28T19:13:29.026Z","10.0.0-canary.8e66dbfee.0":"2021-02-01T23:19:14.563Z","10.0.0-canary.637d15da6.0":"2021-02-02T18:47:46.981Z","10.0.0-canary.fb793939e.0":"2021-02-02T23:41:15.767Z","10.0.0-canary.15a4d40dd.0":"2021-02-03T02:17:27.645Z","10.0.0-canary.7a003acf0.0":"2021-02-04T02:32:48.293Z","10.0.0-canary.05f249666.0":"2021-02-04T17:48:49.184Z","10.0.0-canary.1a3a39629.0":"2021-02-04T18:41:58.945Z","10.0.0-canary.8b1cdb1be.0":"2021-02-04T22:33:30.227Z","10.0.0-canary.8271f00f7.0":"2021-02-04T22:59:31.563Z","10.0.0-canary.533092a90.0":"2021-02-05T03:45:40.887Z","11.0.0-canary.633a9fc7a.0":"2021-02-05T16:16:07.098Z","10.0.0":"2021-02-05T16:17:19.373Z","11.0.0-canary.b5227247d.0":"2021-02-05T17:40:46.704Z","11.0.0-canary.95322b11e.0":"2021-02-05T23:30:33.620Z","11.0.0-canary.1f318ff0f.0":"2021-02-06T00:03:45.504Z","11.0.0-canary.ab12cf7a3.0":"2021-02-08T15:01:43.009Z","11.0.0-canary.98db2c5ec.0":"2021-02-08T15:32:47.722Z","11.0.0-canary.1f86b9f6d.0":"2021-02-08T17:15:57.721Z","11.0.0-canary.aac8f5d9a.0":"2021-02-08T17:59:03.341Z","11.0.0-canary.750e18fc7.0":"2021-02-08T21:40:09.747Z","11.0.0-canary.b62b1266d.0":"2021-02-09T21:51:13.356Z","11.0.0-canary.a6b3101fb.0":"2021-02-11T23:15:41.580Z","11.0.0-canary.ed88df700.0":"2021-02-12T00:05:26.023Z","11.0.0-canary.d30efe6b4.0":"2021-02-12T02:40:41.000Z","11.0.0-canary.0393bdc4b.0":"2021-02-12T04:29:34.102Z","11.0.0-canary.7cd26af4d.0":"2021-02-12T15:58:10.728Z","11.0.0-canary.71fe9a067.0":"2021-02-12T16:29:25.620Z","11.0.0-canary.0fd56a86b.0":"2021-02-13T00:10:32.521Z","11.0.0-canary.f19bbc4af.0":"2021-02-16T22:14:55.114Z","11.0.0-canary.f9cac96cc.0":"2021-02-17T16:08:21.409Z","11.0.0-canary.79ce0878b.0":"2021-02-17T19:23:35.511Z","11.0.0-canary.d6e507b5b.0":"2021-02-17T19:56:55.750Z","11.0.0-canary.f2658381b.0":"2021-02-17T22:43:22.531Z","11.0.0-canary.97c4d4035.0":"2021-02-18T02:33:51.016Z","11.0.0-canary.2482cecc6.0":"2021-02-18T15:08:33.492Z","11.0.0-canary.f5bb4648c.0":"2021-02-18T16:03:43.643Z","11.0.0-canary.302c7a960.0":"2021-02-18T18:36:23.175Z","11.0.0-canary.aa0aaf026.0":"2021-02-18T19:21:50.613Z","11.0.0-canary.07ff0c452.0":"2021-02-18T19:41:18.812Z","11.0.0-canary.bed7ecd3e.0":"2021-02-18T23:26:21.440Z","11.0.0-canary.06dead2d6.0":"2021-02-19T00:35:43.547Z","11.0.0-canary.cddb03553.0":"2021-02-19T03:11:57.364Z","11.0.0-canary.d6d8d0476.0":"2021-02-19T05:35:14.573Z","11.0.0-canary.0b4a4b2eb.0":"2021-02-19T15:44:23.456Z","11.0.0-canary.3201cae47.0":"2021-02-19T22:59:18.423Z","11.0.0-canary.f1b1fd5d3.0":"2021-02-22T19:48:07.697Z","11.0.0-canary.7899e0fe0.0":"2021-02-22T22:44:35.059Z","11.0.0-canary.f19c86d13.0":"2021-02-22T23:29:19.173Z","11.0.0-canary.60e892d79.0":"2021-02-23T01:12:00.913Z","11.0.0-canary.c96bfa495.0":"2021-02-23T19:31:31.864Z","11.0.0-canary.fa9b59f67.0":"2021-02-23T19:32:40.245Z","11.0.0-canary.869e3497c.0":"2021-02-23T19:33:16.867Z","11.0.0-canary.750980728.0":"2021-02-23T19:33:27.342Z","11.0.0-canary.8ecd7c9a9.0":"2021-02-23T19:49:20.160Z","11.0.0-canary.9c85d505b.0":"2021-02-23T22:14:15.683Z","11.0.0-canary.9f2e85fb8.0":"2021-02-24T01:46:22.968Z","11.0.0-canary.19c4f29ef.0":"2021-02-25T19:21:01.234Z","11.0.0-canary.63df6e9bf.0":"2021-02-25T19:35:30.505Z","11.0.0-canary.981ad970a.0":"2021-02-26T00:06:01.344Z","11.0.0-canary.f9c9e39d6.0":"2021-02-26T18:37:36.356Z","11.0.0-canary.c97d7d881.0":"2021-03-01T20:51:55.434Z","11.0.0-canary.bf670dad7.0":"2021-03-03T00:19:34.690Z","11.0.0-canary.c7d98fcde.0":"2021-03-03T20:30:21.984Z","11.0.0-canary.4fef8bc1e.0":"2021-03-03T23:22:54.970Z","11.0.0-canary.afae3a3ec.0":"2021-03-03T23:41:02.617Z","11.0.0-canary.0a0b10f22.0":"2021-03-03T23:59:16.675Z","11.0.0-canary.6f678a91a.0":"2021-03-04T18:38:45.484Z","11.0.0-canary.f5f1b613c.0":"2021-03-04T20:48:04.905Z","11.0.0-canary.606e767ef.0":"2021-03-04T21:43:57.035Z","11.0.0-canary.f77a4dd1a.0":"2021-03-06T04:38:32.412Z","11.0.0-canary.2d6ba2c23.0":"2021-03-08T22:42:56.921Z","11.0.0-canary.7522dcaca.0":"2021-03-09T00:26:07.878Z","11.0.0-canary.5c0ab7401.0":"2021-03-09T22:51:06.598Z","11.0.0-canary.59010b6dc.0":"2021-03-10T16:55:33.945Z","11.0.0-canary.9e52f5544.0":"2021-03-10T23:23:43.798Z","11.0.0-canary.a678806f5.0":"2021-03-11T01:48:35.158Z","11.0.0-canary.b2d22df5b.0":"2021-03-11T17:01:16.601Z","11.0.0-canary.81911b707.0":"2021-03-11T18:21:50.669Z","11.0.0-canary.9eeb35c38.0":"2021-03-11T19:35:24.045Z","11.0.0-canary.12be3e95a.0":"2021-03-11T20:00:05.161Z","11.0.0-canary.e683bdf4a.0":"2021-03-11T20:07:19.094Z","11.0.0-canary.a07b6d486.0":"2021-03-11T20:31:33.007Z","11.0.0-canary.1e0653477.0":"2021-03-11T20:39:03.404Z","11.0.0-canary.148e8cfcc.0":"2021-03-11T22:42:53.070Z","11.0.0-canary.73a227194.0":"2021-03-12T00:22:23.771Z","11.0.0-canary.f8579b7ea.0":"2021-03-13T02:01:08.236Z","11.0.0-canary.d2a39d300.0":"2021-03-16T00:33:29.450Z","11.0.0-canary.7cf67823e.0":"2021-03-16T18:18:41.827Z","11.0.0-canary.67d780c79.0":"2021-03-16T19:46:23.790Z","11.0.0-canary.0f358ddae.0":"2021-03-16T22:10:48.232Z","11.0.0-canary.67eb0df80.0":"2021-03-16T22:38:07.821Z","11.0.0-canary.941ca3b3c.0":"2021-03-16T22:39:53.467Z","11.0.0-canary.3344d12ad.0":"2021-03-17T10:00:15.271Z","11.0.0-canary.6072ed604.0":"2021-03-17T22:58:07.512Z","11.0.0-canary.d3a6862af.0":"2021-03-18T16:18:17.872Z","11.0.0-canary.40dd242d5.0":"2021-03-18T21:15:46.347Z","11.0.0-canary.ec8f8465f.0":"2021-03-18T21:42:37.467Z","11.0.0-canary.da38969ec.0":"2021-03-18T22:16:24.500Z","11.0.0-canary.f5246264d.0":"2021-03-19T00:36:19.224Z","11.0.0-canary.03d34bbad.0":"2021-03-19T00:49:25.689Z","11.0.0-canary.cbc57c600.0":"2021-03-19T00:58:20.940Z","11.0.0-canary.d6c5bcf37.0":"2021-03-19T01:10:20.706Z","11.0.0-canary.fefc668d7.0":"2021-03-19T01:32:18.933Z","11.0.0-canary.faa7d3226.0":"2021-03-19T17:42:23.868Z","11.0.0-canary.c60449bc8.0":"2021-03-19T18:03:40.608Z","11.0.0-canary.5f0fc444a.0":"2021-03-19T18:36:15.194Z","11.0.0-canary.4567a750d.0":"2021-03-20T02:06:09.409Z","11.0.0-canary.0cde52f5a.0":"2021-03-23T00:01:24.462Z","11.0.0-canary.48f4b67fb.0":"2021-03-23T19:52:02.199Z","11.0.0-canary.0b8cff734.0":"2021-03-23T20:03:11.944Z","11.0.0-canary.8943b991f.0":"2021-03-23T20:28:06.051Z","11.0.0-canary.3955d8d3d.0":"2021-03-24T19:14:49.636Z","11.0.0-canary.23ea2d85e.0":"2021-03-25T17:30:40.824Z","11.0.0-canary.e3ec22f45.0":"2021-03-25T17:53:41.120Z","11.0.0-canary.4ceb42220.0":"2021-03-26T07:55:55.240Z","11.0.0-canary.dc9c84023.0":"2021-03-30T17:47:08.683Z","11.0.0-canary.56fc26962.0":"2021-03-31T00:19:36.518Z","11.0.0-canary.bc318250e.0":"2021-03-31T01:32:22.628Z","11.0.0-canary.edaee19aa.0":"2021-03-31T02:10:24.015Z","11.0.0-canary.24609b822.0":"2021-03-31T20:55:52.769Z","11.0.0-canary.b6cddc2b7.0":"2021-04-01T15:03:42.956Z","11.0.0-canary.94937c78c.0":"2021-04-01T20:59:25.230Z","11.0.0-canary.e7202cb57.0":"2021-04-01T22:46:02.606Z","11.0.0-canary.1f636b205.0":"2021-04-02T22:22:45.846Z","11.0.0-canary.94f50b260.0":"2021-04-05T15:03:43.491Z","11.0.0-canary.a4009b80a.0":"2021-04-05T21:59:09.149Z","11.0.0-canary.15604bd0d.0":"2021-04-05T22:40:57.492Z","11.0.0-canary.76da7876c.0":"2021-04-07T01:43:11.869Z","11.0.0-canary.6bcb6cbd2.0":"2021-04-07T18:52:39.086Z","11.0.0-canary.c91e8d141.0":"2021-04-07T18:56:34.026Z","11.0.0-canary.f77c50860.0":"2021-04-08T15:34:27.650Z","11.0.0-canary.367d88bdb.0":"2021-04-08T16:37:22.785Z","11.0.0-canary.0ec437d3b.0":"2021-04-08T19:34:13.948Z","11.0.0-canary.b2fa996a1.0":"2021-04-09T15:09:46.113Z","11.0.0-canary.24255c408.0":"2021-04-09T20:10:57.132Z","11.0.0-canary.7d6a4bb72.0":"2021-04-09T22:52:28.283Z","11.0.0-canary.352b295c1.0":"2021-04-12T18:14:22.457Z","11.0.0-canary.ab99b8064.0":"2021-04-13T14:42:11.514Z","11.0.0-canary.8f0a11e32.0":"2021-04-14T20:01:51.926Z","11.0.0-canary.f5c6db8fc.0":"2021-04-15T18:02:48.814Z","11.0.0-canary.3793a3143.0":"2021-04-15T18:30:01.384Z","11.0.0-canary.bc104bae7.0":"2021-04-15T19:45:00.374Z","12.0.0-canary.3f342c3f4.0":"2021-04-15T22:53:05.913Z","11.0.0":"2021-04-15T22:57:09.215Z","12.0.0-canary.2ebfc5374.0":"2021-04-16T20:43:48.542Z","12.0.0-canary.5631828e1.0":"2021-04-17T07:45:44.905Z","12.0.0-canary.bd685395b.0":"2021-04-19T18:40:13.597Z","12.0.0-canary.b52196498.0":"2021-04-19T19:56:46.452Z","12.0.0-canary.8ba3e298c.0":"2021-04-21T14:07:22.331Z","12.0.0-canary.c629eab71.0":"2021-04-21T19:55:44.809Z","12.0.0-canary.8ace3b810.0":"2021-04-21T20:36:43.156Z","12.0.0-canary.70beaf42d.0":"2021-04-21T20:48:21.133Z","12.0.0-canary.cad489689.0":"2021-04-22T16:48:15.381Z","12.0.0-canary.d928692b5.0":"2021-04-23T17:33:18.298Z","12.0.0-canary.8f68de8f3.0":"2021-04-23T18:11:48.170Z","12.0.0-canary.05753cf77.0":"2021-04-23T23:42:05.023Z","12.0.0-canary.ef43e6d96.0":"2021-04-23T23:48:22.630Z","12.0.0-canary.197f64fa2.0":"2021-04-26T17:08:29.088Z","12.0.0-canary.55ad2d7d8.0":"2021-04-27T01:18:42.552Z","12.0.0-canary.ec4ac5234.0":"2021-04-27T07:57:32.292Z","12.0.0-canary.b0579acdb.0":"2021-04-27T08:34:56.120Z","12.0.0-canary.81e2d4ff3.0":"2021-04-27T20:56:22.418Z","12.0.0-canary.c8edee52c.0":"2021-04-27T21:44:51.197Z","12.0.0-canary.f5b6110d6.0":"2021-04-27T22:06:17.807Z","12.0.0-canary.cee9b9e22.0":"2021-04-28T00:11:33.680Z","12.0.0-canary.96e83fca7.0":"2021-04-28T02:46:48.186Z","12.0.0-canary.4c497bd19.0":"2021-04-28T17:52:25.160Z","12.0.0-canary.105b15b96.0":"2021-04-28T21:43:33.658Z","12.0.0-canary.6e20259e3.0":"2021-04-28T21:48:08.925Z","12.0.0-canary.0f79a5d74.0":"2021-04-28T22:41:50.699Z","12.0.0-canary.84f3db9ed.0":"2021-04-29T14:16:33.107Z","12.0.0-canary.8fc29273c.0":"2021-04-29T21:22:12.266Z","12.0.0-canary.c50d20bab.0":"2021-04-29T23:00:42.785Z","12.0.0-canary.474836ad0.0":"2021-05-01T03:36:34.948Z","12.0.0-canary.f5ad92287.0":"2021-05-03T18:21:13.739Z","12.0.0-canary.af453daf8.0":"2021-05-03T18:52:17.991Z","12.0.0-canary.1f1918c24.0":"2021-05-03T19:21:24.386Z","12.0.0-canary.33148231f.0":"2021-05-03T19:37:45.846Z","12.0.0-canary.06b76fa74.0":"2021-05-03T19:44:44.516Z","12.0.0-canary.7c5000473.0":"2021-05-03T22:40:29.694Z","12.0.0-canary.de997644b.0":"2021-05-04T17:27:09.804Z","12.0.0-canary.d4d7f1cc2.0":"2021-05-04T17:53:51.664Z","12.0.0-canary.be999eb08.0":"2021-05-04T17:59:03.205Z","12.0.0-canary.eda1705fc.0":"2021-05-04T19:09:12.735Z","12.0.0-canary.718c90178.0":"2021-05-04T19:26:29.577Z","12.0.0-canary.0e3917299.0":"2021-05-04T19:29:15.047Z","12.0.0-canary.836b3c7db.0":"2021-05-04T20:32:43.083Z","12.0.0-canary.53d4e6d59.0":"2021-05-04T20:48:25.133Z","12.0.0-canary.18d147e27.0":"2021-05-04T20:56:59.061Z","12.0.0-canary.b9984794e.0":"2021-05-04T23:01:55.452Z","12.0.0-canary.b76f5fc9d.0":"2021-05-04T23:05:27.252Z","12.0.0-canary.055d4f10a.0":"2021-05-04T23:20:34.255Z","12.0.0-canary.5b6a46016.0":"2021-05-05T16:15:07.498Z","12.0.0-canary.33c9a737a.0":"2021-05-05T17:26:04.216Z","12.0.0-canary.9bc0effaf.0":"2021-05-05T20:58:51.911Z","12.0.0-canary.a1e0f2af5.0":"2021-05-05T21:39:48.951Z","12.0.0-canary.06930c96b.0":"2021-05-05T23:38:07.162Z","12.0.0-canary.03f525f9f.0":"2021-05-06T00:28:50.765Z","12.0.0-canary.e82ba2a26.0":"2021-05-06T15:54:59.882Z","12.0.0-canary.fc7c4e5ce.0":"2021-05-06T17:28:11.609Z","12.0.0-canary.65c04514d.0":"2021-05-06T18:42:04.306Z","12.0.0-canary.c97779ca6.0":"2021-05-06T21:41:45.073Z","12.0.0-canary.869d890d4.0":"2021-05-07T15:17:30.307Z","12.0.0-canary.ec22e1da9.0":"2021-05-10T18:22:28.518Z","12.0.0-nightly.7427449f0.0":"2021-05-10T18:44:41.070Z","12.0.0-canary.957cc3bf5.0":"2021-05-10T21:55:41.238Z","12.0.0-canary.88a33cd70.0":"2021-05-11T00:07:52.896Z","12.0.0-canary.d20dc6dba.0":"2021-05-11T00:23:34.058Z","12.0.0-canary.0ce2fdb02.0":"2021-05-11T00:57:30.506Z","12.0.0-canary.cb162da37.0":"2021-05-11T01:57:10.970Z","12.0.0-canary.573dc7ffd.0":"2021-05-11T02:16:13.904Z","12.0.0-canary.d5f6ad3fe.0":"2021-05-11T23:21:31.393Z","12.0.0-canary.25751d2ed.0":"2021-05-12T16:18:35.904Z","12.0.0-canary.a23ecb682.0":"2021-05-12T18:22:05.816Z","12.0.0-canary.33a954852.0":"2021-05-13T15:06:27.298Z","12.0.0-canary.a4484849b.0":"2021-05-13T15:29:50.252Z","12.0.0-canary.b4c3f513e.0":"2021-05-13T16:06:43.915Z","12.0.0-canary.1a8d06483.0":"2021-05-13T16:12:38.205Z","12.0.0-canary.8e6081836.0":"2021-05-14T21:39:36.641Z","12.0.0-canary.a2b0f4cee.0":"2021-05-14T21:52:48.344Z","12.0.0-canary.e8e39ad19.0":"2021-05-18T20:12:07.002Z","12.0.0-canary.4bb5eea2b.0":"2021-05-19T15:27:15.328Z","12.0.0-canary.ccce99cd6.0":"2021-05-20T00:55:43.909Z","12.0.0-canary.14767a8db.0":"2021-05-20T20:49:51.568Z","12.0.0-canary.22c6dcff9.0":"2021-05-24T15:17:31.108Z","12.0.0-canary.fadab3372.0":"2021-05-24T16:04:36.642Z","12.0.0-canary.caa73aeee.0":"2021-05-25T14:13:16.967Z","12.0.0-canary.ec31ae1ed.0":"2021-05-25T20:34:20.050Z","12.0.0-canary.8530d3514.0":"2021-05-27T16:03:43.945Z","12.0.0-canary.00b5899dc.0":"2021-06-01T22:44:33.687Z","12.0.0-canary.f1525ea3e.0":"2021-06-03T13:53:14.874Z","12.0.0-canary.464a00286.0":"2021-06-03T14:44:38.913Z","12.0.0-canary.474de7878.0":"2021-06-03T15:13:11.074Z","12.0.0-canary.b87ebf74d.0":"2021-06-03T17:45:21.389Z","12.0.0-canary.2daa49b35.0":"2021-06-04T16:13:06.158Z","12.0.0-canary.08db3d737.0":"2021-06-04T19:40:41.200Z","12.0.0-canary.5823407a7.0":"2021-06-08T00:47:06.496Z","12.0.0-canary.23b0c5e22.0":"2021-06-08T16:21:09.236Z","12.0.0-canary.2952c6a76.0":"2021-06-08T17:39:41.991Z","12.0.0-canary.f12425f88.0":"2021-06-10T01:04:45.745Z","12.0.0-canary.e543628c3.0":"2021-06-10T01:05:48.539Z","12.0.0-canary.e0c346286.0":"2021-06-10T16:34:46.502Z","12.0.0-canary.f43af5633.0":"2021-06-10T20:34:42.358Z","12.0.0-canary.8415ae585.0":"2021-06-11T16:04:40.976Z","12.0.0-canary.598fcccc8.0":"2021-06-11T21:45:25.308Z","12.0.0-canary.5d0605188.0":"2021-06-14T17:38:04.801Z","12.0.0-canary.f147a2271.0":"2021-06-14T19:17:01.428Z","12.0.0-canary.33579e00b.0":"2021-06-15T00:20:51.056Z","12.0.0-canary.a6909c0e6.0":"2021-06-15T18:29:06.635Z","12.0.0-canary.c18b5925b.0":"2021-06-15T21:02:25.588Z","12.0.0-canary.7ea2e830d.0":"2021-06-15T22:49:41.192Z","12.0.0-canary.271fff902.0":"2021-06-15T22:50:04.232Z","12.0.0-canary.d96f0a1e0.0":"2021-06-16T21:05:01.650Z","12.0.0-canary.a6183801a.0":"2021-06-16T22:04:17.081Z","12.0.0-canary.940550232.0":"2021-06-17T19:38:58.441Z","12.0.0-canary.f705e8048.0":"2021-06-18T15:23:17.816Z","12.0.0-canary.08d791f37.0":"2021-06-18T21:10:36.478Z","12.0.0-canary.e38d7440f.0":"2021-06-21T17:39:15.928Z","12.0.0-canary.75900a5a9.0":"2021-06-21T18:35:33.873Z","12.0.0-canary.33e6f50e9.0":"2021-06-23T00:10:51.804Z","12.0.0-canary.8c685301d.0":"2021-06-23T18:23:29.958Z","12.0.0-canary.8c7d994ae.0":"2021-06-23T19:26:22.495Z","12.0.0-canary.4ccd39bdd.0":"2021-06-24T16:13:43.423Z","12.0.0-canary.17553e9f8.0":"2021-06-28T22:51:20.688Z","12.0.0-canary.4c80072fd.0":"2021-06-29T18:39:45.709Z","12.0.0-canary.796811db7.0":"2021-07-01T00:02:18.083Z","12.0.0-canary.70e1efdca.0":"2021-07-01T17:05:16.258Z","12.0.0-canary.435866d32.0":"2021-07-02T18:20:09.736Z","12.0.0-canary.d0f9f3f2e.0":"2021-07-02T23:58:56.501Z","12.0.0-canary.adeac0549.0":"2021-07-08T15:08:04.904Z","12.0.0-canary.068fd5028.0":"2021-07-08T19:02:29.059Z","12.0.0-canary.5dfec7a14.0":"2021-07-12T20:03:09.409Z","12.0.0-canary.07a73750c.0":"2021-07-12T20:24:20.067Z","12.0.0-canary.3e4c6dca1.0":"2021-07-13T01:50:03.062Z","12.0.0-canary.ea77795b1.0":"2021-07-13T15:47:58.369Z","12.0.0-canary.15a179fad.0":"2021-07-13T18:08:01.034Z","12.0.0-canary.c73142a1b.0":"2021-07-13T18:43:07.131Z","12.0.0-canary.d923db73a.0":"2021-07-13T20:52:51.973Z","12.0.0-canary.22d29cbb4.0":"2021-07-13T22:49:20.346Z","12.0.0-canary.2749604bc.0":"2021-07-14T16:21:08.122Z","12.0.0-canary.e1703bed9.0":"2021-07-14T21:46:48.994Z","12.0.0-canary.de48eff0d.0":"2021-07-15T17:06:58.333Z","12.0.0-canary.4f060adc5.0":"2021-07-15T19:20:50.973Z","12.0.0-canary.bd25779b2.0":"2021-07-15T20:41:13.481Z","12.0.0-canary.9f68a932e.0":"2021-07-15T22:05:57.622Z","12.0.0-canary.4eecdeaf0.0":"2021-07-16T14:56:46.633Z","12.0.0-canary.7239684d4.0":"2021-07-16T15:58:00.023Z","12.0.0-canary.d5f1f7c72.0":"2021-07-16T16:12:53.898Z","12.0.0-canary.4d95812f9.0":"2021-07-16T19:42:04.957Z","12.0.0-canary.38d1846cc.0":"2021-07-19T18:40:42.720Z","12.0.0-canary.3f691eccf.0":"2021-07-20T16:07:38.807Z","12.0.0-canary.ebb5c73bb.0":"2021-07-20T16:55:45.204Z","12.0.0-nightly.778a0e8a.0":"2021-07-20T21:04:27.918Z","12.0.0-canary.791311bba.0":"2021-07-20T22:06:28.429Z","12.0.0-canary.85e9a6ac3.0":"2021-07-21T15:34:53.907Z","12.0.0-canary.6b0442278.0":"2021-07-21T18:48:48.590Z","12.0.0-canary.5f00e454a.0":"2021-07-22T17:04:58.061Z","12.0.0-canary.90e08fc6b.0":"2021-07-22T23:37:18.818Z","12.0.0-canary.cf5b9eb86.0":"2021-07-23T18:11:12.848Z","12.0.0-canary.3f36ac75c.0":"2021-07-23T18:31:14.253Z","12.0.0-canary.ea1e1b850.0":"2021-07-24T20:54:46.051Z","12.0.0-canary.22f390c43.0":"2021-07-27T18:58:50.273Z","12.0.0":"2021-07-27T19:48:49.272Z","13.0.0-canary.ae85f7eba.0":"2021-07-27T19:50:21.222Z","13.0.0-canary.5981207f7.0":"2021-07-27T23:17:07.937Z","13.0.0-canary.83bdd0222.0":"2021-07-28T17:24:43.397Z","13.0.0-canary.28656298a.0":"2021-07-29T18:12:02.632Z","13.0.0-canary.9e797daaf.0":"2021-07-29T18:34:19.741Z","13.0.0-canary.adb9f1ad8.0":"2021-07-30T19:03:50.635Z","13.0.0-canary.cc5377458.0":"2021-07-30T21:32:23.929Z","13.0.0-canary.a395972cf.0":"2021-08-03T21:22:19.466Z","13.0.0-canary.7c96e6b98.0":"2021-08-03T22:12:51.728Z","13.0.0-canary.a80c8b2c2.0":"2021-08-04T23:58:44.338Z","13.0.0-canary.3dd611091.0":"2021-08-05T03:55:16.925Z","13.0.0-canary.5dee37ff6.0":"2021-08-05T17:41:12.024Z","13.0.0-canary.bf405d22a.0":"2021-08-05T20:17:05.193Z","13.0.0-canary.b47dd37a6.0":"2021-08-05T20:48:55.540Z","13.0.0-canary.6c82b965b.0":"2021-08-06T16:13:49.589Z","13.0.0-canary.4ca11fe76.0":"2021-08-06T17:06:22.056Z","13.0.0-canary.510cf90f2.0":"2021-08-09T17:16:14.035Z","13.0.0-canary.17580ebf7.0":"2021-08-09T18:16:12.823Z","13.0.0-canary.7249a3060.0":"2021-08-09T18:20:31.566Z","13.0.0-canary.4c405863b.0":"2021-08-10T17:39:42.151Z","13.0.0-canary.f4241a42a.0":"2021-08-11T16:58:20.498Z","13.0.0-canary.0ad12ed3c.0":"2021-08-11T21:27:49.274Z","13.0.0-canary.077dcfcfe.0":"2021-08-12T17:54:19.398Z","13.0.0-canary.e3346766f.0":"2021-08-13T19:44:14.815Z","13.0.0-canary.2fb068fb0.0":"2021-08-13T19:47:30.957Z","13.0.0-canary.fb76c5069.0":"2021-08-16T20:07:08.949Z","13.0.0-canary.457d89aad.0":"2021-08-17T15:20:47.013Z","13.0.0-canary.0de2f2edc.0":"2021-08-17T20:53:13.573Z","13.0.0-canary.1f9259b9d.0":"2021-08-17T22:13:04.924Z","13.0.0-canary.3b9290351.0":"2021-08-18T05:22:22.450Z","13.0.0-canary.43d2eed2a.0":"2021-08-18T16:01:11.065Z","13.0.0-canary.0a9069300.0":"2021-08-19T16:16:37.202Z","13.0.0-canary.7da413ed8.0":"2021-08-20T15:47:30.520Z","13.0.0-canary.e1e69fd8e.0":"2021-08-20T19:31:21.012Z","13.0.0-canary.f5afc16df.0":"2021-08-20T20:25:40.140Z","13.0.0-canary.28d0d75bb.0":"2021-08-20T22:19:26.227Z","13.0.0-canary.21ece5360.0":"2021-08-20T23:43:16.722Z","13.0.0-canary.8de07c02a.0":"2021-08-23T15:25:37.916Z","13.0.0-canary.65aa63b0c.0":"2021-08-24T15:27:22.319Z","13.0.0-canary.15981e9d9.0":"2021-08-24T16:16:05.785Z","13.0.0-canary.fa7520f62.0":"2021-08-24T22:26:56.552Z","13.0.0-canary.ce25bc3ec.0":"2021-08-24T22:47:25.251Z","13.0.0-canary.12f5622e1.0":"2021-08-24T23:17:11.397Z","13.0.0-canary.d97f8f133.0":"2021-08-25T18:32:14.395Z","13.0.0-canary.d86fb6fac.0":"2021-08-25T18:52:52.100Z","13.0.0-canary.e8554dbbf.0":"2021-08-25T21:58:23.661Z","13.0.0-canary.877e3fb0d.0":"2021-08-26T15:37:01.464Z","13.0.0-canary.6236f3576.0":"2021-08-26T16:04:44.982Z","13.0.0-canary.1d19158a1.0":"2021-08-26T17:07:57.267Z","13.0.0-canary.6adc9e83f.0":"2021-08-30T22:43:21.169Z","13.0.0-canary.d082790f0.0":"2021-09-01T21:53:22.166Z","13.0.0-canary.e2c4f0196.0":"2021-09-02T02:10:11.873Z","13.0.0-canary.611db508e.0":"2021-09-02T03:13:53.219Z","13.0.0-canary.d4706933f.0":"2021-09-02T15:36:43.683Z","13.0.0-canary.c16fe03ce.0":"2021-09-02T17:43:48.130Z","13.0.0-canary.9203a958a.0":"2021-09-02T23:45:26.715Z","13.0.0-canary.fddd5ae93.0":"2021-09-03T07:28:55.989Z","13.0.0-canary.117599a8b.0":"2021-09-03T07:30:20.241Z","13.0.0-canary.e4180d07b.0":"2021-09-03T07:30:51.878Z","13.0.0-canary.42d175efc.0":"2021-09-03T15:41:53.950Z","13.0.0-canary.72464476c.0":"2021-09-07T15:33:04.373Z","13.0.0-canary.37d4db866.0":"2021-09-09T14:32:24.162Z","13.0.0-canary.6df682e74.0":"2021-09-09T15:42:10.421Z","13.0.0-canary.b49359c35.0":"2021-09-09T17:34:31.951Z","13.0.0-canary.470bd34e8.0":"2021-09-09T17:59:57.549Z","13.0.0-canary.d48a01771.0":"2021-09-09T18:09:18.110Z","13.0.0-canary.13db34b34.0":"2021-09-09T18:24:16.815Z","13.0.0-canary.864798678.0":"2021-09-09T18:35:45.342Z","13.0.0-canary.d04bda3fb.0":"2021-09-10T15:20:26.529Z","13.0.0-canary.5533f73d3.0":"2021-09-13T23:02:36.260Z","13.0.0-canary.08398f880.0":"2021-09-13T23:33:19.923Z","13.0.0-canary.818f4ee93.0":"2021-09-15T17:49:13.938Z","13.0.0-canary.8355e14dc.0":"2021-09-15T19:11:11.114Z","13.0.0-canary.d4e16a6c4.0":"2021-09-15T21:58:00.535Z","13.0.0-canary.65125b3a6.0":"2021-09-16T21:16:17.426Z","13.0.0-canary.80a583365.0":"2021-09-17T20:34:53.159Z","13.0.0-canary.83900936a.0":"2021-09-17T23:23:26.414Z","13.0.0-canary.860ad06a1.0":"2021-09-17T23:35:05.657Z","13.0.0-canary.3b8d4429e.0":"2021-09-20T17:46:37.150Z","13.0.0-canary.2da3606b9.0":"2021-09-20T19:36:50.055Z","13.0.0-canary.e8c598d1e.0":"2021-09-20T21:10:58.626Z","13.0.0-canary.1340ee9f7.0":"2021-09-22T17:56:59.731Z","13.0.0-canary.65084baff.0":"2021-09-23T21:24:29.122Z","13.0.0-canary.c79aa0cdd.0":"2021-09-24T13:40:42.844Z","13.0.0":"2021-09-24T19:44:57.833Z","14.0.0-canary.198431fcd.0":"2021-09-24T19:45:40.422Z","14.0.0-canary.9a02b6ef8.0":"2021-09-25T13:10:09.870Z","14.0.0-canary.758ce31d9.0":"2021-09-27T17:28:22.669Z","14.0.0-canary.86b50ef74.0":"2021-09-28T17:42:04.306Z","14.0.0-canary.b2fe3528b.0":"2021-09-29T22:55:56.735Z","14.0.0-canary.586e740dd.0":"2021-09-30T16:30:20.662Z","14.0.0-canary.2ac92d766.0":"2021-10-05T19:27:32.206Z","14.0.0-canary.353ca7e9f.0":"2021-10-08T18:46:01.254Z","14.0.0-canary.c78ff0429.0":"2021-10-11T17:21:08.295Z","14.0.0-canary.261f2db59.0":"2021-10-20T16:58:44.609Z","14.0.0-canary.9803d2dc1.0":"2021-10-20T19:20:57.179Z","14.0.0-canary.348665978.0":"2021-10-21T14:49:41.564Z","14.0.0-canary.b2b979a8a.0":"2021-10-28T15:11:15.075Z","14.0.0-canary.1af7c1c4a.0":"2021-10-28T17:51:52.666Z","14.0.0-canary.4afd353cd.0":"2021-10-29T15:00:40.194Z","14.0.0-canary.a986df922.0":"2021-10-29T21:34:10.057Z","14.0.0-canary.c3cdff07b.0":"2021-11-09T19:05:00.772Z","14.0.0-canary.468392606.0":"2021-11-11T19:39:13.641Z","14.0.0-canary.828f9803b.0":"2021-11-11T19:49:58.303Z","14.0.0-canary.8795cba87.0":"2021-11-11T19:55:54.342Z","14.0.0-canary.cd7f8cace.0":"2021-11-11T19:57:31.548Z","14.0.0-canary.207230eb8.0":"2021-11-11T22:23:25.980Z","14.0.0-canary.991fb99f7.0":"2021-11-11T22:35:31.936Z","14.0.0-canary.15db4f164.0":"2021-11-12T17:28:55.754Z","14.0.0-canary.8fcad5a3c.0":"2021-11-12T19:12:56.045Z","14.0.0-canary.f81fb1d23.0":"2021-11-12T22:39:22.149Z","14.0.0-canary.783f6fd5a.0":"2021-11-16T05:48:48.542Z","14.0.0-canary.d57ec74c7.0":"2021-11-16T16:15:10.650Z","14.0.0-canary.554c71829.0":"2021-11-16T16:17:56.340Z","14.0.0-canary.3ef470efe.0":"2021-11-16T16:22:57.372Z","14.0.0-canary.61a28b2b5.0":"2021-11-17T18:58:05.751Z","14.0.0-canary.fae6c652d.0":"2021-11-18T16:23:49.900Z","14.0.0-canary.978a3b5bb.0":"2021-11-19T19:37:50.815Z","14.0.0-canary.e6f43cf44.0":"2021-11-22T17:33:58.738Z","14.0.0-canary.39cf14bc3.0":"2021-11-22T23:03:16.680Z","14.0.0-canary.93134d453.0":"2021-11-23T15:37:31.341Z","14.0.0-canary.bbd11268f.0":"2021-11-23T22:31:02.524Z","14.0.0-canary.3db9c4d3d.0":"2021-11-24T15:36:09.050Z","14.0.0-canary.78305b6d5.0":"2021-11-24T19:49:29.550Z","14.0.0-canary.43d08ba77.0":"2021-11-30T22:54:54.272Z","14.0.0-canary.17a072535.0":"2021-12-02T18:04:04.333Z","14.0.0-canary.5d809696c.0":"2021-12-08T17:43:07.977Z","14.0.0-canary.b6510c8c1.0":"2021-12-08T18:05:07.098Z","14.0.0-canary.f460e23da.0":"2021-12-10T15:24:07.615Z","14.0.0-canary.7d8ea4624.0":"2021-12-10T19:28:02.251Z","14.0.0-canary.8fffcb5dd.0":"2021-12-14T08:53:42.292Z","14.0.0-canary.21e1cb9be.0":"2021-12-14T19:38:39.906Z","14.0.0-canary.ba78e8724.0":"2021-12-15T22:11:42.186Z","14.0.0-canary.e3e073c00.0":"2021-12-20T21:08:34.058Z","14.0.0-canary.3366a71d7.0":"2021-12-22T12:31:08.077Z","14.0.0-canary.c047f7c19.0":"2022-01-05T16:44:31.433Z","14.0.0-canary.05db65ec0.0":"2022-01-06T17:12:58.759Z","14.0.0-canary.6ca8b8f85.0":"2022-01-07T15:59:35.289Z","14.0.0-canary.173ee7a7a.0":"2022-01-10T16:52:56.989Z","14.0.0-canary.b704e4dfc.0":"2022-01-10T18:31:40.638Z","14.0.0-canary.c14e977ee.0":"2022-01-11T15:48:03.040Z","14.0.0-canary.b094eaa4e.0":"2022-01-14T18:41:08.050Z","14.0.0-canary.390220e42.0":"2022-01-17T16:44:45.674Z","14.0.0-canary.4b5391f8b.0":"2022-01-19T23:51:33.834Z","14.0.0-canary.cef6bc623.0":"2022-01-20T00:16:11.027Z","14.0.0-canary.0379179c4.0":"2022-01-20T18:53:11.628Z","14.0.0-canary.e62f3dabf.0":"2022-01-21T23:02:11.049Z","14.0.0-canary.3e20c1de8.0":"2022-01-25T15:30:21.440Z","14.0.0-canary.9f9d928b2.0":"2022-01-27T18:11:56.066Z","14.0.0-canary.a2bcb065c.0":"2022-01-28T19:35:53.189Z","14.0.0-canary.4e66fb2e1.0":"2022-01-28T19:40:09.115Z","14.0.0-canary.9736ddce9.0":"2022-01-29T09:48:42.748Z","14.0.0-canary.cc4ed13cc.0":"2022-02-04T18:21:28.546Z","14.0.0-canary.dcba26fe1.0":"2022-02-04T21:55:54.474Z","14.0.0-canary.ec54d9046.0":"2022-02-07T15:45:09.363Z","14.0.0-canary.ea9b5b463.0":"2022-02-09T17:52:20.033Z","14.0.0-canary.96ea061c1.0":"2022-02-09T18:58:05.468Z","14.0.0-canary.e00181e59.0":"2022-02-10T20:05:24.264Z","14.0.0-canary.037285f9b.0":"2022-02-11T18:28:13.482Z","14.0.0-canary.1aaa68dda.0":"2022-02-16T19:47:45.542Z","14.0.0-canary.ab4aba1af.0":"2022-02-17T18:15:22.297Z","14.0.0-canary.e58552c6e.0":"2022-02-18T18:03:11.916Z","14.0.0-canary.868793776.0":"2022-02-22T19:34:18.507Z","14.0.0-canary.fdc37a445.0":"2022-02-28T18:45:07.636Z","14.0.0-canary.43c7d87dc.0":"2022-03-01T15:32:13.092Z","14.0.0-canary.23043acd0.0":"2022-03-02T20:26:34.089Z","14.0.0-canary.6505e61c5.0":"2022-03-03T19:59:18.560Z","14.0.0-canary.16c166154.0":"2022-03-08T23:21:26.456Z","14.0.0-canary.bdf1d3771.0":"2022-03-14T14:27:28.334Z","14.0.0-canary.cf4292778.0":"2022-03-15T00:28:41.943Z","14.0.0-canary.bbd43e0e0.0":"2022-03-16T20:49:10.986Z","14.0.0-canary.1b6afad86.0":"2022-03-16T21:02:43.169Z","14.0.0-canary.bdf9d4af9.0":"2022-03-16T21:16:58.187Z","14.0.0-canary.32b391398.0":"2022-03-17T17:58:16.250Z","14.0.0-canary.ae8a6a3a3.0":"2022-03-18T16:38:18.224Z","14.0.0-canary.cbd9358a6.0":"2022-03-18T22:51:06.661Z","14.0.0-canary.dcfe49c98.0":"2022-03-21T18:43:10.272Z","14.0.0-canary.f31a833fa.0":"2022-03-23T00:49:45.672Z","14.0.0-canary.4b92e210a.0":"2022-03-24T20:17:39.255Z","14.0.0-canary.a657abb61.0":"2022-03-24T20:39:02.125Z","14.0.0-canary.443f63f50.0":"2022-03-25T23:03:42.142Z","14.0.0-canary.eb382f318.0":"2022-03-29T17:34:02.240Z","14.0.0-canary.344d52823.0":"2022-03-29T18:42:21.183Z","14.0.0-canary.4e372fb49.0":"2022-04-07T20:31:58.286Z","14.0.0-canary.3e30054fb.0":"2022-04-13T22:13:16.543Z","14.0.0-canary.8c4da223a.0":"2022-04-19T15:23:15.766Z","14.0.0-canary.7de8965cc.0":"2022-04-19T20:22:25.754Z","14.0.0-canary.641ed0851.0":"2022-04-20T16:04:39.669Z","14.0.0-canary.e88f83024.0":"2022-04-20T17:46:42.887Z","14.0.0-canary.7321d6254.0":"2022-04-20T20:10:16.386Z","14.0.0-canary.3ab956515.0":"2022-04-25T15:00:53.008Z","14.0.0-canary.53b3cad2f.0":"2022-04-27T12:44:17.581Z","14.0.0":"2022-04-28T16:54:50.409Z","15.0.0-canary.432c815e5.0":"2022-04-28T16:55:57.835Z","15.0.0-canary.a0f01f669.0":"2022-05-06T20:13:41.782Z","15.0.0-canary.276cb39a4.0":"2022-05-06T21:30:32.467Z","15.0.0-canary.4fe98ed70.0":"2022-05-06T21:55:06.432Z","15.0.0-canary.58b130a3d.0":"2022-05-06T21:57:24.865Z","15.0.0-canary.ae278a2fe.0":"2022-05-09T15:23:14.696Z","15.0.0-canary.bebf5bfdf.0":"2022-05-11T02:39:22.239Z","15.0.0-canary.e6072cd6a.0":"2022-05-11T20:17:31.622Z","15.0.0-canary.5b40eb988.0":"2022-05-12T02:43:14.263Z","15.0.0-canary.6a61d62f6.0":"2022-05-12T20:25:44.616Z","15.0.0-canary.05930a453.0":"2022-05-13T18:46:32.173Z","15.0.0-canary.c0a11ef0d.0":"2022-05-18T22:00:07.923Z","15.0.0-canary.2f9b268c0.0":"2022-05-20T19:31:44.273Z","15.0.0-canary.7741345b8.0":"2022-05-20T20:01:50.080Z","15.0.0-canary.f807e793f.0":"2022-05-20T22:20:37.387Z","15.0.0-canary.9f53d4a8a.0":"2022-05-23T14:56:40.088Z","15.0.0-canary.77cf00e37.0":"2022-05-31T17:38:31.979Z","15.0.0-canary.3c7b844c2.0":"2022-06-07T22:19:57.609Z","15.0.0-canary.df47894db.0":"2022-06-13T17:07:34.453Z","15.0.0-canary.b18a873dc.0":"2022-06-14T06:28:54.367Z","15.0.0-canary.ba9c29637.0":"2022-06-14T18:56:34.846Z","15.0.0-canary.9bfd12f01.0":"2022-06-22T19:21:37.198Z","15.0.0-canary.764de225d.0":"2022-06-29T16:26:11.377Z","15.0.0-canary.31e517cea.0":"2022-07-01T18:27:35.391Z","15.0.0-canary.9ea4e8e9c.0":"2022-07-01T22:54:11.549Z","15.0.0-canary.cd5bafabb.0":"2022-07-06T17:53:33.504Z","15.0.0-canary.a02fe49d3.0":"2022-07-06T18:50:14.325Z","15.0.0-canary.826a3d8be.0":"2022-07-06T19:30:13.167Z","15.0.0-canary.ef276aa93.0":"2022-07-07T17:01:47.413Z","15.0.0-canary.59cf61d6b.0":"2022-07-07T17:30:35.163Z","15.0.0-canary.8647092f7.0":"2022-07-07T20:37:50.793Z","15.0.0-canary.02ecd4d85.0":"2022-07-11T16:38:19.850Z","15.0.0-canary.63d3a146e.0":"2022-07-12T11:36:08.558Z","15.0.0-canary.88db01990.0":"2022-07-12T11:39:06.620Z","15.0.0-canary.6432d8fd7.0":"2022-07-14T07:28:02.218Z","15.0.0-canary.085f9b25c.0":"2022-07-14T16:34:08.973Z","15.0.0-canary.39f9424b3.0":"2022-07-14T17:04:24.915Z","15.0.0-canary.ae9fce587.0":"2022-07-14T18:07:21.553Z","15.0.0-canary.1ebddc343.0":"2022-07-15T08:48:32.318Z","15.0.0-canary.c5018840c.0":"2022-07-18T09:42:20.073Z","15.0.0-canary.551b40d18.0":"2022-07-18T09:59:57.595Z","15.0.0-canary.cf9f12371.0":"2022-07-18T10:04:06.277Z","15.0.0-canary.2797ff8b6.0":"2022-07-19T00:23:16.224Z","15.0.0-canary.110fafa17.0":"2022-07-20T07:45:52.984Z","15.0.0-canary.386ef1d2f.0":"2022-07-20T18:18:57.839Z","15.0.0-canary.c3924efef.0":"2022-07-20T18:28:14.625Z","15.0.0-canary.cf5c5907c.0":"2022-07-20T21:21:03.261Z","15.0.0-canary.0617e2319.0":"2022-07-20T21:39:12.200Z","15.0.0-canary.a743b7967.0":"2022-07-20T21:56:13.296Z","15.0.0-canary.69fd619d0.0":"2022-07-20T22:08:10.722Z","15.0.0-canary.2a6ddc1cf.0":"2022-07-29T16:03:43.170Z","15.0.0-canary.86efd56f6.0":"2022-08-02T14:44:41.887Z","15.0.0-canary.ccfc24d19.0":"2022-08-03T18:12:24.279Z","15.0.0-canary.e4570146f.0":"2022-08-03T18:39:49.227Z","15.0.0-canary.6683a36cb.0":"2022-08-03T19:19:40.881Z","15.0.0-canary.10196647d.0":"2022-08-03T21:52:55.654Z","15.0.0-canary.b20d3d73c.0":"2022-08-04T22:41:56.068Z","15.0.0-canary.47c0c6b1e.0":"2022-08-09T15:19:29.104Z","15.0.0-canary.0e3dc8e38.0":"2022-08-11T18:45:02.812Z","15.0.0-canary.d5a11f1c8.0":"2022-08-30T23:00:24.578Z","15.0.0-canary.bac992a95.0":"2022-09-01T07:04:41.204Z","15.0.0-canary.d25f3404c.0":"2022-09-01T09:43:29.434Z","15.0.0-canary.920d8a79e.0":"2022-09-01T20:20:03.751Z","15.0.0-canary.c363f267b.0":"2022-09-01T21:17:26.447Z","15.0.0-canary.a4eb4937a.0":"2022-09-06T18:18:56.498Z","15.0.0-canary.4299717da.0":"2022-09-07T16:14:49.218Z","15.0.0-canary.fa7d8d44b.0":"2022-09-07T19:17:55.202Z","15.0.0-canary.a40e3c768.0":"2022-09-09T20:03:05.001Z","15.0.0-canary.18cdc9a00.0":"2022-09-12T21:01:59.269Z","15.0.0-canary.7ab3cd3c8.0":"2022-09-13T22:38:19.879Z","15.0.0-canary.2860d244d.0":"2022-09-16T22:54:02.589Z","15.0.0-canary.e8726533c.0":"2022-09-20T20:16:47.477Z","15.0.0-canary.00d8de0aa.0":"2022-09-21T15:19:11.811Z","15.0.0-canary.271aedc30.0":"2022-09-21T15:34:59.995Z","15.0.0-canary.9f17ff2cb.0":"2022-09-21T18:07:22.541Z","15.0.0-canary.d3344c16f.0":"2022-09-22T09:23:26.935Z","15.0.0-canary.94f20ccb8.0":"2022-09-22T20:46:49.291Z","15.0.0-canary.81e4cb7b2.0":"2022-09-23T15:07:04.931Z","15.0.0-canary.aa85f9413.0":"2022-09-26T17:55:31.708Z","15.0.0-canary.7134a7752.0":"2022-09-26T21:56:44.528Z","15.0.0-canary.70b8ac16e.0":"2022-09-27T22:43:58.608Z","15.0.0-canary.c20d74405.0":"2022-09-27T23:30:19.417Z","15.0.0-canary.f033fc8d1.0":"2022-09-27T23:56:26.799Z","15.0.0-canary.8d7ae912a.0":"2022-09-28T07:55:11.879Z","15.0.0-canary.db414b864.0":"2022-09-28T14:51:35.193Z","15.0.0-canary.c0462d134.0":"2022-09-28T17:51:07.112Z","15.0.0-canary.28cc6791f.0":"2022-09-28T18:05:48.770Z","15.0.0-canary.a515a2d18.0":"2022-09-28T18:54:44.579Z","15.0.0-canary.ce9523167.0":"2022-09-29T20:30:15.852Z","15.0.0-canary.b2310f7dc.0":"2022-09-30T00:12:55.518Z","15.0.0-canary.a44241e54.0":"2022-09-30T08:20:11.696Z","15.0.0-canary.0ce81e115.0":"2022-09-30T18:17:15.891Z","15.0.0-canary.3cc30f6ad.0":"2022-10-04T17:18:12.118Z","15.0.0-canary.d9cf98e60.0":"2022-10-04T19:02:48.169Z","15.0.0-canary.d71935c8b.0":"2022-10-06T08:13:53.691Z","15.0.0-canary.49c56a25d.0":"2022-10-06T18:49:52.436Z","15.0.0-canary.07acddef3.0":"2022-10-07T21:36:35.555Z","15.0.0-canary.1c74eb2c0.0":"2022-10-07T21:54:02.460Z","15.0.0-canary.dadfb713e.0":"2022-10-08T05:04:56.200Z","15.0.0-canary.395f1ce61.0":"2022-10-08T05:06:56.544Z","15.0.0-canary.e741b5c82.0":"2022-10-10T17:37:06.898Z","15.0.0-canary.582f3cc1c.0":"2022-10-11T04:47:57.179Z","15.0.0-canary.b1a6e3e88.0":"2022-10-12T12:01:23.884Z","15.0.0-canary.c9b1a31e4.0":"2022-10-12T16:57:30.896Z","15.0.0-canary.13e9b0d1f.0":"2022-10-12T19:19:50.537Z","15.0.0-canary.1dc797e7f.0":"2022-10-14T09:40:31.519Z","15.0.0-canary.ed4009397.0":"2022-10-14T16:50:18.333Z","15.0.0-canary.95ef196bc.0":"2022-10-14T23:12:58.991Z","15.0.0-canary.13eea1b2d.0":"2022-10-17T03:50:38.029Z","15.0.0-canary.ef9b2babb.0":"2022-10-17T09:16:50.824Z","15.0.0-canary.cec7fb987.0":"2022-10-17T10:55:15.746Z","15.0.0-canary.4fff58b08.0":"2022-10-17T15:21:24.948Z","15.0.0-canary.587d8f871.0":"2022-10-17T15:56:06.524Z","15.0.0-canary.edf4b98d0.0":"2022-10-17T16:39:29.454Z","15.0.0-canary.024ac5f16.0":"2022-10-17T22:41:20.833Z","15.0.0-canary.c8bdf6144.0":"2022-10-18T18:22:19.422Z","15.0.0-canary.bacda4885.0":"2022-10-18T18:41:37.932Z","15.0.0-canary.92b2556cf.0":"2022-10-19T01:12:26.367Z","15.0.0-canary.cc804509a.0":"2022-10-19T01:16:12.460Z","15.0.0-canary.982bedae9.0":"2022-10-19T01:36:01.238Z","15.0.0-canary.ee40081f4.0":"2022-10-19T20:10:39.326Z","15.0.0-canary.98f1b54e2.0":"2022-10-20T22:55:46.767Z","15.0.0-canary.e74b7ba7e.0":"2022-10-21T17:04:49.480Z","15.0.0-canary.ab55c07d2.0":"2022-10-22T18:18:14.134Z","15.0.0-canary.fc539db34.0":"2022-10-24T18:58:11.078Z","15.0.0-canary.e340b04c5.0":"2022-10-25T23:44:02.387Z","15.0.0-canary.2c1a8f8fd.0":"2022-10-26T17:29:17.315Z","15.0.0-canary.ecfee946f.0":"2022-10-26T20:14:03.672Z","15.0.0-canary.73ca9dbb0.0":"2022-10-31T17:31:23.743Z","15.0.0-canary.357f2e5f1.0":"2022-10-31T18:48:12.210Z","15.0.0-canary.eb103d4b5.0":"2022-10-31T19:55:21.960Z","15.0.0-canary.af5f01223.0":"2022-11-01T18:35:51.845Z","15.0.0-canary.58733ef41.0":"2022-11-02T18:09:41.651Z","15.0.0-canary.909b48215.0":"2022-11-03T04:06:42.986Z","15.0.0-canary.7f17127d5.0":"2022-11-03T18:18:01.771Z","15.0.0-canary.da95e2a05.0":"2022-11-04T16:58:00.826Z","15.0.0-canary.4832e2750.0":"2022-11-04T20:56:01.958Z","15.0.0-canary.215506426.0":"2022-11-05T01:04:59.489Z","15.0.0-canary.4cf917476.0":"2022-11-05T18:03:03.107Z","15.0.0-canary.eef14bd32.0":"2022-11-06T17:23:36.183Z","15.0.0-canary.6faa29fe9.0":"2022-11-07T03:12:26.622Z","15.0.0-canary.9af09b967.0":"2022-11-07T18:26:33.803Z","15.0.0-canary.0f54fbb93.0":"2022-11-08T21:55:37.877Z","15.0.0-canary.a8d47f9fe.0":"2022-11-09T04:16:34.855Z","15.0.0-canary.66a1e75e6.0":"2022-11-09T09:34:32.735Z","15.0.0-canary.5e5c2afc0.0":"2022-11-09T11:52:14.267Z","15.0.0-canary.3e3f43359.0":"2022-11-09T20:01:44.711Z","15.0.0-canary.3f667fac6.0":"2022-11-09T22:04:56.246Z","15.0.0-canary.faa28c1c5.0":"2022-11-11T16:34:34.839Z","15.0.0-canary.a868c7866.0":"2022-11-11T16:35:27.608Z","15.0.0-canary.602fe8efa.0":"2022-11-11T17:10:48.446Z","15.0.0-canary.558c2be62.0":"2022-11-11T22:44:17.805Z","15.0.0-canary.b5c13a7a8.0":"2022-11-14T15:57:24.303Z","15.0.0-canary.a6e1c0702.0":"2022-11-14T17:25:58.539Z","15.0.0-canary.b6f8a06de.0":"2022-11-15T09:27:15.553Z","15.0.0-canary.0163f3ba5.0":"2022-11-15T18:00:53.478Z","15.0.0-canary.66c5cbb94.0":"2022-11-15T19:28:50.709Z","15.0.0-canary.b01136063.0":"2022-11-16T00:14:39.544Z","15.0.0-canary.01da0cabb.0":"2022-11-16T09:12:06.392Z","15.0.0-canary.4ac393164.0":"2022-11-16T16:14:01.128Z","15.0.0-canary.6048fb563.0":"2022-11-16T16:16:23.395Z","15.0.0-canary.3777b03cb.0":"2022-11-16T18:40:05.972Z","15.0.0-canary.f7f56fff7.0":"2022-11-16T19:54:53.486Z","15.0.0-canary.7c73f6134.0":"2022-11-16T19:58:24.126Z","15.0.0-canary.f1e037150.0":"2022-11-16T20:03:48.450Z","15.0.0-canary.40b18d043.0":"2022-11-16T22:57:41.338Z","15.0.0-canary.86bde5c06.0":"2022-11-16T23:07:50.960Z","15.0.0-canary.bb7751002.0":"2022-11-16T23:59:03.066Z","15.0.0-canary.63aca9af6.0":"2022-11-17T19:00:08.243Z","15.0.0-canary.56482dc2e.0":"2022-11-17T21:54:12.396Z","15.0.0-canary.953e689f3.0":"2022-11-17T22:03:37.903Z","15.0.0-canary.b5606a793.0":"2022-11-18T10:19:56.143Z","15.0.0-canary.8c5675942.0":"2022-11-18T15:15:03.688Z","15.0.0-canary.697fbdebd.0":"2022-11-18T16:59:30.479Z","15.0.0-canary.d58410453.0":"2022-11-18T19:23:51.134Z","15.0.0-canary.7971d6ad5.0":"2022-11-19T08:44:14.290Z","15.0.0-canary.a0ae73b0e.0":"2022-11-21T10:52:38.235Z","15.0.0-canary.96f472604.0":"2022-11-21T12:51:37.806Z","15.0.0-canary.18b8f31e1.0":"2022-11-21T16:01:18.379Z","15.0.0-canary.912f33ce4.0":"2022-11-21T17:52:53.584Z","15.0.0-canary.1e1b1c369.0":"2022-11-23T18:59:29.162Z","15.0.0-canary.a2ec49244.0":"2022-11-23T19:29:50.930Z","15.0.0-canary.a7458ba0b.0":"2022-11-23T20:15:24.292Z","15.0.0-canary.7c35e5036.0":"2022-11-24T08:38:15.617Z","15.0.0-canary.4356e05c5.0":"2022-11-24T09:55:40.232Z","15.0.0-canary.cb605f8af.0":"2022-11-24T10:14:15.605Z","15.0.0-canary.05fb07f9f.0":"2022-11-24T17:12:41.413Z","15.0.0-canary.a911b386b.0":"2022-11-28T16:46:18.887Z","15.0.0-canary.2aa8050b4.0":"2022-11-28T19:10:30.319Z","15.0.0-canary.323904a9f.0":"2022-11-29T15:32:46.518Z","15.0.0-canary.168a629a4.0":"2022-11-29T16:47:41.288Z","15.0.0-canary.65c411674.0":"2022-11-29T17:37:10.718Z","15.0.0-canary.a86d36fd2.0":"2022-11-30T02:13:09.223Z","15.0.0-canary.3a1f46c66.0":"2022-11-30T12:05:44.951Z","15.0.0-canary.32d8a9648.0":"2022-12-01T17:27:49.557Z","15.0.0-canary.03618ab70.0":"2022-12-01T20:53:29.699Z","15.0.0-canary.68aaed940.0":"2022-12-01T21:22:56.765Z","15.0.0-canary.f0a0bbc75.0":"2022-12-02T09:00:42.610Z","15.0.0-canary.dd99c8764.0":"2022-12-02T13:59:56.724Z","15.0.0-canary.fabdcca3a.0":"2022-12-02T15:05:40.939Z","15.0.0-canary.2d26722d2.0":"2022-12-02T16:25:26.774Z","15.0.0-canary.eaa0c3a86.0":"2022-12-02T17:41:31.389Z","15.0.0-canary.79a613bbd.0":"2022-12-06T14:24:37.465Z","15.0.0-canary.c871fe61e.0":"2022-12-07T07:50:58.105Z","15.0.0-canary.9eaee7936.0":"2022-12-07T20:01:48.571Z","15.0.0-canary.1d37bf601.0":"2022-12-07T20:40:15.970Z","15.0.0-canary.a5fe069d5.0":"2022-12-09T18:43:07.004Z","15.0.0-canary.ce8b5326f.0":"2022-12-09T23:29:46.977Z","15.0.0-canary.43f5323bc.0":"2022-12-12T16:45:12.502Z","15.0.0-canary.5490e32e7.0":"2022-12-12T17:01:01.541Z","15.0.0-canary.817002c29.0":"2022-12-13T21:52:52.508Z","15.0.0-canary.313a1326a.0":"2022-12-14T10:27:38.294Z","15.0.0-canary.a69c14e10.0":"2022-12-14T11:17:50.356Z","15.0.0-canary.f43e0ceb5.0":"2022-12-14T16:43:45.734Z","15.0.0-canary.34767110.0":"2022-12-14T17:20:07.270Z","15.0.0-canary.1f99f3c50.0":"2022-12-15T14:24:27.418Z","15.0.0-canary.cfd69490f.0":"2022-12-16T20:07:24.802Z","15.0.0-canary.94ad8d986.0":"2022-12-19T19:25:59.237Z","15.0.0-canary.604264203.0":"2022-12-21T21:39:48.353Z","15.0.0-canary.85bcff6af.0":"2022-12-22T10:24:07.174Z","15.0.0-canary.ece3e8d21.0":"2022-12-22T17:11:11.235Z","15.0.0-canary.278ad53d1.0":"2022-12-27T17:03:53.609Z","15.0.0-canary.a7d8389e1.0":"2022-12-27T19:02:37.795Z","15.0.0-canary.8175d5eff.0":"2022-12-28T01:50:31.299Z","15.0.0-canary.16abb41ed.0":"2022-12-28T19:37:25.757Z","15.0.0-canary.e21dcb86d.0":"2022-12-29T14:01:05.708Z","15.0.0-canary.20ab6f5a8.0":"2022-12-29T19:39:54.205Z","15.0.0-canary.b9806f623.0":"2022-12-29T23:04:49.925Z","15.0.0-canary.50c9f550e.0":"2023-01-03T15:46:43.031Z","15.0.0-canary.af490a848.0":"2023-01-03T15:55:52.247Z","15.0.0-canary.7cf487c98.0":"2023-01-03T17:37:32.582Z","15.0.0-canary.a52be2d5e.0":"2023-01-03T19:12:07.842Z","15.0.0-canary.e38ba17c5.0":"2023-01-03T22:31:30.064Z","15.0.0-canary.49041a6c3.0":"2023-01-04T15:16:31.304Z","15.0.0-canary.c492898c2.0":"2023-01-04T17:36:03.117Z","15.0.0-canary.d7a2277de.0":"2023-01-04T21:34:43.404Z","15.0.0-canary.fd95ca7ef.0":"2023-01-05T01:01:51.862Z","15.0.0-canary.1eb44faf9.0":"2023-01-05T09:08:18.218Z","15.0.0-canary.adcdb7db9.0":"2023-01-05T16:20:28.495Z","15.0.0-canary.067af7eff.0":"2023-01-06T23:15:09.731Z","15.0.0-canary.21d1196a7.0":"2023-01-09T10:41:56.569Z","15.0.0-canary.8d2d8d3c4.0":"2023-01-09T22:22:58.862Z","15.0.0-canary.f476fdece.0":"2023-01-10T16:13:28.912Z","15.0.0-canary.fc6ee6c32.0":"2023-01-10T16:26:57.066Z","15.0.0-canary.73537ab0f.0":"2023-01-10T18:10:32.013Z","15.0.0-canary.684e33d25.0":"2023-01-10T19:17:27.764Z","15.0.0-canary.0e89aab6b.0":"2023-01-11T16:16:15.988Z","15.0.0-canary.b0103d10a.0":"2023-01-11T19:11:22.187Z","15.0.0-canary.50e7a5312.0":"2023-01-11T20:53:03.241Z","15.0.0-canary.202823f54.0":"2023-01-11T21:34:41.276Z","15.0.0-canary.199fe2a2a.0":"2023-01-11T21:54:32.214Z","15.0.0-canary.8c0786d6f.0":"2023-01-12T14:35:09.500Z","15.0.0-canary.8a74f7c6d.0":"2023-01-17T19:23:27.813Z","15.0.0-canary.b4687fdc1.0":"2023-01-19T19:48:14.608Z","15.0.0-canary.b836b9892.0":"2023-01-24T22:38:11.537Z","15.0.0-canary.e8912fd37.0":"2023-01-26T18:28:42.267Z","15.0.0-canary.16fbd30ff.0":"2023-01-26T18:33:50.471Z","15.0.0-canary.033ae083a.0":"2023-01-26T19:25:49.430Z","15.0.0-canary.3a705fa1d.0":"2023-01-27T22:42:37.702Z","15.0.0-canary.d6bea2ff2.0":"2023-01-31T15:28:50.608Z","15.0.0-canary.0c94182c8.0":"2023-02-01T17:42:59.749Z","15.0.0-canary.15b221540.0":"2023-02-01T17:51:18.304Z","15.0.0-canary.eeebb8bba.0":"2023-02-01T18:21:07.546Z","15.0.0-canary.6a4b3f834.0":"2023-02-01T18:57:12.798Z","15.0.0-canary.b177b40e2.0":"2023-02-02T03:32:58.679Z","15.0.0-canary.d9f821042.0":"2023-02-02T17:36:26.843Z","15.0.0-canary.47c7deb19.0":"2023-02-03T09:07:53.347Z","15.0.0-canary.a16dbd1a6.0":"2023-02-04T06:13:31.730Z","15.0.0-canary.93416f87a.0":"2023-02-07T13:22:54.561Z","15.0.0-canary.49b8e7442.0":"2023-02-07T23:08:16.100Z","15.0.0-canary.de38de758.0":"2023-02-09T15:41:09.801Z","15.0.0-canary.4d62de70c.0":"2023-02-09T22:01:51.303Z","15.0.0-canary.6fcd8d418.0":"2023-02-13T11:48:47.882Z","15.0.0-canary.066d9439b.0":"2023-02-15T19:56:33.536Z","15.0.0-canary.7ab32468c.0":"2023-02-21T18:32:48.249Z","15.0.0-canary.fa27ba61d.0":"2023-02-27T16:17:53.057Z","15.0.0-canary.311ab4d4a.0":"2023-02-27T16:40:08.631Z","15.0.0-canary.901c83e77.0":"2023-02-27T18:04:53.763Z","15.0.0-canary.5cb8e2174.0":"2023-03-01T16:34:20.454Z","15.0.0-canary.f32339937.0":"2023-03-06T15:14:24.041Z","15.0.0-canary.7644d63d5.0":"2023-03-06T22:26:19.910Z","15.0.0-canary.d96330c08.0":"2023-03-08T11:40:38.985Z","15.0.0-canary.c99cae77c.0":"2023-03-08T23:41:43.318Z","15.0.0-canary.6023b1cd3.0":"2023-03-09T14:25:16.074Z","15.0.0-canary.274610c77.0":"2023-03-09T14:57:24.978Z","15.0.0-canary.a274583b9.0":"2023-03-09T19:51:30.331Z","15.0.0-canary.da22ca960.0":"2023-03-09T20:16:54.532Z","15.0.0-canary.304a94e8b.0":"2023-03-09T20:43:51.112Z","15.0.0-canary.6c265915c.0":"2023-03-09T21:46:10.516Z","15.0.0-canary.de5224633.0":"2023-03-09T23:54:39.822Z","15.0.0-canary.8879557e6.0":"2023-03-10T14:06:44.747Z","15.0.0-canary.23073a303.0":"2023-03-10T14:13:34.993Z","15.0.0-canary.51c7d4014.0":"2023-03-10T16:46:14.462Z","15.0.0-canary.1175a5be0.0":"2023-03-10T20:46:55.043Z","15.0.0-canary.7adf3af80.0":"2023-03-11T01:23:47.562Z","15.0.0-canary.82554d770.0":"2023-03-11T01:36:09.382Z","15.0.0-canary.93fc524b7.0":"2023-03-13T08:37:15.289Z","15.0.0-canary.50be0fbae.0":"2023-03-13T17:43:00.167Z","15.0.0-canary.6b5ffccd9.0":"2023-03-13T17:46:18.906Z","15.0.0-canary.1c8013f4e.0":"2023-03-13T18:00:28.959Z","15.0.0-canary.112715df5.0":"2023-03-13T18:37:58.340Z","15.0.0-canary.d250911f2.0":"2023-03-13T19:30:12.291Z","15.0.0-canary.7cd925c12.0":"2023-03-13T19:37:46.552Z","15.0.0-canary.b2ddacf73.0":"2023-03-13T19:42:08.834Z","15.0.0-canary.989ae2ecc.0":"2023-03-13T19:51:26.637Z","15.0.0-canary.89c66483a.0":"2023-03-13T20:15:12.308Z","15.0.0-canary.6a85742c2.0":"2023-03-14T02:46:14.594Z","15.0.0-canary.bb6cd78d5.0":"2023-03-14T18:15:32.443Z","15.0.0-canary.5f94aa37d.0":"2023-03-14T18:19:00.075Z","15.0.0-canary.906ac2e1b.0":"2023-03-14T18:19:06.546Z","15.0.0-canary.1bd317240.0":"2023-03-14T18:22:46.361Z","15.0.0-canary.d441d2a2a.0":"2023-03-14T18:25:20.609Z","15.0.0-canary.fff4066c6.0":"2023-03-14T18:25:52.683Z","15.0.0-canary.87809c710.0":"2023-03-14T18:42:13.687Z","15.0.0-canary.48d30012d.0":"2023-03-14T18:46:35.989Z","15.0.0-canary.419b23cc6.0":"2023-03-14T18:57:23.223Z","15.0.0-canary.bf86521f4.0":"2023-03-14T23:12:14.483Z","15.0.0-canary.11f3d280e.0":"2023-03-15T00:10:06.102Z","15.0.0-canary.b281a409a.0":"2023-03-21T15:39:38.943Z","15.0.0-canary.39e473690.0":"2023-03-21T17:49:58.907Z","15.0.0-canary.cedffb44c.0":"2023-03-21T17:56:56.135Z","15.0.0-canary.36a4cba99.0":"2023-03-28T17:48:51.058Z","15.0.0-canary.ed7e82ded.0":"2023-03-28T20:33:22.033Z","15.0.0-canary.55093ee1e.0":"2023-03-29T18:44:20.215Z","15.0.0-canary.0c53abc81.0":"2023-04-07T01:40:01.024Z","15.0.0-canary.51311e69e.0":"2023-04-07T18:06:38.860Z","15.0.0-canary.113b1a38e.0":"2023-04-10T21:52:34.702Z","15.0.0-canary.ea2191426.0":"2023-04-11T21:54:28.260Z","15.0.0-canary.5a5c38538.0":"2023-04-11T22:29:11.621Z","15.0.0-canary.e4b5ea7eb.0":"2023-04-11T23:02:52.226Z","15.0.0-canary.a094dd9c1.0":"2023-04-14T22:41:13.942Z","15.0.0-canary.f771b091c.0":"2023-04-17T15:36:43.785Z","15.0.0-canary.79b1b612b.0":"2023-04-19T23:38:47.339Z","15.0.0-canary.6f50071e5.0":"2023-04-20T17:59:40.600Z","15.0.0-canary.ef754381c.0":"2023-04-24T20:49:44.043Z","15.0.0-canary.69ebf61ea.0":"2023-04-27T17:19:52.370Z","15.0.0-canary.b90be86de.0":"2023-04-29T00:20:23.754Z","15.0.0-canary.51f9c0c28.0":"2023-04-29T00:30:09.218Z","15.0.0-canary.4e840d685.0":"2023-05-02T15:32:07.542Z","15.0.0-canary.10b8563e4.0":"2023-05-02T23:40:42.432Z","15.0.0-canary.736b7fda4.0":"2023-05-03T15:08:05.906Z","15.0.0-canary.0e533c5a1.0":"2023-05-05T16:55:00.471Z","15.0.0-canary.5f01c15a2.0":"2023-05-05T17:25:04.967Z","15.0.0-canary.3b5b55e31.0":"2023-05-05T18:37:34.656Z","15.0.0-canary.d0788120f.0":"2023-05-09T08:21:49.825Z","15.0.0-canary.f52358dd0.0":"2023-05-12T14:29:06.794Z","15.0.0-canary.d3c3fbaa3.0":"2023-05-12T17:59:10.427Z","15.0.0-canary.576d3d2c8.0":"2023-05-16T01:58:47.947Z","15.0.0-canary.19bb36a46.0":"2023-05-16T19:52:47.849Z","15.0.0-canary.aa5ac7fe5.0":"2023-05-22T17:24:09.373Z","15.0.0-canary.90291f2e2.0":"2023-05-23T17:41:25.216Z","15.0.0-canary.446734f27.0":"2023-05-30T21:46:53.368Z","15.0.0-canary.19de312d8.0":"2023-06-06T17:16:44.917Z","15.0.0-canary.6081d829b.0":"2023-06-07T01:12:48.250Z","15.0.0-canary.b26c34a68.0":"2023-06-07T20:14:30.759Z","15.0.0-canary.4fe911371.0":"2023-06-07T23:04:33.101Z","15.0.0-canary.a9ff9866f.0":"2023-06-13T11:37:00.657Z","15.0.0-canary.b994146f6.0":"2023-06-14T21:02:15.186Z","15.0.0-canary.1fb4b1a06.0":"2023-06-27T18:55:31.712Z","15.0.0-canary.c64a2776e.0":"2023-06-27T20:15:08.698Z","15.0.0-canary.b05d9eb7c.0":"2023-06-29T16:22:24.581Z","15.0.0-canary.2a9697dc5.0":"2023-06-30T22:12:41.619Z","15.0.0-canary.0c52adeab.0":"2023-07-05T16:24:19.156Z","15.0.0-canary.83355c322.0":"2023-07-10T15:03:43.258Z","15.0.0-canary.bc9ae6c9c.0":"2023-08-03T21:17:12.563Z","15.0.0-canary.3c44cd956.0":"2023-08-07T17:45:44.062Z","15.0.0-canary.02702296e.0":"2023-08-25T12:03:27.938Z","15.0.0-canary.872b65832.0":"2023-08-30T12:11:23.908Z","15.0.0-canary.89b2e4122.0":"2023-08-31T16:05:13.672Z","15.0.0-canary.7a3942e7a.0":"2023-08-31T18:38:01.397Z","15.0.0-canary.54feb3020.0":"2023-09-11T21:03:32.254Z","15.0.0-canary.6cda3ce8d.0":"2023-09-12T01:43:32.854Z","15.0.0-canary.205b20b36.0":"2023-09-13T17:14:42.799Z","15.0.0-canary.22bf82024.0":"2023-09-18T09:10:32.341Z","15.0.0-canary.a246a4439.0":"2023-09-18T17:44:05.063Z","15.0.0-canary.d153db62b.0":"2023-09-19T19:12:38.816Z","15.0.0-canary.2528c1c3b.0":"2023-09-20T18:04:51.959Z","15.0.0-canary.1728a6dcf.0":"2023-09-26T01:21:35.477Z","15.0.0-canary.ebb636f3d.0":"2023-09-29T19:43:07.736Z","15.0.0-canary.c0d21ecc9.0":"2023-10-09T19:35:27.230Z","15.0.0-canary.127a44b28.0":"2023-10-12T19:58:21.412Z","15.0.0-canary.0ad128337.0":"2023-10-19T18:50:16.748Z","15.0.0-canary.9cec94097.0":"2023-10-19T23:08:02.170Z","15.0.0-canary.c51a0bbcc.0":"2023-11-15T20:57:52.068Z","15.0.0-canary.d76666ad4.0":"2023-11-27T22:12:16.958Z","15.0.0-canary.8656bf0e0.0":"2023-12-12T21:17:45.654Z","15.0.0-canary.7f224ddd4.0":"2023-12-28T06:08:15.401Z","15.0.0-canary.a0b8a90c0.0":"2024-02-07T19:18:35.550Z","15.0.0-canary.e50b478eb.0":"2024-02-08T18:07:00.332Z","15.0.0-canary.c43b3438b.0":"2024-02-23T20:16:35.572Z","15.0.0-canary.819498d8c.0":"2024-03-15T15:13:41.987Z","15.0.0-canary.453a6248a.0":"2024-03-25T17:12:37.968Z","15.0.0-canary.68edc03c6.0":"2024-04-08T19:04:34.680Z","15.0.0-canary.5bebc0064.0":"2024-04-11T21:38:44.977Z","15.0.0-canary.311f29a60.0":"2024-04-23T17:58:28.130Z","15.0.0-canary.65c10a622.0":"2024-04-25T18:47:32.335Z","15.0.0-canary.4b35cb7d0.0":"2024-05-02T12:01:34.169Z","15.0.0-canary.f80ac92b0.0":"2024-05-02T12:12:04.016Z","15.0.0-canary.2f5b899bc.0":"2024-05-20T13:53:30.120Z","15.0.0-canary.cfec83c74.0":"2024-05-20T18:55:47.465Z","15.0.0-canary.423edc3dc.0":"2024-06-26T18:11:29.552Z"},"readmeFilename":"","homepage":"https://github.com/material-components/material-components-web#readme"}